DataViz - Pression Immobilière

Le Défi

Comprendre la pression immobilière et anticiper les besoins en logements sociaux est un enjeu territorial majeur. Cependant, les données open data (INSEE, Ministère du Logement) se présentent sous forme de fichiers bruts très volumineux et difficilement interprétables pour les décideurs et citoyens.

L'objectif de cette SAÉ 401 était de concevoir et développer une application web complète, capable de digérer ces données complexes et de les restituer sous la forme d'un dashboard analytique réactif et intuitif.

Le projet a été pensé de bout en bout : de la modélisation de la base de données SQL et la mise en place d'une API REST Symfony jusqu'au rendu interactif des graphiques en React avec Chart.js.

Tableau de bord DataViz avec graphiques et indicateurs

Interface interactive avec indicateurs clés régionaux et graphiques dynamiques

Architecture & Flux de Données

Pour assurer scalabilité, maintenabilité et fluidité, nous avons opté pour une architecture découplée avec séparation stricte des responsabilités entre le Frontend React et le Backend Symfony.

Schéma de fonctionnement et flux de données React

Schéma de transmission réactive des données entre les composants

Un flux React unidirectionnel et optimisé

Le pilotage des données repose sur une logique claire et performante :

Sélection & Filtrage
L'utilisateur choisit une année et une région dans la Sidebar. Un hook useEffect écoute ces changements pour déclencher l'appel API.
Gestion d'état centralisée
Le composant parent App stocke les statistiques régionales dans un useState et les redistribue via les props aux composants enfants.
Composants graphiques autonomes
Chaque type de visualisation (âge, chômage, densité, logements vacants) est isolé dans son propre composant, facilitant la mise en cache et évitant les re-rendus inutiles.

Visualisations de Données & Conception Métier

Chaque graphique a été rigoureusement choisi pour éclairer une problématique précise sans surcharger l'utilisateur :

Les 5 visualisations clés :

Pyramide des âges (Donut Chart)
Cible la nature de la demande : un territoire vieillissant n'a pas les mêmes besoins en infrastructures qu'un territoire jeune.
Corrélation chômage et pauvreté (Scatter Plot)
Visualise la précarité économique déterminant le besoin d'un parc social fort pour compenser les barrières d'accès au parc privé.
Pression immobilière (Bubble Chart)
Met en relation la densité de population et le nombre de logements pour repérer instantanément les territoires sous tension.
Équilibre parc social & logements vacants (Bar Chart)
Met en évidence les déséquilibres entre offres vacantes et demande sociale non satisfaite.
Dynamique de construction neuve (Évolution temporelle)
Compare les nouvelles constructions sur 10 ans pour évaluer l'effort public face à l'essor démographique.

// Extrait de l'API REST Symfony (DatavizController)
#[Route('/api/stats/region/{nomRegion}/{annee}', methods: ['GET'])]
public function getStatsRegion(
    string $nomRegion, 
    int $annee, 
    EntityManagerInterface $em
): JsonResponse {
    $region = $em->getRepository(Region::class)
        ->findOneBy(['nomRegion' => $nomRegion]);

    if (!$region) {
        return new JsonResponse(['message' => 'Région introuvable'], 404);
    }

    $departements = $em->getRepository(Departement::class)
        ->findBy(['region' => $region]);

    $stats = $em->getRepository(StatistiquesDepartement::class)
        ->findBy(['departement' => $departements, 'annee' => $annee]);

    return $this->json($stats, context: ['groups' => ['stats:read']]);
}
                

Contrôleur API Symfony : sérialisation sélective et routage REST

Traitement des Données & Pipeline ETL

Pour garantir des temps de réponse quasi-instantanés, nous avons conçu un pipeline d'ingestion sur mesure :

Commande Symfony d'importation : Développement de ImportStatistiquesDepartementCommand pour lire les fichiers CSV, valider les codes départements et alimenter MySQL par lots (batch processing).
Curation sélective des données : Élimination des coordonnées géographiques polygonales trop lourdes (geom, epci) et des variables périphériques (passoires thermiques DPE, ventes physiques), pour ne retenir que les indicateurs directement actionnables.
Sérialisation optimisée : Utilisation des Serializer Groups de Symfony pour ne renvoyer au client React que les champs strictement requis pour le rendu graphique.

Vue mobile responsive de l'application DataViz

Conception responsive soignée pour une consultation optimale sur mobile

Bilan & Chiffres Clés

Ce projet illustre ma capacité à concevoir et livrer une application complète à forte valeur ajoutée analytique, combinant un backend robuste avec une interface front-end réactive, esthétique et accessible.

L'utilisation conjointe de React 19, Tailwind CSS, DaisyUI et Chart.js a permis d'obtenir une expérience fluide avec des transitions naturelles et un confort visuel immédiat.

5

Graphiques Chart.js

100+

Départements Gérés

100%

API REST Découplée

Live

Sur Netlify

Explorer l'application

Le tableau de bord est entièrement déployé et interactif. Vous pouvez filtrer par année, région et département pour explorer les dynamiques territoriales en temps réel.

← Retour aux projets Tester l'application en direct ↗

DataViz - Logement & Démographie

Mon Rôle

Cadre

Stack Technique

Hébergement