JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://dl.dropboxusercontent.com/u/483650/d3.v3.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/483650/topojson.v1.min.js"></script>

CSS

#buttons {
  width: 100px;
  max-width: 100px;


}

.button {
  min-width: 40px;
  cursor: pointer;
  background-color: #aaa;
  margin: 2px;
  padding: 5px;
}

JavaScript

var width = 960,
    height = 500;

var sf = [-102.417, 37.775],
    ny = [-74.0064, 40.7142];

var scale,
    translate,
    visibleArea, // minimum area threshold for points inside viewport
    invisibleArea; // minimum area threshold for points outside viewport

var simplify = d3.geo.transform({
  point: function(x, y, z) {
    if (z < visibleArea) return;
    x = x * scale + translate[0];
    y = y * scale + translate[1];
    if (x >= -10 && x <= width + 10 && y >= -10 && y <= height + 10 || z >= invisibleArea) this.stream.point(x, y);
  }
});

var zoom = d3.behavior.zoom()
    .size([width, height])
    .on("zoom", zoomed);

// This projection is baked into the TopoJSON file,
// but is used here to compute the desired zoom translate.
var projection = d3.geo.mercator()
    .translate([0, 0])
    .scale(4000);

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

var context = canvas.node().getContext("2d");

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

function onClick(state) {
  console.log('zoom transition to state: ', state);

  var bounds = path.bounds(state),
      dx = bounds[1][0] - bounds[0][0],
      dy = bounds[1][1] - bounds[0][1],
      x = (bounds[0][0] + bounds[1][0]) / 2,
      y = (bounds[0][1] + bounds[1][1]) / 2,
      scale = .9 / Math.max(dx / width, dy / height),
      translate = [width / 2 - scale * x, height / 2 - scale * y];

  console.log('bounds', bounds);
  console.log('scale', scale);
  console.log('translate', translate);

  // var locaction = getLocation(state);
  // var scale = getScale(state);

  // transition and zoom to state.
  // zoomTo(location, scale);
}

d3.json("https://dl.dropboxusercontent.com/u/483650/us-states2.json", function(error, json) {
  states = topojson.feature(json, json.objects.states);

  d3.select('body')
    .append('div')
    .selectAll('.button')
    .data(states.features) // only a handful of features.
      .enter()
  ...