How Am I Lucky, une visualisation de la chance par les chiffres
Application web interactive de visualisation de probabilités et statistiques de chance avec React, D3.js et Framer Motion.
Le projet
How Am I Lucky, pour le coup, c’est une plateforme qui permet de comparer sa situation sur une cinquantaine d’indicateurs pour mesurer la « chance » qu’a une personne. Une sorte de boussole pour voir où on se situe dans le monde, à travers des visualisations interactives. Il y a évidemment quelques biais méthodo (notamment sur le choix des indicateurs), mais le résultat est assez parlant, notamment pour remettre en perspective des choses qu’on tient pour acquises.
Mes contributions
Développement complet : frontend React avec des visualisations D3.js et Recharts, animations Framer Motion, backend Express, et pipeline de données Python pour alimenter les environ 50 indicateurs. Mise en place des tests avec Vitest. L’idée étant que la partie données puisse évoluer sans refaire le front.
Ce que j’ai retenu
Faire parler des données statistiques de manière visuelle et accessible, c’est quelque chose qui reste un vrai défi. Combiner D3.js et Recharts, pour le coup, donne des résultats très complémentaires : D3 pour les trucs sur mesure, Recharts pour les charts plus standards sans perdre de temps. Et la séparation pipeline Python côté data et frontend React côté affichage, ça fonctionne très bien, notamment quand on ne veut pas régénérer la data à chaque fois.
Contexte
Projet personnel. L’idée étant de rendre tangible un concept abstrait, c’est-à-dire la chance, à travers des données concrètes et des visualisations interactives. C’est un exercice qui a évidemment ses limites, mais qui marche plutôt bien comme déclencheur de réflexion.
Aperçu de l’application
Technologies utilisées
-
React 18 / Vite
-
D3.js / Recharts
-
Framer Motion
-
Express.js
-
Tailwind CSS
-
Python
-
Vitest / Testing Library
L’image d’illustration a été générée par Nano Banana (Google), parce que je n’ai plus le modèle de mockup que j’utilisais auparavant. Du coup, il ne s’agit pas d’une capture d’écran de l’outil.