-
Notifications
You must be signed in to change notification settings - Fork 11
/
map.js
234 lines (201 loc) · 7.46 KB
/
map.js
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
// We define a variable holding the current key to visualize on the map.
var currentKey = 'urban';
// We specify the dimensions for the map container. We use the same
// width and height as specified in the CSS above.
var width = 900,
height = 600;
// We get and prepare the Mustache template, parsing it speeds up future uses
var template = d3.select('#template').html();
Mustache.parse(template);
// We create a SVG element in the map container and give it some
// dimensions.
var svg = d3.select('#map').append('svg')
.attr('width', width)
.attr('height', height);
// We add a <g> element to the SVG element and give it a class to
// style. We also add a class name for Colorbrewer.
var mapFeatures = svg.append('g')
.attr('class', 'features YlGnBu');
// We add a <div> container for the tooltip, which is hidden by default.
var tooltip = d3.select("#map")
.append("div")
.attr("class", "tooltip hidden");
// Define the zoom and attach it to the map
var zoom = d3.behavior.zoom()
.scaleExtent([1, 10])
.on('zoom', doZoom);
svg.call(zoom);
// We define a geographical projection
// https://github.com/mbostock/d3/wiki/Geo-Projections
// and set some dummy initial scale. The correct scale, center and
// translate parameters will be set once the features are loaded.
var projection = d3.geo.mercator()
.scale(1);
// We prepare a path object and apply the projection to it.
var path = d3.geo.path()
.projection(projection);
// We prepare an object to later have easier access to the data.
var dataById = d3.map();
// We prepare a quantize scale to categorize the values in 9 groups.
// The scale returns text values which can be used for the color CSS
// classes (q0-9, q1-9 ... q8-9). The domain will be defined once the
// values are known.
var quantize = d3.scale.quantize()
.range(d3.range(9).map(function(i) { return 'q' + i + '-9'; }));
// Load the features from the GeoJSON.
d3.json('data/ch_municipalities.geojson', function(error, features) {
// Get the scale and center parameters from the features.
var scaleCenter = calculateScaleCenter(features);
// Apply scale, center and translate parameters.
projection.scale(scaleCenter.scale)
.center(scaleCenter.center)
.translate([width/2, height/2]);
// Read the data for the cartogram
d3.csv('data/areastatistics.csv', function(data) {
// This maps the data of the CSV so it can be easily accessed by
// the ID of the municipality, for example: dataById[2196]
dataById = d3.nest()
.key(function(d) { return d.id; })
.rollup(function(d) { return d[0]; })
.map(data);
// Set the domain of the values (the minimum and maximum values of
// all values of the current key) to the quantize scale.
quantize.domain([
d3.min(data, function(d) { return getValueOfData(d); }),
d3.max(data, function(d) { return getValueOfData(d); })
]);
// We add the features to the <g> element created before.
// D3 wants us to select the (non-existing) path objects first ...
mapFeatures.selectAll('path')
// ... and then enter the data. For each feature, a <path>
// element is added.
.data(features.features)
.enter().append('path')
.attr('class', function(d) {
// Use the quantized value for the class
return quantize(getValueOfData(dataById[getIdOfFeature(d)]));
})
// As "d" attribute, we set the path of the feature.
.attr('d', path)
// When the mouse moves over a feature, show the tooltip.
.on('mousemove', showTooltip)
// When the mouse moves out of a feature, hide the tooltip.
.on('mouseout', hideTooltip)
// When a feature is clicked, show the details of it.
.on('click', showDetails);
});
});
/**
* Show the details of a feature in the details <div> container.
* The content is rendered with a Mustache template.
*
* @param {object} f - A GeoJSON Feature object.
*/
function showDetails(f) {
// Get the ID of the feature.
var id = getIdOfFeature(f);
// Use the ID to get the data entry.
var d = dataById[id];
// Render the Mustache template with the data object and put the
// resulting HTML output in the details container.
var detailsHtml = Mustache.render(template, d);
// Put the HTML output in the details container and show (unhide) it.
d3.select('#details').html(detailsHtml);
d3.select('#details').classed("hidden", false);
}
/**
* Show a tooltip with the name of the feature.
*
* @param {object} f - A GeoJSON Feature object.
*/
function showTooltip(f) {
// Get the ID of the feature.
var id = getIdOfFeature(f);
// Use the ID to get the data entry.
var d = dataById[id];
// Get the current mouse position (as integer)
var mouse = d3.mouse(d3.select('#map').node()).map(
function(d) { return parseInt(d); }
);
// Calculate the absolute left and top offsets of the tooltip. If the
// mouse is close to the right border of the map, show the tooltip on
// the left.
var left = Math.min(width - 4 * d.name.length, mouse[0] + 5);
var top = mouse[1] + 25;
// Show the tooltip (unhide it) and set the name of the data entry.
// Set the position as calculated before.
tooltip.classed('hidden', false)
.attr("style", "left:" + left + "px; top:" + top + "px")
.html(d.name);
}
/**
* Hide the tooltip.
*/
function hideTooltip() {
tooltip.classed('hidden', true);
}
/**
* Zoom the features on the map. This rescales the features on the map.
* Keep the stroke width proportional when zooming in.
*/
function doZoom() {
mapFeatures.attr("transform",
"translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")")
// Keep the stroke width proportional. The initial stroke width
// (0.5) must match the one set in the CSS.
.style("stroke-width", 0.5 / d3.event.scale + "px");
}
/**
* Calculate the scale factor and the center coordinates of a GeoJSON
* FeatureCollection. For the calculation, the height and width of the
* map container is needed.
*
* Thanks to: http://stackoverflow.com/a/17067379/841644
*
* @param {object} features - A GeoJSON FeatureCollection object
* containing a list of features.
*
* @return {object} An object containing the following attributes:
* - scale: The calculated scale factor.
* - center: A list of two coordinates marking the center.
*/
function calculateScaleCenter(features) {
// Get the bounding box of the paths (in pixels!) and calculate a
// scale factor based on the size of the bounding box and the map
// size.
var bbox_path = path.bounds(features),
scale = 0.95 / Math.max(
(bbox_path[1][0] - bbox_path[0][0]) / width,
(bbox_path[1][1] - bbox_path[0][1]) / height
);
// Get the bounding box of the features (in map units!) and use it
// to calculate the center of the features.
var bbox_feature = d3.geo.bounds(features),
center = [
(bbox_feature[1][0] + bbox_feature[0][0]) / 2,
(bbox_feature[1][1] + bbox_feature[0][1]) / 2];
return {
'scale': scale,
'center': center
};
}
/**
* Helper function to access the (current) value of a data object.
*
* Use "+" to convert text values to numbers.
*
* @param {object} d - A data object representing an entry (one line) of
* the data CSV.
*/
function getValueOfData(d) {
return +d[currentKey];
}
/**
* Helper function to retrieve the ID of a feature. The ID is found in
* the properties of the feature.
*
* @param {object} f - A GeoJSON Feature object.
*/
function getIdOfFeature(f) {
return f.properties.GMDNR;
}