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":[10.553958388336673,8.098322707598928],"translate":[-4368.460447717413,-9242.640837120813]},"objects":{"region":{"type":"GeometryCollection","geometries":[{"arcs":[[0]],"type":"Polygon"},{"arcs":[[1]],"type":"Polygon"},{"arcs":[[2]],"type":"Polygon"},{"arcs":[[3]],"type":"Polygon"}]}},"arcs":[[[437,0],[-437,123],[0,22],[9,50],[36,65],[3,38],[-18,153],[51,72],[31,-17],[111,1],[130,32],[163,-1],[78,-73],[-23,-103],[-101,-104],[-62,-164],[29,-94]],[[655,790],[193,-86],[71,-10],[57,-28],[9,-60],[-14,-69],[-38,-45],[-67,-28],[-74,-26],[1,-18],[26,-70],[38,-111],[15,-105],[-14,-51],[-49,-19],[-51,-36],[-46,-21],[-117,21],[-103,76],[-7,70],[63,74],[133,80],[44,81],[-78,61],[-80,103],[-24,64],[44,103],[68,50]],[[313,880],[45,16],[107,-3],[53,-27],[26,-20],[41,-61],[-20,-91],[-46,-80],[-72,-19],[-83,27],[-34,18],[-14,35],[-7,52],[-3,73],[0,39],[-6,30],[-1,5],[14,6]],[[154,777],[19,13],[49,26],[34,7],[27,-22],[8,-61],[0,-84],[-12,-70],[-44,-23],[-71,4],[-64,6],[-19,30],[-1,54],[2,17],[2,24],[4,23],[66,56]]]}';
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.projection(function(x, y) { return [x, y];})
        .precision(0).scale(1).translate([0, 0]);
var path = d3.geo.path().projection(projection);
var topology = JSON.parse( graph );


var featureCollection = topojson.feature(topology, topology.objects.region);
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 =...