30:T4ab,### a note on maximum gravitation when a participant placed themselves at the maximum position on an axis, the square fills completely. at that point the direction — which pole they gravitated toward — is no longer readable from the visual alone. it is in the data. when a participant placed themselves exactly at zero, the square is empty. neither pole. a committed middle — not absence of opinion but a precise position between two things. several options were considered for the maximum case: filling with the participant's pen colour would have restored the directional reading, but mixed the concerns of the two notebooks — this one is deliberately monochrome. a small label inside the square would have worked but the label would be doing the work the fill should do. leaving white space at the origin edge was tried but broke the clean geometry. the decision was to accept it. a fully filled square means maximum gravitation. an empty square means the midpoint. the direction and the neutrality both live in the data site. the fill is the finding — the strength of the position, not its label. ---------------- use the dropdown to move through all nine axes one at a time.31:Te98,{ const size = 108; const gap = 4; const cols = 5; const colGap = 32; const pad = 24; const labelSize = 9; const labelColor = "#888"; const fontFamily = "JetBrains Mono, monospace"; const colStep = size + gap + colGap; const rowStep = size + gap + labelSize + 6; const rows = Math.ceil(participantMap.length / cols); const w = cols * colStep - colGap + pad * 2; const h = rows * rowStep - gap + pad * 2 + 40; const svg = d3 .create("svg") .attr("width", w) .attr("height", h) .style("font-family", fontFamily); // axis label at top const axisLabel = svg .append("text") .attr("x", pad) .attr("y", 20) .attr("font-size", "9px") .attr("fill", "#333") .text(""); // dot indicators const dots = svg.append("g").attr("transform", `translate(${pad}, 32)`); dots .selectAll("circle") .data(d3.range(9)) .join("circle") .attr("cx", (i) => i * 14) .attr("cy", 0) .attr("r", 2.5) .attr("fill", "#e0e0e0"); // cells const cell = svg .selectAll("g.cell") .data(participantMap) .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 = 48 + pad + row * rowStep; return `translate(${x},${y})`; }); 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); cell .append("rect") .attr("width", size) .attr("height", size) .attr("fill", "#ffffff") .attr("stroke", "#333") .attr("stroke-width", 0.5) .attr("stroke-dasharray", "3,3"); // fill rect — starts empty, collapsed to top edge cell .append("rect") .attr("class", "fill-rect") .attr("x", 0) .attr("width", size) .attr("y", 0) .attr("height", 0) .attr("fill", "#130C0E"); // track previous direction per cell so we know which edge to collapse to const prevDirection = new Array(participantMap.length).fill(null); function update(axisIndex) { const pos = participantMap[0].positions[axisIndex]; axisLabel.text(`${axisIndex + 1} — ${pos.labelTop} / ${pos.labelBottom}`); dots .selectAll("circle") .attr("fill", (i) => (i === axisIndex ? "#130C0E" : "#e0e0e0")); cell.each(function (d, i) { const v = d.positions[axisIndex].value; const norm = Math.abs(v) / 0.5; const fillH = norm * size; const newDir = v < 0 ? "top" : v > 0 ? "bottom" : null; const oldDir = prevDirection[i]; // collapse target — if direction changes, collapse to old origin edge // if same direction or first run, collapse to new origin edge const collapseY = oldDir === "bottom" ? size : 0; d3.select(this) .select(".fill-rect") .interrupt() // kill any running transition .attr("y", v < 0 ? 0 : size) // snap to origin edge immediately .attr("height", 0) // snap to zero height .transition() .duration(600) .ease(d3.easeCubicOut) .attr("y", v < 0 ? 0 : size - fillH) .attr("height", fillH); prevDirection[i] = newDir; }); } let axisIndex = 0; update(axisIndex); const interval = setInterval(() => { axisIndex = (axisIndex + 1) % 9; update(axisIndex); }, 2200); invalidation.then(() => clearInterval(interval)); return svg.node(); }32:T7a5,// the chart function function squareGridAxis( data, { size = 108, gap = 4, cols = 5, colGap = 32, pad = 24, labelSize = 9, labelColor = "#888", axisIndex = 0 } = {} ) { 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); 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); // white background cell .append("rect") .attr("width", size) .attr("height", size) .attr("fill", "#ffffff") .attr("stroke", "#333") .attr("stroke-width", 0.5) .attr("stroke-dasharray", "3,3"); // black fill — top if negative, bottom if positive cell.each(function (d) { const pos = d.positions[axisIndex]; const v = pos.value; // -0.5 to 0.5 const norm = Math.abs(v) / 0.5; // 0 to 1 const fillH = norm * size; if (v === 0) return; d3.select(this) .append("rect") .attr("x", 0) .attr("y", v < 0 ? 0 : size - fillH) .attr("width", size) .attr("height", fillH) .attr("fill", "#130C0E"); }); return svg; }33:T787,function axisKey(data, axisIndex, { size = 108 } = {}) { const pos = data[0].positions[axisIndex]; const w = size * 7 + size; const h = size + 60; const svg = DOM.svg(w, h); const sel = d3.select(svg); const topY = 20; function drawSquare(x, fillY, fillH, topLabel, bottomLabel) { if (fillH > 0) { sel .append("rect") .attr("x", x) .attr("y", topY + fillY) .attr("width", size) .attr("height", fillH) .attr("fill", "#130C0E"); } sel .append("rect") .attr("x", x) .attr("y", topY) .attr("width", size) .attr("height", size) .attr("fill", "none") .attr("stroke", "#333") .attr("stroke-width", 0.5) .attr("stroke-dasharray", "3,3"); if (topLabel) { sel .append("text") .attr("x", x + size / 2) .attr("y", topY - 6) .attr("text-anchor", "middle") .attr("font-size", "9px") .attr("fill", "#333") .text(topLabel); } if (bottomLabel) { sel .append("text") .attr("x", x + size / 2) .attr("y", topY + size + 14) .attr("text-anchor", "middle") .attr("font-size", "9px") .attr("fill", "#333") .text(bottomLabel); } } // first — empty, zero drawSquare(0, 0, 0, null, "neither pole"); // midpoint label between first and second sel .append("text") .attr("x", size * 1.5) .attr("y", topY + size / 2 + 4) .attr("text-anchor", "middle") .attr("font-size", "9px") .attr("fill", "#888") .text("midpoint"); // second — top fill drawSquare(size * 2, 0, size / 2, `↓ ${pos.labelTop}`, null); // third — bottom fill drawSquare(size * 4, size / 2, size / 2, null, `↑ ${pos.labelBottom}`); // fourth — full fill drawSquare(size * 6, 0, size, "maximum gravitation", "direction in the data"); return svg; }34:[] 2e:{"title":"axis explorer","cells":[{"id":0,"value":"# axis explorer\n\neach square shows where a participant placed themselves on a single axis — black fills from the top if they leaned toward the first pole, from the bottom if toward the second. the deeper the fill, the stronger the lean. an empty square means they placed themselves exactly at zero.\n\ninspired by Đorđević's Processes in a Square System (1975) — position as the variable, the square as the container.\n\n### reading the key\n\n↓ label at top — black fills downward from the top edge. the participant gravitated toward this pole.\n\n↑ label at bottom — black fills upward from the bottom edge. the participant gravitated toward this pole.\n\nempty square — value of zero. neither pole. a committed middle.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"axisKey(participantMap, selectedAxis)","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"// axis selector — drives everything\nviewof selectedAxis = Inputs.select([0, 1, 2, 3, 4, 5, 6, 7, 8], {\n label: \"axis\",\n format: (i) =>\n `${i + 1} — ${participantMap[0].positions[i].labelTop} / ${\n participantMap[0].positions[i].labelBottom\n }`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"// render\nsquareGridAxis(participantMap, { axisIndex: selectedAxis })","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"## animated axis explorer\n\nthe same twenty-five squares, animating through all nine axes in sequence. each square grows from its origin edge — top down for the first pole, bottom up for the second. the fill resets cleanly between axes rather than sliding across, so the direction is always readable.\n\nbuilt with d3 transitions — `d3.easeCubicOut` on the expand, `selection.interrupt()` to snap between states. the animation is itself an interpolation: each rect moves between two values over time, the easing curve the middle state you don't see but feel.\n\nthis is why the visual form is d3 — not because it was convenient, but because `d3.interpolate` is the research subject rendered as method.","pinned":false,"hidden":false,"mode":"md"},{"id":31,"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":6,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"// import\nimport { participantMap } from \"@eesur/participant-data\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"\n","pinned":true,"hidden":false,"mode":"html"},{"id":54,"value":"\n","pinned":false,"hidden":false,"mode":"html"}],"files":"$W34","stdlib":"1","titling":"auto"}