JSFiddle - React, Tailwind, and code Playground

by Nick

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

<body>

</body>

SCSS

* {
  font-family: "Lato", Helvetica, Arial, sans-serif;
}

svg {
  path {
    //fill: #ebebeb;
    stroke: #bbbbbb;
    stroke-width: 1;
  }
  
  .axis {
    path, line {
      fill: none;
      shape-rendering: crispEdges;
      stroke: olive;
    }
    text {
      font-size: 10px;
      fill: olive;
    }
  }
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  flex-flow: column nowrap;
  
  h2 {
    font-size: 0.85rem;
    text-align: center;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: .1rem;
  }
}

JavaScript

var width = 1200, height = 800;

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

var urlWorldMap = 'https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/us-states.json';

var urlCitiesData = 'https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/us-cities.csv';


queue()
        .defer(d3.json, urlWorldMap)
        .defer(d3.csv, urlCitiesData)
        .await(function (error, states, cities) {
  
         var projection = d3.geoAlbersUsa()
                   //This centers the map.
                   .translate([width / 2, height / 2])
                   .scale([width]);
  
        var path = d3.geoPath()
            .projection(projection);
  
        svg.selectAll('path')
           .data(states.features)
           .enter()
           .append('path')
           .attr('d', path)

           .attr('fill', function(d, i) {
              return 'hsl(186,' + (50 + i * 1.2) + '%,' + (25 + i * 1.2) + '%)';
            });


        svg.selectAll('rect')
           .data(states.features)
           .enter()
           .append('rect')
              .attrs({
                y: function(d) { return path.centroid(d)[1] - 13; },
                'text-anchor': 'middle',
                'width': 100,
                'height': 18,
                'fill': 'rgba(232, 232, 232, 0.8)',
                'opacity': 1,
                'rx': 7,
                'ry': 7,
                id: function(d) { return d.id }
             }); 
  
        svg.selectAll('text')
           .data(states.features)
           .enter()
           .append('text')
              .text(function(d) { return d.properties.name; })
              .attrs({
                x: function(d) { return path.centroid(d)[0]; },
                y: function(d) { return path.centroid(d)[1]; },
                'text-anchor': 'middle',
     ...