JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.js"></script>
<script src="https://gist.githubusercontent.com/mbostock/3074470/raw/c028fa03cde541bbd7fdcaa27e61f6332af3b556/heatmap.json"></script>

CSS

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis path {
  display: none;
}
.axis .tick:first-child {
  display: none;
}

.d3-tip {
    line-height: 0;
    color: black;
}

  .zoomOut {
      fill: #66a;
      cursor: pointer;
  }
  .zoomOutText {
      pointer-events: none;
      fill : #ccc;
  }
  .zoomOverlay {
      pointer-events: all;
      fill:none;
  }
  .band {
      fill : none;
      stroke-width: 1px;
      stroke: red;
  }

JavaScript

d3.json("https://gist.githubusercontent.com/mbostock/3074470/raw/c028fa03cde541bbd7fdcaa27e61f6332af3b556/heatmap.json", function(error, heatmap) {
    
  if (error) {
    alert("Unable to load heatmap.json: " + error);
    return;
  }
  var X = 0, Y = 1;
  var canvasDim = [800, 500];
     var bandPos = [-1, -1];
    var xdomain = 500;
    var ydomain = 50;
  var canvasAspect = canvasDim[Y] / canvasDim[X];
  var heatmapDim = [heatmap[X].length, heatmap.length];
  var heatmapAspect = heatmapDim[Y] / heatmapDim[X];
    
  if (heatmapAspect < canvasAspect)
    canvasDim[Y] = canvasDim[X] * heatmapAspect;
  else
    canvasDim[X] = canvasDim[Y] / heatmapAspect;

  var color = d3.scale.linear()
    .domain([95, 115, 135, 155, 175, 195])
    .range(["#0a0", "#6c0", "#ee0", "#000000", "#eb9", "#fff"]);

  var scale = [
    d3.scale.linear()
      .domain([0, heatmapDim[X]])
      .range([0, canvasDim[X]]),
    d3.scale.linear()
      .domain([0, heatmapDim[Y]])
      .range([canvasDim[Y], 0])
  ];
 
    var margin = {
        top: 40,
        right: 40,
        bottom: 50,
        left: 60
    }
    var width = canvasDim[X] - margin.left - margin.right;
    var height = canvasDim[Y] - margin.top - margin.bottom;
    var zoomArea = {
        x1: 0,
        y1: 0,
        x2: xdomain,
        y2: ydomain
    };
    
    var x = d3.scale.linear()
        .range([0, width]).domain([0, xdomain]);
    
    var y = d3.scale.linear()
        .range([height, 0]).domain([0, ydomain]);
    
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");
    
    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");
    
  var body = d3.select("body");

  var canvas = body.append("canvas")
    .attr("width", heatmapDim[X])
    .attr("height", heatmapDim[Y])
    .style("width", canvasDim[X] + "px")
    .style("height", canvasDim[Y] + "px")
    .style("position", "absolute");
      
  var svg = body.append("svg")
    .attr("width", canvasDim[X])
   ...