France Stats

Contexte

France Stats est une application web de visualisation de données démographiques françaises. L'idée de départ était simple : rendre accessibles et lisibles les données publiques sur la population française par département, en les présentant sous forme de cartes et graphiques interactifs plutôt que dans des fichiers bruts.

Les données proviennent de fichiers CSV et JSON issus de sources publiques (estimations de population par département pour l'année 2023, ventilées par sexe et groupe d'âge de 1975 à 2023).

Fonctionnalités

L'application repose sur un seul écran interactif :

• Carte choroplèthe des départements français (métropole + outre-mer) colorée selon la densité de population — construite avec D3 et les données GeoJSON des frontières départementales
• Sélecteur de département permettant de zoomer sur un territoire spécifique ou d'afficher les totaux nationaux
• Affichage animé de la population totale du département sélectionné
• Répartition hommes / femmes avec pourcentages
• Graphique en camembert de la distribution par genre
• Histogramme de population par tranche d'âge
• Pyramide des âges interactive
• Interface responsive avec menu hamburger sur mobile

Stack technique

Next.js 15      Framework React (App Router, Turbopack)
TypeScript      Typage statique sur l'ensemble du projet
D3              Visualisations : carte choroplèthe, pyramide des âges, graphiques
GSAP            Animations d'interface
TopoJSON        Format compact pour les données géographiques des départements
PapaParse       Parsing des fichiers CSV en mémoire
Tailwind CSS    Styling (v4)

Architecture des données

Les données sont stockées en statique dans public/data/ et chargées côté client :

public/data/
  estim-pop-dep-2023.csv                      Population par département, 2023
  estim-pop-dep-sexe-gca-1975-2023.xls        Historique 1975–2023 par sexe et âge
  france-departements-avec-outre-mer.geojson  Frontières départ. (métropole + DOM)
  population.json                             Données agrégées

Un hook personnalisé (usePopulation) centralise la logique de chargement et d'agrégation. Une fonction aggregateFrance() calcule les totaux nationaux quand aucun département n'est sélectionné.

Ce que j'ai appris

Ce projet a été mon introduction sérieuse à D3.js dans un contexte React. La difficulté principale était d'intégrer D3 — qui manipule directement le DOM — dans le cycle de rendu de React sans créer de conflits.

La carte choroplèthe avec les territoires d'outre-mer a été la partie la plus technique : il a fallu gérer plusieurs projections géographiques en parallèle et composer un layout unique qui les regroupe visuellement de façon cohérente.

Le parsing et la mise en forme des données CSV pour les rendre exploitables par D3 m'a aussi appris à anticiper les incohérences de format dans les données publiques.