CityCompare France — Rapport SAE Outils Décisionnels

Présentation du projet

Titre : CityCompare France
Objectif : Interface web de comparaison de deux villes françaises de plus de 20 000 habitants
Technologies : HTML5, CSS3, JavaScript (Vanilla), APIs REST publiques

---

Sources de données

1. Données statiques (INSEE / ANIL / DVF / Météo-France)

Source : Recensement INSEE 2021, RPLS 2022, DVF (Demandes de Valeurs Foncières), ANIL, Météo-France

Indicateur	Source	Processus de récupération
Population	INSEE — RP2021	Données agrégées manuellement dans le fichier JS
Taux de chômage	INSEE — zonages emploi 2023	Moyennes régionales intégrées
% Logements sociaux (HLM)	RPLS 2022 (DRIHL)	Fichier national téléchargeable sur data.gouv.fr
Loyer moyen €/m²	DVF / ANIL	Observatoires locaux des loyers
Ensoleillement h/an	Météo-France	Publication annuelle des normales climatiques

URL :

• https://www.insee.fr/fr/statistiques/5395964
• https://www.data.gouv.fr/fr/datasets/repertoire-des-logements-locatifs-des-bailleurs-sociaux/
• https://www.anil.org/

---

2. API Open-Meteo (météo temps réel + historique)

Source : https://open-meteo.com/
Licence : Open-source, gratuite, sans clé API requise

Endpoint prévisions 7 jours :

GET https://api.open-meteo.com/v1/forecast
  ?latitude=LAT&longitude=LON
  &daily=temperature_2m_max,temperature_2m_min,precipitation_sum,weathercode
  &timezone=Europe/Paris
  &forecast_days=7

Endpoint historique climatique (ERA5) :

GET https://archive-api.open-meteo.com/v1/archive
  ?latitude=LAT&longitude=LON
  &start_date=2020-01-01&end_date=2023-12-31
  &monthly=temperature_2m_mean,precipitation_sum
  &timezone=Europe/Paris

Données retournées : températures min/max, précipitations, code météo WMO (traduit en emoji), moyennes mensuelles climatiques sur 4 ans.

---

3. OpenStreetMap / Leaflet (carte interactive)

Source : https://www.openstreetmap.org/ + tuiles OSM France
Licence : ODbL

Affichage de la carte avec :

• Marqueurs A (bleu) et B (rouge) sur chaque ville
• Ligne pointillée entre les deux villes
• Distance à vol d'oiseau calculée via la formule de Haversine

---

4. Chart.js (visualisations)

Source : https://www.chartjs.org/
Licence : MIT

Graphiques utilisés : barres, lignes (températures mensuelles), radar (emploi multidimensionnel), barres groupées (logement).

---

Architecture des fichiers

comparateur-villes/
├── index.html          ← Interface principale (HTML + JS intégré)
├── css/
│   └── style.css       ← Feuille de style séparée
└── README.md           ← Ce rapport

---

Mode d'emploi de l'interface (Annexe)

Comment lancer l'application

Option 1 — En local (sans serveur)

1. Télécharger le dossier comparateur-villes/
2. Ouvrir index.html dans un navigateur moderne (Chrome, Firefox, Edge, Safari)
3. Une connexion Internet est requise pour les APIs météo et la carte

Option 2 — Via un serveur local (recommandé)

# Avec Python 3
cd comparateur-villes
python -m http.server 8080
# Puis ouvrir http://localhost:8080

Option 3 — Déploiement GitHub Pages

1. Pousser le dossier sur un dépôt GitHub public
2. Activer GitHub Pages dans les paramètres (source : branche main, dossier racine)
3. L'URL sera : https://[username].github.io/[repo]/

Comment naviguer

1. Sélectionner Ville A (menu déroulant gauche, bleu) — toutes les villes > 20 000 hab.
2. Sélectionner Ville B (menu déroulant droit, rouge) — ville différente de A
3. Cliquer sur "Comparer →" — le bouton s'active dès que deux villes distinctes sont choisies
4. Carte — affichée en premier, montre la distance entre les deux villes
5. Infobulles — résumé des 6 indicateurs clés pour chaque ville
6. Onglets :
   • 📊 Général : population, ensoleillement, graphique à barres
   • 💼 Emploi : chômage, graphique radar multidimensionnel
   • 🏠 Logement : loyer moyen €/m², % HLM, graphique comparatif
   • 🌤️ Météo : prévisions 7 jours en temps réel (API Open-Meteo)
   • 📅 Climat annuel : courbes de températures et précipitations mensuelles moyennes

Dépendances (chargées via CDN, aucune installation)

Bibliothèque	Version	Usage
Leaflet	1.9.4	Carte interactive
Chart.js	4.4.1	Graphiques
Google Fonts	—	Typographies Syne + DM Sans
Open-Meteo API	—	Météo temps réel + historique
OSM France	—	Tuiles cartographiques

Navigateurs supportés

Chrome 90+, Firefox 88+, Edge 90+, Safari 14+
(Pas de support IE11)

---

Limitations & perspectives

• Les données statiques (loyer, chômage, HLM) sont des moyennes approximatives par ville, agrégées depuis les sources publiques mentionnées. Elles ne reflètent pas les variations intra-urbaines.
• L'astérisque sur la température annuelle (* °C) indique qu'il s'agit d'une estimation sur 7 jours, pas d'une normale climatique.
• Pour une mise en production, il serait pertinent d'intégrer l'API INSEE Data (https://api.insee.fr/) pour des données dynamiques et actualisées.
• L'API Pôle Emploi (maintenant France Travail) nécessite une inscription sur https://francetravail.io/ pour accéder aux offres d'emploi par zone géographique.

---

Document généré dans le cadre de la SAE Outils Décisionnels — IUT