Skip to content

Instantly share code, notes, and snippets.

@ispeedyg

ispeedyg/1.csv

Forked from iblind/1.csv
Created September 23, 2015 07:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ispeedyg/ef7126a475d0dd32c211 to your computer and use it in GitHub Desktop.
Save ispeedyg/ef7126a475d0dd32c211 to your computer and use it in GitHub Desktop.
Download ZIP
heatmap update example
Raw
1.csv
day hour N occurrence per_day_per_hour day2
1 Monday 0 50 4 12.5 0
2 Monday 1 45 4 11.25 0
3 Monday 2 25 4 6.25 0
4 Monday 3 17 4 4.25 0
5 Monday 4 8 4 2 0
6 Monday 5 24 4 6 0
7 Monday 6 25 4 6.25 0
8 Monday 7 40 4 10 0
9 Monday 8 53 4 13.25 0
10 Monday 9 63 4 15.75 0
11 Monday 10 76 4 19 0
12 Monday 11 56 4 14 0
13 Monday 12 73 4 18.25 0
14 Monday 13 58 4 14.5 0
15 Monday 14 74 4 18.5 0
16 Monday 15 92 4 23 0
17 Monday 16 78 4 19.5 0
18 Monday 17 85 4 21.25 0
19 Monday 18 89 4 22.25 0
20 Monday 19 94 4 23.5 0
21 Monday 20 87 4 21.75 0
22 Monday 21 97 4 24.25 0
23 Monday 22 99 4 24.75 0
24 Monday 23 74 4 18.5 0
25 Tuesday 0 70 4 17.5 1
26 Tuesday 1 46 4 11.5 1
27 Tuesday 2 19 4 4.75 1
28 Tuesday 3 11 4 2.75 1
29 Tuesday 4 7 4 1.75 1
30 Tuesday 5 12 4 3 1
31 Tuesday 6 30 4 7.5 1
32 Tuesday 7 37 4 9.25 1
33 Tuesday 8 46 4 11.5 1
34 Tuesday 9 52 4 13 1
35 Tuesday 10 59 4 14.75 1
36 Tuesday 11 56 4 14 1
37 Tuesday 12 76 4 19 1
38 Tuesday 13 79 4 19.75 1
39 Tuesday 14 69 4 17.25 1
40 Tuesday 15 83 4 20.75 1
41 Tuesday 16 67 4 16.75 1
42 Tuesday 17 83 4 20.75 1
43 Tuesday 18 86 4 21.5 1
44 Tuesday 19 78 4 19.5 1
45 Tuesday 20 81 4 20.25 1
46 Tuesday 21 83 4 20.75 1
47 Tuesday 22 90 4 22.5 1
48 Tuesday 23 70 4 17.5 1
49 Wednesday 0 53 4 13.25 2
50 Wednesday 1 31 4 7.75 2
51 Wednesday 2 20 4 5 2
52 Wednesday 3 13 4 3.25 2
53 Wednesday 4 8 4 2 2
54 Wednesday 5 21 4 5.25 2
55 Wednesday 6 27 4 6.75 2
56 Wednesday 7 36 4 9 2
57 Wednesday 8 34 4 8.5 2
58 Wednesday 9 57 4 14.25 2
59 Wednesday 10 55 4 13.75 2
60 Wednesday 11 56 4 14 2
61 Wednesday 12 75 4 18.75 2
62 Wednesday 13 52 4 13 2
63 Wednesday 14 75 4 18.75 2
64 Wednesday 15 79 4 19.75 2
65 Wednesday 16 65 4 16.25 2
66 Wednesday 17 61 4 15.25 2
67 Wednesday 18 74 4 18.5 2
68 Wednesday 19 89 4 22.25 2
69 Wednesday 20 77 4 19.25 2
70 Wednesday 21 99 4 24.75 2
71 Wednesday 22 83 4 20.75 2
72 Wednesday 23 88 4 22 2
73 Thursday 0 59 5 11.8 3
74 Thursday 1 46 5 9.2 3
75 Thursday 2 37 5 7.4 3
76 Thursday 3 28 5 5.6 3
77 Thursday 4 18 5 3.6 3
78 Thursday 5 25 5 5 3
79 Thursday 6 22 5 4.4 3
80 Thursday 7 46 5 9.2 3
81 Thursday 8 60 5 12 3
82 Thursday 9 60 5 12 3
83 Thursday 10 69 5 13.8 3
84 Thursday 11 92 5 18.4 3
85 Thursday 12 78 5 15.6 3
86 Thursday 13 74 5 14.8 3
87 Thursday 14 97 5 19.4 3
88 Thursday 15 92 5 18.4 3
89 Thursday 16 92 5 18.4 3
90 Thursday 17 75 5 15 3
91 Thursday 18 85 5 17 3
92 Thursday 19 94 5 18.8 3
93 Thursday 20 96 5 19.2 3
94 Thursday 21 103 5 20.6 3
95 Thursday 22 94 5 18.8 3
96 Thursday 23 94 5 18.8 3
97 Friday 0 77 5 15.4 4
98 Friday 1 43 5 8.6 4
99 Friday 2 32 5 6.4 4
100 Friday 3 21 5 4.2 4
101 Friday 4 17 5 3.4 4
102 Friday 5 10 5 2 4
103 Friday 6 27 5 5.4 4
104 Friday 7 42 5 8.4 4
105 Friday 8 61 5 12.2 4
106 Friday 9 64 5 12.8 4
107 Friday 10 79 5 15.8 4
108 Friday 11 64 5 12.8 4
109 Friday 12 81 5 16.2 4
110 Friday 13 85 5 17 4
111 Friday 14 89 5 17.8 4
112 Friday 15 71 5 14.2 4
113 Friday 16 79 5 15.8 4
114 Friday 17 98 5 19.6 4
115 Friday 18 86 5 17.2 4
116 Friday 19 102 5 20.4 4
117 Friday 20 100 5 20 4
118 Friday 21 94 5 18.8 4
119 Friday 22 114 5 22.8 4
120 Friday 23 116 5 23.2 4
121 Saturday 0 92 5 18.4 5
122 Saturday 1 59 5 11.8 5
123 Saturday 2 40 5 8 5
124 Saturday 3 36 5 7.2 5
125 Saturday 4 22 5 4.4 5
126 Saturday 5 25 5 5 5
127 Saturday 6 24 5 4.8 5
128 Saturday 7 36 5 7.2 5
129 Saturday 8 41 5 8.2 5
130 Saturday 9 66 5 13.2 5
131 Saturday 10 65 5 13 5
132 Saturday 11 84 5 16.8 5
133 Saturday 12 83 5 16.6 5
134 Saturday 13 83 5 16.6 5
135 Saturday 14 92 5 18.4 5
136 Saturday 15 99 5 19.8 5
137 Saturday 16 101 5 20.2 5
138 Saturday 17 102 5 20.4 5
139 Saturday 18 89 5 17.8 5
140 Saturday 19 93 5 18.6 5
141 Saturday 20 83 5 16.6 5
142 Saturday 21 83 5 16.6 5
143 Saturday 22 96 5 19.2 5
144 Saturday 23 64 5 12.8 5
145 Sunday 0 74 4 18.5 6
146 Sunday 1 54 4 13.5 6
147 Sunday 2 34 4 8.5 6
148 Sunday 3 42 4 10.5 6
149 Sunday 4 24 4 6 6
150 Sunday 5 25 4 6.25 6
151 Sunday 6 14 4 3.5 6
152 Sunday 7 27 4 6.75 6
153 Sunday 8 46 4 11.5 6
154 Sunday 9 58 4 14.5 6
155 Sunday 10 73 4 18.25 6
156 Sunday 11 58 4 14.5 6
157 Sunday 12 66 4 16.5 6
158 Sunday 13 72 4 18 6
159 Sunday 14 82 4 20.5 6
160 Sunday 15 74 4 18.5 6
161 Sunday 16 82 4 20.5 6
162 Sunday 17 65 4 16.25 6
163 Sunday 18 89 4 22.25 6
164 Sunday 19 87 4 21.75 6
165 Sunday 20 96 4 24 6
166 Sunday 21 68 4 17 6
167 Sunday 22 74 4 18.5 6
168 Sunday 23 75 4 18.75 6
Raw
1_1.csv
day hour N per_day_per_hour day2
25 Monday 0 17 4.25 0
26 Monday 1 12 3 0
27 Monday 2 10 2.5 0
28 Monday 3 5 1.25 0
29 Monday 4 2 0.5 0
30 Monday 5 2 0.5 0
31 Monday 6 3 0.75 0
32 Monday 7 8 2 0
33 Monday 8 10 2.5 0
34 Monday 9 4 1 0
35 Monday 10 17 4.25 0
36 Monday 11 15 3.75 0
37 Monday 12 19 4.75 0
38 Monday 13 7 1.75 0
39 Monday 14 12 3 0
40 Monday 15 12 3 0
41 Monday 16 20 5 0
42 Monday 17 18 4.5 0
43 Monday 18 21 5.25 0
44 Monday 19 19 4.75 0
45 Monday 20 19 4.75 0
46 Monday 21 27 6.75 0
47 Monday 22 23 5.75 0
48 Monday 23 22 5.5 0
121 Tuesday 0 22 5.5 1
122 Tuesday 1 12 3 1
123 Tuesday 2 7 1.75 1
124 Tuesday 3 1 0.25 1
125 Tuesday 4 1 0.25 1
126 Tuesday 5 5 1.25 1
127 Tuesday 6 5 1.25 1
128 Tuesday 7 6 1.5 1
129 Tuesday 8 10 2.5 1
130 Tuesday 9 14 3.5 1
131 Tuesday 10 10 2.5 1
132 Tuesday 11 14 3.5 1
133 Tuesday 12 16 4 1
134 Tuesday 13 20 5 1
135 Tuesday 14 20 5 1
136 Tuesday 15 15 3.75 1
137 Tuesday 16 8 2 1
138 Tuesday 17 17 4.25 1
139 Tuesday 18 22 5.5 1
140 Tuesday 19 18 4.5 1
141 Tuesday 20 16 4 1
142 Tuesday 21 16 4 1
143 Tuesday 22 27 6.75 1
144 Tuesday 23 16 4 1
145 Wednesday 0 16 4 2
146 Wednesday 1 9 2.25 2
147 Wednesday 2 7 1.75 2
148 Wednesday 3 3 0.75 2
149 Wednesday 4 1 0.25 2
150 Wednesday 5 2 0.5 2
151 Wednesday 6 8 2 2
152 Wednesday 7 7 1.75 2
153 Wednesday 8 3 0.75 2
154 Wednesday 9 13 3.25 2
155 Wednesday 10 11 2.75 2
156 Wednesday 11 16 4 2
157 Wednesday 12 13 3.25 2
158 Wednesday 13 10 2.5 2
159 Wednesday 14 13 3.25 2
160 Wednesday 15 20 5 2
161 Wednesday 16 10 2.5 2
162 Wednesday 17 11 2.75 2
163 Wednesday 18 15 3.75 2
164 Wednesday 19 30 7.5 2
165 Wednesday 20 15 3.75 2
166 Wednesday 21 27 6.75 2
167 Wednesday 22 23 5.75 2
168 Wednesday 23 21 5.25 2
97 Thursday 0 22 4.4 3
98 Thursday 1 10 2 3
99 Thursday 2 13 2.6 3
100 Thursday 3 3 0.6 3
101 Thursday 4 4 0.8 3
102 Thursday 5 5 1 3
103 Thursday 6 5 1 3
104 Thursday 7 9 1.8 3
105 Thursday 8 8 1.6 3
106 Thursday 9 14 2.8 3
107 Thursday 10 20 4 3
108 Thursday 11 19 3.8 3
109 Thursday 12 14 2.8 3
110 Thursday 13 19 3.8 3
111 Thursday 14 21 4.2 3
112 Thursday 15 33 6.6 3
113 Thursday 16 19 3.8 3
114 Thursday 17 17 3.4 3
115 Thursday 18 20 4 3
116 Thursday 19 26 5.2 3
117 Thursday 20 25 5 3
118 Thursday 21 25 5 3
119 Thursday 22 24 4.8 3
120 Thursday 23 24 4.8 3
1 Friday 0 21 4.2 4
2 Friday 1 13 2.6 4
3 Friday 2 7 1.4 4
4 Friday 3 6 1.2 4
5 Friday 4 3 0.6 4
6 Friday 5 1 0.2 4
7 Friday 6 2 0.4 4
8 Friday 7 8 1.6 4
9 Friday 8 8 1.6 4
10 Friday 9 13 2.6 4
11 Friday 10 11 2.2 4
12 Friday 11 15 3 4
13 Friday 12 19 3.8 4
14 Friday 13 13 2.6 4
15 Friday 14 21 4.2 4
16 Friday 15 17 3.4 4
17 Friday 16 22 4.4 4
18 Friday 17 14 2.8 4
19 Friday 18 17 3.4 4
20 Friday 19 22 4.4 4
21 Friday 20 16 3.2 4
22 Friday 21 24 4.8 4
23 Friday 22 22 4.4 4
24 Friday 23 26 5.2 4
49 Saturday 0 24 4.8 5
50 Saturday 1 18 3.6 5
51 Saturday 2 6 1.2 5
52 Saturday 3 11 2.2 5
53 Saturday 4 8 1.6 5
54 Saturday 5 3 0.6 5
55 Saturday 6 3 0.6 5
56 Saturday 7 6 1.2 5
57 Saturday 8 10 2 5
58 Saturday 9 10 2 5
59 Saturday 10 16 3.2 5
60 Saturday 11 20 4 5
61 Saturday 12 19 3.8 5
62 Saturday 13 18 3.6 5
63 Saturday 14 25 5 5
64 Saturday 15 16 3.2 5
65 Saturday 16 18 3.6 5
66 Saturday 17 31 6.2 5
67 Saturday 18 19 3.8 5
68 Saturday 19 22 4.4 5
69 Saturday 20 21 4.2 5
70 Saturday 21 21 4.2 5
71 Saturday 22 10 2 5
72 Saturday 23 8 1.6 5
73 Sunday 0 20 5 6
74 Sunday 1 8 2 6
75 Sunday 2 11 2.75 6
76 Sunday 3 7 1.75 6
77 Sunday 4 6 1.5 6
78 Sunday 5 7 1.75 6
79 Sunday 6 3 0.75 6
80 Sunday 7 1 0.25 6
81 Sunday 8 8 2 6
82 Sunday 9 8 2 6
83 Sunday 10 10 2.5 6
84 Sunday 11 9 2.25 6
85 Sunday 12 9 2.25 6
86 Sunday 13 9 2.25 6
87 Sunday 14 15 3.75 6
88 Sunday 15 18 4.5 6
89 Sunday 16 17 4.25 6
90 Sunday 17 8 2 6
91 Sunday 18 17 4.25 6
92 Sunday 19 22 5.5 6
93 Sunday 20 22 5.5 6
94 Sunday 21 17 4.25 6
95 Sunday 22 21 5.25 6
96 Sunday 23 19 4.75 6
Raw
1_2.csv
day hour N per_day_per_hour day2
25 Monday 0 4 1 0
26 Monday 1 2 0.5 0
27 Monday 2 1 0.25 0
28 Monday 3 0 0 0
29 Monday 4 0 0 0
30 Monday 5 0 0 0
31 Monday 6 2 0.5 0
32 Monday 7 3 0.75 0
33 Monday 8 3 0.75 0
34 Monday 9 5 1.25 0
35 Monday 10 11 2.75 0
36 Monday 11 5 1.25 0
37 Monday 12 1 0.25 0
38 Monday 13 3 0.75 0
39 Monday 14 2 0.5 0
40 Monday 15 11 2.75 0
41 Monday 16 5 1.25 0
42 Monday 17 8 2 0
43 Monday 18 1 0.25 0
44 Monday 19 6 1.5 0
45 Monday 20 13 3.25 0
46 Monday 21 4 1 0
47 Monday 22 4 1 0
48 Monday 23 5 1.25 0
121 Tuesday 0 6 1.5 1
122 Tuesday 1 5 1.25 1
123 Tuesday 2 1 0.25 1
124 Tuesday 3 0 0 1
125 Tuesday 4 0 0 1
126 Tuesday 5 0 0 1
127 Tuesday 6 1 0.25 1
128 Tuesday 7 2 0.5 1
129 Tuesday 8 0 0 1
130 Tuesday 9 2 0.5 1
131 Tuesday 10 3 0.75 1
132 Tuesday 11 4 1 1
133 Tuesday 12 5 1.25 1
134 Tuesday 13 4 1 1
135 Tuesday 14 4 1 1
136 Tuesday 15 4 1 1
137 Tuesday 16 5 1.25 1
138 Tuesday 17 5 1.25 1
139 Tuesday 18 4 1 1
140 Tuesday 19 2 0.5 1
141 Tuesday 20 6 1.5 1
142 Tuesday 21 5 1.25 1
143 Tuesday 22 3 0.75 1
144 Tuesday 23 2 0.5 1
145 Wednesday 0 9 2.25 2
146 Wednesday 1 0 0 2
147 Wednesday 2 1 0.25 2
148 Wednesday 3 0 0 2
149 Wednesday 4 0 0 2
150 Wednesday 5 4 1 2
151 Wednesday 6 2 0.5 2
152 Wednesday 7 3 0.75 2
153 Wednesday 8 2 0.5 2
154 Wednesday 9 4 1 2
155 Wednesday 10 0 0 2
156 Wednesday 11 2 0.5 2
157 Wednesday 12 4 1 2
158 Wednesday 13 3 0.75 2
159 Wednesday 14 6 1.5 2
160 Wednesday 15 4 1 2
161 Wednesday 16 4 1 2
162 Wednesday 17 3 0.75 2
163 Wednesday 18 1 0.25 2
164 Wednesday 19 1 0.25 2
165 Wednesday 20 3 0.75 2
166 Wednesday 21 3 0.75 2
167 Wednesday 22 8 2 2
168 Wednesday 23 4 1 2
97 Thursday 0 3 0.6 3
98 Thursday 1 1 0.2 3
99 Thursday 2 2 0.4 3
100 Thursday 3 0 0 3
101 Thursday 4 1 0.2 3
102 Thursday 5 1 0.2 3
103 Thursday 6 3 0.6 3
104 Thursday 7 1 0.2 3
105 Thursday 8 4 0.8 3
106 Thursday 9 5 1 3
107 Thursday 10 6 1.2 3
108 Thursday 11 9 1.8 3
109 Thursday 12 7 1.4 3
110 Thursday 13 7 1.4 3
111 Thursday 14 3 0.6 3
112 Thursday 15 6 1.2 3
113 Thursday 16 6 1.2 3
114 Thursday 17 5 1 3
115 Thursday 18 5 1 3
116 Thursday 19 2 0.4 3
117 Thursday 20 9 1.8 3
118 Thursday 21 2 0.4 3
119 Thursday 22 5 1 3
120 Thursday 23 5 1 3
1 Friday 0 1 0.2 4
2 Friday 1 1 0.2 4
3 Friday 2 0 0 4
4 Friday 3 1 0.2 4
5 Friday 4 1 0.2 4
6 Friday 5 2 0.4 4
7 Friday 6 1 0.2 4
8 Friday 7 0 0 4
9 Friday 8 1 0.2 4
10 Friday 9 1 0.2 4
11 Friday 10 6 1.2 4
12 Friday 11 2 0.4 4
13 Friday 12 5 1 4
14 Friday 13 9 1.8 4
15 Friday 14 5 1 4
16 Friday 15 6 1.2 4
17 Friday 16 4 0.8 4
18 Friday 17 6 1.2 4
19 Friday 18 5 1 4
20 Friday 19 6 1.2 4
21 Friday 20 8 1.6 4
22 Friday 21 2 0.4 4
23 Friday 22 5 1 4
24 Friday 23 8 1.6 4
49 Saturday 0 2 0.4 5
50 Saturday 1 5 1 5
51 Saturday 2 3 0.6 5
52 Saturday 3 4 0.8 5
53 Saturday 4 1 0.2 5
54 Saturday 5 1 0.2 5
55 Saturday 6 2 0.4 5
56 Saturday 7 1 0.2 5
57 Saturday 8 5 1 5
58 Saturday 9 4 0.8 5
59 Saturday 10 5 1 5
60 Saturday 11 4 0.8 5
61 Saturday 12 6 1.2 5
62 Saturday 13 2 0.4 5
63 Saturday 14 6 1.2 5
64 Saturday 15 2 0.4 5
65 Saturday 16 8 1.6 5
66 Saturday 17 5 1 5
67 Saturday 18 5 1 5
68 Saturday 19 1 0.2 5
69 Saturday 20 7 1.4 5
70 Saturday 21 4 0.8 5
71 Saturday 22 5 1 5
72 Saturday 23 4 0.8 5
73 Sunday 0 3 0.75 6
74 Sunday 1 5 1.25 6
75 Sunday 2 3 0.75 6
76 Sunday 3 3 0.75 6
77 Sunday 4 1 0.25 6
78 Sunday 5 1 0.25 6
79 Sunday 6 0 0 6
80 Sunday 7 3 0.75 6
81 Sunday 8 1 0.25 6
82 Sunday 9 3 0.75 6
83 Sunday 10 6 1.5 6
84 Sunday 11 2 0.5 6
85 Sunday 12 4 1 6
86 Sunday 13 6 1.5 6
87 Sunday 14 6 1.5 6
88 Sunday 15 4 1 6
89 Sunday 16 8 2 6
90 Sunday 17 7 1.75 6
91 Sunday 18 1 0.25 6
92 Sunday 19 5 1.25 6
93 Sunday 20 7 1.75 6
94 Sunday 21 5 1.25 6
95 Sunday 22 5 1.25 6
96 Sunday 23 4 1 6
Raw
index.html
<!DOCTYPE html>
<html lange = "en">
<head>
<meta charset="UTF-8">
<title>Heatmap</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script type ="text/javascript" src="updateHeatmap.js"> </script>
<style type ="text/css">
.btn {
display: inline;
}
rect.bordered {
stroke: #E6E6E6;
stroke-width:2px;
}
text.mono {
font-size: 9pt;
font-family: Consolas, courier;
fill: #aaa;
}
text.axis-workweek {
fill: #000;
}
text.axis-worktime {
fill: #000;
}</style>
</head>
<body>
<div id="n1" class="btn">
<input name="updateButton"
type="button"
value="1"
/>
</div>
<div id="n2" class="btn">
<input name="updateButton"
type="button"
value="2"
/>
</div>
<div id="chart"></div>
<script type="text/javascript">
var margin = {top:50, right:0, bottom:100, left:30},
width=960-margin.left-margin.right,
height=430-margin.top-margin.bottom,
gridSize=Math.floor(width/24),
legendElementWidth=gridSize*2.665,
buckets = 10,
colors = ["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"],
days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
times = ["12am", "1am", "2am", "3am", "4am", "5am", "6am", "7am", "8am", "9am", "10am", "11am", "12am", "1pm", "2pm", "3pm", "4pm", "5pm", "6pm", "7pm", "8pm", "9pm", "10pm", "11pm"];
var heatmap;
var legend;
var svg = d3.select("#chart").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+")");
d3.csv("1.csv", function(d){
return {
day:+d.day2,
hour:+d.hour,
value:+d.per_day_per_hour
};
},
function(error, data){
console.log(data);
var colorScale = d3.scale.quantile()
.domain([0, (d3.max(data, function(d){return d.value;})/2), d3.max(data, function(d){return d.value;})])
.range(colors);
var dayLabels = svg.selectAll(".dayLabel")
.data(days)
.enter().append("text")
.text(function (d) {return d; })
.attr("y", function (d, i){ return i*gridSize;})
.style("text-anchor", "end")
.attr("transform", "translate(-6," + gridSize/1.5+")")
.attr("class", function(d, i) { return ((i>=0 && i<=4) ? "dayLabel mono axis axis-workweek": "dayLabel mono axis"); });
var timeLabels = svg.selectAll(".timeLabel")
.data(times)
.enter().append("text")
.text(function(d){return d;})
.attr("x", function(d,i) {return i * gridSize;})
.attr("y",0)
.style("text-anchor", "middle")
.attr("transform", "translate(" + gridSize/2+", -6)")
.attr("class", function(d, i) { return ((i>=9 && i<= 17) ? "timeLabel mono axis axis-worktime": "timeLabel mono axis"); });
var heatMap = svg.selectAll(".hour")
.data(data)
.enter().append("rect")
.attr("x", function(d) {return (d.hour) * gridSize;})
.attr("y", function(d) {return (d.day) * gridSize;})
.attr("rx", 4)
.attr("ry", 4)
.attr("class", "hour bordered")
.attr("width", gridSize)
.attr("height", gridSize)
.style("fill", colors[0]);
heatMap.transition().duration(1000)
.style("fill", function(d){ return colorScale(d.value);});
heatMap.append("title").text(function(d) {return d.value;});
var legend = svg.selectAll(".legend")
.data([0].concat(colorScale.quantiles()), function(d) {return d;})
.enter().append("g")
.attr("class", "legend");
legend.append("rect")
.attr("x", function(d, i){ return legendElementWidth * i;})
.attr("y", height)
.attr("width", legendElementWidth)
.attr("height", gridSize/2)
.style("fill", function(d, i) {return colors[i]; });
legend.append("text")
.attr("class", "mono")
.text(function(d) {return "≥ "+d.toString().substr(0,4);})
.attr("x", function(d, i){ return legendElementWidth *i;})
.attr("y", height+ gridSize);
d3.select("#n1")
.on("click", function() {
updateHeatmap("1_1.csv");
});
d3.select("#n2")
.on("click", function() {
updateHeatmap("1_2.csv");
});
;
}
);
</script>
<script>
</script>
</body>
</html>
Raw
updateHeatmap.js
function updateHeatmap(x){
svg.selectAll(".legend").attr("opacity", 0);
d3.csv(x, function(d){
return {
day:+d.day2,
hour:+d.hour,
value:+d.per_day_per_hour
};
},
function(error, data){
colorScale = d3.scale.quantile()
.domain([0, (d3.max(data, function(d){return d.value;})/2), d3.max(data, function(d){return d.value;})])
.range(colors);
var heatMap = svg.selectAll(".hour")
.data(data)
.transition().duration(1000)
.style("fill", function(d){ return colorScale(d.value);});
heatMap.selectAll("title").text(function(d) {return d.value;});
var legend = svg.selectAll(".legend")
.data([0].concat(colorScale.quantiles()), function(d) {return d;})
.enter().append("g")
.attr("class", "legend");
legend.append("rect")
.attr("x", function(d, i){ return legendElementWidth * i;})
.attr("y", height)
.attr("width", legendElementWidth)
.attr("height", gridSize/2)
.style("fill", function(d, i) {return colors[i]; });
legend.append("text")
.attr("class", "mono")
.text(function(d) {return "≥ "+d.toString().substr(0,4);})
.attr("x", function(d, i){ return legendElementWidth *i;})
.attr("y", height+ gridSize);
}
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment