JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div id="container" class="svg-container"></div>
    <svg width="960" height="600" fill="none" stroke-linejoin="round" stroke-linecap="round"></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/topojson.v2.min.js"></script>

CSS

.tweets {
    fill: red;
    opacity: 0.7;
  }

JavaScript

var svg = d3.select("svg");

 var path = d3.geoPath();

 var data = {
   "type": "FeatureCollection",
   "features": [{
       "type": "Feature",
       "geometry": {
         "type": "Point",
         "coordinates": [-111.6782379150, 39.32373809814]
       }
     },
     {
       "type": "Feature",
       "geometry": {
         "type": "Point",
         "coordinates": [-74.00714111328, 40.71455001831]
       }
     }
   ]
 };

 d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
   if (error) throw error;

   console.log(us)

   svg
     .append("g")
     .attr("fill", "#bebebe")
     .selectAll("path")
     .data(topojson.feature(us, us.objects.states).features)
     .enter()
     .append("path")
     .attr("d", path)
     .append("title")
     .text(function(d) {
       return d.id;
     });

   svg
     .append("path")
     .attr("stroke", "#fff")
     .attr("stroke-width", 0.5)
     .attr(
       "d",
       path(
         topojson.mesh(us, us.objects.states, function(a, b) {
           return a !== b;
         })
       )
     );

   svg.selectAll('.tweets')
     .data(data.features)
     .enter()
     .append('path')
     .attr('d', path)
     .attr('class', 'tweets');

 });

 /*
  function border(id0, id1) {
    return function(a, b) {
      return (
        (a.id === id0 && b.id === id1) || (a.id === id1 && b.id === id0)
      );
    };
  }
 */