-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·394 lines (357 loc) · 21.6 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
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>One week of carsharing in Milan</title>
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
<link rel="icon" href="/img/favicon.ico" type="image/x-icon">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--App Style-->
<link href="css/styles.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Cardo:400,400italic,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<!--Mapbox-->
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css' rel='stylesheet' />
<!--Google Analytics-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-5816319-9', 'densitydesign.org');
ga('send', 'pageview');
</script>
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<header class="masthead">
<div class="container">
<div class="intro">
<h1>Seven Days <br>of carsharing</h1>
<hr>
<h2>Exploring and visualizing the Enjoy carsharing service in Milan.</h2>
</div>
</div><!-- /.container -->
</header>
<!-- Fixed navbar -->
<div class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-justified">
<li><a href="#section1">About the Project</a></li>
<li><a href="#section2">Data overview</a></li>
<li><a href="#section3">Routes</a></li>
<li><a href="#section4">Hotspots</a></li>
<li><a href="#section5">Neighbourhoods</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</div><!--/.navbar -->
<div class="container-fluid" id="section1">
<div class="container" >
<div class="row explanation-viz" >
<div class="col-xs-12 col-sm-12 col-md-4">
<h1>About this Project</h1>
<hr>
</div>
<div class="col-xs-12 col-sm-12 col-md-8">
<p>In the last few years many cities around the world have shown important changes in terms of mobility. The rise and growth of many car sharing services has been an important factor in changing the way people move inside the city.<br>
Visualizing and analyzing data from carsharing services and other forms of urban mobility allows for a better understanding of how the city is used and helps to discover the most prominent mobility patterns.<br>
Below is a series of visual explorations of data collected over the time span of one week from one of the main car sharing services in Milan called <a href="https://enjoy.eni.com/it/milano" target="_blank">Enjoy</a>. <br>We started this project as a small experiment to investigate through different techniques how urban traffic patterns evolve day by day and the main characteristics of use of the service.
</p>
</div>
</div>
</div>
</div>
<div class="container-fluid viz-full" id="section2"><!--/section1-->
<div class="container" >
<div class="row explanation-viz" >
<div class="col-xs-12 col-sm-12 col-md-4">
<h1>Data Overview</h1>
<hr>
</div>
<div class="col-xs-12 col-sm-12 col-md-8">
<p>In february 2014 we started scraping data directly from the Enjoy website getting the position of all the cars available every 2 minutes. We collected more than 1,700,000 data points resulting in more than 20,000 rents, 100,000 km travelled and 800 days of usage.<br>
The first visualization we created represents an overview of the total number of rents.
Every step is a car and every rent is represented by a line that connects the pick-up moment and the drop-off. Consequently, the length of the line represent the duration of time a single car has been rented. In this way it’s possible to discover when the service is most used and how the patterns evolve depending on the day of the week and the hour. <br>
<I></I>t’s not a surprise to see that for example the service is mostly used during the day on workdays, while during the weekend there are many rents also during late hours.
</p>
</div>
</div>
</div>
<div class="container">
<div class="row explanation-viz-small">
<div class="overview-scale">
<div class="time"><h4>00:00</h4></div>
<div class="time"><h4>06:00</h4></div>
<div class="time"><h4>12:00</h4></div>
<div class="time"><h4>18:00</h4></div>
<div class="time"><h4>24:00</h4></div>
</div>
<div class="overview-day">
<h4>mon</h4>
<h5>02/24</h5>
<img class="overview-img" src="img/mon.png">
</div>
<div class="overview-day">
<h4>tue</h4>
<h5>02/25</h5>
<img class="overview-img" src="img/tue.png">
</div>
<div class="overview-day">
<h4>wed</h4>
<h5>02/26</h5>
<img class="overview-img" src="img/wed.png">
</div>
<div class="overview-day">
<h4>thu</h4>
<h5>02/27</h5>
<img class="overview-img" src="img/thu.png" >
</div>
<div class="overview-day">
<h4>fri</h4>
<h5>02/28</h5>
<img class="overview-img" src="img/fri.png">
</div>
<div class="overview-day">
<h4>sat</h4>
<h5>03/01</h5>
<img class="overview-img" src="img/sat.png">
</div>
<div class="overview-day">
<h4>sun</h4>
<h5>03/02</h5>
<img class="overview-img" src="img/sun.png">
</div>
</div>
<div class="row sum-first">
<div class="label-sum">
<div class="time"><h4>total rents</h4></div>
</div>
<div class="overview-day">
<h2>2,580</h2>
</div>
<div class="overview-day">
<h2>2,723</h2>
</div>
<div class="overview-day">
<h2>3,255</h2>
</div>
<div class="overview-day">
<h2>3,337</h2>
</div>
<div class="overview-day">
<h2>3,200</h2>
</div>
<div class="overview-day">
<h2>3,898</h2>
</div>
<div class="overview-day">
<h2>3,258</h2>
</div>
</div>
<div class="row sum">
<div class="label-sum">
<div class="time"><h4>rent hours<br>
</h4></div>
</div>
<div class="overview-day">
<h2>2,623</h2>
</div>
<div class="overview-day">
<h2>2,365</h2>
</div>
<div class="overview-day">
<h2>2,893</h2>
</div>
<div class="overview-day">
<h2>2,762</h2>
</div>
<div class="overview-day">
<h2>2,842</h2>
</div>
<div class="overview-day">
<h2>3,279</h2>
</div>
<div class="overview-day">
<h2>2,470</h2>
</div>
</div>
<div class="row sum">
<div class="label-sum">
<div class="time"><h4>km traveled <br>
(estimated)</h4></div>
</div>
<div class="overview-day">
<h2>11,111</h2>
</div>
<div class="overview-day">
<h2>11,689</h2>
</div>
<div class="overview-day">
<h2>14,090</h2>
</div>
<div class="overview-day">
<h2>14,543</h2>
</div>
<div class="overview-day">
<h2>14,442</h2>
</div>
<div class="overview-day">
<h2>17,271</h2>
</div>
<div class="overview-day">
<h2>14,766</h2>
</div>
</div>
</div>
</div>
</div>
</div><!--/section2-->
<div class="container-fluid" id="section3">
<div class="container" >
<div class="row explanation-viz" >
<div class="col-xs-12 col-sm-12 col-md-4">
<h1>Routes</h1>
<hr>
</div>
<div class="col-xs-12 col-sm-12 col-md-8">
<p>Since Enjoy doesn’t provide any information about the routing, but just the positions of the available cars, we set a starting point every time a car becomes unavailable and an ending point when it becomes available again. We used an open routing service (<a href="http://project-osrm.org/" target="_blank">Open Source Routing Machine</a>) to estimate route geometries for each rent.<br>
The routes data has then been translated into a geojson file and visualized with <a href="http://www.processing.org" target="_blank">Processing</a>, using the <a href="http://unfoldingmaps.org/" target="_blank">Unfolding library</a>. Each rent has a start and an end time, and could hence be displayed in its own timeframe. In addition, the position of the car in the path was computed by interpolating its coordinates along the route with respect to the total duration and length of the rent.<br>
The resulting routes represent the most likely way to go from the start point to the end point in the city. Obviously, the main streets (especially the rings of the city), are the most visible. It should be noted that this phenomenon is also the result of the service we used to get the routes that tend to privilege the shortest path instead of the quickest one and it doesn’t take in account other factors like traffic and rush hours.<br>
An interesting phenomenon we can notice in the video is a general movement from the center and the main street during the day to the more peripheral areas during the night.</p>
</div>
</div>
</div>
</div>
<div class="container-fluid viz-full" >
<div class="video-responsive">
<iframe id="playerVimeo" src="//player.vimeo.com/video/98626446?title=0&byline=0&portrait=0&color=E8C102&loop=1" width="954" height="537" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
<div class="container">
<div class="row explanation-viz" >
<div class="col-xs-12 col-sm-12 col-md-4">
<h1>Routes during <br>the week</h1>
<hr>
</div>
<div class="col-xs-12 col-sm-12 col-md-8">
<p>In this map we can see all the routes of the week aggregated by time spans on an interactive map created with <a href="https://www.mapbox.com/tilemill/" target="_blank">Tilemill</a> and <a href="https://www.mapbox.com/mapbox.js/api/v1.6.4/" target="_blank">Mapbox.js</a>. Selecting the filters on the right of the map is possible to select specific time spans and compare them.</p>
</div>
</div>
</div>
<div class="container-fluid viz-full">
<div id='map'><nav id='menu-ui' class='menu-ui'></nav></div>
</div>
<div class="container-fluid" id="section4">
<div class="container" >
<div class="row explanation-viz" >
<div class="col-xs-12 col-sm-12 col-md-4">
<h1>Hotspots</h1>
<hr>
</div>
<div class="col-xs-12 col-sm-12 col-md-8">
<p>Analyzing the availability of cars and their position is also an interesting way to *read* the city and understand the most prominent mobility patterns. Depending on the time of the day and the amount of cars available we can understand which areas of the city are more active and when.<br>
In the visualization below we wanted to visualize this using a <a href="http://en.wikipedia.org/wiki/Voronoi_diagram" target="_blank">Voronoi diagram</a>.<br> This kind of visualization not only shows us the position of the cars, represented by yellow dots, but also the area *covered* by each car. The areas surrounding the cars contain all the points on the map closer to that car than to any other. As we have seen in the other map the most visible pattern is the movement of cars from the center during the day to the more peripheral areas during the night. As a result of this phenomenon, users generally have to walk a lot in the very central areas during the night before reaching a car.<br>
The map was realized and animated using the amazing <a href="http://d3js.org/" target="_blank">d3.js javacript library</a></p>
</div>
</div>
</div>
</div>
<div class="container-fluid viz-full">
<div id="voronoi"></div>
</div>
<div class="container-fluid" id="section5">
<div class="container" >
<div class="row explanation-viz" >
<div class="col-xs-12 col-sm-12 col-md-4">
<h1>neighbourhoods</h1>
<hr>
</div>
<div class="col-xs-12 col-sm-12 col-md-8">
<p>To better understand the patterns we decided to plot, beside the maps, the number of available cars for each of the 88 N.I.L. (Nuclei di identità locale) using a stream graph. N.I.L. are the new official neighbourhoods in Milan: you can check a map below or download the <a href="http://dati.comune.milano.it/dato/item/61-61-nil-nuclei-didentita-locale.html" target="_blank">shapefiles</a> from the <a href="http://dati.comune.milano.it/" target="_blank">open data milano platform</a>.
</p>
<div id="nil">
</div>
<p>
The streams below show the number of cars available every hour for each N.I.L. and they are sorted by the total amount of cars available during the whole week.<br>
As we can see the neighbourhoods with the highest number of cars are the more peripheral ones (like Gallaratese and Baggio). In these neighbourhoods we also notice a pretty stable availability of cars while in some other like Duomo (the most central area) or Centrale (the main train station) is clearly visible a pattern of activity during the day.<br>
Another curious insight are the peaks we see in some areas that are interested by some particular events like San Siro (the area around the stadium that host FC Inter and AC Milan matches) where is clearly visible a peak on Sunday evening, day of the big match between <a class="link-invisible" href="http://www.datasport.it/calcio/2013-2014/seriea/juventus/serie-a-milan-juventus-0-2-gol-highlights-video.htm" target="_blank">AC Milan and Juventus </a>.
</p>
</div>
</div>
</div>
</div>
<div class="container-fluid"><!--/section1-->
<div class="container" >
<div class="row" id="streams">
<div id="stream-label">
</div>
<div id="stream-viz">
</div>
</div>
</div>
</div>
<div class="container-fluid disclaimer">
<div class="container" >
<div class="col-xs-12 col-sm-12 col-md-12">
<h3>note</h3>
<p class="column4">This project is intended as a small experiment with an Academic purpose. Our goal is to find out new way to explore, analyze and visualize mobility patterns in the city without any commercial or advertising purpose.</br>
As we explain in the previous description we don't have the data about the routes of each car but we used a routing open service to estimate them.
If you are interested about this topic please take a look at this <a href="http://mappable.info/one-week-of-carsharing/" target="_blank" target="_blank">project</a> by <a href="http://mappable.info/" target="_blank">Mappable</a> that have been particularly inspiring for us.</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="col-lg-4">
<p>A project by <a href="http://www.densitydesign.org">DensityDesign</a> © 2014</p>
<a href="http://www.densitydesign.org"><img src="img/density_logo.png"></a>
</div>
<div class="col-lg-4">
<h3>Team</h3>
<p>Matteo Azzi<br>Daniele Ciminieri<br>Tommaso Elli<br>Emilio Patuzzo<br>Alessio Sciascia<br>Giorgio Uboldi</p>
</div>
<div class="col-lg-4">
<h3>share</h3>
<p>
<a class="share" target="_blank" href="http://www.pinterest.com/pin/create/button?media=http://labs.densitydesign.org/carsharing/img/cover.png&description=Exploring%20and%20visualizing%20seven%20days%20of%20carsharing%20in%20Milano&url=http://labs.densitydesign.org/carsharing"><span class="icon-pinterest"></span></a>
<a class="share" target="_blank" href="https://twitter.com/intent/tweet?text=Seven%20days%20of%20carsharing%20in%20Milan%20via%20@densitydesign%20http://labs.densitydesign.org/carsharing"><span class="icon-twitter"></span></a>
<a class="share" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://labs.densitydesign.org/carsharing/"><span class="icon-facebook"></span></a>
<a class="share" target="_blank" href="https://plus.google.com/share?url=http://labs.densitydesign.org/carsharing"><span class="icon-googleplus"></span></a>
</p>
</div>
</div>
</div>
</div>
</div><!--/wrap-->
<!-- script references -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/d3/d3.js"></script>
<script src="bower_components/topojson/topojson.js"></script>
<script src="bower_components/d3-tile/index.js"></script>
<!--Vimeo API-->
<script src='bower_components/vimeo-api/index.js'></script>
<script src="js/scripts.js"></script>
<script src="js/streams.js"></script>
<script src="js/carvoronoi.js"></script>
</body>
</html>