30:T47f,# 25 × 2 lines all 25 participants on one sheet. hand lines in purple, machine lines in black. the same nine axes, the same coordinate system as the session sheet — so what you're seeing is what was plotted. toggle the layers. with both lines visible the gaps between hand and machine become a third set of lines — the space between what the body drew and what the sliders recorded. with only the dots moving, the axes become a landscape and each participant a signal passing through it. the voronoi divides the space by proximity — each region belongs to the participant whose hand crossed nearest to that point. hover to isolate a line and read the name. the interaction is always on; the grid is optional. three exports are available — hand only, machine only, both together — each at the exact dimensions of the session sheet, ready to plot on A3. the labels will need positioning by hand in Inkscape before plotting. this is the research argument as a single image: 25 people, the same nine questions, lines that converge and diverge, a gap that varies by person and by axis. the machine lines are steady. the hand lines are not. 31:T292d,{ width; // Observable reactive dependency — cell re-runs whenever notebook width changes const W = width; const H = W * (PLOT_HEIGHT / PLOT_WIDTH); // maintain A3 aspect ratio const contentWidth = AXIS_X[8] - AXIS_X[0]; // just the axis span const scale = (W - 80) / contentWidth; // 90 = breathing room for labels const padX = AXIS_X[0] * scale; const padY = Y_TOP * scale; // Screen coordinate functions — convert plot coords to pixels // All rendering uses these; export functions use raw coords const sx = (x) => x * scale - padX + 40; const sy = (y) => y * scale - padY + 20; console.log("last axis screen x:", sx(AXIS_X[8]), "W:", W); // Screen-space polyline strings — used for display only function toScreenPointsStr(pts) { return pts.map((p) => `${sx(p.x)},${sy(p.y)}`).join(" "); } function toHandScreenPointsStr(pts) { return pts.map((p) => `${sx(p.x)},${sy(p.gapY)}`).join(" "); } let selectedId = null; // tracks which participant is isolated on click // Height based on actual data range, not full A3 height const contentH = (Y_BOTTOM - Y_TOP) * scale + 80; const labelWidth = 120; // extra width for name labels beyond last axis const svgW = W + labelWidth; const svg = d3 .create("svg") .attr("viewBox", `0 0 ${svgW} ${contentH}`) .style("width", "100%") // fills notebook column // .attr("width", W + labelWidth) .attr("height", contentH) .style("overflow", "visible") // labels can spill outside SVG bounds .style("font-family", "IBM Plex Mono, monospace"); // ── grid ─────────────────────────────────────────────────────── const grid = svg.append("g").attr("class", "grid"); // Nine vertical axis lines — one per axis AXIS_X.forEach((x) => { grid .append("line") .attr("x1", sx(x)) .attr("y1", sy(Y_TOP)) .attr("x2", sx(x)) .attr("y2", sy(Y_BOTTOM)) .attr("stroke", "#333") .attr("stroke-width", 0.5); }); // Dashed centre line — the zero/neutral position grid .append("line") .attr("x1", sx(AXIS_X[0])) .attr("y1", sy(Y_CENTRE)) .attr("x2", sx(AXIS_X[8])) .attr("y2", sy(Y_CENTRE)) .attr("stroke", "#333") .attr("stroke-width", 0.5) .attr("stroke-dasharray", "4,4"); const axisLabels = [ "making", "slow", "alone", "hand", "constraint", "tacit", "repeat", "analogue", "depth" ]; const axisLabelsBottom = [ "reflecting", "fast", "together", "automation", "freedom", "explicit", "vary", "digital", "breadth" ]; axisLabels.forEach((label, i) => { grid .append("text") .attr("x", sx(AXIS_X[i])) .attr("y", sy(Y_TOP - 12)) .attr("text-anchor", "middle") .attr("font-size", `${12 * scale}px`) .attr("fill", "#888") .text(label); }); axisLabelsBottom.forEach((label, i) => { grid .append("text") .attr("x", sx(AXIS_X[i])) .attr("y", sy(Y_BOTTOM + 20)) .attr("text-anchor", "middle") .attr("font-size", `${12 * scale}px`) .attr("fill", "#888") .text(label); }); // ── lines ───────────────────────────────────────── const linesGroup = svg.append("g").attr("class", "lines"); const circles = []; // collect circles for animation after all lines drawn // Sort by id so stagger delay is in participant order const sorted = [...data].sort( (a, b) => Number(a.profile.participant_id) - Number(b.profile.participant_id) ); sorted.forEach((participant, idx) => { const pts = buildPoints(participant.positions); const pid = participant.profile.participant_id; const name = participant.participant; // Group per participant — click toggles isolation const g = linesGroup .append("g") .attr("class", `participant p${pid}`) .style("cursor", "pointer") .on("click", () => { if (selectedId === pid) { // second click releases isolation selectedId = null; linesGroup.selectAll("g.participant").style("opacity", 1); } else { // first click dims all, highlights this one selectedId = pid; linesGroup.selectAll("g.participant").style("opacity", 0.15); linesGroup.select(`g.p${pid}`).style("opacity", 1); } }); // Machine line — uses slider value (what participant consciously reported) if (showMachine && showLines) { g.append("polyline") .attr("class", "machine-line") .attr("points", toScreenPointsStr(pts)) .attr("fill", "none") .attr("stroke", "#130C0E") .attr("stroke-width", 2 * scale) .attr("stroke-opacity", 0.6); } // Hand line — uses digitised hand position (what the body drew) if (showHand && showLines) { g.append("polyline") .attr("class", "hand-line") .attr("points", toHandScreenPointsStr(pts)) .attr("fill", "none") .attr("stroke", "#6608ff") .attr("stroke-width", 2 * scale) .attr("stroke-opacity", 0.6); } // Name label positioned at the end of the hand line (axis 9) const lastPt = pts[pts.length - 1]; g.append("text") .attr("x", sx(lastPt.x + 14)) .attr("y", sy(lastPt.gapY)) .attr("font-size", `${12 * scale}px`) .attr("fill", "#444") .attr("dominant-baseline", "middle") .text(`${name} [${pid}]`); // Circle for animation — stored for later, not animated yet // idx used for stagger delay so circles launch in id order if (animateCircles && showHand) { const circle = g .append("circle") .attr("r", 4 * scale) .attr("fill", "#6608ff") .attr("cx", sx(pts[0].x)) .attr("cy", sy(pts[0].gapY)); circles.push({ circle, pts, pid: idx }); } }); // ── Voronoi selection ───────────────────────────────────────────────── // collect all axis crossing points with participant reference const voronoiPoints = []; sorted.forEach((participant) => { const pts = buildPoints(participant.positions); const pid = participant.profile.participant_id; const name = participant.participant; pts.forEach((pt) => { voronoiPoints.push({ x: sx(pt.x), y: sy(pt.gapY), pid, name }); }); }); // build delaunay from all crossing points — used for both display and interaction const delaunay = d3.Delaunay.from( voronoiPoints, (d) => d.x, (d) => d.y ); // voronoi cell paths — only drawn when showVoronoi is checked // interaction always works regardless of visibility if (showVoronoi) { const voronoi = delaunay.voronoi([ sx(AXIS_X[0]) - 20, sy(Y_TOP) - 20, sx(AXIS_X[8]) + 150, sy(Y_BOTTOM) + 40 ]); svg .append("g") .attr("class", "voronoi-cells") .selectAll("path") .data(voronoiPoints) .join("path") .attr("d", (d, i) => voronoi.renderCell(i)) .attr("fill", "none") .attr("stroke", "#ff00ff") .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.6) .style("pointer-events", "none"); } // overlay rect — always present, catches all mouse events // near-transparent fill required const overlay = svg .append("rect") .attr("x", sx(AXIS_X[0]) - 20) .attr("y", sy(Y_TOP) - 20) .attr("width", sx(AXIS_X[8]) - sx(AXIS_X[0]) + 170) .attr("height", sy(Y_BOTTOM) - sy(Y_TOP) + 60) .attr("fill", "rgba(0,0,0,0.001)") .style("cursor", "crosshair"); // hover label — always last in SVG so it renders above everything const hoverLabel = svg .append("text") .attr("font-size", "10px") .attr("fill", "#130C0E") .attr("font-family", "IBM Plex Mono, monospace") .style("pointer-events", "none") .style("display", "none"); // mouse interaction — always active overlay .on("mousemove", (event) => { const [mx, my] = d3.pointer(event); const idx = delaunay.find(mx, my); const nearest = voronoiPoints[idx]; if (!nearest) return; const pid = nearest.pid; linesGroup.selectAll("g.participant").style("opacity", 0.1); linesGroup.select(`g.p${pid}`).style("opacity", 1); hoverLabel .style("display", "block") .attr("x", mx + 12) .attr("y", my - 6) .text(`${nearest.name} [${pid}]`); }) .on("mouseleave", () => { linesGroup.selectAll("g.participant").style("opacity", 1); hoverLabel.style("display", "none"); }); // ── animation ──────────────────────────────────────────── if (animateCircles && showHand) { // sx and sy passed explicitly — avoids stale closure if width changes function animateCircle(circleObj, sx, sy) { const { circle, pts, pid } = circleObj; const delay = pid * 200; // stagger: participant 0 first, 24 last (4.8s later) // Pre-compute screen positions once const screenPts = pts.map((p) => [sx(p.x), sy(p.gapY)]); const segCount = screenPts.length - 1; const segDuration = 800; // ms per axis segment function runSegment(i) { if (i >= segCount) { // reached the end — snap back to start and loop circle.attr("cx", screenPts[0][0]).attr("cy", screenPts[0][1]); setTimeout(() => runSegment(0), 500); return; } const [x2, y2] = screenPts[i + 1]; circle .transition() .delay(i === 0 ? delay : 0) // only delay on first segment .duration(segDuration) .ease(d3.easeLinear) .attr("cx", x2) .attr("cy", y2) .on("end", () => runSegment(i + 1)); // chain to next segment } // Place at start before animation begins circle.attr("cx", screenPts[0][0]).attr("cy", screenPts[0][1]); runSegment(0); } circles.forEach((c) => animateCircle(c, sx, sy)); } // Clean up d3 transitions when cell re-runs (Observable invalidation pattern) invalidation.then(() => svg.selectAll("circle").interrupt()); return svg.node(); }32:T43b,htl.html`

