JSFiddle - React, Tailwind, and code Playground

by kwoxer

HTML

<script src="http://d3js.org/topojson.v1.min.js"></script>

CSS

body {
  background: #bbb !important;
}


#arda-map {
  width: 800px;
  heigth: 700px;
}
#states path:hover {
  fill: red;
}

#lines path{
  fill: #bbb;
  stroke: #666;
}

#states path {
  fill: #fff;
  stroke: #999;
}
.state-active {
  fill: #000 !important;
}

JavaScript

var width = 800, height = 800, active = d3.select(null);

var graph = '{"type":"Topology","transform":{"scale":[0.06690766172651032,0.060532461291637356],"translate":[-7.240804475075604,51.182450466981884]},"objects":{"outerLine":{"type":"GeometryCollection","geometries":[{"type":"LineString","arcs":[0,1]},{"type":"LineString","arcs":[2,1]}]}},"arcs":[[[0,269],[41,82]],[[41,351],[115,70],[68,10],[35,3],[26,1],[11,-4]],[[295,429],[99,-39],[59,-48],[8,-82],[-34,-91],[-39,-84],[-63,-74],[-54,-11],[-54,12],[-41,8],[-103,82],[-56,66],[-10,114],[34,69]]]}';
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

var zoom = d3.behavior.zoom()
    .translate([0, 0])
    .scale(1)
    .scaleExtent([1, 8])
    .on("zoom", zoomed);
svg.call(zoom);
var lines = svg.append("g"),
    region = svg.append("g");
var featureCollection;
var projection = d3.geo.equirectangular();
var path = d3.geo.path().projection(projection);
var topology = JSON.parse( graph );


var featureCollection = topojson.feature(topology, topology.objects.outerLine);
lines.append("g")
.attr("id", "lines")
.selectAll("path")
.data(featureCollection.features)
.enter().append("path")
.attr("d", path)
.on("click", clicked);

function clicked(d) {
  if (active.node() === this) return reset();
  active.classed("state-active", false);
  active = d3.select(this).classed("state-active", true);
  zoomIntoArea(d);
}
function reset() {
  active.classed("state-active", false);
  active = d3.select(null);
  svg.transition()
     .duration(750)
     .style("stroke-width", "1.5px")
      .call(zoom.translate([0, 0]).scale(1).event);
} 
function zoomed() {
  svg.style("stroke-width", 1.5 / d3.event.scale + "px");
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
function zoomIntoArea(d){
  var bounds = path.bounds(d),
  dx = bounds[1][0] - bounds[0][0],
  dy = bounds[1][1] - bounds[0][1],
  x = (bounds[0][0] + bounds[1][0]) / 2,
  y =...