-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
56 lines (42 loc) · 1.13 KB
/
index.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
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<div id="gridmap"></div>
</body>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="http://d3js.org/topojson.v3.min.js"></script>
<script src="gridmap.js"></script>
<script>
width = 960;
height = 600;
var projection = d3.geoAlbersUsa()
.scale(1280/960 * width)
.translate([width / 2, height / 2]);
queue()
.defer(d3.json, "us.json")
.await(ready);
getRandomInt = function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
function ready(error, us) {
var features = topojson.feature(us, us.objects.counties).features;
// generate some random data
var data = d3.map(); // data is a d3.map !!
var j;
for (j = 0, len = features.length; j < len; j++) {
data.set(features[j]["id"], getRandomInt(1,5));
}
chart = gridmap()
.data(data)
.width(width)
.height(height)
.key("id")
.side(5)
.isDensity(true)
.projection(projection)
.features(features)
.fill("#343434");
d3.select("#gridmap").call(chart);
}
</script>