08 - Stacked area with morphing transitions

// d3.csv : fetch + parse CSV en tableau d'objets.
// Le 2e argument est un accessor qui transforme chaque ligne (strings) en objet typé.
// https://d3js.org/d3-fetch#csv
const dataImmigrationRaw = await d3.csv("./data/immigration-geneva.csv", row => ({
  year: new Date(Date.UTC(+row.Année, 0, 1)),   // "2002" -> Date(2002-01-01 UTC)
  nationality: row.Nationalite,
  count: +row.chiffre                            // "-10388" -> -10388 (Number)
}));

const aggregateLabels = new Set([
  "Total",
  "Total - solde migratoire",
  "Etats tiers europe",
  "Etats tiers pas europe"
]);
const dataImmigrationAll = dataImmigrationRaw.filter(d => !aggregateLabels.has(d.nationality));

Inputs.table(dataImmigrationAll, {
  columns: ["year", "nationality", "count"],
  header: {
    year: "Année",
    nationality: "Nationalité",
    count: "Solde net"
  }
})

const width = 920;
const height = 500;
const marginTop = 10;
const marginRight = 10;
const marginBottom = 20;
const marginLeft = 60;

// Set + Array.from : dédoublonne en gardant l'ordre d'apparition dans le CSV
const masterKeys = Array.from(new Set(dataImmigrationAll.map(d => d.nationality)));

// scaleOrdinal mappe une valeur discrète (string) -> une couleur
// schemeTableau10 : palette catégorielle de 10 couleurs lisibles ensemble
// https://d3js.org/d3-scale/ordinal
// https://d3js.org/d3-scale-chromatic/categorical#schemeTableau10
const color = d3.scaleOrdinal()
  .domain(masterKeys)
  .range(d3.schemeTableau10);

function deriveKeys(data) {
  const present = new Set(data.map(d => d.nationality));
  // Ordre = celui du master, filtré aux nationalités présentes
  return masterKeys.filter(k => present.has(k));
}

function build(data) {
  const keys = deriveKeys(data);
  // Index : année -> nationalité -> row
  const byYearByNat = d3.index(data, d => d.year, d => d.nationality);
  return d3.stack()
    .keys(keys)
    .value(([, byNat], key) => byNat.get(key)?.count ?? 0)
    (byYearByNat);
}

function toCumulative(data) {
  // Groupe par nationalité, tri chronologique, somme cumulée
  const byNat = d3.group(data, d => d.nationality);
  const out = [];
  for (const [nat, rows] of byNat) {
    const sorted = [...rows].sort((a, b) => a.year - b.year);
    let acc = 0;
    for (const r of sorted) {
      acc += r.count;
      out.push({ year: r.year, nationality: nat, count: acc });
    }
  }
  return out;
}

const x = d3.scaleUtc()
  .range([marginLeft, width - marginRight]);

// Extent annuel pré-calculé une fois → stable entre filtres en mode annuel
function extentOf(series) {
  return [
    Math.min(0, d3.min(series, s => d3.min(s, p => p[0]))),
    d3.max(series, s => d3.max(s, p => p[1]))
  ];
}
const yExtentAnnuel = extentOf(build(dataImmigrationAll));

const y = d3.scaleLinear()
  .domain(yExtentAnnuel)
  .range([height - marginBottom, marginTop]);

// Generator d'aire : pour chaque point du stack, on lit
// - x : la clé du groupe (l'année), accessible via d.data[0]
// - y0 / y1 : les bornes basse et haute de l'empilement
const area = d3.area()
  .x(d => x(d.data[0]))     // d.data = [année, InternMap par nationalité]
  .y0(d => y(d[0]))         // bas du calque
  .y1(d => y(d[1]));        // haut du calque

const svg = d3.create("svg")
  .attr("width", width)
  .attr("height", height)
  .attr("viewBox", `0 0 ${width} ${height}`)
  .style("max-width", "100%");

