/
index.html
143 lines (122 loc) · 3.46 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
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
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<meta charset="utf-8">
<title>Let's make a Dutch Bubble Map</title>
<style>
/*html layout*/
body {
font: 11px sans-serif;
}
#wrapper {
width: 850px;
margin: 20px auto;
padding: 0 25px;
}
#header {
padding:10px 25px 0 25px;
}
h1 {
border-bottom:1px #D6D6D6 solid;
padding-left:10px;
}
#footer {
text-align: center;
margin:0 25px;
padding:0 25px 10px 25px;
color:#555;
border-top:1px #D6D6D6 solid;
}
/*svg layout */
path {
fill: none;
stroke: #FFF;
stroke-linejoin: round;
stroke-linecap: round;
}
.land {
fill: #ddd;
}
.bubble {
fill: brown;
fill-opacity: .5;
stroke: #fff;
stroke-width: .5px;
}
.bubble :hover {
stroke: #000;
}
.legend circle {
fill: none;
stroke: #ccc;
}
.legend text {
fill: #777;
font: 10px sans-serif;
text-anchor: middle;
}
</style>
<body>
<script src="../d3/d3.js"></script>
<script src="../topojson/topojson.js"></script>
<div id="wrapper">
<div id="header">
<h1>Let's Make a Dutch Bubble Map</h1>
</div>
<div id="map"></div>
<div id="footer">
<p>By <a href="http://www.twitter.com/pberden" >Paul Berden</a> - Based on the great work of <a href="http://bost.ocks.org/mike/bubble-map/">Mike Bostock</a> - Made with <a href="http://www.d3js.org">D3.js</a> - Fork me on <a href="http://www.github.com/pberden/population-nld">GitHub</a><br />
Data from: © Kadaster / Centraal Bureau voor de Statistiek, 2013 - <a href="http://www.cbs.nl/nl-NL/menu/themas/dossiers/nederland-regionaal/publicaties/geografische-data/archief/2014/2013-wijk-en-buurtkaart-art.htm">Kerncijfers wijken en buurten 2013</a></p>
</div>
</div>
<script>
var width = 800,
height = 900;
var formatNumber = d3.format(",.0f");
var projection = d3.geo.mercator()
.scale(10700)
.translate([width / 2, height / 2])
.center([5.4, 52.2]);
var path = d3.geo.path()
.projection(projection);
var radius = d3.scale.sqrt()
.domain([0, 1e5])
.range([0, 10]);
var svg = d3.select("#map").append("svg")
.attr("width", width)
.attr("height", height);
var legend = svg.append("g")
.attr("class", "legend")
.attr("transform", "translate(" + (width - 50) + "," + (height - 20) + ")")
.selectAll("g")
.data([1e5, 5e5, 1e6])
.enter().append("g");
legend.append("circle")
.attr("cy", function(d) { return -radius(d); })
.attr("r", radius);
legend.append("text")
.attr("y", function(d) { return -2 * radius(d); })
.attr("dy", "1.3em")
.text(d3.format(".1s"));
d3.json("build/prov.json", function(error, prov) {
if (error) return console.error(error);
svg.append("path")
.datum(topojson.feature(prov, prov.objects.provgeo))
.attr("class", "land")
.attr("d", path);
d3.json("build/gem.json", function(error, gem) {
if (error) return console.error(error);
svg.append("g")
.attr("class", "bubble")
.selectAll("circle")
.data(topojson.feature(gem, gem.objects.gemgeo).features.sort(function(a, b) { return b.properties.AANT_INW - a.properties.AANT_INW; }))
.enter().append("circle")
.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
.attr("r", function(d) { return radius(d.properties.AANT_INW); })
.append("title")
.text(function(d) {
return d.properties.GM_NAAM
+ "\nPopulation " + formatNumber(d.properties.AANT_INW);
});
});
});
</script>
</body>