Application de datavisualisation

🎯 Objectif

Afficher de manière claire et interactive des données open data relatives à la consommation annuelle d’électricité et de gaz en France, à travers des graphiques afin de démontrer :

• Une bonne prise en main des données et de leur préparation

• Une capacité à construire des interfaces réactives et lisibles

• Des bonnes pratiques de développement

🛠️ Stack technique

• Frontend : React, Next.js, TypeScript, Material UI

• Charts : MUI X Charts

• Backend : Node.js + Express

• Autres : Docker

🔗 Données utilisées

Source : Agence ORE - Consommation annuelle d’électricité et de gaz par région

• Période couverte : 2011 à 2023
• Détails disponibles par : filière (électricité/gaz), opérateur, secteur d’activité, région

📂 Structure du dépôt

izaac/
├── backend/
├── frontend/
├── README.md
└── docker-compose.yml

📊 Fonctionnalités

• Sélection dynamique d’une région et d’une année (par défaut c'est la région Grand Est et l'année 2023)

• Graphique en barres : consommation totale par opérateur pour l’année sélectionnée

• Graphique en ligne : évolution de la consommation moyenne par filière (électricité/gaz) au fil des années

• Graphique camembert : répartition de la consommation par secteur d’activité (résidentiel, tertiaire, industrie, etc.)

• Interface responsive : l’application s’adapte aux formats desktop, tablette et mobile

• Barre de navigation décorative : présente pour structurer visuellement l’interface, sans navigation

🧱 Étapes de réalisation

1. Choix de la donnée : Sélection d’un jeu de données clair, pertinent et fiable, proposé par l’Agence ORE, axé sur la consommation d’électricité et de gaz par région

2. Exploration de l’API : Tests des requêtes ODSQL, compréhension du format des dates, des champs disponibles et des filtres par région et année

3. Mise en place backend léger : Développement d’un serveur Express agissant comme passerelle pour interroger l’API publique, transformer et structurer les données avant l'envoi au frontend

4. Mise en place du frontend : Installation de MUI et développement des composants

5. Intégration et visualisation des données : Connexion au backend, affichage dynamique des graphiques à l’aide de MUI X-Charts, avec adaptation à la structure des données récupérées

🚀 Lancer le projet

# Clôner le dépôt
git clone https://github.com/sonm0002/izaac.git

# Installer les dépendances
cd izaac/backend
npm install

cd ../frontend
npm install

Dans un terminal Ubuntu (à la racine du projet) :

# Lancer le projet avec Docker
docker compose up -–build

Une fois le projet lancé, rendez-vous sur http://localhost:3000 pour accéder à l'application.