Initialisation · 00:00:00

Tom LEFRERE · Data Scientist

Des données. Un signal.

0%
FR EN

← Portfolio

· css · d3 · express · framer · javascript · python · react · recharts · tailwind · web

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.

How Am I Lucky, une visualisation de la chance par les chiffres

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

Accueil How Am I Lucky
Accueil
Score détaillé
Score
Détail indicateur
Détail
Vue radar
Radar
Version FR
Version FR
Vue cartographique
Map monde

Technologies utilisées

  • React 18 / Vite

  • D3.js / Recharts

  • Framer Motion

  • Express.js

  • Tailwind CSS

  • Python

  • Vitest / Testing Library

Voir How Am I Lucky

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.