// ClipPath : restreint le dessin des aires à l'intérieur du chart.
// Sans ça, `interpolateSeries` (qui pad avec l'union des années entre prev
// et curr) laisse des points fantômes en dehors du domaine X courant — leur
// path trace alors des triangles colorés à gauche de l'axe Y. La clip masque
// tout ce qui sort de la zone utile.
const clipId = `chart-clip-${Math.random().toString(36).slice(2, 8)}`;
svg.append("defs")
  .append("clipPath")
  .attr("id", clipId)
  .append("rect")
  .attr("x", marginLeft)
  .attr("y", marginTop)
  .attr("width", width - marginLeft - marginRight)
  .attr("height", height - marginTop - marginBottom);

// Ordre d'append = z-order SVG (les derniers sont au-dessus)
const layer = svg.append("g")
  .attr("clip-path", `url(#${clipId})`);

const xAxis = svg.append("g")
  .attr("transform", `translate(0,${y(0)})`);

const yAxis = svg.append("g")
  .attr("transform", `translate(${marginLeft},0)`)
  .call(d3.axisLeft(y).ticks(6));

function interpolateSeries(prev, curr) {
  // Union des années (en ms epoch pour comparer)
  const yearsMs = Array.from(new Set([
    ...prev.map(p => +p.data[0]),
    ...curr.map(p => +p.data[0])
  ])).sort((a, b) => a - b);

  // Lookups année → point
  const prevAt = new Map(prev.map(p => [+p.data[0], p]));
  const currAt = new Map(curr.map(p => [+p.data[0], p]));

  return t => yearsMs.map(ms => {
    const p = prevAt.get(ms);
    const c = currAt.get(ms);
    const py0 = p ? p[0] : 0;
    const py1 = p ? p[1] : 0;
    const cy0 = c ? c[0] : 0;
    const cy1 = c ? c[1] : 0;
    const point = [
      py0 + (cy0 - py0) * t,
      py1 + (cy1 - py1) * t
    ];
    // Le generator `area` a besoin de d.data[0] pour calculer x
    point.data = [new Date(ms), null];
    return point;
  });
}

// Variante "tout zéro" : sert pour enter (depuis 0) et exit (vers 0)
function collapse(series) {
  return series.map(p => {
    const z = [0, 0];
    z.data = p.data;
    return z;
  });
}

let previousSeries = null;
let currentData = null;
let currentSeries = null;

// --- Tooltip + hover indicator ---
// tooltip : div positionné absolument, parent = wrapper (position: relative)
const tooltip = document.createElement("div");
Object.assign(tooltip.style, {
  position: "absolute",
  pointerEvents: "none",
  background: "white",
  border: "1px solid #ccc",
  padding: "4px 8px",
  fontSize: "12px",
  fontFamily: "system-ui, sans-serif",
  borderRadius: "3px",
  boxShadow: "0 1px 3px rgba(0,0,0,0.15)",
  opacity: "0",
  transition: "opacity 150ms",
  whiteSpace: "nowrap",
  zIndex: "10"
});

// hoverGroup : line + circle, au-dessus des aires
const hoverGroup = svg.append("g")
  .style("display", "none")
  .style("pointer-events", "none");
const hoverLine = hoverGroup.append("line")
  .attr("stroke", "black")
  .attr("stroke-width", 1);
const hoverCircle = hoverGroup.append("circle")
  .attr("r", 4)
  .attr("fill", "black");

// overlay : rect transparent qui capture les évènements pointer
const overlay = svg.append("rect")
  .attr("x", marginLeft)
  .attr("y", marginTop)
  .attr("width", width - marginLeft - marginRight)
  .attr("height", height - marginTop - marginBottom)
  .attr("fill", "transparent");

const numberFormat = new Intl.NumberFormat("fr-CH");

