-
Notifications
You must be signed in to change notification settings - Fork 1
/
plywood.html
132 lines (98 loc) · 3.2 KB
/
plywood.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>plywood</title>
</head>
<body>
<script src="d3.min.js"></script>
<script src="plywood.js"></script>
<script src="plywood_resp.js"></script>
<script>
function translate(x, y) {
return "translate(" + x + "," + y + ")";
}
var dayOfWeekLabels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x1 = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", translate(margin.left, margin.top));
var Dataset = plywood.Dataset;
var $ = plywood.$;
var data = resp;
// Let's have a look at what we have here.
console.log(JSON.stringify(data, null, 2));
var days = [0, 1, 2, 3, 4, 5, 6];
x0.domain(data.map(function(d) { return d.State; }));
x1.domain(days).rangeRoundBands([0, x0.rangeBand()]);
y.domain([
0,
d3.max(data, function(d) {
return d3.max(d.DaysOfWeek, function(d) { return d.Edits; });
})
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", translate(0, height))
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Edits");
// Create a <g> for each state
var states = svg.selectAll(".state")
.data(data); // Split on 'state'
states.enter().append("g").attr('class', 'state');
states
.attr("transform", function(d) { return translate(x0(d.State), 0); });
states.exit().remove();
// Within each <g> make a <rect> for the days
var daysOfWeek = states.selectAll(".day-of-week")
.data(function(d) { return d.DaysOfWeek; }); // Split on day quarter
daysOfWeek.enter().append("rect").attr('class', 'day-of-week');
daysOfWeek
.attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.DayOfWeek); })
.attr("y", function(d) { return y(d.Edits); })
.attr("height", function(d) { return height - y(d.Edits); })
.style("fill", function(d) { return color(d.DayOfWeek); });
daysOfWeek.exit().remove();
var legend = svg.selectAll(".legend").data(days)
legend.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return translate(0, i * 20); });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return dayOfWeekLabels[d]; });
</script>