BUT SD2 · VCOD S4 · Projet Data Visualisation

Hexa-Duo. La data sans compromis.

Le dashboard D3.js conçu pour confronter instantanément 484 villes françaises sur 11 thématiques d'expertise.

0 Communes
0 APIs
0 Thématiques
0 Lignes de code

Le Projet

Près de 8 000 lignes de code. Zéro framework. Toute la data.

Construit uniquement avec D3.js v7 et Vanilla JS — parce qu'un outil de qualité se mérite.

Communes indexées
484

Échelle nationale

Toutes les villes françaises de plus de 20 000 habitants, normalisées en ratios par habitant pour des comparaisons statistiquement équitables.

Sources Open Data
14

APIs unifiées

8 APIs live orchestrées en parallèle, 3 datasets pré-traités. De la concentration de PM2.5 au prix au m², en passant par les bornes IRVE et les effectifs de délinquance.

Thématiques explorables
11

Profondeur d'analyse

Emploi, Logement, Météo, Éducation, Sécurité, Culture, Sports, Transports, Environnement, Données Générales et Cartographie SVG interactive.

11 Thématiques

Chaque dimension de la vie urbaine,
mesurée et comparée.

01
Carte interactive 484 cercles SVG sur carte GeoJSON · Projection Mercator · Échelle logarithmique · Sélection par clic
france-geojson scaleLog
02
Données générales Population · Superficie · Densité · Bar chart normalisé · Donut tranches d'âge animé
geo.api.gouv.fr Donut animé
03
Emploi Demandeurs d'emploi par âge & sexe · Ratio /1 000 hab. · Évolution 2015–2024
DARES 29 040 records
04
Logement Prix médian /m² appart. & maison · Évolution 2020–2024 · Filtres type de bien
DVF Étalab 469 communes
05
Météo Prévisions 7 jours + climat annuel · Température · Précipitations · Vent · Ensoleillement
Open-Meteo Live
06
Éducation Établissements ratio /10 000 hab. · Répartition public/privé · Donut animé · Tableau détail
data.education.gouv.fr group_by
07
Sécurité 13 indicateurs de délinquance · Évolution 2016–2024 · Ratio /1 000 hab. · Filtre annuel
SSMSI Live
08
Culture & Loisirs Musées · Cinémas · Bibliothèques · Théâtres · 8 requêtes parallèles · Ratio /10 000 hab.
data.culture.gouv.fr 4 datasets
09
Sports Top 10 équipements sportifs · Ratio /10 000 hab. · Bar horizontal animé · Tableau
equipements.sports.gouv.fr
10
Transports Gares SNCF · Segments DRG A/B/C · Bornes IRVE par puissance · 6 appels API parallèles
SNCF OpenData ODRE IRVE
11
Environnement AQI européen · 5 polluants (PM2.5, PM10, NO₂, O₃, SO₂) · Parcs OSM · Jauge animée · Line chart 24h
Open-Meteo AQ Overpass API Live
Le Challenge D3.js

Conçu pour l'évidence technique.

100% sans framework. Un niveau d'intégration qui valide non seulement l'énoncé, mais cherche l'excellence.

35 concepts D3.js — tous démontrables

Chaque méthode, chaque pattern est présent et opérationnel dans le code.

d3.geoMercator d3.geoPath scaleLog scaleBand scaleLinear scaleOrdinal scaleSequential stroke-dasharray d3.pie / d3.arc data / enter / exit d3.csv (sep. ";") d3.json MutationObserver mouseover / mouseout GeoJSON TopoJSON fitSize() arcZero → arc g + translate

Architecture production-grade

Modules IIFE, state centralisé, lazy init — sans un seul fichier node_modules.

hexa-duo — structure
hexa-duo/
├── index.html
├── css/   ← 6 fichiers, ~1 600 lignes
├── js/
│   ├── config.js    endpoints API
│   ├── utils.js     helpers D3
│   ├── api.js       cache TTL 30min
│   ├── app.js       state global
│   ├── sidebar.js   autocomplete
│   └── sections/    ← 11 modules IIFE
└── data/
    ├── cities_20k.json    484 villes
    ├── emploi_communes.csv 29 040 records
    └── dvf_summary.json   469 communes

Zéro latence perçue

Une stratégie de performance rigoureuse à chaque niveau de la stack.

  • Cache TTL 30 min Navigation instantanée entre sections
  • Lazy init des sections DOM construit à la première visite uniquement
  • group_by côté serveur Contourne la limite de 100 résultats OpenDataSoft
  • 484 villes en RAM Autocomplete instantané, aucun appel réseau

Deux villes.
Onze regards.
Une décision.

Sélectionnez deux villes françaises et explorez leurs données en temps réel.