overlay.on("pointerenter", () => {
  hoverGroup.style("display", null);
  tooltip.style.opacity = "1";
});
overlay.on("pointerleave", () => {
  hoverGroup.style("display", "none");
  tooltip.style.opacity = "0";
});
overlay.on("pointermove", function (event) {
  if (!currentData || !currentSeries) return;

  // Année au curseur, puis on snappe à l'année la plus proche dans currentData
  const [mx] = d3.pointer(event, svg.node());
  const yearAtCursor = x.invert(mx);
  const years = Array.from(new Set(currentData.map(d => +d.year)));
  let closestMs = years[0];
  let bestDiff = Math.abs(closestMs - yearAtCursor);
  for (const ms of years) {
    const diff = Math.abs(ms - yearAtCursor);
    if (diff < bestDiff) { bestDiff = diff; closestMs = ms; }
  }

  // Valeurs par nationalité à cette année (ordre = visuel haut → bas)
  const valuesByNat = new Map();
  for (const d of currentData) {
    if (+d.year === closestMs) valuesByNat.set(d.nationality, d.count);
  }

  // Top du stack (y1 max sur toutes les séries à cette année)
  let topY = 0;
  for (const s of currentSeries) {
    const p = s.find(pt => +pt.data[0] === closestMs);
    if (p) topY = Math.max(topY, p[1]);
  }

  // Positionne la ligne + le cercle
  const cx = x(new Date(closestMs));
  const cyTop = y(topY);
  const cyBase = y(0);
  hoverLine.attr("x1", cx).attr("x2", cx).attr("y1", cyTop).attr("y2", cyBase);
  hoverCircle.attr("cx", cx).attr("cy", cyTop);

  // Contenu du tooltip
  const yearLabel = new Date(closestMs).getUTCFullYear();
  const rows = [`<strong>${yearLabel}</strong>`];
  for (const key of [...color.domain()].reverse()) {
    if (valuesByNat.has(key)) {
      rows.push(`${key} : ${numberFormat.format(valuesByNat.get(key))}`);
    }
  }
  tooltip.innerHTML = rows.join("<br>");

  // Position du tooltip dans le wrapper (parent du tooltip).
  // On utilise les coords écran ramenées dans le repère du wrapper.
  if (tooltip.parentElement) {
    const r = tooltip.parentElement.getBoundingClientRect();
    tooltip.style.left = `${event.clientX - r.left + 12}px`;
    tooltip.style.top = `${event.clientY - r.top + 12}px`;
  }
});

function update(data, mode) {
  const series = build(data);
  currentData = data;
  currentSeries = series;

  // Snapshot des domaines AVANT mutation → utilisé dans les attrTween pour
  // construire l'image de départ (avec les anciennes scales) et l'image
  // d'arrivée (avec les nouvelles). Sans ça, la transition utilise les
  // nouvelles scales dès t=0 → l'animation "saute" au début.
  const oldXDomain = x.domain().slice();
  const oldYDomain = y.domain().slice();

  // Y :
  // - annuel → extent figé (pas de bounce x-axis entre filtres)
  // - cumulé → extent du stack courant (le cumul redémarre à 0 quand
  //   le filtre change → y.domain s'adapte)
  if (mode === "annuel") {
    y.domain(yExtentAnnuel);
  } else {
    y.domain(extentOf(series));
  }

  // X selon le dataset courant
  x.domain(d3.extent(data, d => d.year));

  // Area generator avec les anciennes scales, juste pour calculer le
  // path-de-départ d'une transition (image de la frame précédente).
  const xOld = d3.scaleUtc().domain(oldXDomain).range(x.range());
  const yOld = d3.scaleLinear().domain(oldYDomain).range(y.range());
  const areaOld = d3.area()
    .x(p => xOld(p.data[0]))
    .y0(p => yOld(p[0]))
    .y1(p => yOld(p[1]));

  // Ticks X explicites pour TOUJOURS afficher l'année de début et de fin
  // (les ticks auto de d3 tombent sur des multiples de 5 et masquent les
  // extrêmes — on les force ici).
  const [xStart, xEnd] = x.domain();
  const xTicks = [xStart];
  const firstNice = Math.ceil((xStart.getUTCFullYear() + 1) / 5) * 5;
  for (let y = firstNice; y < xEnd.getUTCFullYear(); y += 5) {
    xTicks.push(new Date(Date.UTC(y, 0, 1)));
  }
  xTicks.push(xEnd);

  // Axes : transitionnent ensemble. L'axe X se reposition aussi à y(0)
  // si on change de mode (sinon y(0) est déjà bon).
  xAxis.transition().duration(750)
    .attr("transform", `translate(0,${y(0)})`)
    .call(d3.axisBottom(x).tickValues(xTicks).tickFormat(d3.utcFormat("%Y")));
  yAxis.transition().duration(750)
    .call(d3.axisLeft(y).ticks(6));

  // Aligne le 1er label à gauche du tick, le dernier à droite, les autres
  // centrés. On FILTRE les ticks sortants (encore dans le DOM pendant leur
  // fade-out) pour que les indices correspondent bien à xTicks courant.
  const xTicksTimes = new Set(xTicks.map(t => +t));
  xAxis.selectAll(".tick text")
    .filter(function (d) { return xTicksTimes.has(+d); })
    .attr("text-anchor", function (d) {
      const idx = xTicks.findIndex(t => +t === +d);
      if (idx === 0) return "start";
      if (idx === xTicks.length - 1) return "end";
      return "middle";
    });

  // Snapshot avant le join — utilisé dans les attrTween
  const prev = previousSeries;

  layer.selectAll("path")
    .data(series, d => d.key)
    .join(
      // ENTER : nouvelle série → on l'ajoute, état initial = baseline
      enter => enter.append("path")
        .attr("fill", d => color(d.key))
        .attr("d", d => area(collapse(d)))
        .call(sel => sel.transition()
          .duration(750)
          .ease(d3.easeCubicInOut)
          .attrTween("d", function (d) {
            const i = interpolateSeries(collapse(d), d);
            return t => area(i(t));
          })
        ),

      // UPDATE : série déjà là → on morph depuis l'état précédent
      // Image de départ = données prev avec ANCIENNES scales (= ce qui
      // était à l'écran). Image d'arrivée = données curr avec NOUVELLES
      // scales (= ce qu'on veut voir). interpolateString anime les nombres
      // du path entre les deux ; les structures matchent grâce à
      // interpolateSeries (union des années, longueur identique).
      update => update.call(sel => sel.transition()
        .duration(750)
        .ease(d3.easeCubicInOut)
        .attrTween("d", function (d) {
          const previous = prev?.find(s => s.key === d.key) ?? collapse(d);
          const i = interpolateSeries(previous, d);
          const startPath = areaOld(i(0));
          const endPath = area(i(1));
          return d3.interpolateString(startPath, endPath);
        })
      ),

      // EXIT : même logique. Départ = données prev avec anciennes scales.
      // Arrivée = baseline avec nouvelles scales.
      exit => exit.call(sel => sel.transition()
        .duration(750)
        .ease(d3.easeCubicInOut)
        .attrTween("d", function (d) {
          const i = interpolateSeries(d, collapse(d));
          const startPath = areaOld(i(0));
          const endPath = area(i(1));
          return d3.interpolateString(startPath, endPath);
        })
        .remove()
      )
    );

  previousSeries = series;
}

