Published
Edited
Dec 14, 2021
3 stars
Insert cell
Insert cell
Insert cell
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);
}
}
Insert cell
part1 = fold(points, folds[0]).size
Insert cell
fold = (points, {x: fx, y: fy}) => {
const next = new d3.InternSet([], JSON.stringify);
for (const [x, y] of points)
if (fx !== undefined) {
if (x < fx) next.add([x, y]);
else next.add([2 * fx - x, y]);
} else {
if (y < fy) next.add([x, y]);
else next.add([x, 2 * fy - y]);
}
return next;
}
Insert cell
folds = sections[1].split("\n").map((l) => {
const [, d, n] = l.match(/fold along (x|y)=(\d+)/);
return { [d]: +n };
})
Insert cell
points = new d3.InternSet(
sections[0].split("\n").map((l) => l.split(",").map(Number)),
JSON.stringify
)
Insert cell
sections = data.split("\n\n")
Insert cell
Insert cell
data = which === "test" ? test : input
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more