JSFiddle - React, Tailwind, and code Playground

by Nikola Mihin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css" rel="stylesheet" />
</head>

<body>
  <div class="outter-wrap">
    <div id="container">
      <div class="button">
        <button id="reset">Reset</button>
      </div>
      <div id="d3Map"></div>
      <div id="mbMap"></div>
    </div>

    <div id="bottom-container">
      <div class="legend-container">
        <div class="legend-bar-color">
          <div class="color color0"></div>&#62;&nbsp;0.9&#37;</div>
        <div class="legend-bar-color">
          <div class="color color1"></div>&#62;&nbsp;2.7&#37;</div>
        <div class="legend-bar-color">
          <div class="color color2"></div>&#62;&nbsp;4.5&#37;</div>
        <div class="legend-bar-color">
          <div class="color color3"> </div>&#62;&nbsp;6.3&#37;</div>
        <div class="legend-bar-color">
          <div class="color color4"></div>&#62;&nbsp;8.1&#37;</div>
      </div>

      <div class="footer-wrap">
        <p>Source: Bureau of Labor Statistics, 2013</p>
      </div>
    </div>
  </div>
</body>

CSS

body, html {
  width: 100%;
  margin: 0; }

.outter-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  padding: 20px;
  box-sizing: border-box; }

#container {
  position: relative;
  width: 100%;
  padding-bottom: 59%; }

#mbMap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 60px;
  left: 0; }

#d3Map {
  position: absolute;
  width: 100%;
  height: 100%;
  /* quantile color scale */ }
  #d3Map .counties {
    fill: #c6c6c6;
    cursor: pointer; }
  #d3Map .q0-5 {
    fill: #dbd9eb; }
  #d3Map .q1-5 {
    fill: #cbc9e2; }
  #d3Map .q2-5 {
    fill: #9e9ac8; }
  #d3Map .q3-5 {
    fill: #756bb1; }
  #d3Map .q4-5 {
    fill: #54278f; }
  #d3Map .state-borders {
    fill: none;
    stroke: #fff;
    stroke-width: 1.5px;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none; }

/* RESET BUTTON */
button {
  padding: 10px 10px 10px 10px;
  background-color: white;
  color: #636363;
  box-shadow: 0 1.5px 0 #e2e2e2;
  border-radius: 3px;
  -moz-border-radius: 3px;
  border: 1.5px solid #c2c2c2;
  font-family: 'Arial';
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  cursor: pointer; }

button:hover {
  background-color: #ededed; }

/* on selection */
button:focus {
  /* remove shadow & blue outline */
  outline: 0;
  background-color: gray;
  color: #fff; }

/* on button press */
button:active {
  box-shadow: none;
  background-color: #ededed;
  color: #636363; }

/* LEGEND STYLES */
#bottom-container {
  position: relative; }

.legend-container {
  position: relative;
  width: 100%;
  text-align: center; }
  .legend-container .legend-bar-color {
    display: inline-block;
    position: relative;
    width: 14.5%;
    text-align: center;
    font: 13px 'Helvetica Neue', Helvetica, arial, sans-serif;
    color: #5a5a5a; }
  .legend-container .color {
    width: 95%;
    height: 18px; }
  .legend-container .color0 {
    background-color: #dbd9eb; }
  .legend-container...

JavaScript

'use strict';

//jquery global variables
var $mbMap = $('#mbMap').attr('style', 'visibility: hidden;');
var $reset = $('button[id=reset]').hide();
var $d3Map = $('#d3Map');
var $bottom = $('#bottom-container');

// initialize mapbox map (outside logic to avoid duplicate initializations).
L.mapbox.accessToken = 'pk.eyJ1Ijoic3ByaW5nZmllbGQiLCJhIjoiMmZkYmQ2MDIwMzc0NzU2NGJlNjY3YWFhZTdkOTIzNDMifQ.p8t3Dhdb5i6yAef33jU3LQ';
var mbMap = L.mapbox.map('mbMap', 'mapbox.streets', {
  minZoom: 9,
  maxZoom: 10
});

// array for our state geojson featureLayer
var overlayLayers = [];

// d3 map parameters
var width = $d3Map.width();
var height = $d3Map.height();

var quantize = d3.scale.quantize()
    .domain([0.9, 9.9])
    .range(d3.range(5).map(function(i) { return 'q' + i + '-5'; }));

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

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

var svg = d3.select('#d3Map').append('svg')
    .attr('width', width)
    .attr('height', height);

var g = svg.append('g')
    .attr('class', 'county-container');

// render maps
var countyBounds = [];

d3.json ('https://raw.githubusercontent.com/sfrostenson/d3-mapbox-template/master/bin/counties.json', function (error, us) {
  if (error) { return console.error(error); }

  countyBounds = topojson.feature(us, us.objects.counties).features;

  var counties = g.append('g')
        .attr('class', 'counties')
      .selectAll('path')
        .data(countyBounds)
      .enter().append('path')
        .attr('class', function (d) { return quantize(d.properties.r); })
        .attr('d', path)
        .on('mouseover', function (d) {
          d3.select(this)
          .style('stroke', '#fff')
          .style('stroke-width', '2.5px');
        })
        .on('mouseout', function (d) {
          d3.select(this)
          .style('stroke', 'none');
        })
        .on('click', clicked);

  var borders = g.append('path')
     ...