JSFiddle - React, Tailwind, and code Playground

by Luiza CICONE

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<svg></svg>

JavaScript

var width = 960,
  height = 500,
  centered;

var test = [{
  "long": -122,
  "lat": 37
}, {
  "long": -100,
  "lat": 37
}];

var plotMap = function(data) {

  var projection = d3.geo.albersUsa()
    .scale(1070)
    .translate([width / 2, height / 2]);

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

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

  svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", clicked);

  var g = svg.append("g");

  d3.json("us.json", function(us) {

    g.append("g")
      .attr("id", "states")
      .selectAll("path")
      .data(topojson.feature(us, us.objects.states).features)
      .enter().append("path")
      .attr("d", path)
      .on("click", clicked);

    points = data;
    test = [{
      "long": -122,
      "lat": 37
    }, {
      "long": -100,
      "lat": 37
    }];

    g.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) {
        return a !== b;
      }))
      .attr("id", "state-borders")
      .attr("d", path);

    g.selectAll("circle")
      .data(test)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
        return projection([d.long, d.lat])[0];
      })
      .attr("cy", function(d) {
        return projection([d.long, d.lat])[1];
      })
      .attr("r", "8px")
      .attr("fill", "red")

  });

  function clicked(d) {
    var x, y, k;

    if (d && centered !== d) {
      var centroid = path.centroid(d);
      x = centroid[0];
      y = centroid[1];
      k = 4;
      centered = d;
    } else {
      x = width / 2;
      y = height / 2;
      k = 1;
      centered = null;
    }

    g.selectAll("path")
      .classed("active", centered && function(d) {
        return d === centered;
      });

    g.transition()
      .duration(750)
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k +...