Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
En France, le secteur des transports est responsable de 38% des émissions de dioxyde de carbone (CO2). Pour opérer une transition vers une mobilité plus durable, le Gouvernement s’est engagé dans le développement de la mobilité électrique. Ainsi, la loi d’orientation des mobilités fixe-t-elle comme objectif la fin de la vente de voitures particulières et de véhicules utilitaires légers neufs utilisant des énergies fossiles d’ici 2040.
Depuis 2020, les immatriculations de véhicules électriques connaissent une forte progression, le nombre de ventes ayant bondi de 128% en 2020 et de 63% en 2021.
Ce déploiement doit nécessairement s’accompagner d’un développement des infrastructures de recharge.
Pour que le modèle du véhicule électrique soit viable, il est nécessaire de disposer d’une borne de recharge publique pour 10 voitures (Directive AFI). La France a largement dépassé ces préconisations. Mais si les objectifs de couverture territoriale homogène demeurent pertinents, le développement de la mobilité électrique passe désormais par une adéquation des infrastructures de recharge aux besoins des usagers.
Ce projet vous propose ainsi de répondre aux deux questions suivantes :
Comment le nombre d’infrastructures de recharge évolue-t-il en France ? Comparer cette évolution avec celle du parc de véhicules électriques et les objectifs pour 2030 ainsi que d’autres indicateurs qui vous semblent pertinents.
La répartition des infrastructures de recharge sur le territoire correspond-elle à une logique de distribution de la population et de trafic routier ?
Les travaux réalisés dans le cadre de ce projet permettront :
de donner une plus grande visibilité aux infrastructures de recharge, un facteur important dans la décision d’achat d’un véhicule électrique, et donc d’encourager le développement de la mobilité électrique ;
aux autorités nationales, régionales et locales de savoir où les infrastructures de recharge sont attendues et seront utilisées pour planifier leurs aménagements.
Ce projet s’inscrit dans le cadre de l’Open Data University, vous êtes libres de choisir les livrables que vous jugerez les plus pertinents pour répondre au mieux à la problématique proposée. Voilà quelques exemples de livrables possibles pour vous aider dans votre démarche, pouvant être réalisés à l’échelon territorial de votre choix.
Une analyse :
qui compare année par année le parc de véhicules électriques et le nombre d’infrastructures de recharge ;
qui étudie l’évolution des infrastructures de recharge et repère les tendances qui se dégagent ;
qui formule des prédictions de déploiement des infrastructures de recharge, à comparer avec les objectifs fixés par la loi d’orientation des mobilités ;
qui intègre des recommandations sur la politique de développement des infrastructures de recharge.
De nombreuses données ouvertes sont mises à votre disposition par l’équipe de l’Open Data University pour vous aider à répondre au projet proposé. Cette liste constitue une première base à exploiter dans le cadre du projet, elle est non exhaustive et nous vous encourageons à explorer davantage de données ouvertes :
Fichier consolidé des Bornes de Recharge pour Véhicules Électriques (IRVE) IRVE
Par data.gouv.fr
Trafic moyen journalier annuel sur le réseau routier national
Par Ministère de la Transition écologique
Par Institut National de la Statistique et des Etudes Economiques (Insee)
Voitures particulières immatriculées par commune et par type de recharge
Par Agence ORE
Mercredi 18 octobre, 11h00 ou 15h30
Sur cette séance, vous allez mettre en place le site et les graphiques pour vos données.
Vous devrez intégrer deux librairies JS, de votre choix.
Proposer une mise en page ergonomique, accessible et eco-conçue.
Les graphiques seront accompagnés de tableaux, correctement mis en page, pour présenter les données des graphiques.
Proposer de l'interactivité sur les graphiques (cacher/afficher des données, pouvoir choisir plusieurs informations pour comparer, ...). Des boutons, du javascript seront donc à ajouter.
Vous pouvez utiliser bootstrap en le customisant.
Même si ce n'est pas demandé, vous pouvez (devez!) faire une rapide analyse de ce qui existe pour vous en inspirer.
La notation de la partie web sera répartie selon les points suivants :
Qualité globale du site (graphiques, texte, mise en page, histoire racontée)
Ergonomie et interactivité (possibilité de personnaliser les graphiques, d'interagir, ...)
N'oubliez pas ! Vous devez raconter une histoire avec les chiffres pour appuyer votre discours ou votre démonstration. la mise en page du site web devra donc être particulièrement soignée et avec des textes justifiant et décrivant vos graphiques.
Mercredi 18 octobre, 9h30 ou 14h00
Pour générer des graphiques sur le web il existe plusieurs solutions
Méthodes statiques
L'image et le graphique sont construits avec un logiciel de création graphique classique, ou excel, ou équivalent. L'image est enregistrée et on la dépose sur le serveur web pour l'afficher comme une image classique.
Méthodes "dynamique"
ChartJs, va générer du Canvas qui est intégré directement dans votre page HTML à partir d'une source de données JavaScript.
Intégration du graphique dans votre page HTML
Il faut définir un objet "canvas" avec un id, dans lequel le graphique sera inséré. Vous pouvez ajouter autant de zone de graphique que vous le souhaitez.
Il faut ensuite ajouter la dépendance à ChartJs
Soit en CDN (comme ci-dessus) ou en intégrant les fichiers que vous auriez téléchargé.
Soit directement dans le fichier HTML, soit en incluant un fichier js.
Le code ci-dessus permet de construire un objet Chart, avec deux paramètres :
L'id (lien avec le canva) où sera mis en place le graphique
Un objet JSON qui contient la construction du graphique.
Cette seconde partie de code va permettre de définir les éléments du graphique.
Le type (line, pie, plot, ...)
Les "data" (la forme de cette partie peut varier selon le type de graphique)
Les "data" sont souvent composées d'un nom (label), de données (data), et souvent de paramètres de couleurs ou d'option. Consulter la documentation pour chaque type de graphique.
Mettre en place votre premier graphique avec ChartJS (ou une librairie de votre choix)
Comme vous le constatez les données sont inscrites directement dans la configuration. Ce qui peut être bien, mais n'est pas forcément optimal si les données doivent changer régulièrement.
Elles peuvent donc provenir d'un fichier JSON qui serait récupéré depuis une API par exemple, ou d'un appel API directement, ...
Ci-dessous un exemple se basant sur un fichier JSON.
Cette solution implique que votre javascript soit géré par "module". Il faut donc préciser sur la balise script
Soit si c'est un fichier JavaScript importé
Soit si vous écrivez directement le JavaScript dans le HTML
Le code du graphique doit donc manipuler les données du fichier Json
Exemple de fichier JSON
Exemple d'utilisation dans le javascript
Il est possible d'ajouter ou de retirer des données en lien avec un graphique existant.
Exemple de code javascript, à associer sur un bouton avec un id "bouton", et un chart nommé charteGenreMMI2. Les données sont fixées par le code ici, elles peuvent venir de sources, de formulaires, ...
Documentation associée :
vous trouverez des exemples ici :
Accessibilité (au sens numérique, .) et l'éco-conception
On peut générer en back en créant une image, à partir de données en PHP (avec la librairie GD ou d'autres ( par exemple), et l'afficher comme une image. Cette solution est intéressante, mais ne permet pas forcément une grande interactivité avec le graphique produit
Le générer avec un langage front, comme JavaScript. Dans ce cas il existe de nombreuses librairies (une liste non exhaustive ici : ). Cette solution permet une grande interactivité avec les données et le résultat produit.
d3js () est la librairie la plus complète, mais aussi un peu plus difficile à mettre en place.
Pour ce premier exemple on va utiliser (mais toutes les autres fonctionnent sur une logique similaire).
Lundi 23/10, 14h00 ou mardi 24/10, 8h00
Le HTML
Le JS
Avec d3js : Installer D3js : https://www.datavis.fr/d3js/firststep
Le fichier html/JS
Il faut récupérer un fichier geoJson ici : https://github.com/gregoiredavid/france-geojson
Et le charger à la place de departements.json
Un autre exemple de carte avec des couleurs : https://www.datavis.fr/d3js/map-population
Il faut ici une source CSV pour avoir les données de population.
Ou encore un autre exemple ici : https://www.datavis.fr/d3js/map-improve
Ventes de produits de la société MMI - 2022 - en quantités
Département de l'Aube : scolarisation selon l'âge et le sexe en 2020
Les données sont de plus en plus présentes dans le monde de l’entreprise ou des services. Elles permettent d’enrichir une information, mais servent aussi d’outil de communication.
A partir de jeux de données, cette SAE mobilise les ressources liées à l’analyse de données, à la production graphique, à l’intégration et au développement front et amène les étudiants à :
Analyser des données pour en extraire des indicateurs ou les informations pertinentes ;
Proposer un site web permettant la visualisation de ces données
Compléter ce site web par la production d'une application interactive permettant une navigation au sein des données.
Les étudiants réalisent les contenus et les présentent au commanditaire en répondant à la question : comment concevoir des visualisations de données apportant une information pertinente et appuyant une communication ?