31:T6b4,## what the distribution shows the dots form a diagonal band running from upper-centre to lower-right — higher fluctuation correlates with stronger tendency in either direction. the more committed a participant was across the axes, the more directional their overall lean. the low-fluctuation participants cluster near the centre-left, holding the middle. thirteen lean toward the first poles, three toward the second, nine near zero. the asymmetry is the finding — the research attracted practitioners who orient toward the tacit, the analogue, the hand, and the protocol made that visible without asking for it directly. the empty corners are as telling as the dots. nobody sits upper-right (high fluctuation, strong first-pole lean) or lower-left (low fluctuation, strong second-pole lean). the extremes were not reached. patrick (23) sits furthest left — the lowest fluctuation in the dataset. lucy (06) sits furthest into the second-pole territory. krishan (25) and ahalya (09) sit furthest right — the highest fluctuation, the most committed across the axes, in different directions. ### all particpants in one square this single-square view exists to sense-check the 25-square grid. each dot here corresponds to one square in the grid — the id number inside the circle is the session id, matching the label in the grid above. the force simulation nudges overlapping dots apart while keeping them as close to their true position as possible. the positions are approximate, not exact — for precision, we have the 25-square grid above. for pattern and cluster, this view helps. the two views are the same data seen at different distances. the grid is the close reading. this is the step back.32:Tbca,{ const size = 600; const margin = 40; const dotRadius = 14; const fontFamily = "JetBrains Mono, monospace"; const pad = 60; const w = size + pad * 2; const h = size + pad * 2; const svg = d3 .create("svg") .attr("width", w) .attr("height", h) .style("font-family", fontFamily); const g = svg.append("g").attr("transform", `translate(${pad},${pad})`); const xScale = d3 .scaleLinear() .domain([0, 0.5]) .range([margin, size - margin]); const yScale = d3 .scaleLinear() .domain([-0.5, 0.5]) .range([margin, size - margin]); // border g.append("rect") .attr("width", size) .attr("height", size) .attr("fill", "none") .attr("stroke", "#333") .attr("stroke-width", 0.5) .attr("stroke-dasharray", "3,3"); // crosshair g.append("line") .attr("x1", size / 2) .attr("x2", size / 2) .attr("y1", margin) .attr("y2", size - margin) .attr("stroke", "#e0e0e0") .attr("stroke-width", 1); g.append("line") .attr("x1", margin) .attr("x2", size - margin) .attr("y1", size / 2) .attr("y2", size / 2) .attr("stroke", "#e0e0e0") .attr("stroke-width", 1); // axis labels g.append("text") .attr("x", size / 2) .attr("y", margin - 10) .attr("text-anchor", "middle") .attr("font-size", "9px") .attr("fill", "#888") .text("top poles"); g.append("text") .attr("x", size / 2) .attr("y", size - margin + 20) .attr("text-anchor", "middle") .attr("font-size", "9px") .attr("fill", "#888") .text("bottom poles"); g.append("text") .attr("x", margin - 8) .attr("y", size / 2) .attr("text-anchor", "middle") .attr("font-size", "9px") .attr("fill", "#888") .attr("transform", `rotate(-90, ${margin - 8}, ${size / 2})`) .text("low fluctuation"); g.append("text") .attr("x", size - margin + 8) .attr("y", size / 2) .attr("text-anchor", "middle") .attr("font-size", "9px") .attr("fill", "#888") .attr("transform", `rotate(90, ${size - margin + 8}, ${size / 2})`) .text("high fluctuation"); // shallow copy so simulation doesn't mutate participantProfile const nodes = participantProfile.map((d) => ({ ...d, tx: xScale(d.fluctuation), ty: yScale(d.tendency) })); const simulation = d3 .forceSimulation(nodes) .force("x", d3.forceX((d) => d.tx).strength(0.8)) .force("y", d3.forceY((d) => d.ty).strength(0.8)) .force("collide", d3.forceCollide(dotRadius + 3)) .stop(); for (let i = 0; i < 300; i++) simulation.tick(); const cell = g .selectAll("g.dot") .data(nodes) .join("g") .attr("class", "dot") .attr("transform", (d) => `translate(${d.x},${d.y})`); cell.append("circle").attr("r", dotRadius).attr("fill", "#130C0E"); cell .append("text") .attr("text-anchor", "middle") .attr("dy", "0.35em") .attr("font-size", "9px") .attr("fill", "#ffffff") .text((d) => d.id); return svg.node(); }33:T5cd,## what the dot loses Ahalya (09) sits upper-right — high fluctuation, first-pole tendency. both readings are correct. but her session sheet tells a different story than the dot alone suggests. her line holds steady and high across seven axes — slow, alone, hand, constraint, tacit, repeat, analogue — a committed, consistent plateau. then it falls sharply at making (she leaned toward reflecting) and drops dramatically at depth toward breadth. the dot's high fluctuation score comes not from a jagged line but from a line that committed strongly and held, with two significant departures at either end. the mean flattens that. a participant who was consistently at -0.38 across seven axes and then dropped looks the same in the summary as one who varied wildly across all nine. they are not the same.

