feat: add bivariate choropleth crossing two metrics (#14)

Author: ndaen

src/components/score-sidebar.tsx

@@ -9,7 +9,7 @@ import {
   METRIC_LABELS,
   type Metric,
 } from "@/lib/score"
-import { DIV_LEGEND, SEQ_LEGEND } from "@/lib/scoreColors"
+import { BIVAR_PALETTE, DIV_LEGEND, SEQ_LEGEND } from "@/lib/scoreColors"
 
 export type Basemap = "clair" | "sombre" | "satellite" | "couleur"
 export const BASEMAP_LABELS: Record<Basemap, string> = {
@@ -43,6 +43,10 @@ type ScoreSidebarProps = {
   basemap: Basemap
   onBasemap: (b: Basemap) => void
   onCenter: (view: MapView) => void
+  bivariate: boolean
+  onBivariate: (v: boolean) => void
+  metricY: Metric
+  onMetricY: (m: Metric) => void
   isLoading: boolean
   isError: boolean
   wordCloudEnabled: boolean
@@ -112,6 +116,10 @@ export function ScoreSidebar({
   basemap,
   onBasemap,
   onCenter,
+  bivariate,
+  onBivariate,
+  metricY,
+  onMetricY,
   isLoading,
   isError,
   wordCloudEnabled,
@@ -169,32 +177,90 @@ export function ScoreSidebar({
             })}
           </div>
 
-          {/* Légende du dégradé */}
-          <div className="mt-3">
-            <div className="flex h-2 overflow-hidden rounded-sm">
-              {legend.map((c, i) => (
-                <div
-                  key={i}
-                  className="flex-1"
-                  style={{ backgroundColor: `rgb(${c[0]},${c[1]},${c[2]})` }}
-                />
+          {/* Mode bivarié : croise la métrique courante avec une seconde. */}
+          <label className="mt-3 flex cursor-pointer items-center gap-2 text-sm">
+            <Checkbox.Root
+              checked={bivariate}
+              onCheckedChange={(v) => onBivariate(v === true)}
+              className="flex size-4 shrink-0 items-center justify-center rounded border border-input bg-background data-[state=checked]:border-accent data-[state=checked]:bg-accent"
+            >
+              <Checkbox.Indicator>
+                <Check className="size-3 text-accent-foreground" />
+              </Checkbox.Indicator>
+            </Checkbox.Root>
+            Croiser avec une 2ᵉ métrique
+            <InfoTip
+              label="Mode bivarié"
+              text="Croise deux métriques sur une palette 3×3 pour repérer par exemple les communes « bien notées et abordables »."
+            />
+          </label>
+          {bivariate && (
+            <select
+              value={metricY}
+              onChange={(e) => onMetricY(e.target.value as Metric)}
+              aria-label="Seconde métrique"
+              className="mt-2 w-full rounded-md border border-input bg-background px-2 py-1.5 text-sm"
+            >
+              {metrics.map((m) => (
+                <option key={m} value={m}>
+                  {METRIC_LABELS[m]}
+                </option>
               ))}
+            </select>
+          )}
+
+          {/* Légende : matrice 3×3 en bivarié, dégradé sinon. */}
+          {bivariate ? (
+            <div className="mt-3 flex items-end gap-2.5">
+              {/* Lignes du haut vers le bas = classe y décroissante (élevé en haut). */}
+              <div className="flex flex-col gap-px">
+                {[2, 1, 0].map((y) => (
+                  <div key={y} className="flex gap-px">
+                    {[0, 1, 2].map((x) => {
+                      const c = BIVAR_PALETTE[y][x]
+                      return (
+                        <div
+                          key={x}
+                          className="size-4"
+                          style={{ backgroundColor: `rgb(${c[0]},${c[1]},${c[2]})` }}
+                        />
+                      )
+                    })}
+                  </div>
+                ))}
+              </div>
+              <div className="space-y-0.5 text-[10px] leading-tight text-muted-foreground">
+                <div>→ {METRIC_LABELS[metric]} (faible → élevé)</div>
+                <div>↑ {METRIC_LABELS[metricY]} (faible → élevé)</div>
+              </div>
             </div>
-            <div className="mt-0.5 flex justify-between text-[10px] text-muted-foreground">
-              {diverging ? (
-                <>
-                  <span>Cher</span>
-                  <span>Neutre</span>
-                  <span>Bon rapport</span>
-                </>
-              ) : (
-                <>
-                  <span>Faible</span>
-                  <span>Élevé</span>
-                </>
-              )}
+          ) : (
+            <div className="mt-3">
+              <div className="flex h-2 overflow-hidden rounded-sm">
+                {legend.map((c, i) => (
+                  <div
+                    key={i}
+                    className="flex-1"
+                    style={{ backgroundColor: `rgb(${c[0]},${c[1]},${c[2]})` }}
+                  />
+                ))}
+              </div>
+              <div className="mt-0.5 flex justify-between text-[10px] text-muted-foreground">
+                {diverging ? (
+                  <>
+                    <span>Cher</span>
+                    <span>Neutre</span>
+                    <span>Bon rapport</span>
+                  </>
+                ) : (
+                  <>
+                    <span>Faible</span>
+                    <span>Élevé</span>
+                  </>
+                )}
+              </div>
             </div>
-          </div>
+          )}
 
           {isLoading && (
             <div className="mt-2 text-xs text-muted-foreground">Chargement…</div>

src/lib/scoreColors.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest"
+
+import { BIVAR_PALETTE, makeBivariateScale } from "@/lib/scoreColors"
+
+describe("makeBivariateScale", () => {
+  // 9 valeurs uniformes 1..9 sur chaque axe : terciles nets (1-3, 4-6, 7-9).
+  const vals = [1, 2, 3, 4, 5, 6, 7, 8, 9]
+
+  it("classe les valeurs en terciles sur chaque axe", () => {
+    const s = makeBivariateScale(vals, vals)
+    expect(s.classes(1, 1)).toEqual([0, 0])
+    expect(s.classes(5, 5)).toEqual([1, 1])
+    expect(s.classes(9, 9)).toEqual([2, 2])
+    expect(s.classes(9, 1)).toEqual([2, 0])
+  })
+
+  it("mappe les classes sur la palette [y][x]", () => {
+    const s = makeBivariateScale(vals, vals)
+    expect(s.color(1, 1)).toEqual(BIVAR_PALETTE[0][0])
+    expect(s.color(9, 9)).toEqual(BIVAR_PALETTE[2][2])
+    // x élevé, y faible -> colonne 2, ligne 0.
+    expect(s.color(9, 1)).toEqual(BIVAR_PALETTE[0][2])
+  })
+
+  it("retourne no-data si une des deux valeurs manque", () => {
+    const s = makeBivariateScale(vals, vals)
+    expect(s.classes(null, 5)).toBeNull()
+    expect(s.classes(5, undefined)).toBeNull()
+    expect(s.color(null, 5)[3]).toBeLessThan(255) // gris translucide « no data »
+  })
+
+  it("reste stable avec moins de 2 valeurs (tout en classe 0)", () => {
+    const s = makeBivariateScale([0.5], [])
+    expect(s.classes(0.5, 0.5)).toEqual([0, 0])
+  })
+})

src/lib/scoreColors.ts

@@ -61,3 +61,54 @@ export function makeDivergingScale(values: (number | null | undefined)[]) {
 export const SEQ_LEGEND = SEQ_PALETTE
 // Rampe divergente pour la légende (NEG -> MID -> POS).
 export const DIV_LEGEND: RGBA[] = [NEG, lerp(MID, NEG, 0.5), MID, lerp(MID, POS, 0.5), POS]
+
+// --- Bivarié (croisement de 2 métriques, 3×3) -----------------------------------
+
+// Palette bivariée 3×3 « bleu-violet » (Joshua Stevens) : BIVAR_PALETTE[y][x],
+// x = classe de la 1re métrique (colonnes), y = classe de la 2e (lignes),
+// classe 0 = faible. Le coin [2][2] (élevé × élevé) est le plus saturé.
+export const BIVAR_PALETTE: RGBA[][] = [
+  [[232, 232, 232, 255], [172, 228, 228, 255], [90, 200, 200, 255]],
+  [[223, 176, 214, 255], [165, 173, 211, 255], [86, 152, 185, 255]],
+  [[190, 100, 172, 255], [140, 98, 170, 255], [59, 73, 148, 255]],
+]
+
+export const BIVAR_CLASS_LABELS = ["faible", "moyen", "élevé"] as const
+
+// Seuils de terciles rang-based (même approche que quantileScale, mais ici on a
+// besoin de l'indice de classe pour le tooltip, pas seulement de la couleur).
+function tercileThresholds(values: (number | null | undefined)[]): number[] {
+  const sorted = values.filter((v): v is number => v != null).sort((a, b) => a - b)
+  if (sorted.length < 2) return []
+  return [1, 2].map((i) => sorted[Math.floor((i / 3) * (sorted.length - 1))])
+}
+
+function classOf(thresholds: number[], v: number): number {
+  let c = 0
+  while (c < thresholds.length && v > thresholds[c]) c++
+  return c
+}
+
+/** Échelle bivariée 3×3 par terciles : couleur + classes (pour le tooltip).
+ *  Une valeur manquante sur l'un des deux axes -> gris « no data ». */
+export function makeBivariateScale(
+  xs: (number | null | undefined)[],
+  ys: (number | null | undefined)[],
+) {
+  const tx = tercileThresholds(xs)
+  const ty = tercileThresholds(ys)
+  return {
+    /** Classes [x, y] dans {0,1,2}, ou null si l'une des valeurs manque. */
+    classes(
+      x: number | null | undefined,
+      y: number | null | undefined,
+    ): [number, number] | null {
+      if (x == null || y == null) return null
+      return [classOf(tx, x), classOf(ty, y)]
+    },
+    color(x: number | null | undefined, y: number | null | undefined): RGBA {
+      const c = this.classes(x, y)
+      return c ? BIVAR_PALETTE[c[1]][c[0]] : NO_DATA
+    },
+  }
+}

src/pages/score-map.tsx

@@ -20,7 +20,12 @@ import {
   type Metric,
   type ScoreFeature,
 } from "@/lib/score"
-import { makeDivergingScale, makeSequentialScale } from "@/lib/scoreColors"
+import {
+  BIVAR_CLASS_LABELS,
+  makeBivariateScale,
+  makeDivergingScale,
+  makeSequentialScale,
+} from "@/lib/scoreColors"
 import { ScoreSidebar, type Basemap, type MapView } from "@/components/score-sidebar"
 import { loadWordCloud, type CityWordCloud } from "@/lib/parseAvis"
 import WordCloudPopup from "@/components/WordCloudPopup"
@@ -120,6 +125,9 @@ function DeckOverlay({ layers }: { layers: Layer[] }) {
 export default function ScoreMap() {
   const [hovered, setHovered] = useState<ScoreFeature | null>(null)
   const [metric, setMetric] = useState<Metric>("score_valeur")
+  // Mode bivarié : croise `metric` (axe x) avec `metricY` (axe y) sur 3×3 classes.
+  const [bivariate, setBivariate] = useState(false)
+  const [metricY, setMetricY] = useState<Metric>("n_prix")
   const [opacity, setOpacity] = useState(0.8)
   const [basemap, setBasemap] = useState<Basemap>("satellite")
   const [fillBeforeId, setFillBeforeId] = useState<string | undefined>()
@@ -190,6 +198,16 @@ export default function ScoreMap() {
     return diverging ? makeDivergingScale(values) : makeSequentialScale(values)
   }, [data, metric, diverging])
 
+  // Échelle bivariée (terciles sur chaque axe), seulement en mode bivarié.
+  const bivarScale = useMemo(() => {
+    if (!bivariate) return null
+    const fs = data?.features ?? []
+    return makeBivariateScale(
+      fs.map((f) => f.properties[metric]),
+      fs.map((f) => f.properties[metricY]),
+    )
+  }, [data, bivariate, metric, metricY])
+
   const layers = useMemo(() => {
     const choropleth = new GeoJsonLayer<ScoreFeature["properties"]>({
       id: "score-choropleth",
@@ -200,7 +218,12 @@ export default function ScoreMap() {
       filled: true,
       stroked: true,
       opacity,
-      getFillColor: (f) => scale((f as ScoreFeature).properties[metric]),
+      getFillColor: (f) => {
+        const p = (f as ScoreFeature).properties
+        return bivarScale
+          ? bivarScale.color(p[metric], p[metricY])
+          : scale(p[metric])
+      },
       getLineColor: [255, 255, 255, 120],
       lineWidthMinPixels: 0.5,
       pickable: true,
@@ -210,7 +233,7 @@ export default function ScoreMap() {
         selectCommune((info.object as ScoreFeature).properties.code_commune),
       // metric + scale doivent déclencher le recalcul des couleurs (sinon
       // deck.gl garde l'ancienne palette en cache).
-      updateTriggers: { getFillColor: [scale, metric] },
+      updateTriggers: { getFillColor: [scale, bivarScale, metric, metricY] },
     })
 
     // Contour de la commune sélectionnée, au-dessus (ambre, visible sur tout fond).
@@ -243,9 +266,14 @@ export default function ScoreMap() {
         setSelectedCity((info.object as CityWordCloud) ?? null),
     })
     return [choropleth, highlight, wordCloudLayer]
-  }, [data, scale, metric, opacity, fillBeforeId, selected, wordCloudEnabled, cities])
+  }, [data, scale, bivarScale, metric, metricY, opacity, fillBeforeId, selected, wordCloudEnabled, cities])
 
   const hoveredValue = hovered?.properties[metric]
+  // Classes bivariées de la commune survolée, pour la ligne « Classe » du tooltip.
+  const hoveredClasses =
+    hovered && bivarScale
+      ? bivarScale.classes(hovered.properties[metric], hovered.properties[metricY])
+      : null
 
   // À chaque (re)chargement de style — initial OU changement de fond — repasse les
   // labels en français et mémorise le 1er calque de symboles (beforeId). Le
@@ -285,6 +313,10 @@ export default function ScoreMap() {
         basemap={basemap}
         onBasemap={setBasemap}
         onCenter={centerOn}
+        bivariate={bivariate}
+        onBivariate={setBivariate}
+        metricY={metricY}
+        onMetricY={setMetricY}
         isLoading={isLoading}
         isError={isError}
         wordCloudEnabled={wordCloudEnabled}
@@ -319,6 +351,20 @@ export default function ScoreMap() {
                 {fmt(metric, hoveredValue)}
               </span>
             </div>
+            {bivariate && (
+              <div>
+                {METRIC_LABELS[metricY]} :{" "}
+                <span className="font-semibold text-accent">
+                  {fmt(metricY, hovered.properties[metricY])}
+                </span>
+              </div>
+            )}
+            {hoveredClasses && (
+              <div className="text-muted-foreground">
+                Classe : {BIVAR_CLASS_LABELS[hoveredClasses[0]]} ×{" "}
+                {BIVAR_CLASS_LABELS[hoveredClasses[1]]}
+              </div>
+            )}
             <div className="text-muted-foreground">
               {hovered.properties.prix != null
                 ? `${Math.round(hovered.properties.prix).toLocaleString("fr-FR")} €/m²`