d3 calendar heatmap example

original by bostock, with modifications by me.

CSS

body {
  font: 10px sans-serif;
  shape-rendering: crispEdges;
}

.day {
  fill: #fff;
  stroke: #ccc;
}

.month {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}

text.mono {
        font-size: 9pt;
        font-family: Consolas, courier;
        fill: #6b6b6b;
      }

g.legend > rect {
      	stroke-width:1;
      	stroke:gray;
      }

/*
.RdYlGn .q0-11{fill:rgb(165,0,38)}
.RdYlGn .q1-11{fill:rgb(215,48,39)}
.RdYlGn .q2-11{fill:rgb(244,109,67)}
.RdYlGn .q3-11{fill:rgb(253,174,97)}
.RdYlGn .q4-11{fill:rgb(254,224,139)}
.RdYlGn .q5-11{fill:rgb(255,255,191)}
.RdYlGn .q6-11{fill:rgb(217,239,139)}
.RdYlGn .q7-11{fill:rgb(166,217,106)}
.RdYlGn .q8-11{fill:rgb(102,189,99)}
.RdYlGn .q9-11{fill:rgb(26,152,80)}
.RdYlGn .q10-11{fill:rgb(0,104,55)}
*/

JavaScript

var width = 960,
    height = 136;
var cellSize = 17; // cell size
//var cellSize = Math.floor((width - 50) / 52);
//console.log("cellSize=", cellSize);
var legendElementWidth = Math.round(cellSize*4);
var legendSvgHeight = 43;

//var colors =  ['rgb(255,255,217)','rgb(140,150,198)','rgb(73,0,106)'];
//var colors =  ['rgb(255,255,217)','rgb(253,224,221)','rgb(252,197,192)','rgb(250,159,181)','rgb(247,104,161)','rgb(221,52,151)','rgb(174,1,126)','rgb(122,1,119)','rgb(73,0,106)'];
var colors = ["#ffffd9", "#cff9bd", "#a7eec4", "#97d4dd", "#8c96c6", "#4a34c7", "#4b25b9", "#5b056d", "#4d004b"];

var day = d3.time.format("%w"),
    week = d3.time.format("%U"),
    year = d3.time.format("%Y"),
    valueFormat = d3.format("0.1f"),
    format = d3.time.format("%Y-%m-%d");

// unusually, theData is an object, not an array.
// object indexes are dates in form "2014-02-01".
// object values are the data values, as numbers.
var theData = {"2014-02-01": 551.2, "2014-02-02": 225.8, "2014-02-03": 8.4,
            "2014-03-01": 133.8};

// interestingly, the only place theData is used is 
// to create the scale
console.log("min=", d3.min(d3.values(theData)));
var colorScale = d3.scale.quantize()
    //.domain([-.05, .05])
    .domain([d3.min(d3.values(theData)), d3.max(d3.values(theData))])
    //.range(d3.range(11).map(function(d) { return "q" + d + "-11"; }));
    .range(colors);

// a *separate* svg for each year.
// note: data is simply an array of years, going 1 past the max desired year
var svg = d3.select("body").selectAll("svg")
     //.data(d3.range(1990, 2011))
    .data(d3.range(2013, 2015))
  .enter().append("svg")
    .attr("width", width)
    .attr("height", height)
    //.attr("class", "RdYlGn")
  .append("g")
    .attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");

svg.append("text")
    .attr("transform", "translate(-6," + cellSize * 3.5 + ")rotate(-90)")
    .style("text-anchor", "middle")
   ...