-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
347 lines (284 loc) · 13.4 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
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style/leaflet.css" />
<link rel="stylesheet" href="style/style.css" />
<link rel="stylesheet" href="style/jquery-ui.css" />
<script src="scripts/d3.v3.min.js"></script>
<script src="scripts/d3-queue.v3.min.js"></script>
<script src="scripts/d3-legend.js"></script>
<script src="scripts/leaflet.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>
<script src="scripts/jquery-3.1.1.js" type="text/javascript"></script>
<script src="scripts/jquery-ui.js" type="text/javascript"></script>
</head>
<body>
<!-- Loader pendant le chargement des fichiers -->
<!--<div class="se-pre-con"></div>-->
<div class="wrap">
<div class="left">
<div class="left">
<input id="slider" type="range" value="1" min="1" max="100" step="1" />
<span id="day"></span>
</div>
<div class="right">
<a href="#" title="Play video" class="play" id="play"></a>
</div>
</div>
<div class="right">
<span id="hour">00:00</span>
</div>
<div class="center">
<img src="img/bike.png" height="40" width="40">
<img src="img/plus.png" height="20" width="20">
<img src="img/metro.png" height="45" width="45"> Visualisation de l'impact des arrivées de rames de métro sur les stations Vélo'v
</div>
</div>
<div id="map" />
<div id="dialog" class="flora" title="Bienvenue dans Vélo'v DataViz !">
<p>
<span style="color:teal;"><b>À propos de Vélo'v</b></span>
</p>
<p>
Vélo'v est un service de partage de vélos dans la métropole lyonnaise. Lancé en mai 2005, le service Vélo'v comprend 349 stations à travers Lyon et Villeurbanne et environ 4000 vélos. Les données de ce service sont en partie en Open Data et concernent
la localisation des différentes stations et l'historique (mis à jour en temps réel) du nombre de vélos disponibles.
</p>
<p>
<span style="color:teal;"><b>La visualisation</b></span>
</p>
<p>
Les vélos en libre circulation du service Vélo’v sont utilisés par un grand nombre d’usagers à Lyon. Certaines personnes combinent plusieurs moyens de transport pour arriver à destination (trajet multimodal) : bus, métro et vélo.
</p>
<p>Cette visualisation permet de mettre en valeur l'impact de l'arrivée des rames de métro sur l’évolution du parc de vélos des différentes stations de Vélo’v voisines dans la ville de Lyon. Elle s'adresse aux gestionnaires d'infrastructure de transport
et aux gestionnaires du service Vélov afin qu'ils puissent avoir un aperçu de la façon dont les différentes modalités de transport s'articulent entre elles et de les faire évoluer si besoin.
</p>
<p>
Une évolution pourrait être réalisée pour ajouter l'impact du tram et du bus, à l'instar de ce qui a été fait pour le métro.
</p>
<p>
<span class="ui-icon ui-icon-notice" style="float:left; margin:0 7px 50px 0;"></span> Le temps n'est pas synchronisé entre les différentes rames. Cela signifie que les rames de métro sont créées et lancées pour chaque trajet (Aller ou Retour).
De fait, les lignes à faible fréquence (ligne C) s'arrêteteront plus tôt dans la visualisation que les lignes à forte fréquence (ligne D).
</p>
<p>
<span style="display: inline-block;">Le bouton
<a href="#" title="Play video" class="play playLegend"></a>
apparaît dans l'en-tête une fois les données chargées. Cliquer dessus pour lancer la visualisation.</span>
</p>
<p>
<span style="color:teal;"><b>Légende :</b></span>
<ul class="ordering">
<li><span></span>Nombre de vélos disponibles</li>
<li><span></span>Nombre d'emplacements libres disponibles</li>
<li><span class="full-circle"></span>Nombre de vélos emprunté à chaque arrivée de métro</li>
</ul>
</p>
</div>
<script>
// On cache le bouton play tant que les données ne sont pas chargées
$("#play").hide();
$(document).ready(function() {
$("#dialog").dialog({
modal: true,
maxWidth: 900,
maxHeight: 670,
width: 900,
height: 670,
buttons: {
"OK": function() {
$(this).dialog("close");
// run();
}
}
});
});
// $('div#dialog').on('dialogclose', function(event) {
// run();
// });
var icon = $('#play');
icon.click(function() {
icon.toggleClass('active');
run();
$("#play").hide();
return false;
});
var initial_zoom = 14;
var current_zoom = initial_zoom;
var zoom_factor = 1;
var needReset = true;
// Temps de trajet théorique des différents lignes (ms)
var durationA = 1260000; // 21 minutes
var durationB = 1020000; // 17 minutes
var durationC = 540000; // 9 minutes
var durationD = 1500000; // 25 minutes
var durationF1 = 200000; // 3m20s
var durationF2 = 120000; // 2 minutes
var duration = 10000;
// var divider = 1000;
// var divider = 200;
var divider = 200;
// var divider = 50;
var delay_between_metro = 2000;
// var delay_between_metro = 1000;
// var delay_between_metro = 500; // milliseconds
// var ring_interval = 500;
var ring_interval = 250;
// Distance pour prendre en compte les stations Vélov voisine
// des stations de métro
var distanceToStation = 200;
var details_line = {};
var selectedLine = "";
var stop_points = {};
stop_points['type'] = 'FeatureCollection';
stop_points['features'] = [];
var total_bike_stations = {};
var nearby_bike_stations = {};
var bike_stations_history = {};
var stop_times = {};
var stop_times_hash = {};
// Date & Jour courant
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var current_day = "2016-12-23";
// var current_day;
var available_days = [];
var continue_draw_trains = true;
var map = L.map('map').setView([45.756000, 4.850000], initial_zoom);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18,
id: 'stanislasleroy.293gad2b',
accessToken: 'pk.eyJ1Ijoic3RhbmlzbGFzbGVyb3kiLCJhIjoiY2l3N29ieTFhMDAwbzJ6bzYydmM0cjM4cyJ9.a9t7av6dljaj5TN_FA4XvQ'
}).addTo(map);
// Affichage des lignes de métro cachées
map.on('click', function(d) {
var e = d.originalEvent.path[0];
if (!d3.select(e).attr("class")) {
selectedLine = "";
d3.selectAll('.train').each(function(d, i) {
d3.select(this).classed("hiddenLine", false);
});
if (map.getZoom() >= 15) {
d3.selectAll('.pie').each(function(d, i) {
d3.select(this).classed("hiddenLine", false);
});
}
}
})
var transform = d3.geo.transform({
point: projectPoint
});
var __path__ = d3.geo.path().projection(transform);
var svg = d3.select(map.getPanes().overlayPane)
.append("svg");
var g = svg.append("g").attr("class", "leaflet-zoom-hide");
var tooltip = d3.select('body').append('div')
.attr('class', 'hidden tooltip');
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.number;
});
var arc = d3.svg.arc()
.outerRadius(30)
.innerRadius(20);
var color = d3.scale.category10();
// Contrôle du slider permettant de
d3.select("#slider").on("input", function() {
// console.log(+this.value);
d3.select('#day').html(available_days[+this.value - 1]);
continue_draw_trains = false;
// current_day = available_days[+this.value - 1];
d3.selectAll('.train').each(function(d, i) {
d3.select(this).remove();
});
continue_draw_trains = true;
details_line = {};
animateMetro(available_days[+this.value - 1]);
});
d3.queue()
.defer(d3.json, "data/point_arret.json")
.defer(d3.json, "data/ligne_metro.json")
.defer(d3.json, "data/stations.json")
.defer(d3.json, "neptune/301.json")
.defer(d3.json, "neptune/302.json")
.defer(d3.json, "neptune/303.json")
.defer(d3.json, "neptune/304.json")
.defer(d3.json, "neptune/325.json")
.defer(d3.json, "neptune/326.json")
.defer(d3.json, "GetVelovHistory/history4.json")
.defer(d3.json, "data/tram.json")
.defer(d3.json, "data/bus.json")
.awaitAll(displayPrimaryLine);
/*
* Affichage des lignes de métro et des stations
*/
function displayPrimaryLine(error, files) {
// Affichage des lignes de tram et de bus
// Placé à la fin pour augmenter la taille du svg,
// sinon le svg est borné par les lignes de métro
// si l'affichage des lignes secondaires est en amont
console.log("Affichage des lignes secondaires");
displaySecondaryLine(files[10], "pathTram");
displaySecondaryLine(files[11], "pathBus");
// Affichage des lignes de Métro
console.log("Affichage des lignes de Métro");
displayMetroLines(files[1]);
// Affichage des stations Vélo'v
console.log("Affichage des stations Vélo'v");
displayBikeStations(files[2]);
total_bike_stations = files[2];
loadBikeStationsHistory(files[9]);
// On ajoute les codes Titan des lignes de métro pour pouvoir récupérer les points d'arrêts des lignes
for (var i in files[1].features) {
var id = files[11].features[i].properties.code_titan;
id = id.substring(0, 3);
details_line[id] = {};
details_line[id].id = id;
details_line[id].color = files[1].features[i].properties.couleur;
}
// On ajoute les codes Titan des lignes de métro pour pouvoir récupérer les points d'arrêts des lignes
for (var i in files[0].features) {
var id = files[0].features[i].properties.desserte.substring(0, 3);
if (details_line[id]) {
if (!details_line[id].stops)
details_line[id].stops = [];
var stop = {};
stop.geo = {};
stop.geo.x = files[0].features[i].geometry.coordinates[0];
stop.geo.y = files[0].features[i].geometry.coordinates[1];
details_line[id].stops.push(stop);
}
}
var effective_stop_points;
for (var i = 3; i < 9; i++) {
// Test
// for (var i = 5; i < 6; i++) {
effective_stop_points = getEffectiveStopPointsForJSON(files[i]);
loadStopPoints(files[i], effective_stop_points);
loadStopTimes(files[i], effective_stop_points);
}
// Recherche des stations Vélo'v voisines des stations de métro
console.log("Recherche des stations Vélo'v voisines");
getNearbyBikeStations();
// Affichage des stations de métro
console.log("Affichage des stations de métro");
displayMetroStations(stop_points);
// Affichage des lignes de tram et de bus
// Placé à la fin pour augmenter la taille du svg,
// sinon le svg est borné par les lignes de métro
// si l'affichage des lignes secondaires est en amont
// console.log("Affichage des lignes secondaires");
// displaySecondaryLine(files[10], "pathTram");
// displaySecondaryLine(files[11], "pathBus");
// Affichage des cercles concentriques
console.log("Affichage des cercles concentriques");
displayDonuts();
// $(".ui-dialog-buttonpane button:contains('OK')").button("enable");
$("#play").show();
}
function run() {
// Animation des rames de métro
animateMetro(available_days[+this.value - 1]);
}
</script>
</body>
</html>