-
Notifications
You must be signed in to change notification settings - Fork 25
/
weather.html
33 lines (30 loc) · 946 Bytes
/
weather.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
<!DOCTYPE html><html>
<head>
<title>Weather</title>
<link rel="stylesheet" href="common.css">
</head><body>
<h1>Weather</h1>
<p>India's weather over a century</p>
<script src="d3.v2.js"></script>
<script>
var color = d3.scale.linear()
.domain([-20, 0, 20, 40])
.range(["blue", "green", "yellow", "red"]);
d3.xml("weather.svg", "image/svg+xml", function(xml) {
document.body.appendChild(xml.documentElement);
d3.selectAll('path').attr('fill', '#fff');
d3.csv('weather.csv', function(data) {
for (var paths=[], i=0, row; row=data[i]; i++) {
paths.push(d3.select('g[title="' + row.state + '"] path[title="' + row.district + '"]').datum(row));
}
d3.keys(data[0]).slice(0, -2).forEach(function(month, i) {
setTimeout(function() {
for (var i=0, path; path=paths[i]; i++) {
path.attr('fill', color(path.datum()[month]));
}
}, i*50);
});
});
});
</script>
</body></html>