# Prototype cartographique D3 — les trois niveaux

Preuve de faisabilité du rendu tuilé en D3 pur, sur les données réelles des trois échelles.

## Lancer

Le plus simple : double-cliquer `lancer.command` depuis le Finder. Il démarre le serveur et ouvre
le navigateur. Laisser la fenêtre de Terminal ouverte.

En ligne de commande, le prototype lit les données depuis `../dataset`, il faut donc
servir **la racine du projet**, pas le dossier `prototype` :

```bash
cd /Users/alexisrizet/Documents/arc/Project/greenscore/carto
python3 -m http.server 8787
```

Puis ouvrir <http://127.0.0.1:8787/prototype/> — la page de connexion s'affiche en premier.

## Connexion et périmètres

Page `connexion.html` : identifiant, mot de passe, case « se souvenir de moi », et flux « mot de
passe oublié » qui simule l'envoi d'un lien sans révéler si l'identifiant existe. Trois comptes
de démonstration :

| Identifiant | Mot de passe | Périmètre |
|---|---|---|
| `admin` | `admin` | Tous les niveaux, toutes les zones |
| `region` | `region` | Département + Bandol, Côtes de Provence, Coteaux varois |
| `domaine` | `domaine` | AOC Bandol + parcelle Caban 2 |

Le rail et les listes de zones sont filtrés selon le profil. Un utilisateur `domaine` ne voit ni
le niveau département ni Bellet. En production ce filtrage sera côté serveur (lot 5 du devis) :
ici la session vit dans `sessionStorage`, ce qui suffit à démontrer le comportement. Le paramètre
`?demo=admin` (ou `region`, `domaine`) ouvre une session sans formulaire, utile pour les captures.

## Interface alignée sur la charte GreenScore Capital

Les couleurs sont relevées directement sur les captures de l'outil existant, pas approximées :
rail `#00251E`, vert d'accent `#39CC93`, fond de page `#F8F8F8`. Le logo est le fichier de l'outil,
recopié dans `images/`.

Le choix du niveau ne se fait plus dans une liste déroulante mais dans le **rail de gauche**, avec un
picto par échelle : contour de territoire pour le département, grappe pour l'AOC, grille pour la
parcelle. C'est l'axe de navigation principal, du macro au micro, il méritait mieux qu'un menu perdu
au milieu des filtres. Le fil d'Ariane au-dessus du titre rappelle en permanence la position dans
cette hiérarchie, et le rail reste synchronisé avec le paramètre `niveau` de l'URL. Le logo et le nom
du module occupent la gauche du bandeau, à l'emplacement où on les cherche.

**À arbitrer à l'intégration.** Ce rail occupe la place de la navigation applicative de l'outil
(accueil, mesurer, agir, suivre). Deux options le jour de l'intégration : fondre les trois niveaux
dans cette navigation existante, ou basculer le choix d'échelle en onglets horizontaux dans le
bandeau et laisser le rail à la navigation de l'outil. C'est un point de maquettage, pas de
développement : le rail se génère depuis la configuration `NIVEAUX`, seul son gabarit change.

## Ce qui est démontré

**Socle commun aux trois niveaux**

- Fond de carte tuilé rendu par `d3-tile` v1, sans Leaflet ni aucune autre bibliothèque cartographique
- Projection `d3.geoMercator` unique, partagée entre les tuiles et les données, donc alignement exact
- Zoom et déplacement par `d3.zoom`, bridés automatiquement au zoom maximal du fond sélectionné
- Cinq fonds : orthophotos IGN, Esri World Imagery, Esri Shaded Relief, Esri Light Gray Canvas, IGN Plan v2
- Palette continue jaune vers rouge, valeurs élevées en rouge, légende et bornes recalculées à chaque changement
- Bandeau de synthèse et infobulle au survol
- État complet de la vue conservé dans l'URL, filtres **et** position de la carte au format
  `vue=zoom/lon/lat`, par exemple
  `?niveau=aoc&ind=INDICE_IVC_VOLATILITE_FINAL&zone=BELLET&fond=esri-sat&vue=14.4/7.2270/43.7180`

**Niveau Département** — rendu SVG, 163 mailles, 5 indicateurs, filtre Var / Alpes-Maritimes.

**Niveau AOC** — rendu canvas. Les 5 appellations d'un coup (88 polygones, 1,96 Mo de GeoJSON,
79 000 sommets) ou une appellation isolée. C'est le niveau qui justifie le passage au canvas :
en SVG, la reprojection de 79 000 sommets à chaque image rend le zoom saccadé.

**Niveau Parcelle** — rendu canvas. Grille de 10 m reprojetée depuis l'UTM 31N, dessinée en carrés
dont la taille écran est recalculée à chaque zoom. Quatre indicateurs plus le timelapse d'intensité
de stress, avec bouton de lecture sur les 4 étapes de 2025.

## Graphique Excel sur la même page que la carte

Demande du second courriel d'Adrien. Le classeur `Acte2_Graphique_Editable_Caban_2025_Pheno.xlsx`
est converti hors ligne en JSON par `ingestion/xlsx_vers_json.py`, sans dépendance externe :

```bash
python3 prototype/ingestion/xlsx_vers_json.py \
  "dataset/parcelle/Acte2_Graphique_Editable_Caban_2025_Pheno.xlsx" \
  dataset/parcelle/caban_2025_suivi.json
```

Le suivi issu du classeur s'affiche sous la carte, au niveau parcelle, en **trois onglets** :

- **Graphique** — intensité maximale et moyenne, pluie efficace, seuil de stress sévère à 0,5,
  cinq stades phénologiques. Le trait vertical vert suit l'étape du timelapse affichée sur la carte.
