Graphiques et visualisation de données

import { useMemo, useState } from "react";
import * as d3 from "d3";

/**
 * === 0. RAW DATA =====================================
 * Données brutes, telles qu’elles arrivent depuis l’API.
 * Aucune sémantique graphique ici.
 */
const data = [
  { region: "IDF", value: 120, volume: 3000 },
  { region: "IDF", value: 80,  volume: 2000 },
  { region: "NAQ", value: 150, volume: 5000 },
  { region: "PAC", value: 60,  volume: 1000 },
  { region: "NAQ", value: 110, volume: 4200 }
];

export default function ScatterPlot() {

  /**
   * === 1. INTERACTION / STATE ==========================
   * L’utilisateur agit sur l’interface → cela modifie l’état React.
   * Cet état est l’entrée du pipeline.
   */
  const [region, setRegion] = useState(null);

  const width = 500;
  const height = 300;

  /**
   * === 2. DATA TRANSFORM ==============================
   * Sélection, filtrage, agrégation.
   * On produit une table de données "logiques"
   * prête à être encodée graphiquement.
   */
  const filteredData = useMemo(() => {
    return region
      ? data.filter(d => d.region === region)
      : data;
  }, [region]);

  /**
   * === 3. LAYOUT (D3) =================================
   * On calcule comment les données vont être projetées
   * dans l’espace graphique (échelles).
   * D3 joue ici le rôle de moteur mathématique.
   */
  const xScale = useMemo(() => {
    return d3.scaleLinear()
      .domain(d3.extent(filteredData, d => d.value))
      .range([40, width - 20]);
  }, [filteredData]);

  const yScale = useMemo(() => {
    return d3.scaleLinear()
      .domain(d3.extent(filteredData, d => d.volume))
      .range([height - 30, 20]);
  }, [filteredData]);

  const colorScale = d3.scaleOrdinal()
    .domain(["IDF", "NAQ", "PAC"])
    .range(["red", "blue", "green"]);

  /**
   * === 4. ENCODING ===================================
   * On transforme chaque ligne de données
   * en primitives graphiques abstraites.
   * (positions, tailles, couleurs)
   */
  const visualMarks = filteredData.map(d => ({
    cx: xScale(d.value),
    cy: yScale(d.volume),
    r: 6,
    fill: colorScale(d.region)
  }));

  /**
   * === 5. RENDERING ==================================
   * React + SVG produisent l’image finale.
   * D3 ne touche jamais le DOM.
   */
  return (
    <div>

      {/* === INTERACTION ============================== */}
      <select onChange={e => setRegion(e.target.value || null)}>
        <option value="">Toutes régions</option>
        <option value="IDF">IDF</option>
        <option value="NAQ">NAQ</option>
        <option value="PAC">PAC</option>
      </select>

      <svg width={width} height={height}>

        {/* Axes (rendu pur SVG) */}
        <line x1="40" y1="20" x2="40" y2={height - 30} stroke="#999" />
        <line x1="40" y1={height - 30} x2={width - 20} y2={height - 30} stroke="#999" />

        {/* Marques visuelles (résultat du pipeline) */}
        {visualMarks.map((m, i) => (
          <circle
            key={i}
            cx={m.cx}
            cy={m.cy}
            r={m.r}
            fill={m.fill}
          />
        ))}

      </svg>
    </div>
  );
}