31:T1092,processed = { // --- Likert key map (raw keys are messy, alias them) --- const likertKeys = { direction_facing: '"I can quickly figure out which direction I\'m facing in a new environment"', unsure_unfamiliar: '"I often feel unsure of where I am when navigating unfamiliar places" ', remember_connect: 'After visiting a place, I can remember how different locations connect." ', mental_map: '"I form a mental map of places as I move through them" ', use_landmarks: '"I use landmarks to guide my navigation"', visual_features: '"I find it easier to navigate in places with clear and unique visual features." ', confident_unfam: '"I feel confident navigating unfamiliar places." ', rarely_disoriented: '"I rarely get disoriented in large or complex environments." ' }; // Negatively-worded items: agreeing means WORSE navigation ability. // After we flip the 1–7 scale, we also reverse these so higher = better. const negativelyWorded = new Set(["unsure_unfamiliar"]); // --- Parse a Likert cell -> 1..7 where 7 = strongly agree, or null --- // Source uses 1=strongly agree ... 7=strongly disagree, so we flip: out = 8 - raw const parseLikert = (val, isNegative) => { if (val == null) return null; const m = String(val).trim().match(/^(\d)/); if (!m) return null; const raw = +m[1]; if (raw < 1 || raw > 7) return null; let flipped = 8 - raw; // higher = stronger agreement if (isNegative) flipped = 8 - flipped; // reverse-code negatively worded return flipped; // now: higher = better navigation }; // --- Ordinal mappings (higher = more / better) --- const gameExpMap = { "Never; 0 hours/week": 0, Rarely: 1, "Rarely, 0 hours": 1, "Rarely; 0 hours/week": 1, "Rarely; 0 hours/week (Inferred)": 1, "Occasionally; 1-3 hours/week": 2, "Frequently; 1-3 hours/week": 3, "Frequently; 8-14 hours/week": 4 }; const sodMap = { Poor: 1, Average: 2, Good: 3, "Very good": 4 }; const comfortMap = { "Very uncomfortable": 0, "Somewhat uncomfortable": 1, Neutral: 2, "Somewhat Comfortable": 3, "Very Comfortable": 4 }; const routeConfMap = { "Somewhat unsure": 1, Neutral: 2, "Somewhat confident": 3, "Very confident": 4 }; // Visual ability: 0 = no difficulty, higher = more difficulty. // We invert so HIGHER = BETTER vision (consistent direction). const visualMap = (s) => { if (s == null) return null; const t = String(s).trim().toLowerCase(); if (t.startsWith("no difficulty")) return 3; if (t.includes("prescription")) return 2; // corrected, fine if (t.includes("some difficulty")) return 1; if (t.includes("eye strain") || t.includes("headache")) return 0; return null; }; // --- Build clean rows --- const rows = data .filter((d) => d["Participant ID"] && d["Overall Confidence Score"] != null) .map((d) => { const likert = {}; for (const [alias, key] of Object.entries(likertKeys)) { likert[alias] = parseLikert(d[key], negativelyWorded.has(alias)); } // Recompute confidence on the corrected scale (mean of available items) const likertVals = Object.values(likert).filter((v) => v != null); const confidence = likertVals.length ? likertVals.reduce((a, b) => a + b, 0) / likertVals.length : null; return { id: d["Participant ID"], ...likert, confidence_score: confidence, game_experience: gameExpMap[d["Video Game Experience"]] ?? null, sense_of_direction: sodMap[d["Overall Sense of Direction"]] ?? null, game_nav_comfort: comfortMap[(d["Video Game navigation comfort "] || "").trim()] ?? null, visual_ability: visualMap( d["Visual Abilities when using Screens (with usual correction)?"] ), q1_score: d["Q1: Score"], q2_score: d["Q2: Score"], q3_score: d["Q3: Score"], q4_score: d["Q4:Score"], q6_score: d["Q6: Score"], end_test_score: d["Correct right for End Test"], route_confidence: routeConfMap[d["Q7: Route Confidence Rating"]] ?? null }; }); return rows; }32:Taa4,boxPlot = { const half = 0.4; // box half-width (x domain is [-1, 1]) const quantile = (s, q) => { const pos = (s.length - 1) * q, base = Math.floor(pos), rest = pos - base; return s[base + 1] !== undefined ? s[base] + rest * (s[base + 1] - s[base]) : s[base]; }; const cap = 0.2; const rows = processedWithGroup .filter((d) => d[selectedVar] != null && !isNaN(d[selectedVar])) .map((d) => ({ group: d.test_number, value: d[selectedVar], id: d.id, xj: (Math.random() - 0.5) * 0.6 // jitter ±0.5 })); const stats = ["A", "B"].map((group) => { const v = rows .filter((d) => d.group === group) .map((d) => d.value) .sort((a, b) => a - b); const q1 = quantile(v, 0.25), median = quantile(v, 0.5), q3 = quantile(v, 0.75); const iqr = q3 - q1, lo = q1 - 1.5 * iqr, hi = q3 + 1.5 * iqr; return { group, q1, median, q3, wlow: Math.min(...v.filter((x) => x >= lo)), whigh: Math.max(...v.filter((x) => x <= hi)) }; }); return Plot.plot({ width: 500, height: 400, marginLeft: 60, fx: { label: "Test Group", domain: ["A", "B"] }, x: { axis: null, domain: [-1, 1] }, y: { label: selectedVar.split("_").map(capitalizeFirstLetter).join(" "), grid: true }, color: { domain: ["A", "B"], range: ["#4e79a7", "#e15759"] }, marks: [ // jittered points Plot.dot(rows, { fx: "group", x: "xj", y: "value", fill: "group", // stroke: "white", r: 3, opacity: 0.6, title: (d) => `${d.id}: ${d.value.toFixed(2)}` }), // whiskers Plot.ruleX(stats, { fx: "group", x: 0, y1: "wlow", y2: "whigh", stroke: "group", strokeWidth: 1.5 }), // IQR box — top edge = q3, bottom edge = q1 Plot.rect(stats, { fx: "group", x1: () => -half, x2: () => half, y1: "q1", y2: "q3", fill: "group", fillOpacity: 0.4, stroke: "group" }), // median Plot.ruleY(stats, { fx: "group", y: "median", x1: () => -half, x2: () => half, stroke: "group", strokeWidth: 3 }), // whisker caps Plot.ruleY(stats, { fx: "group", y: "wlow", x1: () => -cap, x2: () => cap, stroke: "group", strokeWidth: 1.5 }), Plot.ruleY(stats, { fx: "group", y: "whigh", x1: () => -cap, x2: () => cap, stroke: "group", strokeWidth: 1.5 }) ] }); }33:T8c8,// ============================================================ // Cell — Run Welch's t-test across all variables // ============================================================ tTestTable = { const variables = [ "game_experience", "game_nav_comfort", "sense_of_direction", "visual_ability", "direction_facing", "unsure_unfamiliar", "remember_connect", "mental_map", "use_landmarks", "visual_features", "confident_unfam", "rarely_disoriented", "confidence_score", "q1_score", "q2_score", "q3_score", "q4_score", "q6_score", "end_test_score", "route_confidence", "turnScore", "editDistance" ]; const runTest = (variable) => { const a = processedWithGroup .filter( (d) => d.test_number === "A" && d[variable] != null && !isNaN(d[variable]) ) .map((d) => d[variable]); const b = processedWithGroup .filter( (d) => d.test_number === "B" && d[variable] != null && !isNaN(d[variable]) ) .map((d) => d[variable]); if (a.length < 2 || b.length < 2) { return { variable, n_A: a.length, n_B: b.length }; } const mA = jStat.mean(a), mB = jStat.mean(b); const vA = jStat.variance(a, true), vB = jStat.variance(b, true); const nA = a.length, nB = b.length; const se = Math.sqrt(vA / nA + vB / nB); const t = (mA - mB) / se; const df = Math.pow(vA / nA + vB / nB, 2) / (Math.pow(vA / nA, 2) / (nA - 1) + Math.pow(vB / nB, 2) / (nB - 1)); const p = 2 * (1 - jStat.studentt.cdf(Math.abs(t), df)); const pooledSD = Math.sqrt(((nA - 1) * vA + (nB - 1) * vB) / (nA + nB - 2)); const d = (mA - mB) / pooledSD; return { variable, n_A: nA, n_B: nB, mean_A: +mA.toFixed(3), mean_B: +mB.toFixed(3), sd_A: +Math.sqrt(vA).toFixed(3), sd_B: +Math.sqrt(vB).toFixed(3), mean_diff: +(mA - mB).toFixed(3), t: +t.toFixed(3), df: +df.toFixed(1), p: +p.toFixed(4), cohens_d: +d.toFixed(3), sig: p < 0.001 ? "***" : p < 0.01 ? "**" : p < 0.05 ? "*" : "" }; }; return variables.map(runTest).sort((a, b) => (a.p ?? 1) - (b.p ?? 1)); }34:Ta05,// ============================================================ // Cell — Correlation matrix using Spearman's rho // ============================================================ correlations = { const rows = processedWithGroup.filter((d) => selectedGroups.includes(d.test_number) ); const variables = [ "game_experience", "game_nav_comfort", "sense_of_direction", "visual_ability", "direction_facing", "unsure_unfamiliar", "remember_connect", "mental_map", "use_landmarks", "visual_features", "confident_unfam", "rarely_disoriented", "confidence_score", "q1_score", "q2_score", "q3_score", "q4_score", "q6_score", "end_test_score", "route_confidence", "turnScore" ]; // Convert values to ranks, averaging ranks for ties (standard Spearman approach) const rankify = (values) => { const indexed = values.map((v, i) => ({ v, i })); indexed.sort((a, b) => a.v - b.v); const ranks = new Array(values.length); let i = 0; while (i < indexed.length) { let j = i; // find the end of a run of tied values while (j + 1 < indexed.length && indexed[j + 1].v === indexed[i].v) j++; const avgRank = (i + j) / 2 + 1; // 1-based average rank for (let k = i; k <= j; k++) ranks[indexed[k].i] = avgRank; i = j + 1; } return ranks; }; // Spearman = Pearson on ranks. Filter pairwise on missing values FIRST, // then rank within the filtered pairs. const spearman = (xs, ys) => { const pairs = xs .map((x, i) => [x, ys[i]]) .filter(([a, b]) => a != null && b != null && !isNaN(a) && !isNaN(b)); const n = pairs.length; if (n < 3) return { r: NaN, n }; const rx = rankify(pairs.map((p) => p[0])); const ry = rankify(pairs.map((p) => p[1])); const mx = d3.mean(rx); const my = d3.mean(ry); let num = 0, dx2 = 0, dy2 = 0; for (let k = 0; k < n; k++) { const a = rx[k] - mx, b = ry[k] - my; num += a * b; dx2 += a * a; dy2 += b * b; } const den = Math.sqrt(dx2 * dy2); return { r: den === 0 ? NaN : num / den, n }; }; const matrix = []; for (const vx of variables) { for (const vy of variables) { const xs = rows.map((d) => d[vx]); const ys = rows.map((d) => d[vy]); const { r, n } = spearman(xs, ys); matrix.push({ x: vx, y: vy, r, r2: isNaN(r) ? NaN : r * r, n }); } } return { variables, matrix, n: rows.length }; }35:T44a,// ============================================================ // Cell 4 — Heatmap (Plot) // Color = r² (unsigned strength of association); label = r² // ============================================================ chart = Plot.plot({ width: 900, height: 900, marginLeft: 160, marginBottom: 160, marginTop: 20, marginRight: 20, x: { domain: correlations.variables, tickRotate: -45, label: null }, y: { domain: correlations.variables, label: null }, color: { type: "linear", scheme: "Blues", domain: [0, 1], label: "r² (coefficient of determination)", legend: true }, marks: [ Plot.cell(correlations.matrix, { x: "x", y: "y", fill: (d) => (isNaN(d.r2) ? "#eee" : d.r2), inset: 0.5, title: (d) => `${d.x} × ${d.y}\nr² = ${isNaN(d.r2) ? "NA" : d.r2.toFixed(3)}\nn = ${ d.n }` }), Plot.text(correlations.matrix, { x: "x", y: "y", text: (d) => (isNaN(d.r2) ? "" : d.r2.toFixed(2)), fill: (d) => (d.r2 > 0.5 ? "white" : "black"), fontSize: 9 }) ] })36:Tf9b,// ============================================================ // Cell 9: Main canvas — display image, capture clicks // Left-click: add (landmark or path point, depending on mode) // Right-click: delete nearest item within threshold // ============================================================ canvasView = { const { id, img } = images[currentIndex]; const ann = annotations[id]; const displayWidth = Math.min(900, img.naturalWidth); const scale = displayWidth / img.naturalWidth; const displayHeight = img.naturalHeight * scale; const canvas = html`

`; const ctx = canvas.getContext("2d"); // Right-click delete threshold (in pixel-space, not display-space) const DELETE_THRESHOLD_PX = 15 / scale; function redraw() { ctx.clearRect(0, 0, displayWidth, displayHeight); ctx.drawImage(img, 0, 0, displayWidth, displayHeight); // Draw path if (ann.path.length > 0) { ctx.strokeStyle = "rgba(255,0,0,0.8)"; ctx.lineWidth = 2; ctx.beginPath(); ann.path.forEach(([x, y], i) => { const dx = x * scale, dy = y * scale; i === 0 ? ctx.moveTo(dx, dy) : ctx.lineTo(dx, dy); }); ctx.stroke(); ctx.fillStyle = "red"; for (const [x, y] of ann.path) { ctx.beginPath(); ctx.arc(x * scale, y * scale, 3, 0, 2 * Math.PI); ctx.fill(); } } // Draw landmarks for (const [name, { x, y }] of Object.entries(ann.landmarks)) { const dx = x * scale, dy = y * scale; ctx.fillStyle = "rgba(0, 150, 0, 0.9)"; ctx.beginPath(); ctx.arc(dx, dy, 7, 0, 2 * Math.PI); ctx.fill(); ctx.fillStyle = "white"; ctx.font = "bold 11px sans-serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(name[0], dx, dy); ctx.fillStyle = "black"; ctx.font = "12px sans-serif"; ctx.textAlign = "left"; ctx.fillText(name, dx + 10, dy - 8); } } redraw(); // Left-click: add canvas.addEventListener("click", (e) => { const rect = canvas.getBoundingClientRect(); const px = (e.clientX - rect.left) / scale; const py = (e.clientY - rect.top) / scale; const updated = { ...annotations }; const current = updated[id]; if (mode === "landmark") { current.landmarks = { ...current.landmarks, [activeLandmark]: { x: px, y: py } }; } else { current.path = [...current.path, [px, py]]; } viewof annotations.update(updated); }); // Right-click: delete nearest item within threshold canvas.addEventListener("contextmenu", (e) => { e.preventDefault(); const rect = canvas.getBoundingClientRect(); const px = (e.clientX - rect.left) / scale; const py = (e.clientY - rect.top) / scale; // Find nearest landmark and nearest path vertex; whichever is closer wins, // but only if within DELETE_THRESHOLD_PX. let best = null; // { type, key, dist } for (const [name, { x, y }] of Object.entries(ann.landmarks)) { const d = Math.hypot(x - px, y - py); if (d < DELETE_THRESHOLD_PX && (!best || d < best.dist)) { best = { type: "landmark", key: name, dist: d }; } } ann.path.forEach(([x, y], i) => { const d = Math.hypot(x - px, y - py); if (d < DELETE_THRESHOLD_PX && (!best || d < best.dist)) { best = { type: "pathVertex", key: i, dist: d }; } }); if (!best) return; const updated = { ...annotations }; const current = { ...updated[id] }; if (best.type === "landmark") { const { [best.key]: _, ...rest } = current.landmarks; current.landmarks = rest; } else { current.path = current.path.filter((_, i) => i !== best.key); } updated[id] = current; viewof annotations.update(updated); }); return canvas; }37:T684,// ============================================================ // Cell 10: Controls — undo, clear, navigate // ============================================================ controls = { const { id } = images[currentIndex]; const ann = annotations[id]; const undoPath = html``; undoPath.onclick = () => { const updated = { ...annotations }; updated[id] = { ...updated[id], path: updated[id].path.slice(0, -1) }; viewof annotations.update(updated); }; const clearPath = html``; clearPath.onclick = () => { const updated = { ...annotations }; updated[id] = { ...updated[id], path: [] }; viewof annotations.update(updated); }; const clearLandmarks = html``; clearLandmarks.onclick = () => { const updated = { ...annotations }; updated[id] = { ...updated[id], landmarks: {} }; viewof annotations.update(updated); }; const prev = html``; prev.onclick = () => viewof currentIndex.update(currentIndex - 1); const next = html``; next.onclick = () => viewof currentIndex.update(currentIndex + 1); const status = html` Image ${currentIndex + 1} of ${images.length} (${id}) — ${ann.path.length} path points, ${Object.keys(ann.landmarks).length} landmarks placed `; return html`

${prev} ${next} ${undoPath} ${clearPath} ${clearLandmarks} ${status}

`; }38:T653, // ============================================================ // Cell 11: Normalization + export // ============================================================ normalized = { const result = []; for (const { id } of images) { const ann = annotations[id]; if (ann.path.length < 2) { result.push({ id, path: [], landmarks: {}, bbox: null, note: "no path" }); continue; } // Compute path bbox in pixel space const xs = ann.path.map(p => p[0]); const ys = ann.path.map(p => p[1]); const minX = Math.min(...xs), maxX = Math.max(...xs); const minY = Math.min(...ys), maxY = Math.max(...ys); const width = maxX - minX; const height = maxY - minY; if (width === 0) { result.push({ id, path: [], landmarks: {}, bbox: null, note: "zero-width path" }); continue; } // x: dominant axis, normalized to [0, 1] // y: same scale factor as x, anchored at bottom (flip y) // Image y increases downward; we want y=0 at bottom of bbox. // So: yNorm = (maxY - yPixel) / width (using width as the divisor preserves aspect) const norm = (x, y) => [ (x - minX) / width, (maxY - y) / width ]; const path = ann.path.map(([x, y]) => norm(x, y)); const landmarks = {}; for (const [name, { x, y }] of Object.entries(ann.landmarks)) { const [nx, ny] = norm(x, y); landmarks[name] = { x: nx, y: ny }; } result.push({ id, path, landmarks, bbox: { minX, minY, maxX, maxY, width, height }, aspectRatio: height / width }); } return result; } 39:T415,// ============================================================ // Cell 11.7: Snap path headings to nearest 90° (option 1) // Each segment's absolute heading becomes 0°, 90°, 180°, or 270°. // Segment lengths are preserved; vertices are reconstructed from // the start point. // ============================================================ function snapHeadings(path) { if (path.length < 2) return path.slice(); const snapped = [path[0].slice()]; let [cx, cy] = path[0]; for (let i = 1; i < path.length; i++) { const [px, py] = path[i - 1]; const [nx, ny] = path[i]; const dx = nx - px; const dy = ny - py; const length = Math.hypot(dx, dy); if (length === 0) continue; // Heading in radians; snap to nearest multiple of π/2 const heading = Math.atan2(dy, dx); const snappedHeading = Math.round(heading / (Math.PI / 2)) * (Math.PI / 2); cx += Math.cos(snappedHeading) * length; cy += Math.sin(snappedHeading) * length; snapped.push([cx, cy]); } return snapped; } 3a:T1237,// ============================================================ // Cell 11.5: Preview grid — raw images with original (red) and // snapped (blue) paths overlaid. // ============================================================ preview = { const THUMB_WIDTH = 280; const container = html`

`; // Build a lookup from id -> snapped entry for easy access const snappedById = new Map(snappedNormalized.map((e) => [e.id, e])); for (const { id, img } of images) { const ann = annotations[id]; const snapped = snappedById.get(id); const scale = THUMB_WIDTH / img.naturalWidth; const thumbHeight = img.naturalHeight * scale; const canvas = html`

`; const ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, THUMB_WIDTH, thumbHeight); // Compute path bbox (in pixel coords) for visualization let bbox = null; if (ann.path.length >= 2) { const xs = ann.path.map((p) => p[0]); const ys = ann.path.map((p) => p[1]); bbox = { minX: Math.min(...xs), maxX: Math.max(...xs), minY: Math.min(...ys), maxY: Math.max(...ys) }; } // Draw bbox first (under everything else) if (bbox) { ctx.strokeStyle = "rgba(0, 100, 200, 0.4)"; ctx.setLineDash([4, 3]); ctx.lineWidth = 1; ctx.strokeRect( bbox.minX * scale, bbox.minY * scale, (bbox.maxX - bbox.minX) * scale, (bbox.maxY - bbox.minY) * scale ); ctx.setLineDash([]); } // Draw original path (red) if (ann.path.length > 0) { ctx.strokeStyle = "rgba(255, 0, 0, 0.85)"; ctx.lineWidth = 1.5; ctx.beginPath(); ann.path.forEach(([x, y], i) => { const dx = x * scale, dy = y * scale; i === 0 ? ctx.moveTo(dx, dy) : ctx.lineTo(dx, dy); }); ctx.stroke(); // Mark start (green) and end (red) of original path const drawDot = (pt, color) => { ctx.fillStyle = color; ctx.beginPath(); ctx.arc(pt[0] * scale, pt[1] * scale, 4, 0, 2 * Math.PI); ctx.fill(); }; drawDot(ann.path[0], "lime"); drawDot(ann.path[ann.path.length - 1], "red"); } // Draw snapped path (blue), converting normalized → pixel space if (snapped && snapped.bbox && snapped.path.length > 0) { const { minX, maxY, width } = snapped.bbox; const toPixel = ([nx, ny]) => [nx * width + minX, maxY - ny * width]; ctx.strokeStyle = "rgba(0, 80, 220, 0.85)"; ctx.lineWidth = 1.5; ctx.setLineDash([5, 3]); ctx.beginPath(); snapped.path.forEach((p, i) => { const [px, py] = toPixel(p); const dx = px * scale, dy = py * scale; i === 0 ? ctx.moveTo(dx, dy) : ctx.lineTo(dx, dy); }); ctx.stroke(); ctx.setLineDash([]); } // Draw landmarks for (const [name, { x, y }] of Object.entries(ann.landmarks)) { const dx = x * scale, dy = y * scale; ctx.fillStyle = "rgba(0, 150, 0, 0.9)"; ctx.beginPath(); ctx.arc(dx, dy, 5, 0, 2 * Math.PI); ctx.fill(); ctx.fillStyle = "white"; ctx.font = "bold 8px sans-serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(name[0], dx, dy); } // Status indicators const placedNames = Object.keys(ann.landmarks); const missingNames = landmarkNames.filter((n) => !placedNames.includes(n)); const isComplete = ann.path.length >= 2; const statusColor = !isComplete ? "#c44" : placedNames.length === 0 ? "#c84" : "#4a4"; const card = html`

${id} ${isComplete ? "" : "— ⚠ no path"}

${canvas}

Path: ${ann.path.length} points
Placed: ${placedNames.join(", ") || "—"}
${ missingNames.length > 0 ? `Missing: ${missingNames.join( ", " )}` : `All landmarks placed` }

`; container.appendChild(card); } return container; }3b:T443,function extractTurns(path, { includeStraight = false, tolerance = 5 } = {}) { const turns = []; const counts = { L: 0, R: 0, U: 0, S: 0 }; if (path.length < 3) return { turns, counts }; for (let i = 1; i < path.length - 1; i++) { const [ax, ay] = path[i - 1]; const [bx, by] = path[i]; const [cx, cy] = path[i + 1]; const v1x = bx - ax, v1y = by - ay; const v2x = cx - bx, v2y = cy - by; // Cross product: positive = CCW (left in y-up), negative = CW (right) const cross = v1x * v2y - v1y * v2x; const dot = v1x * v2x + v1y * v2y; const angleDeg = (Math.atan2(cross, dot) * 180) / Math.PI; // Range: (-180, 180]. Positive = left, negative = right. let label; if (Math.abs(Math.abs(angleDeg) - 180) < tolerance) { label = "U"; } else if (Math.abs(angleDeg) < tolerance) { label = "S"; } else if (angleDeg > 0) { label = "L"; } else { label = "R"; } if (label === "S" && !includeStraight) continue; turns.push(label); counts[label]++; } return { turns, counts }; }3c:[{"id":"ddc38d5de382bc783b1b5d28b410db239f4b18a643f4c189c0684b4117a47f8971b1c6f9118a324f1237dd28c3ca310b7b5dee01c4afa4275e00dcf1d420ab2a","href":"https://static.observableusercontent.com/files/ddc38d5de382bc783b1b5d28b410db239f4b18a643f4c189c0684b4117a47f8971b1c6f9118a324f1237dd28c3ca310b7b5dee01c4afa4275e00dcf1d420ab2a","name":"kaley-coding.csv","type":"text/csv","lastModified":1780135023869.04,"size":728},{"id":"9180d220570bdf1411da9f8c21fd79f50b850df3891e84a71e11339ff4039ea2b9157336d324a0dcef41ceffc3e8f034dcdb9c52559c5adcd8524fe875617483","href":"https://static.observableusercontent.com/files/9180d220570bdf1411da9f8c21fd79f50b850df3891e84a71e11339ff4039ea2b9157336d324a0dcef41ceffc3e8f034dcdb9c52559c5adcd8524fe875617483","name":"Murphy_Landmarks_Sketches.zip","type":"application/zip","lastModified":1780064167776.113,"size":1702099},{"id":"600ff9c6161a02593cd7b74cdb67ef32f1b6e876d501239931bbeeba99fff23c84d1d4c96a24abecc4ffb2d4a2e16bab94f38ed404854211d453752d010e5439","href":"https://static.observableusercontent.com/files/600ff9c6161a02593cd7b74cdb67ef32f1b6e876d501239931bbeeba99fff23c84d1d4c96a24abecc4ffb2d4a2e16bab94f38ed404854211d453752d010e5439","name":"Scanned sketches.zip","type":"application/zip","lastModified":1777576813256.143,"size":1166595}] 2f:{"title":"Landmarks as Navigational Supports in Games Study","cells":[{"id":0,"value":"# Landmarks as Navigational Supports in Games Study","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"data = {\n const url = new URL(\n \"https://docs.google.com/spreadsheets/d/1FWbC2aX9U6Z9uHNwA0h3wH6JnRJiXcO0KP2bzqR4P80/edit?gid=1742418639#gid=1742418639\"\n );\n const id = url.pathname.split(\"/\")[3];\n const gid = new URLSearchParams(url.hash.slice(1)).get(\"gid\") || 0;\n return d3.csv(\n `https://docs.google.com/spreadsheets/d/${id}/export?format=csv&gid=${gid}`,\n d3.autoType\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"processedWithGroup = {\n // Re-use processed rows, then attach Test Number from raw data by ID\n const groupById = new Map(\n data.map((d) => [d[\"Participant ID\"], (d[\"Test Number\"] || \"\").trim()])\n );\n return processed\n .map((d) => ({\n ...d,\n test_number: groupById.get(d.id) || null,\n turnScore: turnAnalysis.find((e) => e.id == d.id)?.similarity,\n editDistance: turnAnalysis.find((e) => e.id == d.id)?.editDistance\n }))\n .filter((d) => d.test_number === \"A\" || d.test_number === \"B\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"Inputs.table(processedWithGroup)","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"---\n### Distributions","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"// ============================================================\n// Cell 2 — Variable picker\n// ============================================================\nviewof selectedVar = Inputs.select(\n [\n \"game_experience\",\n \"game_nav_comfort\",\n \"sense_of_direction\",\n \"visual_ability\",\n \"direction_facing\",\n \"unsure_unfamiliar\",\n \"remember_connect\",\n \"mental_map\",\n \"use_landmarks\",\n \"visual_features\",\n \"confident_unfam\",\n \"rarely_disoriented\",\n \"confidence_score\",\n \"q1_score\",\n \"q2_score\",\n \"q3_score\",\n \"q4_score\",\n \"q6_score\",\n \"end_test_score\",\n \"route_confidence\",\n \"turnScore\",\n \"editDistance\"\n ],\n { label: \"Variable\", value: \"end_test_score\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"function capitalizeFirstLetter(val) {\n return String(val).charAt(0).toUpperCase() + String(val).slice(1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"---\n### Welch's *t*-Test","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"jStat = require(\"jstat@1.9.6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"// ============================================================\n// Cell — Display as sortable table\n// ============================================================\nviewof tTestTableView = Inputs.table(tTestTable, {\n columns: [\n \"variable\",\n \"n_A\",\n \"n_B\",\n \"mean_A\",\n \"sd_A\",\n \"mean_B\",\n \"sd_B\",\n \"mean_diff\",\n \"t\",\n \"df\",\n \"p\",\n \"cohens_d\",\n \"sig\"\n ],\n header: {\n variable: \"Variable\",\n n_A: \"n (A)\",\n n_B: \"n (B)\",\n mean_A: \"Mean A\",\n mean_B: \"Mean B\",\n sd_A: \"Std Dev A\",\n sd_B: \"Std Dev B\",\n mean_diff: \"Δ (A−B)\",\n t: \"t\",\n df: \"df\",\n p: \"p\",\n cohens_d: \"Cohen's d\",\n sig: \"\"\n },\n format: {\n p: (x) => (x == null ? \"—\" : x < 0.001 ? \"<0.001\" : x.toFixed(4))\n },\n width: { variable: 180, sig: 50 }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"---\n### Correlations (Spearman)","pinned":false,"hidden":false,"mode":"md"},{"id":86,"value":"viewof selectedGroups = Inputs.checkbox([\"A\", \"B\"], {\n label: \"Include groups\",\n value: [\"A\", \"B\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"{\n const da = [\n [\"Mental Map\", 10, 8, 0.587],\n [\"Used Landmarks\", 0, 5, 0.035],\n [\"Trial and Error\", 0, 2, 0.476],\n [\"Followed the Path\", 1, 0, 1.0]\n ];\n\n const tidy = da.flatMap(([strategy, a, b]) => [\n { strategy, group: \"Group A\", count: a },\n { strategy, group: \"Group B\", count: b }\n ]);\n\n return Plot.plot({\n width: width / 1.5,\n height: width / 3,\n marginBottom: 100,\n x: { label: null, tickRotate: -45 }, // strategy axis within each panel\n y: { grid: true, label: \"Count\" },\n fx: { label: null }, // Group A | Group B panels\n //color: { legend: true }, // color legend by strategy\n marks: [\n Plot.barY(tidy, {\n fx: \"group\",\n x: \"strategy\",\n y: \"count\",\n fill: \"strategy\"\n }),\n Plot.ruleY([0])\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"---\n### Image Analysis","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"//zip = await FileAttachment(\"Scanned sketches.zip\").zip()","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"zip = FileAttachment(\"Murphy_Landmarks_Sketches.zip\").zip()","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"images = {\n const entries = d3\n .range(0, zip.filenames.length)\n .map((i) => zip.file(zip.filenames[i]));\n\n return Promise.all(\n entries.map(async (entry) => {\n const url = await entry.url();\n const img = new Image();\n img.src = url;\n await img.decode();\n\n // Derive id from the filename: strip directory and extension\n const base = entry.name.split(\"/\").pop(); // last path segment\n const id = base.replace(/\\.[^.]+$/, \"\"); // drop extension\n\n return { id, img };\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"landmarkNames = [\"House\", \"Cowpen\", \"Bridge\", \"Aircraft\", \"Tank\", \"Door\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"\n// ============================================================\n// Cell 4: Annotation state (mutable, reactive)\n// Stored as a Map keyed by image id so it survives navigation\n// ============================================================\nviewof annotations = {\n // Initialize empty annotation per image\n const initial = {};\n for (const { id } of images) {\n initial[id] = {\n activeLandmarks: new Set(), // which names are toggled on\n landmarks: {}, // name -> { x, y } in pixel coords\n path: [] // [[x,y], ...] in pixel coords\n };\n }\n const node = Object.assign(html``, {\n value: initial\n });\n node.update = (newVal) => {\n node.value = newVal;\n node.dispatchEvent(new CustomEvent(\"input\"));\n };\n return node;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"\n// ============================================================\n// Cell 5: Current image index (also reactive)\n// ============================================================\nviewof currentIndex = {\n const node = Object.assign(html``, {\n value: 0\n });\n node.update = (newVal) => {\n node.value = newVal;\n node.dispatchEvent(new CustomEvent(\"input\"));\n };\n return node;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"\n// ============================================================\n// Cell 6: Mode selector — landmark vs path\n// ============================================================\nviewof mode = Inputs.radio(\n [\"landmark\", \"path\"],\n { label: \"Click mode\", value: \"landmark\" }\n)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"// ============================================================\n// Cell 7: Active landmark (radio) — single select, this is the\n// landmark that the next click in 'landmark' mode will place.\n// A landmark is considered \"present\" iff it has been placed.\n// Right-click deletes it (effectively marking it not present).\n// ============================================================\nviewof activeLandmark = Inputs.radio(landmarkNames, {\n label: \"Landmark to place (click image to place; right-click to remove)\",\n value: landmarkNames[0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"normalized.map((d) => {\n const group = processedWithGroup.find((e) => d.id == e.id).test_number;\n\n return landmarkNames.reduce(\n (a, e) => {\n a[e] = d.landmarks[e] ? 1 : 0;\n return a;\n },\n { group, id: d.id }\n );\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"lmData = await FileAttachment(\"kaley-coding.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":414,"value":"records = {\n const attributes = [\"sequence\", \"location\", \"text\", \"image\", \"side\"];\n const landmarks = [\"House\", \"Cowpen\", \"Bridge\", \"Aircraft\", \"Tank\", \"Door\"];\n\n const parseLandmark = (name, value) => {\n const present = value !== \"0\" && value != null && value !== \"\";\n const out = { landmark: name, present };\n if (!present) {\n for (const a of attributes) out[a] = false;\n return out;\n }\n if (value.length !== attributes.length)\n console.warn(`Unexpected value for ${name}: \"${value}\"`);\n const digits = value.split(\"\");\n attributes.forEach((a, i) => (out[a] = digits[i] === \"1\"));\n return out;\n };\n\n return lmData.flatMap((row) =>\n landmarks.map((lm) => ({\n group: row.group,\n id: row.id,\n ...parseLandmark(lm, row[lm])\n }))\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"Object.groupBy(records, (d) => d.id)","pinned":true,"hidden":false,"mode":"ojs"},{"id":219,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"\n// ============================================================\n// Cell 12: Download button\n// ============================================================\ndownload = {\n const blob = new Blob(\n [JSON.stringify(normalized, null, 2)],\n { type: \"application/json\" }\n );\n const url = URL.createObjectURL(blob);\n return html`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"\nsnappedNormalized = normalized.map(entry => {\n if (!entry.bbox || entry.path.length < 2) return entry;\n return { ...entry, path: snapHeadings(entry.path) };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"function levenshtein(a, b) {\n const m = a.length,\n n = b.length;\n if (m === 0) return n;\n if (n === 0) return m;\n // DP table; only need previous row\n let prev = new Array(n + 1);\n let curr = new Array(n + 1);\n for (let j = 0; j <= n; j++) prev[j] = j;\n for (let i = 1; i <= m; i++) {\n curr[0] = i;\n for (let j = 1; j <= n; j++) {\n const cost = a[i - 1] === b[j - 1] ? 0 : 1;\n curr[j] = Math.min(\n prev[j] + 1, // deletion\n curr[j - 1] + 1, // insertion\n prev[j - 1] + cost // substitution\n );\n }\n [prev, curr] = [curr, prev];\n }\n return prev[n];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"function lcsLength(a, b) {\n const m = a.length,\n n = b.length;\n let prev = new Array(n + 1).fill(0);\n let curr = new Array(n + 1).fill(0);\n for (let i = 1; i <= m; i++) {\n for (let j = 1; j <= n; j++) {\n curr[j] =\n a[i - 1] === b[j - 1]\n ? prev[j - 1] + 1\n : Math.max(prev[j], curr[j - 1]);\n }\n [prev, curr] = [curr, prev.fill(0)];\n }\n return prev[n];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"function compareSequences(participant, truth) {\n const ed = levenshtein(participant, truth);\n const maxLen = Math.max(participant.length, truth.length);\n const similarity = maxLen === 0 ? 1 : 1 - ed / maxLen;\n const lcs = lcsLength(participant, truth);\n return {\n editDistance: ed,\n similarity,\n lcsLength: lcs,\n recallFraction: truth.length === 0 ? null : lcs / truth.length,\n participantLength: participant.length,\n truthLength: truth.length\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"trueTurnSequence = [\"R\", \"L\", \"L\", \"R\", \"R\", \"R\"] ","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"turnAnalysis = snappedNormalized.map((entry) => {\n if (!entry.bbox || entry.path.length < 3) {\n return { id: entry.id, error: \"insufficient path\" };\n }\n const { turns, counts } = extractTurns(entry.path, {\n includeStraight: false\n });\n const truthCounts = trueTurnSequence.reduce(\n (acc, t) => ({ ...acc, [t]: (acc[t] || 0) + 1 }),\n { L: 0, R: 0, U: 0 }\n );\n const comparison = compareSequences(turns, trueTurnSequence);\n return {\n id: entry.id,\n sequence: turns.join(\"\"),\n truthSequence: trueTurnSequence.join(\"\"),\n counts,\n truthCounts,\n countDifference: {\n L: counts.L - truthCounts.L,\n R: counts.R - truthCounts.R,\n U: counts.U - (truthCounts.U || 0)\n },\n ...comparison\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"Inputs.table(turnAnalysis, {\n columns: [\n \"id\",\n \"sequence\",\n \"truthSequence\",\n \"editDistance\",\n \"similarity\",\n \"recallFraction\",\n \"counts\",\n \"countDifference\"\n ],\n format: {\n similarity: (x) => x?.toFixed(3),\n recallFraction: (x) => x?.toFixed(3),\n counts: (c) => (c ? `L${c.L} R${c.R} U${c.U}` : \"\"),\n countDifference: (c) =>\n c ? `L${c.L >= 0 ? \"+\" : \"\"}${c.L} R${c.R >= 0 ? \"+\" : \"\"}${c.R}` : \"\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"data.map((d) => d[\"Easiest Landmark to Remember\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"\"House, Cowpen, Aircraft, Military Tank/Truck, Magical Door, Bridge\"\n .split(\",\")\n .map((e) => ({\n name: e.trim(),\n count: data\n .map((d) =>\n d[\"Q6: Which of the following landmarks do you remember seeing? \"]\n .split(\",\")\n .includes(e)\n )\n .reduce((a, v) => (a += v), 0)\n }))","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W3c","stdlib":"1","titling":"auto"}