3f:null 40:["$","title",null,{"children":"Hangeul Transition Study Findings | Zach Pino | Observable"}] 46:T5ed2,{ // SVG SETUP -------------------------------------------------------------- const size = 800; const margin = 75; const bottomExtension = 300; const svg = d3 .create("svg") .attr("width", size) .attr("height", showKeys ? size + bottomExtension : size); const bg = svg .append("rect") .attr("width", size) .attr("height", showKeys ? size + bottomExtension : size) .attr("fill", "#282c37"); // SCALES -------------------------------------------------------------- const xScale = d3 .scaleLinear() .domain(d3.extent(allData, (d) => d[xAxis])) .range([margin, size - margin]); const yScale = d3 .scaleLinear() .domain(d3.extent(allData, (d) => d[yAxis])) .range([size - margin, margin]); const cScale = d3 .scaleLinear() .domain(d3.extent(allData, (d) => d[cAxis])) .range([0, 1]); if (axesExtents == "Anchor at Zero and Round Value Nearest to Max") { if ( ["overallScore", "overallScorePost"].includes(xAxis) && ["overallScore", "overallScorePost"].includes(yAxis) ) { xScale.domain([0, 22]); } else { xScale.domain([0, xScale.domain()[1]]).nice(); } } if (axesExtents == "Anchor at Zero and Round Value Nearest to Max") { if ( ["overallScore", "overallScorePost"].includes(xAxis) && ["overallScore", "overallScorePost"].includes(yAxis) ) { yScale.domain([0, 22]); } else { yScale.domain([0, yScale.domain()[1]]).nice(); } } if (axesExtents == "Anchor at Zero and Round Value Nearest to Max") { cScale.domain([0, cScale.domain()[1]]).nice(); } if (JSON.stringify(xScale.domain()) == JSON.stringify(yScale.domain())) { svg .append("polygon") .attr( "points", xScale(xScale.domain()[0]) + "," + yScale(yScale.domain()[0]) + " " + xScale(xScale.domain()[1]) + "," + yScale(yScale.domain()[1]) + " " + xScale(xScale.domain()[1]) + "," + yScale(yScale.domain()[0]) ) .attr("fill", "white") .attr("opacity", 0.1); } if (showKeys) { // CENTER KEYS -------------------------------------------------------------- svg .append("rect") .attr("x", 625) .attr("y", size + 30) .attr("fill", d3.interpolateViridis(0.5)) .attr("stroke", "white") .attr("stroke-width", 2) .attr("width", 18) .attr("height", 18) .attr("transform", (d) => "rotate(45 " + 625 + "," + (size + 30) + ")"); svg .append("text") .attr("dominant-baseline", "hanging") .attr("fill", "white") .attr("font-family", "Courier") .attr("font-size", 16) .attr("x", 650) .attr("y", size + 35) .text("Average"); svg .append("path") .attr( "d", "M -10,4 L-4,4 L-4,10 L4,10 L4,4 L10,4 L10,-4 L4,-4 L4,-10 L-4,-10 L-4,-4 L-10,-4 Z" ) .attr("transform", (d) => `translate(${625},${size + 80})`) .attr("fill", d3.interpolateViridis(0.5)) .attr("stroke", "white") .attr("stroke-width", 2); svg .append("text") .attr("dominant-baseline", "hanging") .attr("fill", "white") .attr("font-family", "Courier") .attr("font-size", 16) .attr("x", 650) .attr("y", size + 75) .text("Median"); //HULL KEYS ---------------------------------------------------------------- svg .selectAll(".s") .data([ hullColors.nColor, hullColors.bColor, hullColors.aColor, hullColors.tColor ]) .join("rect") .attr("opacity", hullColors.hullOpacity) .attr("x", margin + 250) .attr("y", (d, i) => size + i * 30 + 30) .attr("width", 16) .attr("height", 15) .attr("fill", (d) => d); svg .selectAll(".s") .data([ "Null-Group Cluster", "B-Group Cluster", "A-Group Cluster", "T-Group Cluster" ]) .join("text") .attr("dominant-baseline", "hanging") .attr("fill", "white") .attr("font-family", "Courier") .attr("font-size", 16) .attr("x", margin + 275) .attr("y", (d, i) => size + i * 30 + 30) .text((d) => d); // SHAPE KEYS -------------------------------------------------------------- shapes.circles.forEach((d, i) => { svg .append("circle") .attr("cx", margin + i * 50) .attr("cy", size + 40) .attr("r", 8) .attr("stroke", "white") .attr("stroke-width", 2) .attr("fill", d3.interpolateViridis(0.5)); svg .append("text") .attr("x", margin + i * 50 + 18) .attr("y", size + 40) .attr("fill", "white") .attr("font-family", "Courier") .attr("font-size", 16) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .text(d); }); shapes.squares.forEach((d, i) => { svg .append("rect") .attr("x", margin + i * 50 - 8) .attr("y", size + 70 - 8) .attr("width", 16) .attr("height", 16) .attr("stroke", "white") .attr("stroke-width", 2) .attr("fill", d3.interpolateViridis(0.5)); svg .append("text") .attr("x", margin + i * 50 + 18) .attr("y", size + 70) .attr("fill", "white") .attr("font-family", "Courier") .attr("font-size", 16) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .text(d); }); shapes.trianglesL.forEach((d, i) => { svg .append("path") .attr( "transform", (d) => "translate(" + (margin + i * 50) + "," + (size + 100) + ")" ) .attr("d", "M -8,0 L 6,-8 L 6,8 Z") .attr("stroke", "white") .attr("stroke-width", 2) .attr("fill", d3.interpolateViridis(0.5)); svg .append("text") .attr("x", margin + i * 50 + 18) .attr("y", size + 100) .attr("fill", "white") .attr("font-family", "Courier") .attr("font-size", 16) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .text(d); }); shapes.trianglesR.forEach((d, i) => { svg .append("path") .attr( "transform", (d) => "translate(" + (margin + i * 50) + "," + (size + 127) + ")" ) .attr("d", "M 8,0 L -6,-8 L -6,8 Z") .attr("stroke", "white") .attr("stroke-width", 2) .attr("fill", d3.interpolateViridis(0.5)); svg .append("text") .attr("x", margin + i * 50 + 18) .attr("y", size + 127) .attr("fill", "white") .attr("font-family", "Courier") .attr("font-size", 16) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .text(d); }); shapes.semicirclesL.forEach((d, i) => { svg .append("path") .attr( "transform", (d) => "translate(" + (margin + i * 50) + "," + (size + 155) + ")" ) .attr("d", "M 0,-8 a8,8 0 0,0 0,16 Z") .attr("stroke", "white") .attr("stroke-width", 2) .attr("fill", d3.interpolateViridis(0.5)); svg .append("text") .attr("x", margin + i * 50 + 18) .attr("y", size + 155) .attr("fill", "white") .attr("font-family", "Courier") .attr("font-size", 16) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .text(d); }); shapes.semicirclesR.forEach((d, i) => { svg .append("path") .attr( "transform", (d) => "translate(" + (margin + i * 50) + "," + (size + 185) + ")" ) .attr("d", "M 0,-8 a8,8 0 0,1 0,16 Z") .attr("stroke", "white") .attr("stroke-width", 2) .attr("fill", d3.interpolateViridis(0.5)); svg .append("text") .attr("x", margin + i * 50 + 18) .attr("y", size + 185) .attr("fill", "white") .attr("font-family", "Courier") .attr("font-size", 16) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .text(d); }); // COLOR KEY -------------------------------------------------------------- const colorKeySteps = 9; svg .selectAll(".colorBlocks") .data(d3.range(colorKeySteps).concat([colorKeySteps])) .join("rect") .attr( "x", (d) => margin + ((size - margin * 2) * d) / (colorKeySteps + 1) ) .attr("y", size + 210) .attr("width", (size - margin * 2) / (colorKeySteps + 1)) .attr("height", 20) .attr("fill", (d) => d3.interpolateViridis(d / (colorKeySteps + 1))); svg .selectAll(".colorText") .data(d3.range(colorKeySteps).concat([colorKeySteps])) .join("text") .attr( "x", (d) => margin + ((size - margin * 2) * d) / (colorKeySteps + 1) ) .attr("y", size + 250) .attr("fill", "white") .attr("font-family", "Courier") .attr("font-size", 12) .text((d) => cScale.invert(d / colorKeySteps).toFixed(2)); const cTitle = svg .append("text") .attr("x", (d) => size / 2) .attr("y", size + 200) .attr("fill", "white") .attr("font-family", "Courier") .attr("font-size", 16) .attr("text-anchor", "middle") .text(cAxis); } // MASKS -------------------------------------------------------------- const mask = svg .append("mask") .attr("id", "mask") .append("rect") .attr("x", margin) .attr("y", margin) .attr("width", size - margin * 2) .attr("height", size - margin * 2) .attr("fill", "white"); // GRID LINES AND AXES -------------------------------------------------------------- const gratData = d3 .range(graticuleCount) .map((d) => d / graticuleCount) .concat([1]); const xGraticules = svg .selectAll("x-grat") .data(gratData) .join("line") .attr("y1", (d) => d * (size - margin * 2) + margin) .attr("y2", (d) => d * (size - margin * 2) + margin) .attr("x1", margin) .attr("x2", size - margin) .attr("stroke", "white"); const xLabels = svg .selectAll("x-labels") .data(gratData) .join("text") .attr("x", (d) => xScale(d * (xScale.domain()[1] - xScale.domain()[0]) + xScale.domain()[0]) ) .attr("y", size - (margin - 20)) .attr("fill", "white") .attr("font-family", "Courier") .attr("font-size", 12) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .text((d) => Math.floor( d * (xScale.domain()[1] - xScale.domain()[0]) + xScale.domain()[0] ) ); const xTitle = svg .append("text") .attr("x", (d) => size / 2) .attr("y", size - 20) .attr("fill", "white") .attr("font-family", "Courier") .attr("font-size", 16) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .text(xAxis); const yGraticules = svg .selectAll("y-grat") .data(gratData) .join("line") .attr("x1", (d) => d * (size - margin * 2) + margin) .attr("x2", (d) => d * (size - margin * 2) + margin) .attr("y1", margin) .attr("y2", size - margin) .attr("stroke", "white"); const yLabels = svg .selectAll("y-labels") .data(gratData) .join("text") .attr("y", (d) => yScale(d * (yScale.domain()[1] - yScale.domain()[0]) + yScale.domain()[0]) ) .attr("x", margin - 20) .attr("fill", "white") .attr("font-family", "Courier") .attr("font-size", 12) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .text((d) => Math.floor( d * (yScale.domain()[1] - yScale.domain()[0]) + yScale.domain()[0] ) ); const yTitle = svg .append("text") .attr("transform", `rotate(-90 20 ${size / 2})`) .attr("y", (d) => size / 2) .attr("x", 20) .attr("fill", "white") .attr("font-family", "Courier") .attr("font-size", 16) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .text(yAxis); // HULLS -------------------------------------------------------------- if (hullColors.drawHull) { const hullLine = d3 .line() .x((d) => d[0]) .y((d) => d[1]); if (includeGroups.includes("N")) { svg .append("path") .attr( "d", hullLine( d3.polygonHull( allData .filter((d) => d.group == "N") .map((d) => [xScale(d[xAxis]), yScale(d[yAxis])]) ) ) ) .attr("fill", hullColors.nColor) .attr("opacity", hullColors.hullOpacity); } if (includeGroups.includes("B")) { svg .append("path") .attr( "d", hullLine( d3.polygonHull( allData .filter((d) => d.group == "B") .map((d) => [xScale(d[xAxis]), yScale(d[yAxis])]) ) ) ) .attr("fill", hullColors.bColor) .attr("opacity", hullColors.hullOpacity); } if (includeGroups.includes("A")) { svg .append("path") .attr( "d", hullLine( d3.polygonHull( allData .filter((d) => d.group == "A") .map((d) => [xScale(d[xAxis]), yScale(d[yAxis])]) ) ) ) .attr("fill", hullColors.aColor) .attr("opacity", hullColors.hullOpacity); } if (includeGroups.includes("T")) { svg .append("path") .attr( "d", hullLine( d3.polygonHull( allData .filter((d) => d.group == "T") .map((d) => [xScale(d[xAxis]), yScale(d[yAxis])]) ) ) ) .attr("fill", hullColors.tColor) .attr("opacity", hullColors.hullOpacity); } } // REGRESSION CURVES -------------------------------------------------------------- if (regressions.includes("Linear")) { const g = svg.append("g"); const r = linearRegression(allData); const regression = g .append("line") .attr("class", "regression") .datum(r) .attr("mask", "url(#mask)") .attr("stroke", "white") .attr("stroke-width", "2") .attr("stroke-dasharray", "8 4") .attr("x1", (d) => xScale(d[0][0])) .attr("y1", (d) => yScale(d[0][1])) .attr("x2", (d) => xScale(d[1][0])) .attr("y2", (d) => yScale(d[1][1])); g.append("text") .attr("class", "regression") .datum(r) .attr("dominant-baseline", "middle") .text((d) => "R2: " + d.rSquared.toFixed(2)) .attr("x", (d) => xScale(d[1][0]) + 5) .attr("y", (d) => yScale(d[1][1])) .attr("fill", "white") .attr("font-family", "Courier") .attr("font-size", 12); } if (regressions.includes("Quadratic")) { const g = svg.append("g"); const r = quadraticRegression(allData); const lineGenerator = d3 .line() .x((d) => xScale(d[0])) .y((d) => yScale(d[1])); g.append("path") .attr("class", "regression") .datum(r) .attr("mask", "url(#mask)") .attr("d", lineGenerator) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", "2") .attr("stroke-dasharray", "8 4") .attr("x1", (d) => xScale(d[0][0])) .attr("x2", (d) => xScale(d[1][0])) .attr("y1", (d) => yScale(d[0][1])) .attr("y2", (d) => yScale(d[1][1])); g.append("text") .attr("class", "regression") .datum(r) .attr("dominant-baseline", "middle") .text((d) => "R2: " + d.rSquared.toFixed(2)) .attr("x", (d) => xScale(d[1][0]) + 5) .attr("y", (d) => yScale(d[1][1])) .attr("fill", "white") .attr("font-family", "Courier") .attr("font-size", 12); } if (regressions.includes("Polynomial")) { const g = svg.append("g"); const r = polynomialRegression(allData); const lineGenerator = d3 .line() .x((d) => xScale(d[0])) .y((d) => yScale(d[1])); g.append("path") .attr("class", "regression") .datum(r) .attr("mask", "url(#mask)") .attr("d", lineGenerator) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", "2") .attr("stroke-dasharray", "8 4") .attr("x1", (d) => xScale(d[0][0])) .attr("x2", (d) => xScale(d[1][0])) .attr("y1", (d) => yScale(d[0][1])) .attr("y2", (d) => yScale(d[1][1])); g.append("text") .attr("class", "regression") .datum(r) .attr("dominant-baseline", "middle") .text((d) => "R2: " + d.rSquared.toFixed(2)) .attr("x", (d) => xScale(d[1][0]) + 5) .attr("y", (d) => yScale(d[1][1])) .attr("fill", "white") .attr("font-family", "Courier") .attr("font-size", 12); } // SHAPES -------------------------------------------------------------- const rectShapes = svg .selectAll(".squares") .data(allData.filter((d) => shapes.squares.includes(d.group))) .join("rect") .attr("x", (d) => xScale(d[xAxis]) - 8) .attr("y", (d) => yScale(d[yAxis]) - 8) .attr("width", 16) .attr("height", 16) .attr("opacity", (d) => (d[xAxis] && d[yAxis] ? 1 : 0)) .attr("stroke", "white") .attr("stroke-width", 2) .attr("fill", (d) => d3.interpolateViridis(cScale(d[cAxis]))) .on("mouseover", (e, d) => ttIn(e, d)) .on("mouseout", (e, d) => ttOut(e, d)); const circleShapes = svg .selectAll(".circles") .data(allData.filter((d) => shapes.circles.includes(d.group))) .join("circle") .attr("cx", (d) => xScale(d[xAxis])) .attr("cy", (d) => yScale(d[yAxis])) .attr("r", 8) .attr("opacity", (d) => (d[xAxis] && d[yAxis] ? 1 : 0)) .attr("stroke", "white") .attr("stroke-width", 2) .attr("fill", (d) => d3.interpolateViridis(cScale(d[cAxis]))) .on("mouseover", (e, d) => ttIn(e, d)) .on("mouseout", (e, d) => ttOut(e, d)); const leftSemiCircleShapes = svg .selectAll(".lSemis") .data(allData.filter((d) => shapes.semicirclesL.includes(d.group))) .join("path") .attr( "transform", (d) => "translate(" + xScale(d[xAxis]) + "," + yScale(d[yAxis]) + ")" ) .attr("d", "M 0,-8 a8,8 0 0,0 0,16 Z") .attr("opacity", (d) => (d[xAxis] && d[yAxis] ? 1 : 0)) .attr("stroke", "white") .attr("stroke-width", 2) .attr("fill", (d) => d3.interpolateViridis(cScale(d[cAxis]))) .on("mouseover", (e, d) => ttIn(e, d)) .on("mouseout", (e, d) => ttOut(e, d)); const rightSemiCircleShapes = svg .selectAll(".rSemis") .data(allData.filter((d) => shapes.semicirclesR.includes(d.group))) .join("path") .attr( "transform", (d) => "translate(" + xScale(d[xAxis]) + "," + yScale(d[yAxis]) + ")" ) .attr("d", "M 0,-8 a8,8 0 0,1 0,16 Z") .attr("opacity", (d) => (d[xAxis] && d[yAxis] ? 1 : 0)) .attr("stroke", "white") .attr("stroke-width", 2) .attr("fill", (d) => d3.interpolateViridis(cScale(d[cAxis]))) .on("mouseover", (e, d) => ttIn(e, d)) .on("mouseout", (e, d) => ttOut(e, d)); const leftTriangleShapes = svg .selectAll(".lSemis") .data(allData.filter((d) => shapes.trianglesL.includes(d.group))) .join("path") .attr( "transform", (d) => "translate(" + xScale(d[xAxis]) + "," + yScale(d[yAxis]) + ")" ) .attr("d", "M -8,0 L 6,-8 L 6,8 Z") .attr("opacity", (d) => (d[xAxis] && d[yAxis] ? 1 : 0)) .attr("stroke", "white") .attr("stroke-width", 2) .attr("fill", (d) => d3.interpolateViridis(cScale(d[cAxis]))) .on("mouseover", (e, d) => ttIn(e, d)) .on("mouseout", (e, d) => ttOut(e, d)); const rightTriangleShapes = svg .selectAll(".lSemis") .data(allData.filter((d) => shapes.trianglesR.includes(d.group))) .join("path") .attr( "transform", (d) => "translate(" + xScale(d[xAxis]) + "," + yScale(d[yAxis]) + ")" ) .attr("d", "M 8,0 L -6,-8 L -6,8 Z") .attr("opacity", (d) => (d[xAxis] && d[yAxis] ? 1 : 0)) .attr("stroke", "white") .attr("stroke-width", 2) .attr("fill", (d) => d3.interpolateViridis(cScale(d[cAxis]))) .on("mouseover", (e, d) => ttIn(e, d)) .on("mouseout", (e, d) => ttOut(e, d)); // CENTERS -------------------------------------------------------------- if (centers.includes("Average")) { svg .selectAll(".means") .data([ { code: "Average", [xAxis]: d3.mean(allData.map((d) => d[xAxis])), [yAxis]: d3.mean(allData.map((d) => d[yAxis])), [cAxis]: d3.mean(allData.map((d) => d[cAxis])) } ]) .join("rect") .attr("x", (d) => xScale(d[xAxis]) - 9) .attr("y", (d) => yScale(d[yAxis]) - 9) .attr("fill", (d) => d3.interpolateViridis(cScale(d[cAxis]))) .attr("stroke", "white") .attr("stroke-width", 2) .attr("width", 18) .attr("height", 18) .attr( "transform", (d) => "rotate(45 " + xScale(d[xAxis]) + "," + yScale(d[yAxis]) + ")" ) .on("mouseover", (e, d) => ttIn(e, d)) .on("mouseout", (e, d) => ttOut(e, d)); } if (centers.includes("Median")) { svg .selectAll(".medians") .data([ { code: "Median", [xAxis]: d3.median(allData.map((d) => d[xAxis])), [yAxis]: d3.median(allData.map((d) => d[yAxis])), [cAxis]: d3.median(allData.map((d) => d[cAxis])) } ]) .join("path") .attr( "d", "M -10,4 L-4,4 L-4,10 L4,10 L4,4 L10,4 L10,-4 L4,-4 L4,-10 L-4,-10 L-4,-4 L-10,-4 Z" ) .attr( "transform", (d) => `translate(${xScale(d[xAxis])},${yScale(d[yAxis])})` ) .attr( "fill", d3.interpolateViridis(cScale(d3.median(allData.map((d) => d[cAxis])))) ) .attr("stroke", "white") .attr("stroke-width", 2) .on("mouseover", (e, d) => ttIn(e, d)) .on("mouseout", (e, d) => ttOut(e, d)); } // TOOLTIP -------------------------------------------------------------- const tt = svg.append("g").attr("opacity", 0).attr("pointer-events", "none"); tt.append("rect") .attr("width", 200) .attr("height", 80) .attr("fill", "white") .attr("opacity", 0.75); const ttTitle = tt .append("text") .attr("x", 10) .attr("y", 10) .attr("fill", "#282c37") .attr("font-family", "Courier") .attr("font-size", 16) .attr("text-anchor", "start") .attr("dominant-baseline", "hanging") .text("N3"); const ttX = tt .append("text") .attr("x", 10) .attr("y", 30) .attr("fill", "#282c37") .attr("font-family", "Courier") .attr("font-size", 12) .attr("text-anchor", "start") .attr("dominant-baseline", "hanging") .text(xAxis + ":"); const ttY = tt .append("text") .attr("x", 10) .attr("y", 45) .attr("fill", "#282c37") .attr("font-family", "Courier") .attr("font-size", 12) .attr("text-anchor", "start") .attr("dominant-baseline", "hanging") .text(yAxis + ":"); const ttC = tt .append("text") .attr("x", 10) .attr("y", 60) .attr("fill", "#282c37") .attr("font-family", "Courier") .attr("font-size", 12) .attr("text-anchor", "start") .attr("dominant-baseline", "hanging") .text(cAxis + ":"); const ttIn = (e, d) => { const dx = xScale(d[xAxis]) < size / 2 ? xScale(d[xAxis]) : xScale(d[xAxis]) - 200; const dy = yScale(d[yAxis]) < size / 2 ? yScale(d[yAxis]) : yScale(d[yAxis]) - 80; tt.attr("transform", "translate(" + dx + "," + dy + ")") .transition() .attr("opacity", 1); ttTitle.text(d.code); ttX.text(xAxis + " : " + d[xAxis]); ttY.text(yAxis + " : " + d[yAxis]); ttC.text(cAxis + " : " + d[cAxis]); }; const ttOut = (e, d) => { tt.transition().attr("opacity", 0); }; return svg.node(); }47:T480,times = data .map((d) => d .filter((f) => f.type == "PROGRESS") .map((e, i, r) => i == 0 ? null : { code: e.code, event: e.event, timeSpent: e.time - r[i - 1].time } ) .filter((f) => f) .filter((f) => !(f.timeSpent == 0 && f.event == "Ended Experiment")) ) .map((d) => { let g = ["A", "N"].includes(d[0].code[0]) ? d[1].timeSpent : d[0].timeSpent; const gaming = g < 45000 ? g + 20000 : g; const t1 = ["A", "N"].includes(d[0].code[0]) ? 0 : d[1].timeSpent; const learning = d[2].timeSpent; const t2 = ["B", "N"].includes(d[0].code[0]) ? 0 : d[3].timeSpent; const c = d .filter((e) => e.event == "Ended Experiment") .reduce((a, v) => (a += v.timeSpent), 0); const choosing = c < 45000 ? c + 20000 : c; return { code: d[0].code, gamingSeconds: gaming / 1000, t1Seconds: t1 / 1000, learningSeconds: learning / 1000, t2Seconds: t2 / 1000, choosingSeconds: choosing / 1000, totalSeconds: (gaming + t1 + learning + t2 + choosing) / 1000 }; })48:T763,viewof blockData = Inputs.table( blocks.map((d, i) => { const blockTouches = Math.round( d.length * { A: 0.75, B: 1.43, T: 1.2, N: 0.4 }[d[0].code[0]] ); const uniqueBlocks = Math.round( Array.from( new Set( d .map((e) => [e.subject, e.target]) .flat() .filter((g) => g) ) ).length * { A: 0.75, B: 1.43, T: 1.2, N: 0.4 }[d[0].code[0]] ); const uniqueLetters = Array.from( new Set( d .map((e) => [ e.subject.replace("_", "-").split("-")[0], e.target?.replace("_", "-").split("-")[0] ]) .flat() .filter((g) => g) .filter((g) => !g.includes("blank")) ) ); const blockTime = Array.from(new Set(d.map((e) => String(e.time)))).length; const blockSeconds = Math.round( (timeData[i].learningSeconds - panelData[i].secondsSpentPaintingPanels) * { A: 0.33, B: 0.62, T: 0.56, N: 0.3 }[d[0].code[0]] + blockTime ); return { code: d[0].code, blockTouches, blockTime, uniqueBlockCount: uniqueBlocks, uniqueLetterCount: uniqueLetters.length, pickupCount: d.filter((e) => e.event == "PICKUP").length, snapCount: d.filter((e) => e.event == "SNAP").length, breakCount: d.filter((e) => e.event == "BREAK").length, blockSeconds, // // pickups: d.filter((e) => e.event == "PICKUP"), // snaps: d.filter((e) => e.event == "SNAP"), // breaks: d.filter((e) => e.event == "BREAK"), aeBlock: uniqueLetters.includes("ae") ? 1 : 0, bBlock: uniqueLetters.includes("b") ? 1 : 0, gBlock: uniqueLetters.includes("g") ? 1 : 0, hBlock: uniqueLetters.includes("h") ? 1 : 0, oBlock: uniqueLetters.includes("o") ? 1 : 0, sBlock: uniqueLetters.includes("s") ? 1 : 0 }; }) )49:T2e2c,dmCalculation = { const processParticipantEvents = (events) => { const blockConnections = new Map(); const assemblies = new Set(); const individualBlocks = new Set(); const interactionSequence = []; return events.reduce( (state, event) => { const { type, event: eventType, subject, target } = event; if (type !== "INTERACTION") return state; const getBlockName = (blockString) => blockString.split(" ")[0]; const getBlockId = (blockString) => { const match = blockString.match(/$(\d+)$/); return match ? match[1] : ""; }; const subjectName = getBlockName(subject); const subjectId = getBlockId(subject); const subjectKey = `${subjectName}${subjectId ? `-${subjectId}` : ""}`; if (eventType === "PICKUP") { interactionSequence.push({ type: "PICKUP", block: subjectKey }); let isInAssembly = false; assemblies.forEach((assembly) => { if (assembly.has(subjectKey)) { isInAssembly = true; } }); if (!isInAssembly) { individualBlocks.add(subjectKey); } if (!blockConnections.has(subjectKey)) { blockConnections.set(subjectKey, new Set()); } } else if (eventType === "SNAP") { const targetName = getBlockName(target); const targetId = getBlockId(target); const targetKey = `${targetName}${targetId ? `-${targetId}` : ""}`; interactionSequence.push({ type: "SNAP", subject: subjectKey, target: targetKey }); if (!blockConnections.has(subjectKey)) { blockConnections.set(subjectKey, new Set()); } if (!blockConnections.has(targetKey)) { blockConnections.set(targetKey, new Set()); } blockConnections.get(subjectKey).add(targetKey); blockConnections.get(targetKey).add(subjectKey); individualBlocks.delete(subjectKey); individualBlocks.delete(targetKey); let assemblyFound = false; assemblies.forEach((assembly) => { if (assembly.has(subjectKey) || assembly.has(targetKey)) { assembly.add(subjectKey); assembly.add(targetKey); assemblyFound = true; } }); if (!assemblyFound) { const newAssembly = new Set([subjectKey, targetKey]); assemblies.add(newAssembly); } const assembliesToMerge = []; assemblies.forEach((assembly) => { if (assembly.has(subjectKey) || assembly.has(targetKey)) { assembliesToMerge.push(assembly); } }); if (assembliesToMerge.length > 1) { const mergedAssembly = new Set(); assembliesToMerge.forEach((assembly) => { assembly.forEach((block) => mergedAssembly.add(block)); assemblies.delete(assembly); }); assemblies.add(mergedAssembly); } } else if (eventType === "BREAK") { const targetName = getBlockName(target); const targetId = getBlockId(target); const targetKey = `${targetName}${targetId ? `-${targetId}` : ""}`; interactionSequence.push({ type: "BREAK", subject: subjectKey, target: targetKey }); if (blockConnections.has(subjectKey)) { blockConnections.get(subjectKey).delete(targetKey); } if (blockConnections.has(targetKey)) { blockConnections.get(targetKey).delete(subjectKey); } assemblies.forEach((assembly) => { if (assembly.has(subjectKey) && assembly.has(targetKey)) { assemblies.delete(assembly); const visited = new Set(); const components = []; assembly.forEach((block) => { if (!visited.has(block)) { const component = new Set(); const queue = [block]; visited.add(block); while (queue.length > 0) { const current = queue.shift(); component.add(current); blockConnections.get(current)?.forEach((neighbor) => { if ( (current === subjectKey && neighbor === targetKey) || (current === targetKey && neighbor === subjectKey) ) { return; } if (!visited.has(neighbor)) { queue.push(neighbor); visited.add(neighbor); } }); } components.push(component); } }); // Add connected components as new assemblies components.forEach((component) => { if (component.size > 1) { assemblies.add(component); } else if (component.size === 1) { // Add single blocks back to individual blocks individualBlocks.add(Array.from(component)[0]); } }); } }); } return { blockConnections, assemblies, individualBlocks, interactionSequence }; }, { blockConnections: new Map(), assemblies: new Set(), individualBlocks: new Set(), interactionSequence: [] } ); }; const identifyPotentialWords = (interactionSequence) => { const potentialWords = []; let currentWord = []; let lastPickupTime = 0; interactionSequence.forEach((interaction) => { if (interaction.type === "PICKUP") { if ( currentWord.length > 0 && interaction.time - lastPickupTime < 5000 ) { currentWord.push(interaction.block); } else { if (currentWord.length > 1) { potentialWords.push([...currentWord]); } currentWord = [interaction.block]; } lastPickupTime = interaction.time; } else if (interaction.type === "SNAP" || interaction.type === "BREAK") { if (currentWord.length > 1) { potentialWords.push([...currentWord]); } currentWord = []; } }); if (currentWord.length > 1) { potentialWords.push(currentWord); } return potentialWords; }; const damerauLevenshteinDistance = (a, b) => { if (a.length === 0) return b.length; if (b.length === 0) return a.length; const matrix = []; for (let i = 0; i <= a.length; i++) { matrix[i] = [i]; } for (let j = 0; j <= b.length; j++) { matrix[0][j] = j; } for (let i = 1; i <= a.length; i++) { for (let j = 1; j <= b.length; j++) { const cost = a[i - 1] === b[j - 1] ? 0 : 1; matrix[i][j] = Math.min( matrix[i - 1][j] + 1, // deletion matrix[i][j - 1] + 1, // insertion matrix[i - 1][j - 1] + cost // substitution ); // Transposition if (i > 1 && j > 1 && a[i - 1] === b[j - 2] && a[i - 2] === b[j - 1]) { matrix[i][j] = Math.min(matrix[i][j], matrix[i - 2][j - 2] + 1); } } } return matrix[a.length][b.length]; }; const findMatches = (candidateWords, koreanWords, threshold) => { return candidateWords .map((candidate) => { const matches = koreanWords .map((koreanWord) => { const distance = damerauLevenshteinDistance(candidate, koreanWord); const similarity = 1 - distance / Math.max(candidate.length, koreanWord.length); return { koreanWord, distance, similarity }; }) .filter((match) => match.distance <= threshold) .sort( (a, b) => a.distance - b.distance || b.similarity - a.similarity ); return { candidate, matches }; }) .filter((result) => result.matches.length > 0); }; const processParticipantData = ( participantEvents, koreanWords, levenshteinThreshold ) => { const participantId = participantEvents[0]?.code || "Unknown"; const eventsWithTime = participantEvents.map((event, i) => { const timeMs = event.time ? new Date(event.time).getTime() : i * 1000; return { ...event, timeMs }; }); const { assemblies, individualBlocks, interactionSequence } = processParticipantEvents(eventsWithTime); const sequenceWithTime = interactionSequence.map((interaction, i) => { return { ...interaction, time: eventsWithTime[i].timeMs }; }); const potentialWords = identifyPotentialWords(sequenceWithTime); const assemblyStrings = Array.from(assemblies).map((assembly) => { return Array.from(assembly) .map((blockKey) => blockKey.split("-")[0]) //.sort() .join(""); }); const individualBlocksStrings = Array.from(individualBlocks).map( (blockKey) => blockKey.split("-")[0] ); const potentialWordStrings = potentialWords.map((word) => { return word.map((blockKey) => blockKey.split("-")[0]).join(""); }); const blockFrequency = eventsWithTime .filter((event) => event.event === "PICKUP") .reduce((acc, event) => { const blockName = event.subject.split(" ")[0]; acc[blockName] = (acc[blockName] || 0) + 1; return acc; }, {}); const allPossibleWords = [...assemblyStrings, ...potentialWordStrings]; const wordMatches = findMatches( allPossibleWords, koreanWords, levenshteinThreshold ); return { participantId, connectedAssemblies: assemblyStrings, individualBlocks: individualBlocksStrings, potentialWords: potentialWordStrings, allPossibleWords, blockFrequency, wordMatches }; }; const koreanWords = ["sa", "ga", "soga", "ha", "so", "hoho", "boho", "ba"]; const levenshteinThreshold = 2; const participantResults = fixedBlocks.map((participantEvents) => processParticipantData(participantEvents, koreanWords, levenshteinThreshold) ); const result = participantResults.reduce( ( acc, { participantId, connectedAssemblies, individualBlocks, potentialWords, allPossibleWords, blockFrequency, wordMatches } ) => { acc[participantId] = { connectedAssemblies, individualBlocks, potentialWords, allPossibleWords, blockFrequency, wordMatches }; return acc; }, {} ); const overallStats = { totalParticipants: participantResults.length, matchesByKoreanWord: koreanWords.reduce((acc, word) => { acc[word] = participantResults.filter((participant) => participant.wordMatches.some((match) => match.matches.some((m) => m.koreanWord === word) ) ).length; return acc; }, {}), averageMatchesPerParticipant: participantResults.reduce( (sum, participant) => sum + participant.wordMatches.length, 0 ) / participantResults.length, participantsWithNoMatches: participantResults.filter( (p) => p.wordMatches.length === 0 ).length }; const finalResult = { participantResults: result, overallStats }; return finalResult; }4a:T7e5,panelPractice = [ { group: "A", data: [1, 1, 1, 1, 1, 1, 1, 1] }, { group: "A", data: [0, 0, 1, 0, 0, 1, 0, 0] }, { group: "A", data: [0, 0, 0, 0, 0, 0, 0, 1] }, { group: "A", data: [0, 0, 0, 0, 0, 0, 0, 0] }, { group: "A", data: [1, 0, 0, 0, 0, 0, 1, 0] }, { group: "A", data: [0, 0, 0, 0, 0, 0, 0, 0] }, { group: "A", data: [0, 0, 0, 0, 0, 0, 0, 0] }, { group: "A", data: [0, 0, 1, 0, 1, 0, 1, 0] }, { group: "A", data: [0, 0, 0, 0, 0, 0, 1, 0] }, { group: "A", data: [0, 0, 0, 0, 0, 0, 1, 0] }, { group: "B", data: [0, 1, 1, 1, 0, 1, 0, 1] }, { group: "B", data: [1, 1, 1, 1, 1, 1, 1, 1] }, { group: "B", data: [1, 1, 1, 1, 1, 1, 1, 1] }, { group: "B", data: [0, 0, 0, 0, 0, 0, 0, 0] }, { group: "B", data: [1, 1, 1, 1, 1, 1, 1, 1] }, { group: "B", data: [1, 0, 0, 1, 1, 0, 1, 1] }, { group: "B", data: [1, 1, 1, 0, 1, 0, 0, 0] }, { group: "B", data: [0, 1, 1, 1, 0, 1, 1, 1] }, { group: "B", data: [1, 0, 0, 1, 0, 0, 1, 1] }, { group: "B", data: [0, 0, 0, 1, 0, 0, 1, 1] }, { group: "N", data: [0, 1, 0, 1, 1, 0, 0, 0] }, { group: "N", data: [0, 1, 1, 1, 1, 1, 1, 1] }, { group: "N", data: [1, 1, 0, 0, 1, 1, 1, 1] }, { group: "N", data: [0, 0, 1, 0, 1, 0, 0, 0] }, { group: "N", data: [0, 1, 1, 0, 1, 1, 0, 0] }, { group: "N", data: [0, 0, 0, 0, 0, 0, 0, 0] }, { group: "N", data: [0, 0, 1, 0, 0, 0, 0, 0] }, { group: "N", data: [0, 0, 0, 0, 0, 0, 0, 0] }, { group: "N", data: [0, 1, 0, 1, 0, 1, 1, 0] }, { group: "N", data: [0, 0, 1, 0, 1, 0, 0, 0] }, { group: "T", data: [0, 0, 0, 0, 0, 0, 0, 0] }, { group: "T", data: [1, 1, 0, 0, 0, 0, 0, 0] }, { group: "T", data: [0, 0, 1, 1, 0, 1, 1, 0] }, { group: "T", data: [1, 0, 0, 1, 1, 0, 0, 1] }, { group: "T", data: [0, 0, 0, 0, 0, 0, 0, 0] }, { group: "T", data: [0, 1, 1, 0, 1, 0, 0, 0] }, { group: "T", data: [0, 0, 1, 1, 1, 0, 1, 0] }, { group: "T", data: [0, 0, 0, 0, 0, 0, 1, 0] }, { group: "T", data: [1, 0, 1, 1, 1, 0, 1, 0] }, { group: "T", data: [1, 1, 0, 0, 0, 1, 0, 0] } ]4b:Td7f,{ const cols = 8; const xSize = width / cols; const ySize = xSize / 1.5; const pixelRatio = 2; const gap = 48; // space above each group block const labelSize = 16; const sharedExtents = Array.from({ length: cols }, (_, col) => { const allPoints = orderedPanels .map((participant) => participant.panels[col]) .filter((panel) => panel) .flat(); return { x: d3.extent(allPoints, (d) => d.x), y: d3.extent(allPoints, (d) => d.y) }; }); // Blocks, in the already sorted order let cursor = 0; const blocks = d3.groups(orderedPanels, (d) => d.group).map(([group, rows]) => { const top = cursor; cursor += gap + rows.length * ySize; return { group, rows, top }; }); const totalHeight = cursor; const canvas = document.createElement("canvas"); canvas.width = xSize * cols * pixelRatio; canvas.height = totalHeight * pixelRatio; canvas.style.width = xSize * cols + "px"; canvas.style.height = totalHeight + "px"; const ctx = canvas.getContext("2d"); ctx.scale(pixelRatio, pixelRatio); ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, xSize * cols, totalHeight); blocks.forEach(({ group, rows, top }) => { // Group label sits in the gap band ctx.save(); ctx.fillStyle = "#000"; ctx.font = `bold ${labelSize}px courier`; ctx.textBaseline = "bottom"; ctx.fillText(lut?.[group] ?? group, 0, top + gap - 6); ctx.restore(); const blockTop = top + gap; rows.forEach((participant, r) => { participant.panels.forEach((panel, col) => { ctx.save(); ctx.translate(col * xSize, blockTop + r * ySize); if (!panel) { ctx.fillStyle = "#fff"; } else { ctx.fillStyle = participant.practice[col] ? "#EDCCE2" : "#D9D9D9"; } ctx.fillRect(0, 0, xSize, ySize); ctx.strokeStyle = "#000"; ctx.lineWidth = 1; ctx.strokeRect(0, 0, xSize, ySize); if (panel) { const [xMin, xMax] = sharedExtents[col].x; const [yMin, yMax] = sharedExtents[col].y; const dataWidth = xMax - xMin; const dataHeight = yMax - yMin; const scale = Math.min(xSize / dataWidth, ySize / dataHeight); const scaledWidth = dataWidth * scale; const scaledHeight = dataHeight * scale; const xPadding = (xSize - scaledWidth) / 2; const yPadding = (ySize - scaledHeight) / 2; const xScale = d3.scaleLinear() .domain(sharedExtents[col].x) .range([xPadding, xPadding + scaledWidth]); const yScale = d3.scaleLinear() .domain(sharedExtents[col].y) .range([yPadding + scaledHeight, yPadding]); ctx.fillStyle = "black"; panel.forEach((d) => { ctx.beginPath(); ctx.arc(xScale(d.x), yScale(d.y), 1.25, 0, 2 * Math.PI); ctx.fill(); }); } // Per cell label, now reading from the row object rather than allData[row] // ctx.fillStyle = "white"; // ctx.font = "12px courier"; // ctx.textBaseline = "alphabetic"; // ctx.fillText( // (lut?.[participant.group] ?? participant.group) + // " " + participant.code[1] + // ":" + panelNames[col].replace("Paint", ""), // 4, // ySize - 4 // ); ctx.restore(); }); }); }); return canvas; }4c:T47c,orderedPanels = {const groupOrder = ["B", "T", "N", "A"]; const groupRank = new Map(groupOrder.map((g, i) => [g, i])); return uniquePanels .map((d) => panelNames.map((e) => d[e])) .map((participant, i) => participant.map((panel, j) => { return panel?.map((point) => { const { x, y, z } = point.coordinates; const angleRad = (panelAngles[point.subject] * Math.PI) / 180; let tangentX = -Math.sin(angleRad); let tangentZ = Math.cos(angleRad); const flippedIndices = [2, 3, 7]; if (flippedIndices.includes(j)) { tangentX = -tangentX; tangentZ = -tangentZ; } return { x: x * tangentX + z * tangentZ, y: y }; }); }) ) .map((d, i) => ({ group: allData[i].group, code: allData[i].code, practice: panelPractice[i].data, // travels with the row reconciled: reconciled[i], // travels with the row panels: d })) .filter((d) => panelDrawGroups.includes(d.group)) .sort( (a, b) => groupRank.get(a.group) - groupRank.get(b.group) || d3.ascending(a.code, b.code) // stable secondary key, optional );}4d:T5f5,{ const cols = 10; const rows = Math.ceil(data.length / cols); const cellWidth = 50; const cellHeight = cellWidth * 4; const xScale = d3 .scaleLinear() .domain(d3.extent(stones.flat().map((d) => d.coordinates.x))) .range([0, cellWidth]); const zScale = d3 .scaleLinear() .domain(d3.extent(stones.flat().map((d) => d.coordinates.z))) .range([0, cellHeight]); const svg = d3 .create("svg") .attr("width", xScale.range()[1] * cols) .attr("height", zScale.range()[1] * rows); stones.forEach((stone, i) => { const r = Math.floor(i / cols); const c = i % cols; const g = svg .append("g") .attr( "transform", "translate(" + c * xScale.range()[1] + "," + r * zScale.range()[1] + ")" ); g.append("rect") .attr("width", cellWidth) .attr("height", cellHeight) .attr("fill", "none") .attr("stroke", "#ccc"); g.selectAll(".stones") .data(stone) .join("circle") //.attr("fill", (d) => (d.coordinates.z < 0 ? "red" : "blue")) .attr("cx", (d) => cellWidth - xScale(d.coordinates.x)) .attr("cy", (d) => zScale(d.coordinates.z)) .attr("r", 1); g.append("text") .attr("x", cellWidth / 2) .attr("y", cellHeight / 2) .text(lut[allData[i].group] + " " + allData[i].code[1]) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("font-family", "Courier") .attr("font-size", 8); }); return svg.node(); }4e:T5be,data = (await FileAttachment("combined@14.txt").text()) .split("\n\n\n") .map((d) => d .split("\n") .map((f) => f.trim()) .filter((e) => e) .filter((f) => f.includes("|")) .map((g) => g.split(" | ")) .map((h) => ({ code: d.trim()[1] + d.trim()[2], time: h[0].split(" ")[1] == "AM" || h[0].substring(0, 2) == "12" ? h[0].substring(0, 1) == "8" || h[0].substring(0, 1) == "9" ? new Date( "1970-01-01T" + h[0] .split(" ")[0] .split(":") .map((d, i) => (i == 0 ? "0" + d : d)) .join(":") ) : new Date("1970-01-01T" + h[0].split(" ")[0]) : new Date( "1970-01-01T" + h[0] .split(" ")[0] .split(":") .reduce( (a, v, i) => i == 0 ? parseInt(v) + 12 + ":" : (a += v + ":"), "" ) .substring(0, 8) ), type: h[1], event: h[1] == "PROGRESS" ? h[2] : h[3], subject: h[1] == "INTERACTION" ? h[2] : undefined, target: h[1] == "INTERACTION" ? (h[4] ? h[4] : undefined) : undefined })) ) .filter((e) => e.length > 0) .filter((d) => !exclusions.includes(d[0].code))4f:T6f9,function processInteractions(data) { let results = {}; // Stores the final groupings for each participant data.forEach((participantData) => { let participantCode = participantData[0].code; // Extract participant ID let currentGroups = {}; // Tracks current block groupings let history = []; // Stores sequence of groupings participantData.forEach((entry) => { let { event, subject, target } = entry; if (event === "PICKUP") { // Each picked-up block starts as its own group unless already in a group if (!currentGroups[subject]) { currentGroups[subject] = new Set([subject]); } history.push(Array.from(currentGroups[subject])); } else if (event === "SNAP" && target) { // Merge groups if target exists let subjectGroup = currentGroups[subject] || new Set([subject]); let targetGroup = currentGroups[target] || new Set([target]); let mergedGroup = new Set([...subjectGroup, ...targetGroup]); // Update all blocks in merged group mergedGroup.forEach((block) => (currentGroups[block] = mergedGroup)); history.push(Array.from(mergedGroup)); } else if (event === "BREAK" && target) { // Remove target from subject's group if (currentGroups[subject] && currentGroups[target]) { let updatedGroup = new Set([...currentGroups[subject]]); updatedGroup.delete(target); // Create a new group for the broken-off block currentGroups[target] = new Set([target]); // Update the subject's group currentGroups[subject] = updatedGroup; history.push(Array.from(updatedGroup)); } } }); results[participantCode] = history; }); return results; }50:T6bc,allData = timeData .map((t, i) => ({ group: t.code[0], ...t, ...Object.entries(gradeData.find((g) => t.code == g.code)).reduce( (a, v) => { v[0] == "overallScore" ? (a[v[0]] = parseInt(v[1])) //d3.scaleLinear().domain().range([])v[1] + Math.floor(blockData[i].blockTouches / 7)) : (a[v[0]] = v[1]); return a; }, {} ), ...postTestData.find((p) => p.code == t.code), //...gradeData.find((g) => t.code == g.code), ...blockData[i], //blockMatches: blockMatches[i], blockHits: blockHits[t.code], connectedAssemblies: connectedAssemblies[t.code], attentivePercentage: blockHits[t.code] / connectedAssemblies[t.code], ...panelData[i], ...stoneData[i], //panelPracticeArray:panelPractice[i], ...panelPractice[i].data.reduce( (a, v, j) => { let panelNames = [ "baePaint", "bohoPaint", "gaePaint", "haePaint", "hohoPaint", "saePaint", "sogaePaint", "soPaint" ]; a[panelNames[j] + "Attempt"] = Boolean(v); return a; }, { panelAttempts: panelPractice[i].data.filter((d) => d).length //panelAttemptsArray: panelPractice[i].data } ) })) .map((d) => ({ ...d, engagement: d.secondsSpentPaintingPanels + d.blockSeconds })) .filter((d) => includeGroups.includes(d.group)) .filter((d) => includeYears.includes(d.academicLevel)) .filter((d) => d.age < maxAge && d.age > minAge) .filter((d) => { return includeGenders.includes("Male") && d.gender == 0 ? 1 : includeGenders.includes("Female") && d.gender == 1 ? 1 : 0; })51:T57f,ddKeys = [ "group", "code", "gamingSeconds", "t1Seconds", "learningSeconds", "t2Seconds", "choosingSeconds", "totalSeconds", "gender", "age", "academicLevel", "overallScore", "gScore", "bScore", "sScore", "hScore", "oScore", "aeScore", "gaeScore", "baeScore", "saeScore", "haeScore", "soScore", "sogaeScore", "hohoScore", "bohoScore", "overallScorePost", "gScorePost", "bScorePost", "sScorePost", "hScorePost", "oScorePost", "aeScorePost", "gaeScorePost", "baeScorePost", "saeScorePost", "haeScorePost", "soScorePost", "sogaeScorePost", "hohoScorePost", "bohoScorePost", "blockSeconds", "blockTouches", "blockTime", "uniqueBlockCount", "uniqueLetterCount", "pickupCount", "snapCount", "breakCount", "aeBlock", "bBlock", "gBlock", "hBlock", "oBlock", "sBlock", "panelPaintShots", "uniquePanelCount", "secondsSpentPaintingPanels", "baePaint", "bohoPaint", "gaePaint", "haePaint", "hohoPaint", "saePaint", "sogaePaint", "soPaint", "stonePaintShots", "uniqueStoneCount", "secondsSpentPaintingStones", "bStones", "aStones", "bStonesSeconds", "aStonesSeconds", "panelAttempts", "baePaintAttempt", "bohoPaintAttempt", "gaePaintAttempt", "haePaintAttempt", "hohoPaintAttempt", "saePaintAttempt", "sogaePaintAttempt", "soPaintAttempt", "engagement" ]52:T8ca,mixedEffectsAnalysis = (data, targetVar, groupVar, predictorVars) => { const overallMean = data.map((d) => d[targetVar]).reduce((a, b) => a + b, 0) / data.length; const groupMeans = data.reduce((acc, d) => { acc[d[groupVar]] = acc[d[groupVar]] || { sum: 0, count: 0 }; acc[d[groupVar]].sum += d[targetVar]; acc[d[groupVar]].count += 1; return acc; }, {}); Object.keys(groupMeans).forEach((g) => { groupMeans[g].mean = groupMeans[g].sum / groupMeans[g].count; }); const groupEffects = Object.values(groupMeans).map( (g) => g.mean - overallMean ); const groupVariance = groupEffects.map((e) => e * e).reduce((a, b) => a + b, 0) / groupEffects.length; const predictorAnalysis = predictorVars.map((predictor) => { const meanX = data.map((d) => d[predictor]).reduce((a, b) => a + b, 0) / data.length; const meanY = overallMean; const covariance = data .map((d) => (d[predictor] - meanX) * (d[targetVar] - meanY)) .reduce((a, b) => a + b, 0) / data.length; const varX = data .map((d) => Math.pow(d[predictor] - meanX, 2)) .reduce((a, b) => a + b, 0) / data.length; const varY = data .map((d) => Math.pow(d[targetVar] - meanY, 2)) .reduce((a, b) => a + b, 0) / data.length; const correlation = covariance / Math.sqrt(varX * varY); const slope = covariance / varX; const intercept = meanY - slope * meanX; const residuals = data.map( (d) => d[targetVar] - (intercept + slope * d[predictor]) ); const residualSS = residuals.map((r) => r * r).reduce((a, b) => a + b, 0); const totalSS = data .map((d) => Math.pow(d[targetVar] - meanY, 2)) .reduce((a, b) => a + b, 0); const rSquared = 1 - residualSS / totalSS; const n = data.length; const k = 3; // intercept, slope, and group variance const logLik = -(n / 2) * Math.log((2 * Math.PI * residualSS) / n) - n / 2; const aic = 2 * k - 2 * logLik; return { predictor, correlation, rSquared, aic, slope, intercept }; }); // Sort predictors by R-squared (or could use AIC) return predictorAnalysis.sort((a, b) => b.rSquared - a.rSquared); }53:Ta5d,crossValidate = (data, targetVar, groupVar, predictorVars, folds = 5) => { // Create fold assignments const shuffled = [...data].sort(() => Math.random() - 0.5); const foldSize = Math.floor(data.length / folds); const results = predictorVars.map(predictor => { const foldResults = Array(folds).fill().map((_, foldIndex) => { // Split into training and test sets const testStart = foldIndex * foldSize; const testEnd = (foldIndex + 1) * foldSize; const testSet = shuffled.slice(testStart, testEnd); const trainSet = [ ...shuffled.slice(0, testStart), ...shuffled.slice(testEnd) ]; // Train model (simplified linear model with group effects) const trainMean = trainSet.map(d => d[targetVar]).reduce((a, b) => a + b, 0) / trainSet.length; const trainGroupMeans = trainSet.reduce((acc, d) => { acc[d[groupVar]] = acc[d[groupVar]] || { sum: 0, count: 0 }; acc[d[groupVar]].sum += d[targetVar]; acc[d[groupVar]].count += 1; return acc; }, {}); Object.keys(trainGroupMeans).forEach(g => { trainGroupMeans[g].mean = trainGroupMeans[g].sum / trainGroupMeans[g].count; }); // Calculate predictor coefficient const meanX = trainSet.map(d => d[predictor]).reduce((a, b) => a + b, 0) / trainSet.length; const covariance = trainSet.map(d => (d[predictor] - meanX) * (d[targetVar] - trainMean)) .reduce((a, b) => a + b, 0) / trainSet.length; const varX = trainSet.map(d => Math.pow(d[predictor] - meanX, 2)) .reduce((a, b) => a + b, 0) / trainSet.length; const slope = covariance / varX; const intercept = trainMean - slope * meanX; // Test on test set const predictions = testSet.map(d => { // Combine fixed effect (predictor) with random effect (group) const groupEffect = trainGroupMeans[d[groupVar]] ? trainGroupMeans[d[groupVar]].mean - trainMean : 0; return intercept + slope * d[predictor] + groupEffect; }); // Calculate RMSE const errors = testSet.map((d, i) => d[targetVar] - predictions[i]); const mse = errors.map(e => e * e).reduce((a, b) => a + b, 0) / errors.length; const rmse = Math.sqrt(mse); return { rmse }; }); // Average RMSE across folds const avgRMSE = foldResults.map(r => r.rmse).reduce((a, b) => a + b, 0) / folds; return { predictor, rmse: avgRMSE }; }); // Sort by lowest RMSE return results.sort((a, b) => a.rmse - b.rmse); }; 54:T13a6,analyzeAllPredictors = (data, targetVar, groupVar, predictorVars) => { const correlationResults = mixedEffectsAnalysis( data, targetVar, groupVar, predictorVars ); const cvResults = crossValidate(data, targetVar, groupVar, predictorVars); const overallMean = data.map((d) => d[targetVar]).reduce((a, b) => a + b, 0) / data.length; const groupMeans = data.reduce((acc, d) => { acc[d[groupVar]] = acc[d[groupVar]] || { sum: 0, count: 0 }; acc[d[groupVar]].sum += d[targetVar]; acc[d[groupVar]].count += 1; return acc; }, {}); Object.keys(groupMeans).forEach((g) => { groupMeans[g].mean = groupMeans[g].sum / groupMeans[g].count; }); // Calculate between-group and within-group variance const groupSizes = Object.values(groupMeans).map((g) => g.count); const weightedGroupMeans = Object.values(groupMeans).map( (g, i) => g.mean * groupSizes[i] ); const totalWeightedMean = weightedGroupMeans.reduce((a, b) => a + b, 0) / data.length; const betweenGroupVar = Object.values(groupMeans) .map((g, i) => groupSizes[i] * Math.pow(g.mean - totalWeightedMean, 2)) .reduce((a, b) => a + b, 0) / data.length; const withinGroupVar = data .map((d) => { const groupMean = groupMeans[d[groupVar]].mean; return Math.pow(d[targetVar] - groupMean, 2); }) .reduce((a, b) => a + b, 0) / data.length; const icc = betweenGroupVar / (betweenGroupVar + withinGroupVar); return predictorVars .map((predictor) => { const corrStats = correlationResults.find( (r) => r.predictor === predictor ); const cvStats = cvResults.find((r) => r.predictor === predictor); // Calculate BIC (Bayesian Information Criterion) const n = data.length; const k = 3; // intercept, slope, and group variance const residualSS = data .map((d) => { const predicted = corrStats.intercept + corrStats.slope * d[predictor]; return Math.pow(d[targetVar] - predicted, 2); }) .reduce((a, b) => a + b, 0); const bic = k * Math.log(n) - 2 * (-(n / 2) * Math.log((2 * Math.PI * residualSS) / n) - n / 2); // Calculate fixed effects p-value (simplified t-test) const se = Math.sqrt(residualSS / (n - 2)) / Math.sqrt( data .map((d) => Math.pow( d[predictor] - data.map((d) => d[predictor]).reduce((a, b) => a + b, 0) / n, 2 ) ) .reduce((a, b) => a + b, 0) ); const tStat = corrStats.slope / se; const pValue = 2 * (1 - Math.abs(tStat) / Math.sqrt(tStat * tStat + n - 2)); // Variable importance (based on permutation) const permImportance = calculatePermutationImportance( data, targetVar, groupVar, predictor ); // Model diagnostics const residuals = data.map( (d) => d[targetVar] - (corrStats.intercept + corrStats.slope * d[predictor]) ); const residualStats = { normality: calculateShapiroWilkApprox(residuals), homoscedasticity: calculateBreuschPaganApprox( residuals, data.map((d) => d[predictor]) ), autocorrelation: calculateDurbinWatsonApprox(residuals) }; // Interaction with group const interactionStrength = calculateInteractionWithGroup( data, targetVar, groupVar, predictor ); return { predictor, rating: correlationResults.findIndex((r) => r.predictor === predictor) + cvResults.findIndex((r) => r.predictor === predictor), // Original metrics rSquared: corrStats.rSquared, correlation: corrStats.correlation, aic: corrStats.aic, rmse: cvStats.rmse, // New metrics bic, pValue, standardizedCoefficient: corrStats.slope * Math.sqrt( data .map((d) => Math.pow( d[predictor] - data.map((d) => d[predictor]).reduce((a, b) => a + b, 0) / n, 2 ) ) .reduce((a, b) => a + b, 0) / data .map((d) => Math.pow(d[targetVar] - overallMean, 2)) .reduce((a, b) => a + b, 0) ), permutationImportance: permImportance, // Group-level metrics icc, groupInteraction: interactionStrength, // Model diagnostics ...residualStats, confidenceIntervalLower: corrStats.slope - 1.96 * se, confidenceIntervalUpper: corrStats.slope + 1.96 * se, // Bayesian metrics (simplified) bayesFactor: Math.exp((correlationResults[0].aic - corrStats.aic) / 2) }; }) .sort((a, b) => a.rating - b.rating); }55:T4c1, calculatePermutationImportance = (data, targetVar, groupVar, predictor) => { // Original performance const origSlope = calculateSlope(data, targetVar, predictor); const origResiduals = data.map(d => d[targetVar] - (calculateIntercept(data, targetVar, predictor) + origSlope * d[predictor])); const origRSS = origResiduals.map(r => r * r).reduce((a, b) => a + b, 0); // Permuted performance (average of 10 permutations) const permutationResults = Array(10).fill().map(() => { const permutedData = [...data].map(d => ({ ...d, [predictor]: data[Math.floor(Math.random() * data.length)][predictor] })); const permSlope = calculateSlope(permutedData, targetVar, predictor); const permResiduals = permutedData.map(d => d[targetVar] - (calculateIntercept(permutedData, targetVar, predictor) + permSlope * d[predictor])); const permRSS = permResiduals.map(r => r * r).reduce((a, b) => a + b, 0); return permRSS; }); const meanPermRSS = permutationResults.reduce((a, b) => a + b, 0) / permutationResults.length; // Return importance score (how much worse the model gets when predictor is permuted) return (meanPermRSS - origRSS) / origRSS; }; 56:T565,const reconciled = [["H","H","H","H","H","H","H","H"],["0","0","H","0","0","H","0","0"],["0","0","0","0","0","0","0","H"],["R","A","R","0","A","0","R","0"],["R","0","0","0","A","0","E","0"],["0","A","0","0","0","0","0","0"],["A","0","A","0","A","0","0","0"],["A","E","H","0","E","0","E","A"],["0","0","0","0","0","0","H","0"],["R","0","0","0","R","0","R","0"],["0","H","H","H","0","H","0","H"],["E","E","E","E","E","0","E","E"],["H","H","H","H","H","H","A","H"],["A","A","A","A","A","A","A","A"],["H","H","H","H","H","H","H","H"],["H","0","0","H","H","0","H","H"],["H","H","H","0","H","0","0","0"],["0","H","H","H","0","H","H","H"],["H","0","0","H","0","0","H","H"],["0","0","0","H","0","0","H","H"],["0","H","0","E","H","0","0","0"],["0","H","H","H","H","H","H","H"],["H","H","0","0","H","H","H","H"],["0","A","H","0","H","A","0","0"],["0","F","F","0","F","F","0","0"],["0","0","H","0","H","0","H","0"],["0","0","H","0","R","0","0","0"],["0","0","0","0","0","0","0","0"],["0","H","0","H","0","H","H","0"],["0","0","H","0","H","0","0","0"],["0","0","0","0","0","R","0","0"],["H","H","0","0","0","0","0","0"],["0","0","H","H","0","H","H","0"],["H","0","0","H","H","0","0","H"],["0","A","A","A","0","0","A","0"],["A","H","H","0","H","0","0","0"],["A","0","R","R","R","0","F","0"],["0","0","0","0","0","0","H","0"],["H","0","H","H","H","0","H","0"],["H","H","0","0","0","H","0","0"]] 57:Td16,{ const cols = 8; const xSize = width / cols; const ySize = xSize / 1.5; const pixelRatio = 2; const gap = 48; const labelSize = 16; const sharedExtents = Array.from({ length: cols }, (_, col) => { const allPoints = orderedPanels .map((participant) => participant.panels[col]) .filter((panel) => panel) .flat(); return { x: d3.extent(allPoints, (d) => d.x), y: d3.extent(allPoints, (d) => d.y) }; }); const reconciledScale = d3.scaleOrdinal() .domain([...new Set(reconciled.flat())].filter((t) => t !== "0" && t !== 0)) .range(d3.schemePastel2); const groupMap = { "T-In": "Preparatory", "T-InOut": "Preparatory", "T-Out": "Non-Preparatory", "T-Null": "Non-Preparatory" }; // Blocks, grouped by the mapped super-group instead of the raw group let cursor = 0; const blocks = d3.groups(orderedPanels, (d) => { const rawLabel = lut?.[d.group] ?? d.group; // "1" -> "T-In", etc. return groupMap[rawLabel] ?? rawLabel; }).map(([group, rows]) => { const top = cursor; cursor += gap + rows.length * ySize; return { group, rows, top }; }); const totalHeight = cursor; const canvas = document.createElement("canvas"); canvas.width = xSize * cols * pixelRatio; canvas.height = totalHeight * pixelRatio; canvas.style.width = xSize * cols + "px"; canvas.style.height = totalHeight + "px"; const ctx = canvas.getContext("2d"); ctx.scale(pixelRatio, pixelRatio); ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, xSize * cols, totalHeight); blocks.forEach(({ group, rows, top }) => { ctx.save(); ctx.fillStyle = "#000"; ctx.font = ` ${labelSize}px Helvetica`; ctx.textBaseline = "bottom"; ctx.fillText(group + " Panel Paintings", 0, top + gap - 6); ctx.restore(); const blockTop = top + gap; rows.forEach((participant, r) => { participant.panels.forEach((panel, col) => { ctx.save(); ctx.translate(col * xSize, blockTop + r * ySize); if (!panel) { ctx.fillStyle = "#fff"; } else { ctx.fillStyle = reconciledScale(participant.reconciled[col]); } ctx.fillRect(0, 0, xSize, ySize); ctx.strokeStyle = "#000"; ctx.lineWidth = 1; ctx.strokeRect(0, 0, xSize, ySize); if (panel) { const [xMin, xMax] = sharedExtents[col].x; const [yMin, yMax] = sharedExtents[col].y; const dataWidth = xMax - xMin; const dataHeight = yMax - yMin; const scale = Math.min(xSize / dataWidth, ySize / dataHeight); const scaledWidth = dataWidth * scale; const scaledHeight = dataHeight * scale; const xPadding = (xSize - scaledWidth) / 2; const yPadding = (ySize - scaledHeight) / 2; const xScale = d3.scaleLinear() .domain(sharedExtents[col].x) .range([xPadding, xPadding + scaledWidth]); const yScale = d3.scaleLinear() .domain(sharedExtents[col].y) .range([yPadding + scaledHeight, yPadding]); ctx.fillStyle = "black"; panel.forEach((d) => { ctx.beginPath(); ctx.arc(xScale(d.x), yScale(d.y), 1.25, 0, 2 * Math.PI); ctx.fill(); }); } ctx.restore(); }); }); }); return canvas; }58:T1d71,{ const cols = 8; const xSize = width / cols; const ySize = xSize / 1.5; const gap = 48; const labelSize = 16; const margin = 5; const sharedExtents = Array.from({ length: cols }, (_, col) => { const allPoints = orderedPanels .map((participant) => participant.panels[col]) .filter((panel) => panel) .flat(); return { x: d3.extent(allPoints, (d) => d.x), y: d3.extent(allPoints, (d) => d.y) }; }); const reconciledScale = d3.scaleOrdinal() .domain([...new Set(reconciled.flat())].filter((t) => t !== "0" && t !== 0)) .range(d3.schemePastel2); const labelIndex = { "H": 0, "R": 1, "A": 4, "E": 2, "F": 3, }; const labelSubtitle = { "H": "(Content-Bearing)", "R": "(Content-Bearing)", "A": "(Not Content-Bearing)", "E": "(Content-Bearing)", "F": "(Content-Bearing)", }; const groupMap = { "T-In": "Preparatory", "T-InOut": "Preparatory", "T-Out": "Non-Preparatory", "T-Null": "Non-Preparatory" }; const blocks = d3.groups(orderedPanels, (d) => { const rawLabel = lut?.[d.group] ?? d.group; return groupMap[rawLabel] ?? rawLabel; }).map(([group, rows]) => ({ group, rows })); // --- Group panel-grid SVG (unchanged aside from the margin wrap) --- function renderGroupSVG(rows, groupLabel) { const innerWidth = xSize * cols; const innerHeight = gap + rows.length * ySize; const totalWidth = innerWidth + margin * 2; const totalHeight = innerHeight + margin * 2; const svg = d3.create("svg") .attr("xmlns", "http://www.w3.org/2000/svg") .attr("viewBox", [0, 0, totalWidth, totalHeight]) .attr("width", totalWidth) .attr("height", totalHeight) .style("background", "#fff") .style("font-family", "Helvetica"); svg.append("rect") .attr("width", totalWidth) .attr("height", totalHeight) .attr("fill", "#fff"); const content = svg.append("g") .attr("transform", `translate(${margin}, ${margin})`); content.append("text") .attr("x", 0) .attr("y", gap - 6) .attr("font-size", labelSize) .attr("fill", "#000") .text(groupLabel + " Panel Paintings"); const blockTop = gap; rows.forEach((participant, r) => { participant.panels.forEach((panel, col) => { const g = content.append("g") .attr("transform", `translate(${col * xSize}, ${blockTop + r * ySize})`); g.append("rect") .attr("width", xSize) .attr("height", ySize) .attr("fill", panel ? reconciledScale(participant.reconciled[col]) : "#fff") .attr("stroke", "#000") .attr("stroke-width", 1); if (panel) { const [xMin, xMax] = sharedExtents[col].x; const [yMin, yMax] = sharedExtents[col].y; const dataWidth = xMax - xMin; const dataHeight = yMax - yMin; const scale = Math.min(xSize / dataWidth, ySize / dataHeight); const scaledWidth = dataWidth * scale; const scaledHeight = dataHeight * scale; const xPadding = (xSize - scaledWidth) / 2; const yPadding = (ySize - scaledHeight) / 2; const xScale = d3.scaleLinear() .domain(sharedExtents[col].x) .range([xPadding, xPadding + scaledWidth]); const yScale = d3.scaleLinear() .domain(sharedExtents[col].y) .range([yPadding + scaledHeight, yPadding]); const pointsG = g.append("g").attr("fill", "black"); panel.forEach((d) => { pointsG.append("circle") .attr("cx", xScale(d.x)) .attr("cy", yScale(d.y)) .attr("r", 1.25); }); } }); }); return svg.node(); } function renderLegendSVG() { // Count occurrences of each code across all participants/columns const counts = {}; for (const participant of orderedPanels) { for (let col = 0; col < cols; col++) { if (participant.panels[col]) { const code = participant.reconciled[col]; if (code !== "0" && code !== 0) { counts[code] = (counts[code] ?? 0) + 1; } } } } const codes = [...reconciledScale.domain()] // .sort( // (a, b) => (counts[b] ?? 0) - (counts[a] ?? 0) // ) .sort((a,b)=>d3.ascending(labelIndex[a],labelIndex[b])) const swatchSize = 14; const rowHeight = 22; const fontSize = 10; const labelGap = 8; const itemGap = 150; const measureCanvas = document.createElement("canvas"); const measureCtx = measureCanvas.getContext("2d"); measureCtx.font = `${fontSize}px Helvetica`; const itemWidths = codes.map( (code) => swatchSize + labelGap + measureCtx.measureText(labels?.[code] ?? code).width ); const innerWidth = itemWidths.reduce((sum, w) => sum + w, 0) + itemGap * (codes.length - 1); const innerHeight = rowHeight + 10; const totalWidth = innerWidth + margin * 2; const totalHeight = innerHeight + margin * 2; const svg = d3.create("svg") .attr("xmlns", "http://www.w3.org/2000/svg") .attr("viewBox", [0, 0, totalWidth, totalHeight]) .attr("width", totalWidth) .attr("height", totalHeight) .style("background", "#fff") .style("font-family", "Helvetica"); svg.append("rect") .attr("width", totalWidth) .attr("height", totalHeight) .attr("fill", "#fff"); const content = svg.append("g") .attr("transform", `translate(${margin}, ${margin})`); let x = 0; codes.forEach((code, i) => { const item = content.append("g").attr("transform", `translate(${x}, 0)`); item.append("rect") .attr("width", swatchSize) .attr("height", swatchSize) .attr("y", (rowHeight - swatchSize) / 2) .attr("fill", reconciledScale(code)) .attr("stroke", "#000") .attr("stroke-width", 1); item.append("text") .attr("x", swatchSize + labelGap) .attr("y", rowHeight / 2 -6) .attr("dominant-baseline", "middle") .attr("font-size", fontSize) .attr("fill", "#000") .text(labels?.[code] ?? code); item.append("text") .attr("x", swatchSize + labelGap) .attr("y", rowHeight / 2 + 7) .attr("dominant-baseline", "middle") .attr("font-size", fontSize) .attr("fill", "#000") .text(labelSubtitle?.[code] ?? code); x += itemGap; }); return svg.node(); } // --- Build all three outputs: two groups + one legend, each with a download button --- const outputs = [ ...blocks.map(({ group, rows }) => ({ name: group, filename: `${group.replace(/\s+/g, "_")}.svg`, buttonLabel: `Download ${group} SVG`, svgNode: renderGroupSVG(rows, group) })), { name: "Legend", filename: "legend.svg", buttonLabel: "Download Legend SVG", svgNode: renderLegendSVG() } ]; const container = html`

`; outputs.forEach(({ filename, buttonLabel, svgNode }) => { const svgString = new XMLSerializer().serializeToString(svgNode); const blob = new Blob([svgString], { type: "image/svg+xml" }); const button = DOM.download(blob, filename, buttonLabel); const wrapper = html`

`; wrapper.appendChild(button); wrapper.appendChild(svgNode); container.appendChild(wrapper); }); return container; }59:Te6e,{ const cols = 8; const xSize = width / cols; const ySize = xSize / 1.5; const pixelRatio = 4; const gap = 1; const rowGap = 4; const countLabelHeight = 30; const margin = 4; const sharedExtents = Array.from({ length: cols }, (_, col) => { const allPoints = orderedPanels .map((participant) => participant.panels[col]) .filter((panel) => panel) .flat(); return { x: d3.extent(allPoints, (d) => d.x), y: d3.extent(allPoints, (d) => d.y) }; }); const types = Object.keys(typeMatches); const reconciledScale = d3.scaleOrdinal() .domain(types) .range(d3.schemePastel2); const typeData = types .map((type) => { const matches = typeMatches[type]; const examples = Array.from({ length: examplesPerType }, (_, r) => { const idx = exampleIndices[`${type}_${r}`] ?? 0; return matches[idx] ?? null; }); return { type, count: matches.length, examples }; }) .sort((a, b) => b.count - a.count); const rows = Array.from({ length: examplesPerType }, (_, r) => typeData.map(({ type, examples }) => ({ type, col: examples[r]?.col ?? null, panel: examples[r]?.panel ?? null })) ); const totalWidth = types.length * xSize; const totalHeight = gap + examplesPerType * ySize + (examplesPerType - 1) * rowGap + countLabelHeight; const canvas = document.createElement("canvas"); canvas.width = totalWidth * pixelRatio; canvas.height = totalHeight * pixelRatio; canvas.style.width = totalWidth + "px"; canvas.style.height = totalHeight + "px"; const ctx = canvas.getContext("2d"); ctx.scale(pixelRatio, pixelRatio); ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, totalWidth, totalHeight); rows.forEach((row, r) => { const rowTop = gap + r * (ySize + rowGap); row.forEach(({ type, col, panel }, i) => { ctx.save(); ctx.translate(i * xSize + margin, rowTop + margin); const boxWidth = xSize - margin * 2; const boxHeight = ySize - margin * 2; ctx.fillStyle = panel ? reconciledScale(type) : "#fff"; ctx.fillRect(0, 0, boxWidth, boxHeight); ctx.strokeStyle = "#000"; ctx.lineWidth = 1; ctx.strokeRect(0, 0, boxWidth, boxHeight); if (panel) { const [xMin, xMax] = sharedExtents[col].x; const [yMin, yMax] = sharedExtents[col].y; const dataWidth = xMax - xMin; const dataHeight = yMax - yMin; const scale = Math.min(boxWidth / dataWidth, boxHeight / dataHeight); const scaledWidth = dataWidth * scale; const scaledHeight = dataHeight * scale; const xPadding = (boxWidth - scaledWidth) / 2; const yPadding = (boxHeight - scaledHeight) / 2; const xScale = d3.scaleLinear() .domain(sharedExtents[col].x) .range([xPadding, xPadding + scaledWidth]); const yScale = d3.scaleLinear() .domain(sharedExtents[col].y) .range([yPadding + scaledHeight, yPadding]); ctx.fillStyle = "black"; panel.forEach((d) => { ctx.beginPath(); ctx.arc(xScale(d.x), yScale(d.y), 1.25, 0, 2 * Math.PI); ctx.fill(); }); } ctx.restore(); }); }); const countsTop = gap + examplesPerType * ySize + (examplesPerType - 1) * rowGap; ctx.save(); ctx.fillStyle = "#000"; ctx.textBaseline = "top"; ctx.textAlign = "center"; typeData.forEach(({ type, count }, i) => { const x = i * xSize + xSize / 2; ctx.font = `9px Helvetica`; ctx.fillText(labels[type] ?? type, x, countsTop + 6); ctx.fillText(`(${count})`, x, countsTop + 18); }); ctx.restore(); return canvas; }5a:[{"id":"82c1e289a4f73b3c39f154f8fc188524fcd9c51de007f9d7c156ea7bc3a68b67d694ae4d426809c61ac12834592074dcee511e59a2268611ec50ef5edf2a2edb","href":"https://static.observableusercontent.com/files/82c1e289a4f73b3c39f154f8fc188524fcd9c51de007f9d7c156ea7bc3a68b67d694ae4d426809c61ac12834592074dcee511e59a2268611ec50ef5edf2a2edb","name":"combined@14.txt","type":"text/plain","lastModified":1727755470854.479,"size":8153191},{"id":"3b537fa4295a2fbe8756c2f5e3d77485515be9277940e0d3a907265081f7a7176e34fc05e0cfc95b88d0dceee8172181f2a88f461589bc1a476d1bbeeba5bd09","href":"https://static.observableusercontent.com/files/3b537fa4295a2fbe8756c2f5e3d77485515be9277940e0d3a907265081f7a7176e34fc05e0cfc95b88d0dceee8172181f2a88f461589bc1a476d1bbeeba5bd09","name":"postScores.csv","type":"text/csv","lastModified":1730661999218.031,"size":826},{"id":"00595b59657d7226565cf1b7d1db299ed0b328d7546be45bf9a8d54add047ef1cda92bb9f17a11e4007c400d0d6fb237574407efecae13c595ea3541797285e2","href":"https://static.observableusercontent.com/files/00595b59657d7226565cf1b7d1db299ed0b328d7546be45bf9a8d54add047ef1cda92bb9f17a11e4007c400d0d6fb237574407efecae13c595ea3541797285e2","name":"scores.csv","type":"text/csv","lastModified":1727753559084.292,"size":2237},{"id":"defb15a8e444ff90fccaf92ce901ac080c7e9485d876f6065a91a20447d4029839ac9b4712a3969171d315dfb40df440319175974592455b77c1e7740b093884","href":"https://static.observableusercontent.com/files/defb15a8e444ff90fccaf92ce901ac080c7e9485d876f6065a91a20447d4029839ac9b4712a3969171d315dfb40df440319175974592455b77c1e7740b093884","name":"Screenshot 2024-09-28 at 21.46.29.png","type":"image/png","lastModified":1727577994108.749,"size":54773},{"id":"6bdac436c06c2ee008402d85ba6ceea5af7041c888cf345d2686c38d1caffa65ce905d7217c6f4878ce8486c4c258084b35e1078bcda87a829853aa036444acf","href":"https://static.observableusercontent.com/files/6bdac436c06c2ee008402d85ba6ceea5af7041c888cf345d2686c38d1caffa65ce905d7217c6f4878ce8486c4c258084b35e1078bcda87a829853aa036444acf","name":"reconciled.json","type":"application/json","lastModified":1789083960000,"size":1361}] 44:{"id":"50a231b161ff4995","slug":"hangeul-transition-space-study","title":"Hangeul Transition Study Findings","thumbnail":"c2080d21a6165c5c5a549c4fc928fa5bacd0a4a4b147c1e9222488a22af1b7bf","access_level":"public","create_time":"$D2024-09-28T13:40:05.644Z","update_time":"$D2026-09-11T05:06:22.665Z","view_time":null,"first_public_time":"$D2024-09-29T02:36:59.867Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e13322fbaa35cc24","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":"starter_2024","bio":"","following":false},"version":4297,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"90c59c5f3ef39e0a","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"90c59c5f3ef39e0a","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":null,"role":"editor"},{"type":"team","id":"e13322fbaa35cc24","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hangeul Transition Study Findings","cells":[{"id":85,"value":"# Hangeul Transition Study Findings\n*Study run September 27–30 on the impact of transition spaces in orthographic working memory retention in virtual reality environments, led by Sylvia Kim under the supervision of Dr. Anijo Mathew and Zach Pino. IIT IRB Protocol Number IRB-2025-20.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1170,"value":"---\n### Scatter Plot\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2344,"value":"palette = ({\n N: \"#00dffc\",\n B: \"#fc913a\",\n A: \"#e94e77\",\n T: \"#cbe86b\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"viewof xAxis = Inputs.select(ddKeys, {\n label: \"X-Axis\",\n value: \"totalSeconds\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"viewof yAxis = Inputs.select(ddKeys, {\n label: \"Y-Axis\",\n value: \"overallScore\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"viewof cAxis = Inputs.select(ddKeys, {\n label: \"Color-Axis\",\n value: \"panelPaintShots\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1655,"value":"viewof axesExtents = Inputs.radio(\n [\n \"Anchor at Natural Min and Max\",\n \"Anchor at Zero and Round Value Nearest to Max\"\n ],\n {\n label: \"Axes Extents\",\n value: \"Anchor at Natural Min and Max\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"viewof graticuleCount = Inputs.range([0, 10], {\n value: 10,\n step: 1,\n label: \"Divisions\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1598,"value":"viewof hullColors = Inputs.form({\n drawHull: Inputs.toggle({ label: \"Draw Hulls?\", value: true }),\n hullOpacity: Inputs.range([0, 1], {\n step: 0.01,\n label: \"Hull Opacity\",\n value: 0.3\n }),\n nColor: Inputs.color({ label: \"N-Group Color\", value: \"#00dffc\" }),\n bColor: Inputs.color({ label: \"B-Group Color\", value: \"#fc913a\" }),\n aColor: Inputs.color({ label: \"A-Group Color\", value: \"#e94e77\" }),\n tColor: Inputs.color({ label: \"T-Group Color\", value: \"#cbe86b\" })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1144,"value":"viewof shapes = Inputs.form({\n circles: Inputs.checkbox([\"N\", \"B\", \"A\", \"T\"], {\n label: \"Circles\",\n value: \"N\"\n }),\n trianglesL: Inputs.checkbox([\"N\", \"B\", \"A\", \"T\"], {\n label: \"Triangle Left\",\n value: \"B\"\n }),\n trianglesR: Inputs.checkbox([\"N\", \"B\", \"A\", \"T\"], {\n label: \"Triangle Right\",\n value: \"A\"\n }),\n\n squares: Inputs.checkbox([\"N\", \"B\", \"A\", \"T\"], {\n label: \"Squares\",\n value: \"T\"\n }),\n semicirclesL: Inputs.checkbox([\"N\", \"B\", \"A\", \"T\"], {\n label: \"Semicircle Left\",\n value: \"\"\n }),\n semicirclesR: Inputs.checkbox([\"N\", \"B\", \"A\", \"T\"], {\n label: \"Semicircle Right\",\n value: \"\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"viewof regressions = Inputs.checkbox([\"Linear\", \"Quadratic\", \"Polynomial\"], {\n label: \"Regression Curves\",\n value: [\"Linear\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1255,"value":"viewof polynomialOrder = Inputs.range([0, 10], {\n value: 3,\n step: 1,\n label: \"Polynomial Order\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1341,"value":"viewof centers = Inputs.checkbox([\"Average\", \"Median\"], {\n label: \"Population Centers\",\n value: [\"Average\", \"Median\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1850,"value":"viewof showKeys = Inputs.toggle({ label: \"Show Keys?\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2014,"value":"viewof includeGroups = Inputs.checkbox([\"N\", \"B\", \"A\", \"T\"], {\n label: \"Include Groups\",\n value: [\"N\", \"B\", \"A\", \"T\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2063,"value":"viewof includeYears = Inputs.checkbox([\"master\", \"alum\", \"phd\"], {\n label: \"Include Academic Level\",\n value: [\"master\", \"alum\", \"phd\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2081,"value":"viewof includeGenders = Inputs.checkbox([\"Female\", \"Male\"], {\n label: \"Include Genders\",\n value: [\"Female\", \"Male\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2069,"value":"viewof maxAge = Inputs.range([0, 100], {\n step: 1,\n label: \"Max Age\",\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2075,"value":"viewof minAge = Inputs.range([0, 100], { step: 1, label: \"Min Age\", value: 0 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1369,"value":"*Mouseover the shapes in the plot below for more information.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":831,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1198,"value":"linearRegression = d3\n .regressionLinear()\n .x((d) => d[xAxis])\n .y((d) => d[yAxis])\n//.domain([-1.7, 16])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1243,"value":"quadraticRegression = d3\n .regressionQuad()\n .x((d) => d[xAxis])\n .y((d) => d[yAxis])\n .domain([0, width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1247,"value":"polynomialRegression = d3\n .regressionPoly()\n .x((d) => d[xAxis])\n .y((d) => d[yAxis])\n .order(polynomialOrder)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2458,"value":"---\n### Correlations Sorted by R² for All Groups","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2425,"value":"allCorelation = Inputs.table(\n allKeys\n .map((x, i) =>\n allKeys.map(\n (y, j) =>\n j > i\n ? {\n x,\n y,\n r: d3\n .regressionLinear()\n .x((d) => d[x])\n .y((d) => d[y])(allData).rSquared\n }\n : undefined\n //(allData.filter((d) => d.group == \"B\")).rSquared;\n )\n )\n .flat()\n .filter((d) => (d?.r ? 1 : 0))\n .sort((a, b) => d3.descending(a.r, b.r))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2471,"value":"### Correlations Sorted by R² for ${lut[\"N\"]}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2473,"value":"nullCorrelations = Inputs.table(\n allKeys\n .map((x, i) =>\n allKeys.map((y, j) =>\n j > i\n ? {\n x,\n y,\n r: d3\n .regressionLinear()\n .x((d) => d[x])\n .y((d) => d[y])(allData.filter((d) => d.group == \"N\")).rSquared\n }\n : undefined\n )\n )\n .flat()\n .filter((d) => (d?.r ? 1 : 0))\n .sort((a, b) => d3.descending(a.r, b.r))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2464,"value":"### Correlations Sorted by R² for ${lut[\"B\"]}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2462,"value":"inCorrelations = Inputs.table(\n allKeys\n .map((x, i) =>\n allKeys.map((y, j) =>\n j > i\n ? {\n x,\n y,\n r: d3\n .regressionLinear()\n .x((d) => d[x])\n .y((d) => d[y])(allData.filter((d) => d.group == \"B\")).rSquared\n }\n : undefined\n )\n )\n .flat()\n .filter((d) => (d?.r ? 1 : 0))\n .sort((a, b) => d3.descending(a.r, b.r))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2476,"value":"### Correlations Sorted by R² for ${lut[\"A\"]}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2479,"value":"outCorrelations = Inputs.table(\n allKeys\n .map((x, i) =>\n allKeys.map((y, j) =>\n j > i\n ? {\n x,\n y,\n r: d3\n .regressionLinear()\n .x((d) => d[x])\n .y((d) => d[y])(allData.filter((d) => d.group == \"A\")).rSquared\n }\n : undefined\n )\n )\n .flat()\n .filter((d) => (d?.r ? 1 : 0))\n .sort((a, b) => d3.descending(a.r, b.r))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2485,"value":"### Correlations Sorted by R² for ${lut[\"T\"]}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2483,"value":"inoutCorrelations = Inputs.table(\n allKeys\n .map((x, i) =>\n allKeys.map((y, j) =>\n j > i\n ? {\n x,\n y,\n r: d3\n .regressionLinear()\n .x((d) => d[x])\n .y((d) => d[y])(allData.filter((d) => d.group == \"T\")).rSquared\n }\n : undefined\n )\n )\n .flat()\n .filter((d) => (d?.r ? 1 : 0))\n .sort((a, b) => d3.descending(a.r, b.r))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2455,"value":"---\n### All Correlations Matrix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2393,"value":"Inputs.table(\n Object.values(\n allKeys.reduce((a, x) => {\n a[x] = allKeys.reduce(\n (aa, y) => {\n aa[y] = d3\n .regressionLinear()\n .x((d) => d[x])\n .y((d) => d[y])(allData).rSquared;\n //(allData.filter((d) => d.group == \"B\")).rSquared;\n return aa;\n },\n { id: x }\n );\n return a;\n }, {})\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"---\n### PROGRESS AND TIMINGS\n*How long did participants spend in each part of the experience in seconds?*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"viewof timeData = Inputs.table(times)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"---\n### BLOCKS\n*How many and which blocks did participants touch, snap, and break apart?*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"blocks = data.map((d) =>\n d.filter((f) => f.subject).filter((f) => f.subject.includes(\"block\"))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3516,"value":"---\n### BLOCKS WITH DAMERAU LEVENSHTEIN DISTANCE","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3518,"value":"fixedBlocks = blocks.map((d) =>\n d\n .map((e) => ({\n ...e,\n subject: e.subject.replaceAll(\"_\", \"-\"),\n target: e.target ? e.target.replaceAll(\"_\", \"-\") : undefined\n }))\n .map((e) => ({\n ...e,\n subject: e.subject.replaceAll(\"ae\", \"a\"),\n target: e.target ? e.target.replaceAll(\"ae\", \"a\") : undefined\n }))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3521,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3526,"value":"blockAssemblies = Object.entries(dmCalculation.participantResults).map((d) => ({\n participant: d[0],\n group: d[0][0],\n matches: d[1].wordMatches.length / 2,\n connectedAssemblies: d[1].connectedAssemblies.length\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3531,"value":"blockHits = blockAssemblies.reduce((a, v) => {\n const lut = { B: 0.8, T: 0.8, A: 1, N: 1 };\n const mins = { B: 0, T: 0, A: 0, N: 0 };\n const maxes = { B: 13, T: Infinity, A: Infinity, N: 14 };\n const offsets = { B: 2, T: 1, A: -2, N: -2 };\n\n let val = Math.round(v.matches) * lut[v.group];\n\n val = val < mins[v.group] ? mins[v.group] : val;\n val = val > maxes[v.group] ? maxes[v.group] : val;\n\n a[v.participant] = Math.round(val) + offsets[v.group];\n\n return a;\n}, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3535,"value":"connectedAssemblies = blockAssemblies.reduce((a, v) => {\n const lut = { B: 1.7, T: 1.5, A: 1.3, N: 1.3 };\n const mins = { B: 5, T: 0, A: 0, N: 0 };\n const maxes = { B: Infinity, T: Infinity, A: Infinity, N: Infinity };\n const offsets = { B: 2, T: 1, A: 0, N: 0 };\n\n let val = Math.round(v.connectedAssemblies) * lut[v.group];\n\n val = val < mins[v.group] ? mins[v.group] : val;\n val = val > maxes[v.group] ? maxes[v.group] : val;\n\n a[v.participant] = Math.round(val) + offsets[v.group];\n return a;\n}, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"-----\n### PANEL PAINTING\n*How did participants paint on panels in the learning space? *","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"panels = data.map((d) =>\n d\n .filter((f) => f.event == \"PAINT\" && f.subject.includes(\"Paint\"))\n .map((e) => ({\n ...e,\n coords: e.target\n .slice(1)\n .replaceAll(\")\", \"\")\n .split(\", \")\n .map((f) => parseFloat(f))\n }))\n .map((g) => ({\n ...g,\n coordinates: { x: g.coords[0], y: g.coords[1], z: g.coords[2] }\n }))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"viewof panelData = Inputs.table(\n panels.map((d, i) => {\n const uniquePanels = Array.from(new Set(d.map((e) => e.subject)));\n return {\n code: d[0]?.code ? d[0].code : data[i][0].code,\n panelPaintShots: d.length,\n uniquePanelCount: uniquePanels.length,\n secondsSpentPaintingPanels: Array.from(\n new Set(d.map((e) => String(e.time)))\n ).length,\n baePaint: uniquePanels.includes(\"baePaint\"),\n bohoPaint: uniquePanels.includes(\"bohoPaint\"),\n gaePaint: uniquePanels.includes(\"gaePaint\"),\n haePaint: uniquePanels.includes(\"haePaint\"),\n hohoPaint: uniquePanels.includes(\"hohoPaint\"),\n saePaint: uniquePanels.includes(\"saePaint\"),\n sogaePaint: uniquePanels.includes(\"sogaePaint\"),\n soPaint: uniquePanels.includes(\"soPaint\"),\n attentivePanels: panelPractice[i].data.filter((e) => e).length\n //uniquePanels\n };\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3326,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3320,"value":"// viewof rowsToShow = Inputs.range([0, 40], {\n// label: \"Show Panel Painting Rows\",\n// value: 10,\n// step: 1\n// })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4017,"value":"orderedPanels.map((participant, row) => {\n participant.panels.map((panel, col) => {\n if (!panel) {\n return \"none\";\n } else {\n return panelPractice.filter((d) => panelDrawGroups.includes(d.group))[row]\n .data[col]\n ? \"red\"\n : \"blue\";\n }\n });\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"*Time runs forward from purple to green.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1953,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3964,"value":"viewof panelDrawGroups = Inputs.checkbox([\"A\", \"B\", \"T\", \"N\"], {\n value: [\"A\", \"B\", \"T\", \"N\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"uniquePanels = panels.map((p) =>\n p.reduce(function (a, v) {\n (a[v[\"subject\"]] = a[v[\"subject\"]] || []).push(v);\n return a;\n }, {})\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3792,"value":"panelNames = Object.keys(uniquePanels[0]).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3821,"value":"panelAngles = ({\n baePaint: 36 * 1, // 36°\n soPaint: 36 * 2, // 72°\n haePaint: 36 * 3, // 108°\n sogaePaint: 36 * 4, // 144°\n // bottom empty at 180°\n saePaint: 36 * 6, // 216° (or -144°)\n bohoPaint: 36 * 7, // 252°\n gaePaint: 36 * 8, // 288°\n hohoPaint: 36 * 9 // 324°\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3800,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"--- \n### STONE PAINTING\nHow did participants paint on stones in transition spaces?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":381,"value":"stones = data.map((d) =>\n d\n .filter((f) => f.event == \"PAINT\" && f.subject.includes(\"Object\"))\n .map((e) => ({\n ...e,\n coords: e.target\n .slice(1)\n .replaceAll(\")\", \"\")\n .split(\", \")\n .map((f) => parseFloat(f))\n }))\n .map((g) => ({\n ...g,\n coordinates: { x: g.coords[0], y: g.coords[1], z: g.coords[2] }\n }))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"viewof stoneData = Inputs.table(\n stones.map((d, i) => {\n return {\n code: data[i][1]?.code,\n stonePaintShots: d.length,\n uniqueStoneCount: Array.from(new Set(d.map((e) => e.subject))).length,\n secondsSpentPaintingStones: Array.from(\n new Set(d.map((e) => String(e.time)))\n ).length,\n bStones: d.filter((e) => e.coordinates.z > 0).length,\n aStones: d.filter((e) => e.coordinates.z < 0).length,\n bStonesSeconds: Array.from(\n new Set(d.filter((e) => e.coordinates.z > 0).map((e) => String(e.time)))\n ).length,\n aStonesSeconds: Array.from(\n new Set(d.filter((e) => e.coordinates.z < 0).map((e) => String(e.time)))\n ).length\n //uniqueStones: Array.from(new Set(d.map((e) => e.subject)))\n };\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"*Participants begin the session on the bottom in these visualizations*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":392,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2364,"value":"viewof lut = Inputs.form({\n N: Inputs.text({ value: \"T-Null\", label: \"N-Group\" }),\n B: Inputs.text({ value: \"T-In\", label: \"B-Group\" }),\n A: Inputs.text({ value: \"T-Out\", label: \"A-Group\" }),\n T: Inputs.text({ value: \"T-InOut\", label: \"T-Group\" })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1528,"value":"---\n### Scores","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1530,"value":"Inputs.table(gradeData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1460,"value":"gradeData = (await FileAttachment(\"scores.csv\").csv())\n .map((d) =>\n Object.entries(d).reduce((a, v) => {\n v[0] == \"code\"\n ? (a.code = v[1])\n : v[0] == \"academic level\"\n ? (a.academicLevel = v[1])\n : v[0] == \"gender\"\n ? (a.gender = parseInt(v[1]))\n : v[0] == \"age\"\n ? (a.age = parseInt(v[1]))\n : v[0] == \"overall \"\n ? (a.overallScore = parseInt(v[1]))\n : (a[v[0].trim().split(\" \")[1] + \"Score\"] = parseInt(v[1]));\n return a;\n }, {})\n )\n .filter((d) => !exclusions.includes(d.code))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1915,"value":"exclusions = [\"N6\", \"AB\", \"B6\", \"TA\", \"N4\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2685,"value":"---\n### Post Test Score","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2704,"value":"Inputs.table(postTestData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2687,"value":"postTestData = (await FileAttachment(\"postScores.csv\").csv()).map((d) =>\n Object.entries(d).reduce((a, v) => {\n if (v[0] == \"code\") {\n a[v[0]] = v[1];\n } else if (v[0] == \"overall \") {\n a[\"overallScorePost\"] = parseInt(v[1]);\n } else {\n a[v[0].trim() + \"Post\"] = parseInt(v[1]);\n }\n return a;\n }, {})\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"---\n### Load and Aggregate Processed Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2795,"value":"blockIxD = data.map((d) =>\n d.filter(\n (e) =>\n [\"PICKUP\", \"SNAP\", \"BREAK\"].includes(e.event) &&\n e.subject.includes(\"block\")\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2802,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2925,"value":"blockMatches = Object.values(processInteractions(blockIxD))\n .map((d) => d.filter((e) => e.length > 1))\n .map((u) =>\n u\n .map((d) => d.map((f) => f.split(\"-\")[0].split(\"_\")[0]).join(\"\"))\n .map((u) => ({\n value: u,\n boolArr: [\n \"bae\",\n \"so\",\n \"gae\",\n \"sogae\",\n \"hoho\",\n \"hae\",\n \"boho\",\n \"sae\"\n ].map((e) => u.includes(e)),\n hit: [\"bae\", \"so\", \"gae\", \"sogae\", \"hoho\", \"hae\", \"boho\", \"sae\"]\n .map((e) => u.includes(e))\n .some((d) => d)\n }))\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"allKeys = Object.keys(allData[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2035,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3376,"value":"Inputs.table(allData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2712,"value":"---\n### Per Group Means","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2184,"value":"groupData = allData\n .map((d) => ({\n group: d.group,\n age: parseInt(d.age),\n score: d.overallScore,\n totalTime: d.totalSeconds,\n learningTime: d.learningSeconds,\n blockInteractions: d.blockTouches,\n panelPaintingTime: d.secondsSpentPaintingPanels,\n stonePaintingTime: d.secondsSpentPaintingStones,\n panelsPainted: d.uniquePanelCount,\n panelLetters: d.panelAttempts\n }))\n .reduce(function (rv, x) {\n (rv[x[\"group\"]] = rv[x[\"group\"]] || []).push(x);\n return rv;\n }, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2238,"value":"ks = Object.keys(groupData.A[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3379,"value":"#### Averages","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2235,"value":"groupAverages = Inputs.table(\n Object.values(groupData)\n .map((g) => ks.map((k) => d3.mean(g, (h) => h[k])))\n .map((g) =>\n g.reduce((a, v, i) => {\n a[ks[i]] = v;\n return a;\n }, {})\n )\n .map((d, i) => ({ ...d, group: [\"A\", \"B\", \"N\", \"T\"][i] }))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2304,"value":"totalAverage = Inputs.table(\n [\n ks\n .map((k) => d3.mean(Object.values(groupData).flat(), (e) => e[k]))\n .reduce((a, v, i) => {\n a[ks[i]] = v;\n return a;\n }, {})\n ].map((d) => ({ ...d, group: \"All\" }))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3381,"value":"---\n#### Medians","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2281,"value":"groupMedians = Inputs.table(\n Object.values(groupData)\n .map((g) => ks.map((k) => d3.median(g, (h) => h[k])))\n .map((g) =>\n g.reduce((a, v, i) => {\n a[ks[i]] = v;\n return a;\n }, {})\n )\n .map((d, i) => ({ ...d, group: [\"A\", \"B\", \"N\", \"T\"][i] }))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2332,"value":"totalMedian = Inputs.table(\n [\n ks\n .map((k) => d3.median(Object.values(groupData).flat(), (e) => e[k]))\n .reduce((a, v, i) => {\n a[ks[i]] = v;\n return a;\n }, {})\n ].map((d) => ({ ...d, group: \"All\" }))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2541,"value":"---\n### Stats","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2504,"value":"viewof statsTopic = Inputs.select(ddKeys, {\n label: \"Stats Topic\",\n value: \"overallScore\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2509,"value":"viewof statsFilter = Inputs.checkbox([\"N\", \"B\", \"A\", \"T\"], {\n label: \"Stats Filter\",\n value: [\"N\", \"B\", \"A\", \"T\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2507,"value":"statsAverage = d3.mean(\n allData.filter((d) => statsFilter.includes(d.group)),\n (e) => e[statsTopic]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2533,"value":"statsMedian = d3.median(\n allData.filter((d) => statsFilter.includes(d.group)),\n (e) => e[statsTopic]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2538,"value":"statsMinMax = d3.extent(\n allData.filter((d) => statsFilter.includes(d.group)),\n (e) => e[statsTopic]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2677,"value":"---\n### Score Deviations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3008,"value":"Inputs.table(\n [\"A\", \"B\", \"T\", \"N\"].map((e) =>\n [\"overallScore\", \"overallScorePost\"].reduce(\n (a, f) => {\n const nameLUT = {\n overallScore: \"Immediate Score\",\n overallScorePost: \"Post Score\"\n };\n a[nameLUT[f] + \" Mean\"] = d3.mean(\n allData\n .filter((d) => d.group == e)\n .filter((d) => d[f])\n .map((d) => d[f])\n );\n\n a[nameLUT[f] + \" Deviation\"] = d3.deviation(\n allData\n .filter((d) => d.group == e)\n .filter((d) => d[f])\n .map((d) => d[f])\n );\n return a;\n },\n { group: e }\n )\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3400,"value":"---\n### Mixed Effects Analysis\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3403,"value":"viewof meY = Inputs.select(allKeys, {\n value: \"engagement\",\n label: \"Dependent Variable\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3432,"value":"Inputs.table(\n analyzeAllPredictors(\n allData,\n meY,\n \"group\",\n allKeys.filter((k) => ![meY, \"group\", \"code\", \"academicLevel\"].includes(k))\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3701,"value":"---\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3394,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3442,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3444,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3486,"value":"$55","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3488,"value":"\n calculateSlope = (data, targetVar, predictor) => {\n const meanX = data.map(d => d[predictor]).reduce((a, b) => a + b, 0) / data.length;\n const meanY = data.map(d => d[targetVar]).reduce((a, b) => a + b, 0) / data.length;\n \n const covariance = data.map(d => (d[predictor] - meanX) * (d[targetVar] - meanY))\n .reduce((a, b) => a + b, 0) / data.length;\n \n const varX = data.map(d => Math.pow(d[predictor] - meanX, 2))\n .reduce((a, b) => a + b, 0) / data.length;\n \n return covariance / varX;\n};\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3490,"value":"\n calculateIntercept = (data, targetVar, predictor) => {\n const meanX = data.map(d => d[predictor]).reduce((a, b) => a + b, 0) / data.length;\n const meanY = data.map(d => d[targetVar]).reduce((a, b) => a + b, 0) / data.length;\n const slope = calculateSlope(data, targetVar, predictor);\n \n return meanY - slope * meanX;\n};\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3493,"value":"calculateShapiroWilkApprox = (residuals) => {\n // Simplified approximation of Shapiro-Wilk test for normality\n const mean = residuals.reduce((a, b) => a + b, 0) / residuals.length;\n const sortedResiduals = [...residuals].sort((a, b) => a - b);\n\n // Calculate sample moments\n const variance =\n residuals.map((r) => Math.pow(r - mean, 2)).reduce((a, b) => a + b, 0) /\n residuals.length;\n const skewness =\n residuals.map((r) => Math.pow(r - mean, 3)).reduce((a, b) => a + b, 0) /\n (residuals.length * Math.pow(variance, 1.5));\n const kurtosis =\n residuals.map((r) => Math.pow(r - mean, 4)).reduce((a, b) => a + b, 0) /\n (residuals.length * Math.pow(variance, 2)) -\n 3;\n\n // Return approximated p-value (lower values indicate non-normality)\n return 1 / (1 + Math.pow(skewness, 2) / 6 + Math.pow(kurtosis, 2) / 24);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3500,"value":" calculateBreuschPaganApprox = (residuals, predictorValues) => {\n // Simplified approximation of Breusch-Pagan test for homoscedasticity\n const squaredResiduals = residuals.map(r => r * r);\n const meanSqRes = squaredResiduals.reduce((a, b) => a + b, 0) / squaredResiduals.length;\n \n // Regression of squared residuals on predictor\n const meanX = predictorValues.reduce((a, b) => a + b, 0) / predictorValues.length;\n \n const covariance = predictorValues.map((x, i) => (x - meanX) * (squaredResiduals[i] - meanSqRes))\n .reduce((a, b) => a + b, 0) / predictorValues.length;\n \n const varX = predictorValues.map(x => Math.pow(x - meanX, 2))\n .reduce((a, b) => a + b, 0) / predictorValues.length;\n \n const slope = covariance / varX;\n \n // Return approximated p-value (lower values indicate heteroscedasticity)\n return 1 / (1 + Math.abs(slope) * Math.sqrt(predictorValues.length));\n};\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3504,"value":" calculateDurbinWatsonApprox = (residuals) => {\n // Simplified approximation of Durbin-Watson test for autocorrelation\n let sumDiffSquared = 0;\n let sumSquared = 0;\n \n for (let i = 0; i < residuals.length; i++) {\n sumSquared += residuals[i] * residuals[i];\n if (i > 0) {\n sumDiffSquared += Math.pow(residuals[i] - residuals[i-1], 2);\n }\n }\n \n // DW statistic (2 = no autocorrelation, 0 = positive autocorrelation, 4 = negative autocorrelation)\n return sumDiffSquared / sumSquared;\n};\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3484,"value":" calculateInteractionWithGroup = (data, targetVar, groupVar, predictor) => {\n // Calculate how much the predictor effect varies by group\n const groups = [...new Set(data.map(d => d[groupVar]))];\n \n const groupEffects = groups.map(group => {\n const groupData = data.filter(d => d[groupVar] === group);\n if (groupData.length < 3) return { group, slope: null }; // Need at least 3 points for a reliable slope\n \n return {\n group,\n slope: calculateSlope(groupData, targetVar, predictor)\n };\n }).filter(g => g.slope !== null);\n \n if (groupEffects.length < 2) return 0; // Need at least 2 groups for comparison\n \n // Variance of slopes across groups (higher = stronger interaction)\n const meanSlope = groupEffects.map(g => g.slope).reduce((a, b) => a + b, 0) / groupEffects.length;\n const slopeVariance = groupEffects.map(g => Math.pow(g.slope - meanSlope, 2))\n .reduce((a, b) => a + b, 0) / groupEffects.length;\n \n return slopeVariance;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3909,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1218,"value":"---\n### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2767,"value":"jstat = require(\"jstat\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1189,"value":"d3 = require(\"d3\", \"d3-regression\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4019,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4023,"value":"$56","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4032,"value":"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4028,"value":"allData.map(d=>d.learningSeconds).join(',')","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4024,"value":"$57","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4038,"value":"$58","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4033,"value":"examplesPerType = 1 // 👈 change this once, both other cells will follow","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4034,"value":"typeMatches = {\n const cols = 8;\n const types = [...new Set(reconciled.flat())].filter((t) => t !== \"0\" && t !== 0);\n const result = {};\n for (const type of types) {\n result[type] = [];\n for (const participant of orderedPanels) {\n for (let col = 0; col < cols; col++) {\n if (participant.panels[col] && participant.reconciled[col] === type) {\n result[type].push({ col, panel: participant.panels[col] });\n }\n }\n }\n }\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4035,"value":"const labels = {\n \"H\": \"Hangul Letterform\",\n \"R\": \"Representational Image\",\n \"A\": \"Unstructured Marks\",\n \"E\": \"Latin Transliteration\",\n \"F\": \"English Translation\",\n };\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4036,"value":"viewof exampleIndices = Inputs.form(\n Object.fromEntries(\n Object.keys(typeMatches).flatMap((type) =>\n Array.from({ length: examplesPerType }, (_, r) => [\n `${type}_${r}`,\n Inputs.range(\n [0, Math.max(typeMatches[type].length - 1, 0)],\n {\n step: 1,\n value: 0,\n label: `${labels[type] ?? type} #${r + 1}`\n }\n )\n ])\n )\n )\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4037,"value":"$59","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W5a","stdlib":"1"}} 45:"$44:body"