1 var w = 960,
 2     pw = 14,
 3     z = ~~((w - pw * 2) / 53),
 4     ph = z >> 1,
 5     h = z * 7;
 6 
 7 var vis = d3.select("#chart")
 8   .selectAll("svg")
 9     .data(d3.range(1990, 2011))
10   .enter().append("svg:svg")
11     .attr("width", w)
12     .attr("height", h + ph * 2)
13     .attr("class", "RdYlGn")
14   .append("svg:g")
15     .attr("transform", "translate(" + pw + "," + ph + ")");
16 
17 vis.append("svg:text")
18     .attr("transform", "translate(-6," + h / 2 + ")rotate(-90)")
19     .attr("text-anchor", "middle")
20     .text(function(d) { return d; });
21 
22 vis.selectAll("rect.day")
23     .data(calendar.dates)
24   .enter().append("svg:rect")
25     .attr("x", function(d) { return d.week * z; })
26     .attr("y", function(d) { return d.day * z; })
27     .attr("class", "day")
28     .attr("width", z)
29     .attr("height", z);
30 
31 vis.selectAll("path.month")
32     .data(calendar.months)
33   .enter().append("svg:path")
34     .attr("class", "month")
35     .attr("d", function(d) {
36       return "M" + (d.firstWeek + 1) * z + "," + d.firstDay * z
37           + "H" + d.firstWeek * z
38           + "V" + 7 * z
39           + "H" + d.lastWeek * z
40           + "V" + (d.lastDay + 1) * z
41           + "H" + (d.lastWeek + 1) * z
42           + "V" + 0
43           + "H" + (d.firstWeek + 1) * z
44           + "Z";
45     });
46 
47 d3.csv("dji.csv", function(csv) {
48   var data = d3.nest()
49       .key(function(d) { return d.Date; })
50       .rollup(function(d) { return (d[0].Close - d[0].Open) / d[0].Open; })
51       .map(csv);
52 
53   var color = d3.scale.quantize()
54       .domain([-.05, .05])
55       .range(d3.range(9));
56 
57   vis.selectAll("rect.day")
58       .attr("class", function(d) { return "day q" + color(data[d.Date]) + "-9"; })
59     .append("svg:title")
60       .text(function(d) { return d.Date + ": " + (data[d.Date] * 100).toFixed(1) + "%"; });
61 });