JSFiddle - React, Tailwind, and code Playground

by Nayana Das

HTML

<script src="https://d3js.org/d3.v3.min.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;
}

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 = [600, 300];
  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", "#eb4", "#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 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])
    .attr("height", canvasDim[Y])
    .style("position", "relative");
    
var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function (d) {
        return "tooltip";
    })
svg.call(tip);

  var zoom = d3.behavior.zoom()
    .center(canvasDim.map(
      function(v) {return v / 2}))
    .scaleExtent([1, 10])
    .x(scale[X])
    .y(scale[Y])
    .on("zoom", zoomEvent);

  svg.append("rect")
    .style("pointer-events", "all")
    .attr("width", canvasDim[X])
    .attr("height", canvasDim[Y])
    .attr("id", "mycanvas")
    .style("fill", "none")
    .call(zoom);
  
  var axis = [
    d3.svg.axis()
      .scale(scale[X])
      .orient("top")
      .ticks(20),
    d3.svg.axis()
      .scale(scale[Y])
 ...