06 - Connect the dots

function normalize(points, size = 300) {
  // Bounding box : extents min/max de x et de y.
  const xExtent = d3.extent(points, d => d.x);
  const yExtent = d3.extent(points, d => d.y);

  // Plus grand côté de la bbox → facteur d'échelle uniforme.
  const range = Math.max(xExtent[1] - xExtent[0], yExtent[1] - yExtent[0]);
  const scale = size / range;

  // Centre de la bbox, qu'on va décaler vers le centre du carré (size / 2).
  const cx = (xExtent[0] + xExtent[1]) / 2;
  const cy = (yExtent[0] + yExtent[1]) / 2;

  return points.map(p => ({
    x: (p.x - cx) * scale + size / 2,
    y: (p.y - cy) * scale + size / 2
  }));
}

// Top-level await dans une cell type="module" : le runtime attend la promise
// avant de laisser tourner les cells qui dépendent de `shapes`.
const shapes = {
  star:   normalize(await d3.json("data/connect-the-dots/star.json")),
  leaf:   normalize(await d3.json("data/connect-the-dots/leaf.json")),
  tree:   normalize(await d3.json("data/connect-the-dots/tree.json")),
  runner: normalize(await d3.json("data/connect-the-dots/runner.json")),
  crown:  normalize(await d3.json("data/connect-the-dots/crown.json"))
};

const w = 400;
const h = 400;
const margin = {top: 50, right: 50, bottom: 50, left: 50};
const innerW = w - margin.left - margin.right;
const innerH = h - margin.top - margin.bottom;

const svg = d3.create("svg")
  .attr("width", w)
  .attr("height", h)
  .attr("viewBox", `0 0 ${w} ${h}`)
  .style("background-color", "#fafafa");

const chartGroup = svg.append("g")
  .attr("transform", `translate(${margin.left}, ${margin.top})`);

const curves = {
  linear:     d3.curveLinearClosed,
  catmullRom: d3.curveCatmullRomClosed,
  cardinal:   d3.curveCardinalClosed,
  basis:      d3.curveBasisClosed
};

// d3.line() avec des accessors `x` et `y` configurés selon la shape de nos données.
// .curve(...) choisit l'algorithme d'interpolation entre les points.
const lineGen = d3.line()
  .x(d => d.x)
  .y(d => d.y)
  .curve(curves[curveType]);

const shape = shapes[shapeName];

redrawClick;   // déclaration de dépendance : cliquer Redraw re-run la cell

const pathSel = chartGroup.selectAll("path.shape")
  .data([null])              // un seul élément, donc un seul <path>
  .join("path")              // crée s'il n'existe pas, sinon réutilise
    .attr("class", "shape")
    .style("fill", "tomato")
    .style("stroke", "tomato")
    .style("stroke-width", 1.5);

// 1. set le d du path avec le line generator courant
pathSel.attr("d", lineGen(shape));

// 2. mesurer la longueur du path en pixels
const pathLength = pathSel.node().getTotalLength();

// 3. dash trick : un seul dash de la longueur totale, offset de la même valeur
//    → la ligne est "dessinée hors écran" au départ
pathSel
  .attr("stroke-dasharray", pathLength)
  .attr("stroke-dashoffset", pathLength)
  .style("fill-opacity", 0)
  .style("opacity", showPath ? 1 : 0);

// 4. animer offset vers 0 → la ligne se dessine. Puis fade-in du fill.
pathSel.transition().duration(2000).ease(d3.easeQuadInOut)
  .attr("stroke-dashoffset", 0)
  .transition().duration(500)
  .style("fill-opacity", showPath ? 0.15 : 0);

const dotRadius = shape.length < 30 ? 8 : 3;

chartGroup.selectAll("circle.dot")
  .data(shape, (d, i) => i)
  .join(
    enter => enter.append("circle")
      .attr("class", "dot")
      .style("fill", "white")
      .style("stroke", "black")
      .style("stroke-width", 1)
      .attr("r", 0)
      .attr("cx", d => d.x)
      .attr("cy", d => d.y),
    update => update,
    exit => exit.transition().duration(400)
      .attr("r", 0)
      .remove()
  )
  .transition().duration(750)
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
    .attr("r", dotRadius);

const isSparse = shape.length < 30;
const numberFontSize = isSparse ? 9 : 7;
const numberOffsetX = isSparse ? 0 : 8;
const numberOffsetY = isSparse ? 0 : -8;

chartGroup.selectAll("text.number")
  .data(shape, (d, i) => i)
  .join(
    enter => enter.append("text")
      .attr("class", "number")
      .attr("text-anchor", "middle")
      .attr("dominant-baseline", "middle")
      .style("font-family", "sans-serif")
      .style("fill", "black")
      .style("opacity", 0)
      .attr("x", d => d.x)
      .attr("y", d => d.y),
    update => update,
    exit => exit.transition().duration(400)
      .style("opacity", 0)
      .remove()
  )
  .text((d, i) => i + 1)
  .attr("font-size", numberFontSize)
  .transition().duration(750)
    .attr("x", d => d.x + numberOffsetX)
    .attr("y", d => d.y + numberOffsetY)
    .style("opacity", showNumbers ? 1 : 0);

const shapeName = view(Inputs.radio(Object.keys(shapes), {value: "leaf", label: "Shape"}));

const curveType = view(Inputs.radio(
  ["linear", "catmullRom", "cardinal", "basis"],
  {value: "linear", label: "Curve"}
));

const redrawClick = view(Inputs.button("Redraw"));

const showPath = view(Inputs.toggle({label: "Show connecting path", value: true}));

const showNumbers = view(Inputs.toggle({label: "Show numbers", value: false}));

display(svg.node());