JSFiddle - React, Tailwind, and code Playground

by parksd

HTML

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.9/d3.geo.projection.min.js"></script>

JavaScript

/**
* Created with Wikiatlas.
* User: hugolpz
* version: 2015.01.21 */
	
/* ****************************************************** */
/* MATH TOOLKIT ***************************************** */
function parallel(φ, λ0, λ1) {
  if (λ0 > λ1) λ1 += 360;
  var dλ = λ1 - λ0,
      step = dλ / Math.ceil(dλ);
  return d3.range(λ0, λ1 + 0.5 * step, step).map(function(λ) { return [normalise(λ), φ]; });
}
function normalise(x) {
  return (x + 180) % 360 - 180;
}
/* ****************************************************** */
/* LOCALISATOR FN *************************************** */
var localisator = function (hookId,localisator_width, title, WNES0, WNES1, WNES2, WNES3) {
/* Init ************************************************* */
localisator_width = document.body.clientHeight;
	var width  = 1*localisator_width,
    	height = 1*localisator_width;
	var lon_central = function(){ 
		var num;
		if(WNES2<WNES0){ num= -(WNES0+WNES2)/2+180; }
		else{ num= -(WNES0+WNES2)/2; }
		return num;
	};

	var proj = d3.geo.orthographic()
    	.scale(1/2*localisator_width)
    	.rotate([ lon_central(), -(WNES1+WNES3)/2 +10 ]); // orthographic + 10⁰ to simulate real life globe watching.

	var projection2 = proj
		.translate([width / 2 , height / 2 ])
		.clipAngle(90);

	var path = d3.geo.path()
		.projection(projection2);

/* SVG container **************************************** */
	var svg = d3.select(hookId).append("svg")
		.attr("id", title+"-orthographic_globe_locator_(wikiatlas_2014)")
		.attr("width", width)
		.attr("height", height)
		.call(d3.behavior.drag()
		  .origin(function() { 
			var rotate = projection2.rotate(); 
			return {x: 2 * rotate[0], y: -2 * rotate[1]}; 
		})
		  .on("drag", function() {
			projection2.rotate([d3.event.x / 2, -d3.event.y / 2, projection2.rotate()[2]]);
			svg.selectAll("path").attr("d", path);
		  }))
		.on("dblclick", function() {
			projection2.rotate([ lon_central(), -(WNES1+WNES3)/2 +10 ]);
			svg.selectAll("path").attr("d", path);
		});

/* SVG...