- **Suivi journalier** — les 157 jours du classeur en tableau, export CSV.
- **Bilan par phase** — agrégat entre deux stades consécutifs (jours, intensités, jours au-dessus
  du seuil 0,5, pluie cumulée), plus une ligne de saison complète.

**Carte et graphique décrivent bien la même chose.** Les 4 étapes du timelapse correspondent à
4 jours du classeur, avec des valeurs identiques à la quatrième décimale :

| Date | Classeur (moy. / max) | GeoJSON de la carte (moy. / max) |
|---|---|---|
| 9 mai 2025 | 0,0000 / 0,0334 | 0,0000 / 0,0334 |
| 19 juin 2025 | 0,9500 / 0,9873 | 0,9500 / 0,9873 |
| 31 juillet 2025 | 0,8963 / 0,9491 | 0,8963 / 0,9491 |
| 10 septembre 2025 | 0,7564 / 0,8395 | 0,7564 / 0,8395 |

Conséquence pour l'architecture : inutile de stocker deux jeux de données. Une seule table de séries
temporelles par parcelle alimente à la fois les images de la carte et les courbes du graphique. Le
trait vertical vert du graphique suit d'ailleurs l'étape affichée sur la carte pendant le timelapse.

## Le niveau AOC est à la résolution de la maille météo, pas de l'appellation

Point à valider avec Adrien. Une entité du niveau AOC n'est pas un polygone d'appellation mais
l'intersection entre le vignoble en appellation et une **maille météo de 0,1° de côté**, soit environ
8 × 11 km. Chaque propriété porte d'ailleurs les coordonnées de sa maille (`lon`, `lat`).

| Appellation | Mailles | Valeurs distinctes |
|---|---:|---:|
| Côtes de Provence | 55 | 49 |
| Coteaux varois | 21 | 21 |
| Bandol | 5 | 4 |
| Bellet | 5 | 4 |
| Coteaux d'Aix | 2 | 2 |

Deux conséquences visibles à l'écran, qui ne sont pas des défauts de rendu :

- **Des aplats séparés par des lignes droites.** Sur Bandol, cinq mailles seulement, dont deux
  partagent la même valeur : la carte affiche donc quatre aplats, avec des frontières rectilignes
  qui suivent le quadrillage météo et non le terrain. L'écart entre deux mailles voisines atteint
  42 mm sur l'historique 10 ans, ce qui crée une marche nette au milieu de l'appellation.
- **Des trous.** Le modèle ne calcule que sur les surfaces en appellation. Tout le reste — villes,
  forêts, autres cultures, mer — reste vide.

Le prototype le rend explicite plutôt que de le masquer : au-dessous de dix valeurs distinctes, la
légende passe d'une rampe continue à une liste de classes, et l'infobulle nomme la maille survolée.
Une rampe continue sur quatre valeurs laisserait croire à un dégradé qui n'existe pas dans la donnée.

**Question pour Adrien :** ce niveau de résolution est-il l'attendu, ou faut-il un lissage entre
mailles voisines ? La réponse change le lot 2, sans quoi les appellations les plus petites resteront
des mosaïques de deux à cinq aplats.

## Densité très variable d'une appellation à l'autre

Mesuré sur les fichiers fournis, ce qui explique qu'une appellation puisse sembler vide au cadrage
initial : la carte est cadrée sur l'emprise, pas sur la densité.

| Appellation | Surface couverte | Emprise | Couverture |
|---|---:|---:|---:|
| Côtes de Provence | 47 897 ha | 114 × 106 km | 3,9 % |
| Coteaux varois | 12 460 ha | 52 × 40 km | 6,0 % |
| Bandol | 8 180 ha | 14 × 15 km | 38,1 % |
| Coteaux d'Aix | 866 ha | 12 × 4 km | 16,6 % |
| Bellet | 70 ha | 12 × 21 km | 0,27 % |

Pour compenser, les polygones sont dessinés avec un contour de la même couleur que le remplissage,
ce qui garde visibles les entités de quelques pixels. Le bandeau affiche la surface couverte.

## Validation contre la maquette client

Le bandeau du niveau parcelle, sur le déficit cumulé 2021–2025, affiche 8,57 ha, 738 mm, 1 371 mm et
1 895 mm : les quatre valeurs de la maquette présentée en réunion, au chiffre près.

## Limites assumées

- La période est inactive aux niveaux département et AOC : les fichiers fournis sont des agrégats
  pluriannuels sans dimension annuelle.
- Les libellés d'indicateurs reprennent les intitulés des fichiers. Les intitulés définitifs et les
  unités restent à confirmer avec Adrien.
- Pas de mise en cache des tuiles entre deux sessions, ni de gestion des écrans à haute densité pour
  les tuiles. C'est le travail chiffré au lot 0 du devis.
- Les géométries AOC sont servies brutes, sans simplification ni tuiles vectorielles. C'est le
  travail chiffré au lot 2.
- L'authentification et le filtrage de périmètre sont simulés en `sessionStorage`. En production
  ils seront côté serveur, avec hachage des mots de passe, session durable et blocage après échecs
  répétés : c'est le lot 5.
- Le graphique porte sur le seul classeur fourni, converti à la main. L'import automatisé de
  nouveaux classeurs et la reprise des scripts de génération d'Adrien sont chiffrés au lot 6.

## Aperçus

Douze captures dans `apercus/` : page de connexion et mot de passe oublié, les trois niveaux,
Bandol et Côtes de Provence, Bellet, la parcelle en déficit cumulé, le timelapse avec le graphique,
le suivi journalier, le bilan par phase, et un aperçu du profil `domaine` (rail réduit à AOC et
parcelle).

Pour les régénérer après une modification de l'interface, serveur local démarré :

```bash
bash prototype/apercus/.capturer.sh
```