Skip to content

Commit 4223750

Browse files
mbostockmbostock
committed
Display calendar immediately; color on data.
1 parent 166f8b5 commit 4223750

2 files changed

Lines changed: 92 additions & 85 deletions

File tree

‎examples/calendar/dji.js‎

Lines changed: 47 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,50 @@
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", "RdGy")
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("fill", "#fff")
29+
.attr("width", z)
30+
.attr("height", z);
31+
32+
vis.selectAll("path.month")
33+
.data(calendar.months)
34+
.enter().append("svg:path")
35+
.attr("class", "month")
36+
.attr("d", function(d) {
37+
return "M" + (d.firstWeek + 1) * z + "," + d.firstDay * z
38+
+ "H" + d.firstWeek * z
39+
+ "V" + 7 * z
40+
+ "H" + d.lastWeek * z
41+
+ "V" + (d.lastDay + 1) * z
42+
+ "H" + (d.lastWeek + 1) * z
43+
+ "V" + 0
44+
+ "H" + (d.firstWeek + 1) * z
45+
+ "Z";
46+
});
47+
148
d3.csv("dji.csv", function(csv) {
249
var data = d3.nest()
350
.key(function(d) { return d.Date; })
@@ -8,51 +55,8 @@ d3.csv("dji.csv", function(csv) {
855
.domain([-.05, .05])
956
.range(d3.range(9));
1057

11-
var w = 960,
12-
pw = 14,
13-
z = ~~((w - pw * 2) / 53),
14-
ph = z >> 1,
15-
h = z * 7;
16-
17-
var vis = d3.select("#chart")
18-
.selectAll("svg")
19-
.data(d3.range(1990, 2011))
20-
.enter().append("svg:svg")
21-
.attr("width", w)
22-
.attr("height", h + ph * 2)
23-
.attr("class", "RdGy")
24-
.append("svg:g")
25-
.attr("transform", "translate(" + pw + "," + ph + ")");
26-
27-
vis.append("svg:text")
28-
.attr("transform", "translate(-6," + h / 2 + ")rotate(-90)")
29-
.attr("text-anchor", "middle")
30-
.text(function(d) { return d; });
31-
3258
vis.selectAll("rect.day")
33-
.data(calendar.dates)
34-
.enter().append("svg:rect")
35-
.attr("x", function(d) { return d.week * z; })
36-
.attr("y", function(d) { return d.day * z; })
3759
.attr("class", function(d) { return "day q" + color(data[d.Date]) + "-9"; })
38-
.attr("width", z)
39-
.attr("height", z)
4060
.append("svg:title")
4161
.text(function(d) { return d.Date + ": " + (data[d.Date] * 100).toFixed(1) + "%"; });
42-
43-
vis.selectAll("path.month")
44-
.data(calendar.months)
45-
.enter().append("svg:path")
46-
.attr("class", "month")
47-
.attr("d", function(d) {
48-
return "M" + (d.firstWeek + 1) * z + "," + d.firstDay * z
49-
+ "H" + d.firstWeek * z
50-
+ "V" + 7 * z
51-
+ "H" + d.lastWeek * z
52-
+ "V" + (d.lastDay + 1) * z
53-
+ "H" + (d.lastWeek + 1) * z
54-
+ "V" + 0
55-
+ "H" + (d.firstWeek + 1) * z
56-
+ "Z";
57-
});
5862
});

‎examples/calendar/vix.js‎

Lines changed: 45 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,48 @@
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(1993, 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+
.text(function(d) { return d; });
20+
21+
vis.selectAll("rect.day")
22+
.data(calendar.dates)
23+
.enter().append("svg:rect")
24+
.attr("x", function(d) { return d.week * z; })
25+
.attr("y", function(d) { return d.day * z; })
26+
.attr("class", "day")
27+
.attr("width", z)
28+
.attr("height", z);
29+
30+
vis.selectAll("path.month")
31+
.data(calendar.months)
32+
.enter().append("svg:path")
33+
.attr("class", "month")
34+
.attr("d", function(d) {
35+
return "M" + (d.firstWeek + 1) * z + "," + d.firstDay * z
36+
+ "H" + d.firstWeek * z
37+
+ "V" + 7 * z
38+
+ "H" + d.lastWeek * z
39+
+ "V" + (d.lastDay + 1) * z
40+
+ "H" + (d.lastWeek + 1) * z
41+
+ "V" + 0
42+
+ "H" + (d.firstWeek + 1) * z
43+
+ "Z";
44+
});
45+
146
d3.csv("vix.csv", function(csv) {
247
var data = d3.nest()
348
.key(function(d) { return d.Date; })
@@ -8,50 +53,8 @@ d3.csv("vix.csv", function(csv) {
853
.domain(d3.values(data))
954
.range(d3.range(9).reverse());
1055

11-
var w = 960,
12-
pw = 14,
13-
z = ~~((w - pw * 2) / 53),
14-
ph = z >> 1,
15-
h = z * 7;
16-
17-
var vis = d3.select("#chart")
18-
.selectAll("svg")
19-
.data(d3.range(1993, 2011))
20-
.enter().append("svg:svg")
21-
.attr("width", w)
22-
.attr("height", h + ph * 2)
23-
.attr("class", "RdYlGn")
24-
.append("svg:g")
25-
.attr("transform", "translate(" + pw + "," + ph + ")");
26-
27-
vis.append("svg:text")
28-
.attr("transform", "translate(-6," + h / 2 + ")rotate(-90)")
29-
.text(function(d) { return d; });
30-
3156
vis.selectAll("rect.day")
32-
.data(calendar.dates)
33-
.enter().append("svg:rect")
34-
.attr("x", function(d) { return d.week * z; })
35-
.attr("y", function(d) { return d.day * z; })
3657
.attr("class", function(d) { return "day q" + color(data[d.Date]) + "-9"; })
37-
.attr("width", z)
38-
.attr("height", z)
3958
.append("svg:title")
4059
.text(function(d) { return d.Date + ": " + data[d.Date]; });
41-
42-
vis.selectAll("path.month")
43-
.data(calendar.months)
44-
.enter().append("svg:path")
45-
.attr("class", "month")
46-
.attr("d", function(d) {
47-
return "M" + (d.firstWeek + 1) * z + "," + d.firstDay * z
48-
+ "H" + d.firstWeek * z
49-
+ "V" + 7 * z
50-
+ "H" + d.lastWeek * z
51-
+ "V" + (d.lastDay + 1) * z
52-
+ "H" + (d.lastWeek + 1) * z
53-
+ "V" + 0
54-
+ "H" + (d.firstWeek + 1) * z
55-
+ "Z";
56-
});
5760
});

0 commit comments

Comments
 (0)