30:T43b,the grid rewards looking. participants with full or near-full lines read as strongly committed — their positions close to the poles, little ambiguity across the nine axes. participants with many gaps or short lines sit closer to the centre, holding the middle ground across multiple axes simultaneously. patterns emerge across the columns too — axis four (hand / automation) and axis eight (analogue / digital) tend toward the top across most participants, a consistent gravitation toward hand and analogue that the research anticipated but the visual makes visceral. axis three (alone / together) and axis five (constraint / freedom) show the widest spread — the most personal axes, the least shared. looked at as a whole the grid has a rhythm. the lines rise and fall across the squares like a score waiting to be played — each column a beat, each participant a bar, the gaps the rests. it looks like interpolation because it is: twenty-five people, nine positions each, the movement between them the thing the research was always trying to see. ------------------------31:Ta3a,{ const size = 280; const pad = 40; const marginX = 24; const lineWidth = 6; const nAxes = 9; const usableWidth = size - marginX * 2; const step = usableWidth / (nAxes - 1); const w = size + pad * 2; const h = size + pad * 2 + 30; const svg = d3.create("svg").attr("width", w).attr("height", h); const g = svg.append("g").attr("transform", `translate(${pad},${pad})`); // background g.append("rect") .attr("width", size) .attr("height", size) .attr("fill", "#FFD700") .attr("stroke", "#333") .attr("stroke-width", 0.5) .attr("stroke-dasharray", "3,3"); // name label const nameLabel = svg .append("text") .attr("x", pad) .attr("y", pad + size + 20) .attr("font-size", "9px") .attr("fill", "#888") .text(""); // dot indicators const dots = svg .append("g") .attr("transform", `translate(${pad}, ${pad + size + 34})`); dots .selectAll("circle") .data(d3.range(25)) .join("circle") .attr("cx", (i) => i * 12) .attr("cy", 0) .attr("r", 2.5) .attr("fill", "#e0e0e0"); // nine lines, start empty const lines = g .selectAll("line.axis-line") .data(d3.range(nAxes)) .join("line") .attr("class", "axis-line") .attr("x1", (i) => marginX + i * step) .attr("x2", (i) => marginX + i * step) .attr("y1", size / 2) .attr("y2", size / 2) .attr("stroke", "#130C0E") .attr("stroke-width", lineWidth) .attr("stroke-linecap", "round"); function update(participantIndex) { const d = participantMap[participantIndex]; nameLabel.text(`${d.id} — ${d.name} [${d.age}]`); dots .selectAll("circle") .attr("fill", (i) => (i === participantIndex ? "#130C0E" : "#e0e0e0")); lines.each(function (axisIndex) { const pos = d.positions[axisIndex]; const v = pos.value; const norm = Math.abs(v) / 0.5; const lineH = norm * size; const y1 = v < 0 ? 0 : size - lineH; const y2 = v < 0 ? lineH : size; const snapY = v >= 0 ? size : 0; d3.select(this) .interrupt() .transition() .duration(300) .ease(d3.easeCubicIn) .attr("y1", snapY) .attr("y2", snapY) .transition() .duration(700) .ease(d3.easeCubicOut) .attr("y1", v === 0 ? snapY : y1) .attr("y2", v === 0 ? snapY : y2); }); } let idx = 0; update(idx); const interval = setInterval(() => { idx = (idx + 1) % participantMap.length; update(idx); }, 2000); invalidation.then(() => clearInterval(interval)); return svg.node(); }32:T91e,function squareGridLines( data, { size = 108, gap = 4, cols = 5, colGap = 32, pad = 24, labelSize = 9, labelColor = "#888", bgColour = "#FFD700", lineColour = "#130C0E", lineWidth = 4, marginX = 12 // left/right margin inside square } = {} ) { const colStep = size + gap + colGap; const rowStep = size + gap + labelSize + 6; const rows = Math.ceil(data.length / cols); const w = cols * colStep - colGap + pad * 2; const h = rows * rowStep - gap + pad * 2; const svg = DOM.svg(w, h); const sel = d3.select(svg); // 9 lines, evenly spaced across (size - marginX*2) const nAxes = 9; const usableWidth = size - marginX * 2; const step = usableWidth / (nAxes - 1); const cell = sel .selectAll("g.cell") .data(data) .join("g") .attr("class", "cell") .attr("transform", (d, i) => { const col = i % cols; const row = Math.floor(i / cols); const x = pad + col * colStep; const y = pad + row * rowStep; return `translate(${x},${y})`; }); // name left, id right cell .append("text") .attr("x", 0) .attr("y", -3) .attr("text-anchor", "start") .attr("font-size", labelSize + "px") .attr("fill", labelColor) .text((d) => `${d.name} [${d.age}]`); cell .append("text") .attr("x", size) .attr("y", -3) .attr("text-anchor", "end") .attr("font-size", labelSize + "px") .attr("fill", labelColor) .text((d) => d.id); // background cell .append("rect") .attr("width", size) .attr("height", size) .attr("fill", bgColour) .attr("stroke", "#333") .attr("stroke-width", 0.5) .attr("stroke-dasharray", "3,3"); // nine lines cell.each(function (d) { const g = d3.select(this); d.positions.forEach((pos, i) => { const v = pos.value; if (v === 0) return; const norm = Math.abs(v) / 0.5; const lineH = norm * size; const x = marginX + i * step; const y1 = v < 0 ? 0 : size - lineH; const y2 = v < 0 ? lineH : size; g.append("line") .attr("x1", x) .attr("x2", x) .attr("y1", y1) .attr("y2", y2) .attr("stroke", lineColour) .attr("stroke-width", lineWidth) .attr("stroke-linecap", "round"); }); }); return svg; }33:[] 2e:{"title":"nine axes","cells":[{"id":0,"value":"# nine axes\n\neach square shows all nine axis positions for a single participant. each vertical line represents one axis — height proportional to the strength of the position, growing from the top if they leaned toward the first pole, from the bottom toward the second. a gap means they placed themselves exactly at zero.\n\nno dropdown needed — all nine axes are visible at once. the shape of the lines is the shape of the participant.","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"### axes in order — reading the lines\n\neach square contains nine vertical lines, one per axis, left to right:\n\n top ↓ \n ───────────────────────────────────────────\n | | | | | | | | | \n 1 2 3 4 5 6 7 8 9\n | | | | | | | | | \n ───────────────────────────────────────────\n bottom ↑ \n\n\n| # | ↓ top pole | ↑ bottom pole |\n|---|-----------|--------------|\n| 1 | making | reflecting |\n| 2 | slow | fast |\n| 3 | alone | together |\n| 4 | hand | automation |\n| 5 | constraint | freedom |\n| 6 | tacit | explicit |\n| 7 | repeat | vary |\n| 8 | analogue | digital |\n| 9 | depth | breadth |\n\nno line — placed at zero, neither pole\n\nline grows downward ↓ — gravitation toward the first pole (left word)\nline grows upward ↑ — gravitation toward the second pole (right word)\nno line — — placed at zero, neither pole","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"wasn't sure to keep this visual black and white, or add colour, so exposed the colour as an option to alter:","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"viewof bgColour = Inputs.color({ label: \"background\", value: \"#FFD700\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"viewof lineColour = Inputs.color({ label: \"lines\", value: \"#130C0E\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"squareGridLines(participantMap, { bgColour, lineColour })","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"## one participant at a time\n\nthe same nine axes, one square. each line grows from its origin edge as the participant changes — all nine simultaneously, the full profile arriving at once.\n\ntwenty-five profiles, cycling in session order. the shape that emerges is unrepeatable — no two participants produced the same configuration of lines. the gaps are as much the portrait as the marks.\n\nthis may be the form the video essay uses — not a explanation of the research but a demonstration of it. twenty-five squares, each one a person, the lines the only thing they left behind in the data.","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"----------------------\n\n```\n __ __ _______ ___ ___ ___ _______ ___ _______ _______ \n| | | || || | | | | | | || | | || | \n| | | ||_ _|| | | | | | |_ _|| | | ___|| _____| \n| |_| | | | | | | | | | | | | | | |___ | |_____ \n| | | | | | | |___ | | | | | | | ___||_____ | \n| | | | | | | || | | | | | | |___ _____| | \n|_______| |___| |___| |_______||___| |___| |___| |_______||_______| \n```\n----------------------","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"import { participantMap } from \"@eesur/participant-data\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"\n","pinned":true,"hidden":false,"mode":"html"},{"id":38,"value":"\n","pinned":false,"hidden":false,"mode":"html"}],"files":"$W33","stdlib":"1","titling":"auto"}