HeatMap

This is a heatmap I am trying to create from scratch to practice my newly acquired d3js skills

by ramnathv

HTML

<script src="https://rawgithub.com/jstat/jstat-ui/master/lib/js/jstat.min.js"></script>
<div id="vis"></div>

JavaScript

var dataset = [
  [0, 0],
  [0, 1],
  [1, 0],
  [1, 1]
];

var dataset = [],
    n = 10
for (var i = 0; i < n; i++){
    for (var j = 0; j < n; j++){
      dataset.push([i, j])
    }
}

var size = n + 1

var w = 300,
    h = 300,
    padding = 0;


var margin = {top: 20, right: 10, left: 20, bottom: 20},
  width = w - margin.left - margin.right,
  height = h - margin.top - margin.bottom;

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

var square = svg.selectAll("rect")
  .data(dataset)
  .enter()
    .append("rect")

square
  .attr("x", function(d, i){
    return d[0]*width/size
   })
  .attr("y", function(d, i){ 
     return d[1]*height/size
   })
  .attr("width", width/size - padding)
  .attr("height", height/size - padding)
  .attr("fill", "lightgreen")
  .attr("stroke", "gray")