JSFiddle - React, Tailwind, and code Playground

by Joe Saad

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<div id='map'></div>

CSS

body {

	
}
svg {
  border: 1px solid #ccc;
  fill: #fff;
}

path {
  fill: #ccc;
  transition: 0.2s all ease-in;
  stroke: #fff;
  cursor:pointer;
  stroke-width: .5px;
}

path:hover {
 fill: #686868;
}

.pin {

}

circle {
	fill: rgba(245, 15, 15, 0.42);
}

circle:hover {
  fill: #ff0000;
}

JavaScript

var m_width = document.getElementById("map").offsetWidth,
    width = 938,
    height = 500;

var projection = d3.geo.mercator()
    .scale(150)
    .translate([width / 2, height / 1.5]);

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



var svg = d3.select("#map").append("svg")
    .attr("preserveAspectRatio", "xMidYMid")
    .attr("viewBox", "0 0 " + width + " " + height)
    .attr("width", m_width)
    .attr("height", m_width * height / width);


svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
  

var g = svg.append("g");
var gPins = svg.append("g"); //new g element

d3.json("https://gist.githubusercontent.com/d3noob/5189284/raw/598d1ebe0c251cd506c8395c60ab1d08520922a7/world-110m2.json", function(error, us) {
  g.append("g")
    .attr("id", "countries")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.countries).features)
    .enter()
    .append("path")
    .attr("id", function(d) { return d.id; })
    .attr("d", path)
    .on("click", (d)=>{alert(d.id)})

});

//use as function so we can refresh points on command
function plotPoints(data){
  svg.selectAll("circle")
  .transition()
   .delay(function(d, i) { return i * 2; })
  .attr("r", 0 )
   .remove()

// svg.selectAll(".pin")
  gPins.selectAll(".pin") // add circles to new g element
  .data(data.earthquakes)
  .enter().append("circle", ".pin")
  .attr("transform", function(d) {
    return "translate(" + projection([
      d.lon,
      d.lat
    ]) + ")"

  })
  .attr("r", 0 )
   .transition()
   .duration(500)
  .delay(function(d, i) { return i * 5; })
  .attr("r",function(d){
      return d.magnitude/2;
  })
 
  
}

window.addEventListener('resize', function(event){
  var w = document.getElementById("map").offsetWidth;
  svg.attr("width", w);
  svg.attr("height", w * height / width);
});

var zoom = d3.behavior.zoom()
    .on("zoom",function() {
        g.attr("transform","translate("+ 
           ...