`33:Tb1c,exportSVG = () => { // Build a clean SVG at plot dimensions // exportMode: "hand", "machine", "both" const axisLabels = [ "making", "slow", "alone", "hand", "constraint", "tacit", "repeat", "analogue", "depth" ]; const axisLabelsBottom = [ "reflecting", "fast", "together", "automation", "freedom", "explicit", "vary", "digital", "breadth" ]; let svgStr = ` `; // trigger download const blob = new Blob([svgStr], { type: "image/svg+xml" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `all-lines-${exportMode}.svg`; a.click(); URL.revokeObjectURL(url); }34:[] 2e:{"title":"25 × 2 lines","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"viewof exportMode = Inputs.radio([\"hand\", \"machine\", \"both\"], {\n value: \"both\",\n label: \"export\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"viewof showHand = Inputs.toggle({ label: \"hand lines\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"viewof showMachine = Inputs.toggle({ label: \"machine lines\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"viewof animateCircles = Inputs.toggle({ label: \"animate\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"viewof showLines = Inputs.toggle({ label: \"show lines\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"viewof showVoronoi = Inputs.toggle({ label: \"show voronoi grid\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"{\n const scale = width / PLOT_WIDTH;\n return `scale: ${scale}, axis[0] screen x: ${\n AXIS_X[0] * scale\n }, width: ${width}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"-----------\n\n```\n ______ _______ _______ _______ \n| | | _ || || _ | \n| _ || |_| ||_ _|| |_| | \n| | | || | | | | | \n| |_| || | | | | | \n| || _ | | | | _ | \n|______| |__| |__| |___| |__| |__| \n \n```","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"// Build points array for a participant's line\nfunction buildPoints(positions) {\n return positions.map((p, i) => ({\n x: AXIS_X[i],\n y: valueToY(p.value),\n gapY: valueToY(p.hand)\n }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"import { data } from \"@eesur/participant-data\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"----------------------\n\n```\n __ __ _______ ___ ___ ___ _______ ___ _______ _______ \n| | | || || | | | | | | || | | || | \n| | | ||_ _|| | | | | | |_ _|| | | ___|| _____| \n| |_| | | | | | | | | | | | | | | |___ | |_____ \n| | | | | | | |___ | | | | | | | ___||_____ | \n| | | | | | | || | | | | | | |___ _____| | \n|_______| |___| |___| |_______||___| |___| |___| |_______||_______| \n```\n----------------------","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"note: raw plot coordinates — kept as global cells for the export function. The screen versions with sx/sy live inside the display cell only.","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"function toPointsStr(pts) {\n return pts.map((p) => `${p.x},${p.y}`).join(\" \");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"function toHandPointsStr(pts) {\n return pts.map((p) => `${p.x},${p.gapY}`).join(\" \");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"// Map a value (-0.5 to +0.5) to a y coordinate\nfunction valueToY(v) {\n // negative = top pole, positive = bottom pole\n return Y_CENTRE + (v / 0.5) * (Y_BOTTOM - Y_CENTRE);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"PLOT_WIDTH = 1587.4016 // SVG export dimensions","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"PLOT_HEIGHT = 1122.5197 //SVG export dimensions","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"AXIS_X = [345.23, 457.35, 569.47, 681.59, 793.69, 905.81, 1017.93, 1130.05, 1242.17] /// Axis x positions (after transform applied)","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"Y_TOP = 249.7 // value = -0.5 (top pole)","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"Y_CENTRE = 561.26 // value = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"Y_BOTTOM = 867.63 // value = +0.5 (bottom pole)","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"\n","pinned":true,"hidden":false,"mode":"html"}],"files":"$W34","stdlib":"1","titling":"auto"}