// On expose update et le tooltip sur le node
const chartMorph = Object.assign(svg.node(), { update, tooltip });

function swatches(scale) {
  const root = document.createElement("div");
  Object.assign(root.style, {
    display: "flex",
    flexWrap: "wrap",
    gap: "0.4em 1.2em",
    fontFamily: "system-ui, sans-serif",
    fontSize: "14px",
    margin: "0.5em 0"
  });

  for (const key of [...scale.domain()].reverse()) {
    const item = document.createElement("span");
    Object.assign(item.style, {
      display: "inline-flex",
      alignItems: "center",
      gap: "0.4em"
    });

    const square = document.createElement("span");
    Object.assign(square.style, {
      width: "14px",
      height: "14px",
      background: scale(key),
      display: "inline-block",
      borderRadius: "2px"
    });

    item.append(square, document.createTextNode(key));
    root.append(item);
  }
  return root;
}

const yearMin = view(Inputs.button([
  ["Toutes années", () => 1991],
  ["≥ 2002", () => 2002]
], {value: 1991, label: "Fenêtre"}));

const mode = view(Inputs.radio(["annuel", "cumulé"], {value: "annuel", label: "Mode"}));

// Cette cell dépend de yearMin, mode et chartMorph.
// Filtre D'ABORD, cumul ENSUITE → la cumulative repart à 0 au début de la fenêtre.
{
  const filtered = dataImmigrationAll.filter(d => d.year.getUTCFullYear() >= yearMin);
  const transformed = mode === "cumulé" ? toCumulative(filtered) : filtered;
  chartMorph.update(transformed, mode);
}

{
  const wrapper = document.createElement("div");
  // position: relative → ancre le tooltip absolu dedans
  wrapper.style.position = "relative";
  wrapper.append(swatches(color), chartMorph, chartMorph.tooltip);
  display(wrapper);
}