-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
295 lines (242 loc) · 11.8 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
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
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>World largest cities // Urban footprint</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="Simon Georget / Empreinte Urbaine">
<script src="./lib/jquery.min.js"></script>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
<link href="./lib/novus-nvd3/nv.d3.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="./app/style.css">
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="./lib/jquery.isotope.min.js"></script>
<script src="./lib/numeral.min.js"></script>
<script src="./lib/jcanvas.min.js"></script>
<script src="./lib/d3.min.js"></script>
<script src="./lib/objeq.min.js"></script>
<script src="./app/app.js"></script>
<script>
/** to remove */
</script>
</head>
<body>
<h1>World largest cities - Urban footprint</h1>
<div class="clear">
<div class="nav">
<a data-toggle="modal" href="#chart-off" class="btn btn-primary btn-lg" id="chart-button"><span class="glyphicon glyphicon-stats"></span> Scatter Chart</a>
<a data-toggle="modal" href="#legend" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-star"></span> About</a>
</div>
<div class="foreword"><strong>FOREWORD :</strong> Comparing cities data is tricky! The representation use a 2011 United Nations dataset published
on <a href="http://en.wikipedia.org/wiki/List_of_urban_agglomerations_by_population_(United_Nations)">Wikipedia</a>.
This dataset is an aggregation of several data providers (national censuses, estimations, regional databases) who do use different methodologies
regarding population count and defining their "urban agglomeration". You may find some more useful information on
<a href="http://esa.un.org/unup/CD-ROM/Urban-Agglomerations.htm">UN</a>,
<a href="http://en.wikipedia.org/wiki/List_of_urban_agglomerations_by_population_%28United_Nations%29">Wikipedia</a> websites, also on
this <a href="http://web.archive.org/web/20130114203922/http://www.uic.edu/cuppa/cityfutures/papers/webpapers/cityfuturespapers/session3_4/3_4whicharethe.pdf">
academic article (pdf)</a> by Forstall & al.
In addition, urban agglomerations are far from being homogeneous entities.
<strong>This dataviz has no other ambition than giving a big picture on urban agglomerations main chracteristics and footprint.</strong>
</div>
</div>
<div class="modal fade" id="legend">
<div class="modal-dialog width-60">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">About</h4>
</div>
<div class="modal-body">
<h5>Inspiration</h5>
<p>This datavizualisation is inspired by <a href="http://geographyeducation.org/articles/comparing-urban-footprints/">
http://geographyeducation.org/articles/comparing-urban-footprints/</a>
(<a href="http://matthartzell.blogspot.fr/2013/09/infogeographic-comparing-urban.html">original article</a>).
Reading Matt Hartzell's article I wanted to explore a schematic and interactive way of visualising urban footprint differences from a city to another.</p>
<h5 class="modal-title">Legend</h5>
<p>
Three types of data are available for displaying : <strong>population</strong> (default), <strong>area</strong>, <strong>surface/inhabitant</strong>.
This datavisualization principles are simply based on <strong>colors</strong> / <strong>shapes</strong> and <strong>sizes</strong> (proportionnal).</p>
<p>1. The <strong>color</strong> variable refers to the geographical zones : </p>
<ul id="gz-legend">
<li><span class="legend-block" data-fetch="africa"></span> Africa</li>
<li><span class="legend-block" data-fetch="asia"></span> Asia</li>
<li><span class="legend-block" data-fetch="australia"></span> Australia</li>
<li><span class="legend-block" data-fetch="middle east"></span> Middle East</li>
<li><span class="legend-block" data-fetch="europa"></span> Europe</li>
<li><span class="legend-block" data-fetch="north america"></span> North America</li>
<li><span class="legend-block" data-fetch="latin america"></span> Latin America</li>
</ul>
<p>2. The <strong>shape (symbol)</strong> variable refers to the represented data : </p>
<ul>
<li>- <em>circle</em> : population (by default)</li>
<li>- <em>rectangle</em> : area</li>
<li>- <em>pentagon</em> : surface per inhabitant</li>
</ul>
<p>3. Finally, the symbol's <strong>size</strong> is proportionnal to the represented data value.</p>
<h5>Credits</h5>
<p>This visualization makes use of <a href="http://d3js.org/">D3js</a> library extended with <a href="http://nvd3.org/">nvd3</a>
for scatter chart generation. It relies on <a href="http://jquery.com/">jQuery</a> and <a href="http://isotope.metafizzy.co/docs/introduction.html">isotope jQuery plugin</a> for presentation,
filtering and sorting (helped by <a href="https://github.com/agilosoftware/objeq">objeq</a>). Webpage use <a href="http://getbootstrap.com/">bootstrap</a> layout. Data is converted from Excel file to json
using <a href="http://www.convertcsv.com/csv-to-json.htm">csv-to-json online</a> converter.</p>
<p>
This dataviz is designed and developed by <a href="http://www.empreinte-urbaine.eu/" title="Access empreinte urbaine website">
<img src="./app/eu_logo.png" alt="Logo empreinte urbaine" /></a>.</p>
<p>
This work is released under <a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en">
Creative common Licence, Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) </a>. <a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en">
<img alt="Licence Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/88x31.png" /></a><br />
Code and data are available on <a href="https://github.com/simogeo/worldcities-urbanfootprint">github repository</a>.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="chart-container">
<div id="scatter-chart" class='ndv3 with-3d-shadow with-transitions'>
<svg></svg>
</div>
</div>
<div id="displaying">
<h3>Available data :</h3>
<div class="btn-group">
<button type="button" class="btn btn-default sort-desc" data-filter="population" data-sort="true">Population</button>
<button type="button" class="btn btn-default" data-filter="area" data-sort="false">Area</button>
<button type="button" class="btn btn-default" data-filter="surfaceinhabitant" data-sort="false">Surface per inhabitant</button>
</div>
</div>
<div id="filters">
<h3>Filtering on geographical area :</h3>
<div class="btn-group">
<button type="button" class="btn btn-default" data-filter="africa">Africa</button>
<button type="button" class="btn btn-default" data-filter="australia">Australia</button>
<button type="button" class="btn btn-default" data-filter="asia">Asia</button>
<button type="button" class="btn btn-default" data-filter="middle-east">Middle East</button>
<button type="button" class="btn btn-default" data-filter="europa">Europa</button>
<button type="button" class="btn btn-default" data-filter="north-america">North America</button>
<button type="button" class="btn btn-default" data-filter="latin-america">Latin America</button>
<button type="button" class="btn btn-default" data-filter="feature">All geographical zones</button>
</div>
</div>
<div id="sorting">
<h3>Sort by :</h3>
<div class="btn-group">
<button type="button" class="btn btn-default" data-filter="city" data-sort="true">City name</button>
<button type="button" class="btn btn-default" data-filter="country" data-sort="true">Country name</button>
</div>
</div>
<div id="main">
<h2 id="title">Data representation : <span class="filter">Population</span> / <span class="gz">All geographical zone</span></h2>
<div id="visualization-container"></div>
</div>
<!-- scatter chart -->
<script src="./lib/novus-nvd3/nv.d3.js"></script>
<script src="./lib/novus-nvd3/src/tooltip.js"></script>
<script src="./lib/novus-nvd3/src/utils.js"></script>
<script src="./lib/novus-nvd3/src/models/legend.js"></script>
<script src="./lib/novus-nvd3/src/models/axis.js"></script>
<script src="./lib/novus-nvd3/src/models/distribution.js"></script>
<script src="./lib/novus-nvd3/src/models/scatter.js"></script>
<script src="./lib/novus-nvd3/src/models/scatterChart.js"></script>
<script>
$(function() {
// $( "#offsetDiv" ).hide();
$('#chart-button').click(function() {
$( "#chart-container" ).slideToggle( "slow", function() {
// Animation complete.
});
});
$( "#chart-container" ).slideToggle();
// Return an array of colors associated to geographical zones
// with specific orders
function getColorsArray(obj) {
var groups = [];
var legendcolors = [];
for (i = 0; i < obj.length; i++) {
if(jQuery.inArray( obj[i].Geographical_zone.toLowerCase(), groups ) === -1 ) {
groups.push(obj[i].Geographical_zone.toLowerCase());
legendcolors.push(colors[obj[i].Geographical_zone.toLowerCase()]);
}
}
return legendcolors;
}
//Format A
var chart;
nv.addGraph(function() {
chart = nv.models.scatterChart()
.showDistX(true)
.showDistY(true)
.useVoronoi(false)
.color(d3.scale.category10().range())
.transitionDuration(300).color(getColorsArray(serie));
;
chart.xAxis.axisLabel(_t('Population'));
chart.yAxis.axisLabel(_t('Area (in m²)'));
chart.xAxis.tickFormat(d3.format('000,f'));
chart.yAxis.tickFormat(d3.format('000,f'));
chart.tooltipContent(function(key, x, y, e, graph) {
console.log(e);
return '<h3>' + e.point.name + '</h3>' +
'<p>' + _t('Surface / inhabitant (m²)') + ' : ' + numeral(e.point.spi).format('0,0.00') + '</p>'
// '<p>' + y + ' on ' + x + '</p>'
});
d3.select('#scatter-chart svg')
.datum(prepareData(serie))
.call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { ('New State:', JSON.stringify(e)); });
return chart;
});
function prepareData(obj) {
var data = [];
var groups = [];
// we create entities grouped by geographical zones
for (i = 0; i < obj.length; i++) {
// console.log(obj[i].Geographical_zone);
if(jQuery.inArray( obj[i].Geographical_zone, groups ) === -1 ) {
// console.log(obj[i].Geographical_zone + " not in array");
groups.push(obj[i].Geographical_zone);
data.push({
key: obj[i].Geographical_zone,
values: []
});
}
}
// we populate each groups
for (j = 0; j < groups.length; j++) {
for(k = 0; k < obj.length; k++) {
if(obj[k].Geographical_zone == groups[j]) {
data[j].values.push({
x: obj[k].Population,
y: obj[k].Area,
size: obj[k].Population,
name: obj[k].City,
spi: obj[k].Spi,
shape: 'circle'
});
}
}
}
// console.log(data);
return data;
}
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-16897542-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>