${await FileAttachment("id_09_scan.jpg").image({width: 600})}

    Ahalya (09) — hand line and machine line. the plateau across seven axes, the fall at making and depth.
  

this is the research argument applied to its own analysis. the dot is the automated output — correct, compressed, useful for pattern. the line is the interpolation — the middle states, the navigation, the thing that produced the dot. the scan site holds what the square cannot. `amplify(line, dot) → the gap is the finding`34:T704,## thinking process in this visual iteration starting point: the nine-axis data has direction baked in — negative toward the first pole, positive toward the second. but for fluctuation, direction doesn't matter. a participant who placed themselves at -0.5 on one axis is just as committed as one who placed themselves at 0.5. the question was how to measure commitment without direction cancelling itself out. first instinct was range — the distance between the highest and lowest value across the nine axes. but range is vulnerable to a single outlier: one extreme value on one axis and near-zero on the rest would produce a high range score that misrepresents the overall picture. standard deviation handles that — it measures spread across all nine values, so a single outlier gets diluted by the other eight. but standard deviation still carries direction in its inputs, which felt wrong for what was being asked. the cleaner measure is mean absolute deviation from zero: take the absolute value of each position, removing direction entirely, then average across the nine axes. this treats -0.5 and 0.5 as identical — both are maximum commitment, just toward different poles. zero is zero: neither pole, no commitment, the neutral middle. but that gives one number per participant — how much they fluctuated. the second question followed naturally: which way did they tend overall? the mean value across the nine axes, direction preserved, gives the tendency. negative overall means gravitating toward the first poles. positive means the second poles. two numbers, two axes, one dot per participant. the square contains the whole profile. this is Đorđević's system applied to the data — position as the variable, the square as the container, the grid as the comparison. 35:T7b8,function dotKey({ size = 108, dotRadius = 4, dotFill = "#130C0E", margin = 12 } = {}) { const cases = [ { x: margin, y: margin, label: "low fluctuation\ntop pole tendency" }, { x: size / 2, y: size / 2, label: "neutral\nneither pole" }, { x: size - margin, y: size - margin, label: "high fluctuation\nbottom pole tendency" } ]; const cols = 3; const colGap = 40; const topY = 30; const w = cols * (size + colGap) - colGap; const h = size + 60; const svg = DOM.svg(w, h); const sel = d3.select(svg); cases.forEach((c, i) => { const offsetX = i * (size + colGap); const g = sel .append("g") .attr("transform", `translate(${offsetX}, ${topY})`); // border g.append("rect") .attr("width", size) .attr("height", size) .attr("fill", "none") .attr("stroke", "#333") .attr("stroke-width", 0.5) .attr("stroke-dasharray", "3,3"); // crosshair g.append("line") .attr("x1", size / 2) .attr("x2", size / 2) .attr("y1", margin) .attr("y2", size - margin) .attr("stroke", "#e0e0e0") .attr("stroke-width", 0.5); g.append("line") .attr("x1", margin) .attr("x2", size - margin) .attr("y1", size / 2) .attr("y2", size / 2) .attr("stroke", "#e0e0e0") .attr("stroke-width", 0.5); // dot — open circle for neutral, filled for extremes g.append("circle") .attr("cx", c.x) .attr("cy", c.y) .attr("r", dotRadius) .attr("fill", i === 1 ? "none" : dotFill) .attr("stroke", dotFill) .attr("stroke-width", 1); // labels below c.label.split("\n").forEach((line, j) => { g.append("text") .attr("x", size / 2) .attr("y", size + 16 + j * 12) .attr("text-anchor", "middle") .attr("font-size", "9px") .attr("fill", j === 0 ? "#333" : "#888") .text(line); }); }); return svg; }36:T9ca,function squareGridDot( data, { size = 108, gap = 4, cols = 5, colGap = 32, pad = 24, labelSize = 9, labelColor = "#888", dotRadius = 4, dotFill = "#130C0E", margin = 12 // inner margin so dot doesn't sit on edge } = {} ) { 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); // scales — map values into the usable area inside each square const xScale = d3 .scaleLinear() .domain([0, 0.5]) // fluctuation: 0 to max .range([margin, size - margin]); const yScale = d3 .scaleLinear() .domain([-0.5, 0.5]) // tendency: top-pole to bottom-pole .range([margin, size - margin]); 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); // border 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"); // crosshair at centre — shows the zero/zero origin cell .append("line") .attr("x1", size / 2) .attr("x2", size / 2) .attr("y1", margin) .attr("y2", size - margin) .attr("stroke", "#e0e0e0") .attr("stroke-width", 0.5); cell .append("line") .attr("x1", margin) .attr("x2", size - margin) .attr("y1", size / 2) .attr("y2", size / 2) .attr("stroke", "#e0e0e0") .attr("stroke-width", 0.5); // dot cell .append("circle") .attr("cx", (d) => xScale(d.fluctuation)) .attr("cy", (d) => yScale(d.tendency)) .attr("r", dotRadius) .attr("fill", dotFill); return svg; }37:[{"id":"469797a978c576843c99a2f87a0f902cf08eb93e433e819c94b4116346e096060039b65480548279a7fb10269bb04301039a213ed8ad4f515261437ecc314a86","href":"https://static.observableusercontent.com/files/469797a978c576843c99a2f87a0f902cf08eb93e433e819c94b4116346e096060039b65480548279a7fb10269bb04301039a213ed8ad4f515261437ecc314a86","name":"id_09_scan.jpg","type":"image/jpeg","lastModified":1777314012254.365,"size":181863}] 2f:{"title":"position within the square","cells":[{"id":0,"value":"# position within the square\n\neach square contains a single dot. its position encodes two things:\n\n- **left → right** — how strongly they committed across the nine axes. left = near zero throughout. right = strong commitment.\n- **top → bottom** — which way they leaned overall. top = making, hand, tacit, slow, analogue. bottom = reflecting, automation, explicit, fast, digital.","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"dotKey()","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"the crosshair marks the zero origin — a dot at the centre means a participant who was both uncommitted and balanced. the further from centre, the stronger and more directional their overall profile.\n\ninspired by Đorđević's *Processes in a Square System* (1975) — position as the variable, the square as the container.\n\nsource data: [observablehq.com/@eesur/participant-data](https://observablehq.com/@eesur/participant-data)","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"squareGridDot(participantProfile, {})","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"----------------------\n\n```\n __ __ _______ ___ ___ ___ _______ ___ _______ _______ \n| | | || || | | | | | | || | | || | \n| | | ||_ _|| | | | | | |_ _|| | | ___|| _____| \n| |_| | | | | | | | | | | | | | | |___ | |_____ \n| | | | | | | |___ | | | | | | | ___||_____ | \n| | | | | | | || | | | | | | |___ _____| | \n|_______| |___| |___| |_______||___| |___| |___| |_______||_______| \n```\n----------------------","pinned":false,"hidden":false,"mode":"md"},{"id":79,"value":"participantProfile.find((d) => d.name === \"Ahalya\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"participantProfile.find((d) => d.name === \"Ahalya\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"participantMap\n .find((d) => d.name === \"Ahalya\")\n .positions.map((p) => ({ axis: p.labelTop, value: p.value }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"participantIndex.get(\"23\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"participantProfile.filter((d) => d.tendency < 0).length","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"participantProfile.filter((d) => Math.abs(d.tendency) < 0.05).length","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"import {\n participantProfile,\n participantIndex,\n participantMap\n} from \"@eesur/participant-data\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"\n","pinned":true,"hidden":false,"mode":"html"},{"id":23,"value":"``` \n_______ _______ ______ _______ \n| || || | | | \n| || _ || _ || ___| \n| || | | || | | || |___ \n| _|| |_| || |_| || ___| \n| |_ | || || |___ \n|_______||_______||______| |_______| \n```","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}