JSFiddle - React, Tailwind, and code Playground

by jean-philippe janecek

HTML

<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://mapstarter.com/samples/countries.json"></script>
<!--script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script-->

CSS

body {
  font: 12px sans-serif;
}

path {
  stroke-width: 1px;
  stroke: white;
  fill: steelblue;
  cursor: pointer;
}

path:hover, path.highlighted {
  fill: tomato;
}

JavaScript

//Map dimensions (in pixels)
var width = 600,
    height = 255;

//Map projection
var projection = d3.geo.mercator()
    .scale(59.54053439188244)
    .center([0,43.790094023341545]) //projection center
    .translate([width/2,height/2]) //translate to center the map in view

//Generate paths based on projection
var path = d3.geo.path()
    .projection(projection);

//Create an SVG
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

//Group for the map features
var features = svg.append("g")
    .attr("class","features");

//Create zoom/pan listener
//Change [1,Infinity] to adjust the min/max zoom scale
var zoom = d3.behavior.zoom()
    .scaleExtent([1, Infinity])
    .on("zoom",zoomed);

svg.call(zoom);

d3.json("countries.topojson",function(error,geodata) {
  if (error) return console.log(error); //unknown error, check the console

  //Create a path for each map feature in the data
  features.selectAll("path")
    .data(topojson.feature(geodata,geodata.objects.subunits).features) //generate features from TopoJSON
    .enter()
    .append("path")
    .attr("d",path)
    .on("click",clicked);

});

// Add optional onClick events for features here
// d.properties contains the attributes (e.g. d.properties.name, d.properties.population)
function clicked(d,i) {

}


//Update map on zoom/pan
function zoomed() {
  features.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")")
      .selectAll("path").style("stroke-width", 1 / zoom.scale() + "px" );
}