part2 = {
replay;
const states = [points];
const x = d3.max(points, (d) => d[0]),
y = d3.max(points, (d) => d[1]);
for (const f of folds) {
states.push(fold(states[states.length - 1], f));
yield Plot.plot({
marks: states.map((p, i) => [
folds[i - 1]?.x &&
Plot.ruleX([folds[i - 1].x], {
y2: d3.min(folds.slice(0, i - 1), (d) => d.y),
strokeWidth: 3,
strokeDasharray: "24 12"
}),
folds[i - 1]?.y &&
Plot.ruleY([folds[i - 1].y], {
x2: d3.min(folds.slice(0, i - 1), (d) => d.x),
strokeWidth: 3,
strokeDasharray: "24 12"
}),
Plot.dot(p, { r: 5, fill: i })
]),
x: { axis: false, inset: 10, domain: [-1, x / 3] },
y: { axis: false, inset: 10, domain: [-1, y / 3], reverse: true },
color: { domain: [0, folds.length + 1] },
width: x * 2 + 20,
height: x * 2 + 20
});
await Promises.delay(200);
}
}