|
1 var m = [19, 20, 20, 19], // top right bottom left margin |
|
2 w = 960 - m[1] - m[3], // width |
|
3 h = 136 - m[0] - m[2], // height |
|
4 z = 17; // cell size |
|
5 |
|
6 var day = d3.time.format("%w"), |
|
7 week = d3.time.format("%U"), |
|
8 format = d3.time.format("%Y-%m-%d"); |
|
9 |
|
10 var color = d3.scale.quantile() |
|
11 .range(d3.range(9).reverse()); |
|
12 |
|
13 var svg = d3.select("#chart").selectAll("svg") |
|
14 .data(d3.range(1993, 2011)) |
|
15 .enter().append("svg:svg") |
|
16 .attr("width", w + m[1] + m[3]) |
|
17 .attr("height", h + m[0] + m[2]) |
|
18 .attr("class", "RdYlGn") |
|
19 .append("svg:g") |
|
20 .attr("transform", "translate(" + (m[3] + (w - z * 53) / 2) + "," + (m[0] + (h - z * 7) / 2) + ")"); |
|
21 |
|
22 svg.append("svg:text") |
|
23 .attr("transform", "translate(-6," + z * 3.5 + ")rotate(-90)") |
|
24 .attr("text-anchor", "middle") |
|
25 .text(String); |
|
26 |
|
27 var rect = svg.selectAll("rect.day") |
|
28 .data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); }) |
|
29 .enter().append("svg:rect") |
|
30 .attr("class", "day") |
|
31 .attr("width", z) |
|
32 .attr("height", z) |
|
33 .attr("x", function(d) { return week(d) * z; }) |
|
34 .attr("y", function(d) { return day(d) * z; }); |
|
35 |
|
36 svg.selectAll("path.month") |
|
37 .data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); }) |
|
38 .enter().append("svg:path") |
|
39 .attr("class", "month") |
|
40 .attr("d", monthPath); |
|
41 |
|
42 d3.csv("vix.csv", function(csv) { |
|
43 var data = d3.nest() |
|
44 .key(function(d) { return d.Date; }) |
|
45 .rollup(function(d) { return d[0].Open; }) |
|
46 .map(csv); |
|
47 |
|
48 color.domain(d3.values(data)); |
|
49 |
|
50 rect |
|
51 .attr("class", function(d) { return "day q" + color(data[format(d)]) + "-9"; }) |
|
52 .append("svg:title") |
|
53 .text(function(d) { return (d = format(d)) + (d in data ? ": " + data[d] : ""); }); |
|
54 }); |
|
55 |
|
56 function monthPath(t0) { |
|
57 var t1 = new Date(t0.getUTCFullYear(), t0.getUTCMonth() + 1, 0), |
|
58 d0 = +day(t0), w0 = +week(t0), |
|
59 d1 = +day(t1), w1 = +week(t1); |
|
60 return "M" + (w0 + 1) * z + "," + d0 * z |
|
61 + "H" + w0 * z + "V" + 7 * z |
|
62 + "H" + w1 * z + "V" + (d1 + 1) * z |
|
63 + "H" + (w1 + 1) * z + "V" + 0 |
|
64 + "H" + (w0 + 1) * z + "Z"; |
|
65 } |