forked from hanadyabboud/Projet-data-Viz
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
361 lines (313 loc) · 22.9 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oxygen">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Avenir">
<title>La voiture à Paris</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fullpage.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="fullpage.js"></script>
<script src="fullpage.extensions.min.js"></script>
<script src="scrolloverflow.js"></script>
<script src="utils.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".box").on("click", "li", function(){
var tabsId = $(this).attr("id");
$(this).addClass("active").siblings().removeClass("active");
$("#" + tabsId + "-content-box").addClass("active").siblings().removeClass("active");
})
})
</script>
</head>
<body>
<div id="fullpage">
<section class="section" id="section1"><h1 class="first1">Quel avenir pour la voiture à Paris?</h1></section>
<section class="section" id="section2">
<h1 class="title">POURQUOI S'Y INTERESSER ?</h1>
<div>
<div class="row">
<div class="column2">
<h1 class="sub-title">Mobilité, liberté</h1>
<p class="description">
Bouger, se déplacer, voyager… Acquise au fur et à mesure de l’évolution et de la démocratisation des transports,
la mobilité est une liberté dont personne ne voudrait être privé.
Récemment, la hausse du prix du carburant amène les Français à se poser la question de leurs déplacements :
sommes-nous prêts à nous passer d’une voiture individuelle, si pratique ? <br><br>
Alors que 89% des Parisiens affirment avoir le choix entre plusieurs moyens de transport selon l’INSEE,
on constate effectivement que l’usage de la voiture est à la marge de celui des transports en communs.
Avec le taux d’équipement le plus faible de France (<font color="green"><b>37,6%</b></font> contre <font color="blue"><b>86%</b></font> en Pays de la Loire), uniquement 13% de Parisiens se rendent au travail en voiture. <br><br>
Dans une ville qui laisse de plus en plus de place aux autres modes de transport, il semble légitime de se poser la question de l’avenir de la voiture à Paris.
Et pour mieux l’anticiper, nous proposons de nous intéresser à son évolution sur les dernières années, tout en y intégrant la notion de la pollution de l’air.
En effet, n’oublions pas que la pollution entraîne en France 48 000 décès par an.
<br><br>
</p>
</div>
<div class="column2">
<h1 class="sub-title">Taux d'équipement en voiture personnelle</h1>
<img src="IledeFrancevs.png" style="margin-left:60px; margin-top:40px; box-shadow: 5px 5px 5px rgba(0,0,0,.5);" width='80%'>
<h6 style="padding-left: 60px">source:INSEE</h6>
</div>
</section>
<section class="section" id="section3">
<h1 class="title">MOINS DE VOITURES CIRCULENT A PARIS EN 2017 QU’EN 2014</h1>
<p class="description2">Après une augmentation continue du débit routier depuis 2013, celui-ci chute brutalement en 2017.
Les voies sur berge ont été officiellement rendue piétonnes cette même année. Faut-il y voir une causalité par effet de découragement ?
</p>
<img class="graph" src="debit.png" >
</section>
<section class="section" id="section4">
<h1 class="title">...Et le trafic est donc un peu moins dense</h1>
<p class="description2">Contrairement aux idées reçues, le trafic routier est moins dense en 2017 qu’en 2016. La piétonnisation de certains axes n’a donc pas créé d’embouteillages supplémentaires aux moyennes des années précédentes.
</p>
<img class="graph" src="taux.png" >
</section>
<section class="section" id="section5">
<h1 class="title">malgré cela, respirer l'air parisien c'est équivalent à fumer 15 cigarettes par mois...</h1>
<h2 class="sub-title">C'est toujours mieux qu'à Pékin... Mais on peut faire mieux, non?</h2>
<div class="row">
<div class="column2">
<img class="sub-img" src="CigarParis.png" >
<p class="description3">
VIVRE À PARIS
<br>15 CIGARETTES / MOIS
</p>
</div>
<div class="column2">
<img class="sub-img" src="CigarPekin.png" >
<p class="description3">
VIVRE À PEKIN
<br>121 CIGARETTES / MOIS
</p>
</div>
</div>
<p class="description">L’ONG européenne Transport et Environnement a relevé les indices de pollution aux particules fines à Paris en août 2018
et les a converti en équivalents cigarette selon la méthode de l’organisation Berkeley Earth. <br>
Selon cette méthode, respirer 22 microgrammes/m3 de particules fines produit les mêmes effets sur les poumons que le tabagisme.</p>
</section>
<section class="section" id="section6">
<h1 class="title">QUELS SONT LES PRINCIPAUX POLLUANTS GÉNÉRÉS PAR LE TRAFIC ? </h1>
<div class="container">
<div class="one">
<h2 class="sub-title">Dioxyde d'Azote<br>NO2</h2>
<p class="description2">
En tant que « polluant toxique » et parce qu'il est l'un des polluants majeurs à Paris, le dioxyde d'azote fait l'objet d'un suivi obligatoire
par les observatoires de la pollution de l'air. En France, sa valeur limite horaire est de 200 µg/m3, fréquemment dépassée dans les grandes villes
et près des grands axes routiers ou aéroports en l'absence de vent ou de circulation de l'air.
</p>
<img class="sub-img" src="NO2.png" style="width:40%" >
</div>
<div class="two">
<h2 class="sub-title">Particules fines <br>PM10 & PM2.5</h2>
<p class="description2">
Outre les gaz, l'atmosphère contient des matières en suspension que l'on regroupe sous le terme général de "particules fines".
Ces poussières sont souvent issues de combustions incomplètes.
<br>Les particules fines pénètrent en profondeur dans les poumons. Elles peuvent être à l’origine d’inflammations,
et de l’aggravation de maladies cardiaques et pulmonaires. De plus, elles peuvent transporter des composés cancérigènes
absorbés sur leur surface jusque dans les poumons.
</p>
<img class="sub-img" src="PM10.png" style="width:35%" >
</div>
</div>
</section>
<section class="section" id="section7">
<h1 class="title">Comment se positionne-t-on par rapport au reste des villes?</h1>
<br><br><br><br><br><br>
<img class="graph" src="saba_joanne.png" >
</section>
<section class="section" id="section8">
<h1 class="title">Comment la qualité de l'air évolue-t-elle depuis 5 ans?</h1>
<p class="description2">La pollution aux particules fines recule depuis 2013, et cela malgré l’augmentation continue du trafic routier jusqu’à 2016...
Comment est-ce possible ?<br>
Le niveau de NO2 reste cependant très préoccupant, malgré sa légère diminution.</p>
<div class="box" style="width:68%">
<ul>
<li id="tab-one1" class="active">
<h4>PM10</h4>
</li>
<li id="tab-two1">
<h4>NO2</h4>
</li>
</ul>
<div class="content2">
<div id="tab-one1-content-box" class="hide active">
<img src="PM10evol.png" style="height:350px;">
</div>
<div id="tab-two1-content-box" class="hide" >
<img src="NO2evol.png" style="height:350px;">
</div>
</div>
</div>
</section>
<section class="section" id="section9">
<h1 class="title">D'où vient cette pollution?</h1>
<p class="description2" style="margin-left:10%; margin-right:10%">En fait, les particules fines ne sont pas essentiellement générées par les moteurs,
mais par le frottement des pneus et des plaquettes de freins. Ceci explique que les axes les plus encombrés
soient les plus pollués ! En fait, ce sont les embouteillages qui provoquent plus de pollution.
L’adoption de véhicules électriques n’est donc pas une solution miracle !
</p>
<div class="box">
<ul>
<li id="tab-one" class="active">
<h4>2013</h4>
</li>
<li id="tab-two">
<h4>2014</h4>
</li>
<li id="tab-three">
<h4>2015</h4>
</li>
<li id="tab-four">
<h4>2016</h4>
</li>
<li id="tab-five">
<h4>2017</h4>
</li>
</ul>
<div class="content">
<div id="tab-one-content-box" class="hide active">
<img class="map" src="2013.png" >
<img class="map2" src="PM10dep-2013.png">
</div>
<div id="tab-two-content-box" class="hide">
<img class="map" src="2014.png" >
<img class="map2" src="PM10dep-2014.png">
</div>
<div id="tab-three-content-box" class="hide">
<img class="map" src="2015.png" >
<img class="map2" src="PM10dep-2015.png">
</div>
<div id="tab-four-content-box" class="hide">
<img class="map" src="2016.png" >
<img class="map2" src="PM10dep-2016.png">
</div>
<div id="tab-five-content-box" class="hide">
<img class="map" src="2017.png" >
<img class="map2" src="PM10dep-2017.png">
</div>
</div>
</div>
</section>
<section class="section" id="section10">
<h1 class="title">QUELLE RÉALITÉ SE CACHE DERRIÈRE LES EMBOUTEILLAGES ? </h1>
<p class="description">Très concrètement, il s’agit en grande partie de personnes qui utilisent leur voiture pour se rendre au travail. <br><br>
Cela explique pourquoi le trafic chute radicalement les week-ends et en été.<br>
Quelles alternatives pourrions-nous leur proposer pour diminuer le trafic et les aider à économiser en carburant tout en préservant notre atmosphère ?
</p>
<div class="row">
<div class="column">
<img src="MoyHeures.png" alt="Snow" style="width:100%; box-shadow: 5px 5px 5px rgba(0,0,0,.5);">
</div>
<div class="column">
<img src="MoyJournalieres.png" alt="Forest" style="width:100%; margin-top:15px; box-shadow: 5px 5px 5px rgba(0,0,0,.5);">
</div>
<div class="column">
<img src="MoyMensuelles.png" alt="Mountains" style="width:100%; margin-top:65px;box-shadow: 5px 5px 5px rgba(0,0,0,.5);">
</div>
</div>
</section>
<section class="section" id="section11">
<h1 class="title">PLUS DE TRANSPORTS EN COMMUN POUR MOINS D’EMBOUTEILLAGES ? </h1>
<div>
<p class="description2" style="margin-bottom:0; padding-bottom: 1px;">Dans le récent classement Greenpeace Mobilités Durables (2018), Paris se hisse à la 7ème place.
Loin derrière les exemples nordiques, Paris dépasse cependant Berlin et Londres. Ce classement se base sur cinq critères :
<ul style="margin-right: 15%;margin-left: 15%; margin-bottom: 1%; margin-top:0; padding-top: 1px; padding-bottom: 1px; overflow: auto; text-align: justify;
font-family: Avenir;
font-size: 1.2em;">
<li>
<p style="margin-bottom:0; margin-top:0.3em">transport public</p>
</li>
<li>
<p style="margin-bottom:0; margin-top:0.3em">sécurité des cyclistes et des piétons</p>
</li>
<li>
<p style="margin-bottom:0; margin-top:0.3em">qualité de l’air</p>
</li>
<li>
<p style="margin-bottom:0; margin-top:0.3em">restrictions à l’usage de la voiture / incitations aux mobilités durables</p>
</li>
<li>
<p style="margin-bottom:0; margin-top:0.3em">mobilité active</p>
</li>
</ul>
</p>
<img src="CLASSEMENT.png" class="graph2" >
</div>
</section>
<section class="section" id="section12">
<h1 class="title">PARIS BIEN PLACÉE SUR LA MOBILITÉ ALTERNATIVE A LA VOITURE</h1>
<div>
<div class="row">
<div class="column2">
<img src="vizv3.png" style="margin-left:100px; margin-top:40px; box-shadow: 5px 5px 5px rgba(0,0,0,.5);" width='80%'>
</div>
<div class="column2">
<p class="description2">
<br><br><br>Un des critères de ce classement est l’analyse de la mobilité des habitants de la ville.<br>
Comparée à ses voisines européennes, Paris n’est pas une si mauvaise élève puisqu’elle arrive en 4eme position
sur la qualité de son réseau de transports en commun (img 1). 40% des parisiens utilisent les transports en commun,
et le 1er moyen de transport le plus utilisé est la marche à pieds (img 2) ! <br>
Une statistique qui dépasse de loin toutes les villes sondées, mais qui illustre un gros retard sur l’usage du vélo (3%).
<br><br>
</p>
</div>
</section>
<section class="section" id="section13">
<h1 class="title">TRANSPORTS PUBLICS + RESTRICTION DE CIRCULATION<br>
L’ÉQUATION GAGNANTE ? </h1>
<p class="description2">La vignette Crit’air est obligatoire dans plusieurs grandes villes depuis 2017.
Cette dernière classe les véhicules en six catégories selon leurs émissions polluantes.
Lors des pics de pollution, les véhicules diesel construits avant 2005 (Crit’air 4 et 5) se voient interdits de circulation.
Et Paris va plus loin, puisque les véhicules diesel produits avant 2001 (Crit’air 5) n’ont plus le droit d’y rouler que le week-end.
</p>
<img class="graph" src="vizz.png" style="width:55%; margin-left:22.5%; margin-right:22.5%" >
</section>
<section class="section" id="section14">
<h1 class="title">QUELQUES PISTES POUR DÉBLOQUER LE TRAFIC
<br>& PRÉSERVER NOTRE ATMOSPHÈRE ...</h1>
<br><br><br><br>
<p class="description">La Mairie de Paris envisage une disparition des voitures à essence d’ici 2030. <br> <br>
Voici quelques pistes pour s’y préparer :<br> <br>
Utiliser les transports en commun → <a href="https://www.ratp.fr/">découvrir le monde magique de la RATP</a> <br> <br>
Recourir au covoiturage pour se rendre au travail → <a href="https://www.idvroom.com/covoiturage-region/trajet-ile-de-france">rechercher un trajet en Ile de France </a> <br> <br>
Se mettre au vélo → <a href="https://www.paris.fr/services-et-infos-pratiques/deplacements-et-stationnement/deplacements/lutte-contre-la-pollution-les-aides-a-la-mobilite-5373">là encore, la Mairie peut vous aider !</a>
</p>
</section>
<section class="section" id="section15">
<h1 class="title">Sources</h1>
<p class="description">
<br><br><br>
<a href="http://www.santepubliquefrance.fr/Actualites/Pollution-atmospherique-et-sante-Sante-publique-France-publie-de-nouveaux-resultats">http://www.santepubliquefrance.fr/Actualites/Pollution-atmospherique-et-sante-Sante-publique-France-publie-de-nouveaux-resultats</a> <br> <br>
<a href="https://www.notre-planete.info/actualites/38-pollution-air-Paris-amelioration">https://www.notre-planete.info/actualites/38-pollution-air-Paris-amelioration</a> <br> <br>
<a href="http://www.airparif.asso.fr/actualite/detail/id/213">http://www.airparif.asso.fr/actualite/detail/id/213</a><br><br>
<a href="https://www.greenpeace.fr/mobilite-pollution-de-lair-classement-de-treize-grandes-villes-europeennes-fr/">https://www.greenpeace.fr/mobilite-pollution-de-lair-classement-de-treize-grandes-villes-europeennes-fr/</a><br><br>
<a href="https://sciencepost.fr/2018/08/vivre-a-paris-vous-ferait-fumer-lequivalent-de-183-cigarettes-par-an/">https://sciencepost.fr/2018/08/vivre-a-paris-vous-ferait-fumer-lequivalent-de-183-cigarettes-par-an/</a><br><br>
<a href="https://www.airparif.asso.fr/_pdf/publications/Rbilan75_2017.pdf">https://www.airparif.asso.fr/_pdf/publications/Rbilan75_2017.pdf</a><br><br>
<a href="https://www.data.gouv.fr/fr/datasets/donnees-trafic-issues-des-capteurs-permanents/#">https://www.data.gouv.fr/fr/datasets/donnees-trafic-issues-des-capteurs-permanents/</a><br><br>
<a href="https://opendata.paris.fr/explore/dataset/referentiel-comptages-routiers/map/?location=13,48.84642,2.36455">https://opendata.paris.fr/explore/dataset/referentiel-comptages-routiers/map/?location=13,48.84642,2.36455</a><br><br>
<a href="https://www.airparif.asso.fr/telechargement/telechargement-statistique">https://www.airparif.asso.fr/telechargement/telechargement-statistique</a><br><br>
</p>
</section>
<section class="section" id="section16">
<h1 class="title">Qui sommes-nous?</h1>
<p class="description2">Ce site a été réalisé par quatre étudiantes du master Management et Innovation Numérique à Télécom ParisTech et Sciences Po Paris:
<b>Hanady Abboud, Juliette Dixmier, Claire Pétreault,</b> et <b>Joanne Saba</b>, dans le cadre d’un cours de data visualisation.
<br><br>
Nous tenons à remercier notre enseignant, <b>M. Samuel Huron</b>, qui nous a aidé dans la réalisation de ce site web.
</section>
</div>
<script type="text/javascript">
var myFullpage = new fullpage('#fullpage', {
anchors: ['1', '2', '3', '4','5', '6', '7', '8', '9', '10','11','12','13','14','15','16'],
navigation: true,
navigationPosition: 'right',
navigationTooltips: ['1', '2', '3', '4','5', '6', '7', '8', '9', '10','11','12','13','14','15','16']
});
</script>
</body>
</html>