tristramg / velos-paris

Synthèse des compteurs de vélos à Paris

Ce petit site récupère les données ouvertes des compteurs de passages à vélo de la ville de Paris pour en faire une présentation synthétique.

En particulier on peut :

• Comparer les principaux compteurs
• Pour un compteur donné, voir les chiffre par heure de la veille, par jour du dernier mois, ou par semaine sur l’année en cours

Obtenir les données

Des capteur (« boucles ») sont installées au sein du goudron un peu partout dans Paris. Cette boucle détecte le passage d’un vélo et remonte la donnée qui est exposée sur le portail OpenData de la Ville.

Elles sont mise à jour une fois par jour et découpées en deux fichiers :

Le premier qui contient les données de comptage à proprement parler (une mesure par heure et par compteur) : wget "https://parisdata.opendatasoft.com/api/v2/catalog/datasets/comptage-velo-donnees-compteurs/exports/csv?rows=-1&select=id_compteur%2Csum_counts%2Cdate&timezone=UTC" -O public/compteurs.csv

Le deuxième contient des informations supplémentaire sur chaque compteur (comme une photo du compteur, son emplacement…) wget "https://parisdata.opendatasoft.com/api/v2/catalog/datasets/comptage-velo-compteurs/exports/csv" -O public/metadata.csv

Lancer le projet

C’est un projet Next.js et Vega-Lite pour dessiner les graphes.

La carte utilise Mapbox et un token est nécessaire. Obtenez-en un et modifiez .env.local.example en le sauvegardant sous .env.local.

Vous aurez besoin d’une installation de Node.js

yarn install

Afin de ne pas dépendre d’une base de données, les données sont préparées et intégrées statique à chaque page.

Pour préparer les données :

yarn prep

Et enfin pour lancer le projet :

yarn dev

Ouvrez http://localhost:3000 dans votre navigateur pour voir le résultat.

Déployer le projet

Afin de maintenir le site à jour, il faut reconstruire le site à chaque jour avec l’arrivée de nouvelles données (entre 8 et 9h du matin).

Téléchargez les données

Exécutez :

yarn prep
yarn build
yarn export

Le repertoire out contiendra les fichier statiques à transférer sur le serveur web (celui-ci doit juste servir les fichiers. Il n’y a pas besoin d’avoir la moindre installation locale).

velos-paris's Issues

Remove mapboxgl.accessToken from sources

I think you can use github secrets for this or simply a .env file that is not commited

Regenerate a new token afterwards

Calendar heatmap github style

J'imaginerais bien intégrer un composant un peu comme les calendriers heatmap d'activité sur github/gitlab pour chaque totem.
J'ai trouvé ce composant qui pourrait faire l'affaire:
https://github.com/kevinsqi/react-calendar-heatmap
Ça te dit que j'essaie d'intégrer ça au projet pour voir ce que ça donne ?

Indiquer les records tout temps

Par exemple les 3 plus grandes journées les 3 plus grands horaires avec la date correspondante.

Améliorer l'affichage sur téléphone

La vue détaillée a un affichage d'apparence rétréci : la page est affichée sur un demi-écran :

la taille affichée des graphique est satisfaisante.
Mes essais masquaient la moitié du graphique, ce qui n'est pas souhaitable je pense !

Suggestion : rendre le code utilisable par d'autres villes

Bonjour,

Merci pour ce super projet !
J'ai commencé hier à tester son adaptation pour le compte de Vélo-Cité, sur Bordeaux et sa métropole.

Il n'y a pas grand chose à changer :

• créer une dictionnaire de données afin de faire correspondre les variables utilisées par les différentes AOM et celles du code (basées sur les noms du fichier csv de Paris).
• pouvoir configurer le découpage du nom des compteurs. A Bordeaux pas de N/S O/E mais des "Vers rue de x" ou un "Sens sortant"
• pouvoir configurer le centre et le zoom de la carte depuis la config (.env.local)
• pas de photo des compteurs à Bordeaux dans le jeu de données de la métropole. La photo devrait être affichée uniquement si elle existe dans les datas.
• pouvoir configurer la source pour le footer

Actuellement, j'ai tous ces éléments hard-codés en local, mais je peux les rendre configurable dans le .env.local et faire une pull request d'ici quelques jours. Qu'en penses-tu ?

Les assos pourront ainsi faire un fork pour s'adapter aux différentes joyeusetés locales sans avoir à comprendre tout le process d'import et de calcul des données.

A bientôt,
Paul

photos de compteurs identiques

1/ aller sur la page https://compteurs.parisenselle.fr/details/Boulevard-de-Sebastopol

Constat : les deux photos illustrant la partie "N-S" et "S-N" sont identiques

Solution simple : Afficher une seule photo, quand les deux sont identiques

pouvoir visualiser la photographie d'un compteur en grand

1/ aller sur la page https://compteurs.parisenselle.fr/details/Boulevard-de-Sebastopol
2/ l'image affichée est téléchargée en 1920x1440

Attendu : pouvoir visualiser l'image simplement

Solution la plus simple : ajouter un lien vers https://www.eco-visio.net/Photos/100057445/15809119368880.jpg

Suggestion : référencer les autres initiatives (dans les autres villes) sur le site

Exemple : Leeds (UK)

Datavisualisation : https://odileeds.github.io/traffic-growth/?leeds-cycle-90320:2;leeds-cycle-90320:1
Opendata: https://datamillnorth.org/dataset/leeds-annual-cycle-growth-

Quai-d'Issy page leads to 404

Steps to reproduce :

• go to https://compteurs.parisenselle.fr
• on the map click on the "quai d'issy" marker, and then on "Voir les détails". It leads to the page https://compteurs.parisenselle.fr/details/Quai-d'Issy

Expected behavior : the page https://compteurs.parisenselle.fr/details/Quai-d'Issy results in a html 200 status

Actual behavior : the page https://compteurs.parisenselle.fr/details/Quai-d'Issy results in a html 404 status

Miscellaneous information

• If on https://compteurs.parisenselle.fr/ you scroll to the "Quai d’Issy" tile and click on the "Voir la fréquentation détaillée " link, then the page url is changed to https://compteurs.parisenselle.fr/details/Quai-d'Issy and the data is correctly displayed (but if you refresh the page afterward, you still get a 404)
• I'm noticing this issue occurs also with those locations: quai d'orsay, avenue de la porte d'orléans, rue d'aubervillier, quai d'austerlitz, so I suspect it might be related to a bad handling of a quote (') in the endpoint name

Remplacer les abréviations "N-S"

Dans les graphes de https://compteurs.parisenselle.fr/details/Boulevard-de-Sebastopol éviter les abréviations "N-S"