Sncf-project - VueJS project for the EU GUI Data visualization

Overview
Logo

Projet IHM - Visualisation des données

Utiliser l'application · Vidéo de présentation (YouTube)

Table des matières
  1. Guide d'installation et d'exécution
  2. Description du projet
  3. Les composants principaux

Guide d'installation et d'exécution

Premièrement, il faut récupérer le code source de l'application :

git clone https://github.com/Benlemt/sncf-project.git

Une fois le code téléchargé sur votre machine, il faut installer les dépendances :

npm install 

Nous pouvons dès maintenant lancer l'application en compilant le code :

npm run serve

Description du projet

Le but premier de cette application est d'en apprendre plus sur les gares de voyageurs en France.

L'utilisateur est capable de visualiser où se situent les différentes gares sur une carte. L'application indique si la gare est équipée WiFi, de station Power & Station (des vélos qui rechargent les appareils électroniques), ou d'un piano. Enfin l'application propose de visualiser quatres indicateurs qui sont :

  • La fréquentation annuelle de la gare de 2015 à 2020.
  • Le taux de conformité de la propreté en gare
  • Les raisons de déplacements des voyageurs au sein de la gare
  • Les lieux de destinations possibles avec le prix associé d'un billet simple, ou l'abonnement mensuel, s'il existe.

Enfin, l'application propose de sélectionner une gare au hasard dans la France afin d'en apprendre plus.

Les composants principaux

Components hierarchy

Ce schéma explique brièvement la logique de nos composants d'un point de vue hiérarchique. Premièrement, nous trouvons le composant père. Il s'agit du composant App.vue. De ce composant hérite trois composants enfants :

  • Map.vue : organise la logique de la carte. Affiche les gares et gère les actions de l'utilisateur comme le clic sur un point de la carte.
  • Sidebar.vue : permet d'organiser la vue des différents graphiques de l'application. Ce composant propose une barre de recherche pour l'utilisateur.
  • RandomStationBtn.vue : permet d'obtenir une gare au hasard

Enfin, nous avons représenté en vert sur le schéma, les trois dossiers dans lesquels nous avons plusieurs composants. Nous avons donc trois grandes familles :

  • charts/ : ce dossier contient les composants qui sont des graphiques (graphiques en bâton, en ligne ou en donuts).
  • equipments/ : ce dossier contient les composants qui indique si la gare est équipée de la WiFi, de Power & Station, ou d'un piano.
  • informations/ : ce dossier contient les composants qui donnent des informations présentées autrement que sous la forme d'un graphique (un tableau par exemple).

Map

Le composant Map.vue permet de gérer la carte de l'application. Celle-ci permet à l'utilisateur de visualiser où se situent les gares en France. Il peut aussi cliquer sur un point qui représente une gare pour en apprendre plus sur cette dernière. Nous avons choisi d'utiliser Mapbox pour la partie cartographie.

map

Sidebar

Le composant Sidebar joue deux rôles. Premièrement il présente les différents graphiques/informations de la gare sélectionnée. Deuxièmement, il propose à l'utilisateur un formulaire de recherche pour rechercher une gare par nom.

input

RandomStationBtn

Ce composant reprèsente un bouton qui permet à l'utilisateur à découvrir une station de gare au hasard dans toute la France. Une fois que l'utilisateur clique dessus, les informations de la Map et de la Sidebar se mettent à jour automatiquement.

random

Equipments

equipments

Il s'agit en réalité de trois composants : Wifi.vue, Charger.vue et Piano.vue. Ils permettent d'afficher des informations booléennes comme nous pouvons le voir sur l'image suivante. À gauche, cela signifie que la gare possède des bornes WiFi et à droite l'inverse.

wifi

Charts

Il s'agit ici de trois composants :

  • Cleanliness.vue : affiche un graphique en bâton sur le taux de conformité de la propreté. Ce graphique comporte un code couleur qui indique si la gare possède un problème de propreté.
  • ReasonsChart.vue : affiche un graphique en donuts sur les différentes raisons de déplacements des voyageurs.
  • TrafficChart.vue : affiche deux types de graphique (en bâton et en ligne) sur la fréquentation annuelle d'une gare.

charts

Owner
Benjamin Lemattre
Student in computer engineering in Caen (France)
Benjamin Lemattre
A Three.Js Visualization On The Fly With Vue

Three Vue Pattern This project brings together a few concepts, outlined below: Three.js, Vue, and LUIS I have wanted to be able to update a three.js v

Uvacoder 1 Nov 22, 2021
TS-VIS is a Python module for deep learning visualization.

TS-VIS(Tianshu Visualization) is a visualization tool kit of Tianshu AI Platform. , which support visualization of the most popular deep learning frameworks, such as TensorFlow, PyTorch, OneFlow, etc.

null 6 Jan 9, 2022
🐣 vue GUI generator

vuegg vue.js GUI generator [ Mockups and code in one go! ] About vuegg Scaffold vuejs projects by dragging-dropping components directly into the visua

vuegg 2.1k Jan 14, 2022
DynamoDb GUI Client

DynamoDb-GUI-Client (This project is no longer supported) First, of all, I really appreciate the work of everyone who contributed to this project so f

Misak Poghosyan 602 Jan 14, 2022
A cross-platform GUI and ETCD client

ETCD Manager ETCD Manager Features Coming: v1.3 Available now Planned Installation End users.. Contributors.. Running the dev build Usage and support

Tamas Geschitz 246 Jan 23, 2022
A P300 online spelling mechanism for Emotiv headsets. It's completely written in Node.js, and the GUI is based on Electron and Vue.

brain bits This project implements a P300 online spelling mechanism for Emotiv headsets. It's completely written in Node.js, and the GUI is based on E

Armagan Amcalar 151 Nov 9, 2021
📕 A website simulating linux system's GUI, using theme of Deepin distro.

About GoodManWEN.github.io A website simulating linux system's GUI, using theme of Deepin distro. You can write blogs with markdown and use it to serv

null 1.1k Jan 15, 2022
Organize is a simple GUI application, made using Vue JS and Electron JS, that organizes your files into pre-set folders.

Organize is a simple GUI application, made using Vue JS and Electron JS, that organizes your files into pre-set folders.

Manish Karki 1 Nov 9, 2021
A Gui To Manage Laravel Translation Files

Lingo A file based translation manager, which unlike other Lang managers don't need a database connection to handle the translation. Installation comp

Muah 93 Dec 21, 2021
A vue.js port of the popular dat.GUI library

vue-dat-gui A Vue.js port of the popular dat.GUI library. This is a lightwieght graphical user interface to change variables in Javascript. Useful for

cyrilf 49 Oct 8, 2021
Magento 2 Upgrade GUI

Magento 2 Upgrade GUI A GUI tool to help you visually and easily spot differences in a three-way comparison between the version you upgraded from, the

elgentos ecommerce solutions 42 Jan 13, 2022
A universal GUI for unit testing built with Electron and Vue.js

Lode Lode is an open source Electron-based universal test runner graphical user interface. It is written in TypeScript and Vue. Getting started You ca

Lode 80 Dec 23, 2021
Blockviz - A Cryptocurrency Market & Blockchain exploration, using on chain data combined with exchange data to get a sense of trends. 📊

Visualizations for Blockchain & Market Data Sample Block Start Development & Testing Locally Clone the repo and run npm install The repo development i

Trevor Clarke 1 Jan 4, 2022
Githubapp ia a webapp made with vuejs in which the user can get the data like repos, stars, followers, following

Githubapp ia a webapp made with vuejs in which the user can get the data like repos, stars, followers, following, bio etc. about a particular github user by searching their username. Firebase is used for authentication purpose.

saroj kumar sundara 0 Dec 20, 2021
Nuxt client for genealogy project. Family tree and genealogy data processing website software client.

Family Tree 365 - Open Source Family Tree Software - Nuxt Client Description Browser based Genealogy software for interacting and processing data effi

Family Tree 365 74 Jan 17, 2022
Studying project - A Spring Boot API to store countries data in a MySQL DB, accompanied by its Vue.js app.

Screenshots See the screenshots here. Dependencies Java 11 Node.js <= 14 You can build locally and use the app without it, but it is meant to be used

Mao De Matos 0 Jan 17, 2022
A Vue2 Input Streaming RealTime And Two Way Data Binding Broadcasting with Pusher

vue-input-streaming A Vue2 Input Streaming RealTime And two way data binding broadcasting with Pusher Setup Project # Git Clone Project git clone [email protected]

Visarut Phusua 24 Oct 1, 2021
Laravel 8 and Vue family tree and genealogy data processing website.

Genealogia Open Source Family Tree Software Description Browser based Genealogy software for interacting and processing data efficiently. Easily creat

Family Tree 365 250 Jan 14, 2022
Crypto News allows you to convert cryptocurrencies, view latest news and exchange rates for each ICO – all the data from the world of cryptocurrencies in one place.

Crypto News Crypto News allows you to convert cryptocurrencies, view latest news and exchange rates for each ICO – all the data from the world of cryp

Bartosz Łaniewski 25 Dec 10, 2021