JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<div id='heatmap'></div>

CSS

body {
  font: 14px sans-serif;
}
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

JavaScript

var data = [[1,1,"blue"],[1,2,"#7BEA7B"],[1,3,"#7BEA7B"],[1,4,"#7BEA7B"],[1,5,"#7BEA7B"],[2,1,"#7BEA7B"],[2,2,"#7BEA7B"],[2,3,"#7BEA7B"],[2,4,"#7BEA7B"],[2,5,"#7BEA7B"],[3,1,"#7BEA7B"],[3,2,"#7BEA7B"],[3,3,"#7BEA7B"],[3,4,"#7BEA7B"],[3,5,"#7BEA7B"],[4,1,"#7BEA7B"],[4,2,"#7BEA7B"],[4,3,"#7BEA7B"],[4,4,"#7BEA7B"],[4,5,"#7BEA7B"],[5,1,"#7BEA7B"],[5,2,"#7BEA7B"],[5,3,"#7BEA7B"],[5,4,"#7BEA7B"],[5,5,"#7BEA7B"]]

alpha = 1.2



var colorLow = 'green', colorMed = 'yellow', colorHigh = 'red';


var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 640 - margin.left - margin.right,
    height = 380 - margin.top - margin.bottom;

//height of each row in the heatmap
//width of each column in the heatmap
var gridSize = width/10,
    h = gridSize,
    w = gridSize,
    rectPadding = 60;

var colorScale = d3.scale.linear()
   .domain([-1, 0, 1])
   .range([colorLow, colorMed, colorHigh]);

var svg = d3.select("#heatmap").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([10, 0])
  .html(function(d) {
    return "<strong>(" + d[0] + " , " + d[1] +  ")</span>";
  })

svg.call(tip)

var heatMap = svg.selectAll(".heatmap")
    .data(data)
  .enter().append("svg:rect")
    .attr("x", function(d) { return alpha*d[0] * w; })
    .attr("y", function(d) { return d[1] * h; })
    .attr("width", function(d) { return w; })
    .attr("height", function(d) { return h; })
    .style("stroke", "white")
    .style("fill", function(d) { return d[2] })
    .style("padding-right", "5px")
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide)