30:Tcca,graph2 = { let flags = Object.fromEntries(flagsChoices.map(e => [e, true])); // parallel line task changed after participant 4! let baseFilter = d => (d.task == task) && !(task == "line_parallel" && d.participantId < 5); let filter = d => baseFilter(d) && subsetFilter.filter(d) && visionFilter.filter(d); let filterNonMatchingParticipants = d => baseFilter(d) && !(subsetFilter.filter(d) && visionFilter.filter(d)); let filteredData = d3.filter(dataStationTaskThresholds, baseFilter); let marks = [ // box plot box boxY(dataStationTaskThresholds, { filter: filter, x: "resolution", y: "threshold", fill: flags.publish ? "#f5f5f5" : "#000000", fillOpacity: flags.publish ? 1 : 0.05, stroke: "#000000", strokeWidth: 0.4, medianStrokeWidth: 3, //stroke: "#999999" }), // dots for thresholds Plot.dot(dataStationTaskThresholds, { filter: filter, x: "resolution", y: "threshold", fill: "#000000", fillOpacity: 1, stroke: "#ffffff", strokeWidth: 0.8, r: 3.8, title: "threshold", //d => d.threshold.toFixed(3) + " mm" }), // hollow dots for non-matching participants Plot.dot(dataStationTaskThresholds, { filter: filterNonMatchingParticipants, x: "resolution", y: "threshold", fill: "#ffffff", fillOpacity: 1, stroke: "#333333", strokeWidth: 0.7, r: 3 }), // order in which the participant visited the station Plot.text(dataStationTaskThresholds, { filter: filter, x: "resolution", y: "threshold", text: d => flags.showOrder ? d.stationOrder : "", dy: -6 }), // frame Plot.frame(), ]; let svg = Plot.plot({ y: { type: "log", ticks: 14, tickFormat: "", inset: 20, label: flags.axisLabels ? (flags.publish ? "mm" : "Threshold\n(mm)") : "", labelAnchor: "center", //nice: true, domain: [d3.min(filteredData, d => d.threshold),d3.max(filteredData, d => d.threshold)], }, x: { type: "band", inset: 0, domain: stations, label: flags.axisLabels ? (flags.publish ? "" : "Display (PPI)") : "", padding: 0.3, tickFormat: s => s.name + "/" + s.display + " (" + s.resolution + "ppi)", }, color: { domain: ["selected", "unselected"], range: ["#000000", "#aaaaaa"] }, grid: true, marks: marks, }); uncollide(d3.selectAll(svg.querySelectorAll("svg > g > circle")), 8, "x"); uncollide(d3.selectAll(svg.querySelectorAll("svg > g > text")), 8, "x", "x", "y"); if (flags.publish) { // adjust style for improved printing // border d3.selectAll(svg.querySelectorAll("svg > rect")).attr("stroke-width", 0.2); // tick lines on axis d3.selectAll(svg.querySelectorAll("svg .tick line:first-child")) .attr("stroke-width", 0.1); // tick grid lines d3.selectAll(svg.querySelectorAll("svg .tick line:nth-child(2)")) .attr("stroke-opacity", 1) .attr("stroke", "#666666") .attr("stroke-width", 0.2); // boxplot // globals d3.select(svg) .attr("font-family", "Arial, Helvetica, sans-serif"); } return svg; }31:T437,task1ResultsAtCriticalSize = { let result = { C: {participants: 0, trials: 0, correct: 0}, A: {participants: 0, trials: 0, correct: 0}, D: {participants: 0, trials: 0, correct: 0}, B: {participants: 0, trials: 0, correct: 0}, }; for (let participantData of allTrialsRaw) { let participantId = participantData.participantId; let task = tasks.snellen; let taskIndex = 4 + task.offset; // skip survey tasks while (taskIndex < participantData.results.length) { let results = participantData.results[taskIndex]; let station = results.context.targetStation; let trialsAtSize = results.trials.filter(t => { let size = parseFloat(t.condition.size); return size < 0.28 && size > 0.26}); result[station].trials += trialsAtSize.length; if (trialsAtSize.length > 0) { result[station].participants++; } let correctTrials = trialsAtSize.filter(t => t.condition.angle == t.response.angle); result[station].correct += correctTrials.length; taskIndex += 9; } } return result; }32:T81d,function renderConfusionMatrix(options) { options = Object.assign({ computeMatrix: computeConfusionMatrix }, options); let matrix = options.computeMatrix(options); let str = `

condition ↓

response →

`; for (let s of options.conditions) { str += '' + (options.labels?.[s] || s) + ''; } str += ""; let color; let greenScale = d3.scalePow([0,1],["#ffffff","#44b644"]).exponent(3) let redScale = d3.scalePow([0,1],["#ee4444","#ffffff"]).exponent(3); for (let s1 of options.conditions) { str += '' + (options.labels?.[s1] || s1) + ''; for (let s2 of options.conditions) { let val = matrix[s1][s2]/matrix[s1]._count || 0; // catch division by 0 let styleStr = ""; if (s1 == s2) { // correct answer - green color scheme color = greenScale(val); styleStr = "font-weight: bold; border: 2px solid #666666;"; } else { color = redScale(1-val); } str += '' + Math.round(val*100) + "%
(" + matrix[s1][s2] + ")"; } str += ""; } str += `${options.sizeInterval[0]}mm – ${options.sizeInterval[1]}mm
${matrix._meta.filteredCount} of ${matrix._meta.allCount} trials (${Math.round(matrix._meta.filteredCount/matrix._meta.allCount*100)}%)`; return html`${str}

`; }33:T70b,function computeConfusionMatrix(options) { options = Object.assign({ conditionToString: c => "" + c }, options); let matrix = {}; for (let s1 of options.conditions) { let row = {}; for (let s2 of options.conditions) { row[s2] = 0; } row._count = 0; matrix[s1] = row; } let allCount = 0; let filteredCount = 0; let allTrials = []; for (let participantData of allTrialsRaw) { let participantId = participantData.participantId; // parallel line task changed after participant 4! if ((options.task == tasks.line_parallel) && (participantId < 5)) continue; let taskIndex = 4 + options.task.offset; // skip survey tasks while (taskIndex < participantData.results.length) { let results = participantData.results[taskIndex]; let filteredTrials = results.trials.filter(t => { let size = parseFloat(t.condition[options.task.attr]); let station = true; if (options.station) { station = results.context.targetStation == options.station; } return (station && size >= options.sizeInterval[0] && size <= options.sizeInterval[1] ); }); allTrials = allTrials.concat(filteredTrials); allCount += results.trials.length; //filteredCount += filteredTrials.length; taskIndex += 9; } } for (let t of allTrials) { let cstr = options.conditionToString(t.condition[options.conditionField]); if (matrix[cstr] && (options.conditions.includes(cstr) || options.conditions.includes(t.condition[options.conditionField]))) { matrix[cstr][options.conditionToString(t.response[options.conditionField])]++; matrix[cstr]._count++; filteredCount++; } } matrix._meta = {allCount, filteredCount}; return matrix; }34:T8d2,function computeTextOverviewMatrix(options) { let groups = { "a / e": ["Kamao","Kameo","Kemao","Kemeo","andarn","andern","endarn","endern","Rasta","Raste","Resta","Reste"], "m / nn / rn": ["Lemos","Lennos","Lenos","Lernos","Semato","Senato","Sennato","Sernato","Kame","Kane","Kanne","Karne"], "ff / fl / lf / ll": ["Stoffen","Stoflen","Stolfen","Stollen","Saffe","Safle","Salfe","Salle"], "f / l": ["Kofifa","Kofila","Kolifa","Kolila","fokef","fokel","lokef","lokel"], "il / li / ll": ["Deila","Delia","Della","Monail","Monali","Monall"], "i / l": ["Aiganei","Aiganel","Alganei","Alganel"] }; let task = tasks.text; let matrix = {}; let groupNames = Object.keys(groups); for (let s1 of groupNames) { let row = {}; for (let s2 of groupNames) { row[s2] = 0; } row._count = 0; matrix[s1] = row; } let allCount = 0; let filteredCount = 0; let allTrials = []; for (let participantData of allTrialsRaw) { let participantId = participantData.participantId; let taskIndex = 4 + task.offset; // skip survey tasks while (taskIndex < participantData.results.length) { let results = participantData.results[taskIndex]; let filteredTrials = results.trials.filter(t => { let size = parseFloat(t.condition[task.attr]); let station = true; if (options.station) { station = results.context.targetStation == options.station; } return (station && size >= options.sizeInterval[0] && size <= options.sizeInterval[1] ); }); allTrials = allTrials.concat(filteredTrials); allCount += results.trials.length; filteredCount += filteredTrials.length; taskIndex += 9; } } for (let t of allTrials) { let cstr = t.condition[options.conditionField]; // find word group for (let [name, entries] of Object.entries(groups)) { if (entries.includes(cstr)) { // found group if (t.condition[options.conditionField] == t.response[options.conditionField]) { // correct response matrix[name][name]++; } matrix[name]._count++; break; } } } matrix._meta = {allCount, filteredCount}; return matrix; }35:T65b,async function renderTaoMatrix(options) { let str = `

condition ↓

response →

`; for (let s of taoShapes) { str += '

'; } str += ""; let color; let greenScale = d3.scalePow([0,1],["#ffffff","#339933"]).exponent(3) let redScale = d3.scalePow([0,1],["#dd2222","#ffffff"]).exponent(3); let matrix = computeTaoMatrix(options); for (let s1 of taoShapes) { str += '

'; for (let s2 of taoShapes) { let val = matrix[s1.name][s2.name]/matrix[s1.name]._count || 0; // catch division by 0 let styleStr = ""; if (s1 == s2) { // correct answer - green color scheme color = greenScale(val); styleStr = "font-weight: bold; border: 1px solid #888888;"; } else { color = redScale(1-val); } str += '' + Math.round(val*100) + "%
(" + matrix[s1.name][s2.name] + ")"; } str += ""; } return html`${str}

`; }36:T586,function computeTaoMatrix(options) { options = Object.assign({ task: tasks.tao, station: null, sizeInterval: [0,2] }, options); let matrix = {}; for (let s1 of taoShapes) { let row = {}; for (let s2 of taoShapes) { row[s2.name] = 0; } row._count = 0; matrix[s1.name] = row; } let allCount = 0; let filteredCount = 0; let allTrials = []; for (let participantData of allTrialsRaw) { let participantId = participantData.participantId; let taskIndex = 4 + options.task.offset; // skip survey tasks while (taskIndex < participantData.results.length) { let results = participantData.results[taskIndex]; let filteredTrials = results.trials.filter(t => { let size = parseFloat(t.condition[options.task.attr]); let station = true; if (options.station) { station = results.context.targetStation == options.station.name; } return (station && size >= options.sizeInterval[0] && size <= options.sizeInterval[1] ); }); allTrials = allTrials.concat(filteredTrials); allCount += results.trials.length; filteredCount += filteredTrials.length; taskIndex += 9; } } for (let t of allTrials) { matrix[t.condition.shape][t.response.shape]++; matrix[t.condition.shape]._count++; } matrix._meta = {allCount, filteredCount}; return matrix; }37:T41d,function uncollide(selection, minDist, axis="x", xAttr="cx", yAttr="cy") { function dist(c1, c2) { let dx = c1.x - c2.x, dy = c1.y - c2.y; return Math.sqrt(dx**2 + dy**2); } let elements = []; selection.each(function(d,i,group) { let sel = d3.select(this); let current = { x: +sel.attr(xAttr), y: +sel.attr(yAttr), dir: 1, moved: false }; let collision = true; while (collision) { collision = false; for (let c of elements) { // give a little slack for rounding errors, otherwise risks endless loop if (dist(current, c) < minDist - 0.2) { current.dir = c.dir; if (!c.moved) { c.dir *= -1; } current[axis] = c[axis] + Math.sqrt(minDist**2 - (c[axis]-current[axis])**2) * current.dir; current.moved = true; collision = true; break; } } } sel.attr(axis == "x" ? xAttr : yAttr, current.x); elements.push(current); }); }38:[{"id":"244cabd5450b66b1dba299aa29770c43cf2a9d9e5a50c48a039084c1c5164aed0056d17d8d6691d24609cccc3195df7303aee8fd58920753f54d97634f766d79","href":"https://static.observableusercontent.com/files/244cabd5450b66b1dba299aa29770c43cf2a9d9e5a50c48a039084c1c5164aed0056d17d8d6691d24609cccc3195df7303aee8fd58920753f54d97634f766d79","name":"all_aggregated_users@1.csv","type":"text/csv","lastModified":1622186823055.399,"size":14781},{"id":"2ea4303fbeb297bfd9c1119bd7b36b46cb1a8e542d2a2943b307a2c0da3bd0f4102aafddd24a155045dd670112e932abec095ad7e2d7723fc46bf3cbca8d0018","href":"https://static.observableusercontent.com/files/2ea4303fbeb297bfd9c1119bd7b36b46cb1a8e542d2a2943b307a2c0da3bd0f4102aafddd24a155045dd670112e932abec095ad7e2d7723fc46bf3cbca8d0018","name":"all@1.json","type":"application/json","lastModified":1630925064220.815,"size":10179916},{"id":"2a6cf493d19a27ab78ce5962ea2274f550d59631e466db61972f8583565b17b10ec016b3fa518e059c1b94f4389525781c8bf1d34dd30c446c1b8130c1a27b15","href":"https://static.observableusercontent.com/files/2a6cf493d19a27ab78ce5962ea2274f550d59631e466db61972f8583565b17b10ec016b3fa518e059c1b94f4389525781c8bf1d34dd30c446c1b8130c1a27b15","name":"flower.svg","type":"image/svg+xml","lastModified":1660030828832.791,"size":1033},{"id":"9db0394dd5decb6803f16117e958c907848b3cecc44f39143bef2f5c391b784cb9a0eded69cccc0f6405c943eeb9a87fec904fe6d4be8326c0b988c0bd42c51c","href":"https://static.observableusercontent.com/files/9db0394dd5decb6803f16117e958c907848b3cecc44f39143bef2f5c391b784cb9a0eded69cccc0f6405c943eeb9a87fec904fe6d4be8326c0b988c0bd42c51c","name":"tree.svg","type":"image/svg+xml","lastModified":1660030828829.305,"size":988},{"id":"cea38bf8e6ad9ec19e518827a0325d4d7c29a48375e54ecce2db9da418f616a502553d38e56d338789957400f4a8c6179a393678b34d4f976328c31d0960c146","href":"https://static.observableusercontent.com/files/cea38bf8e6ad9ec19e518827a0325d4d7c29a48375e54ecce2db9da418f616a502553d38e56d338789957400f4a8c6179a393678b34d4f976328c31d0960c146","name":"car.svg","type":"image/svg+xml","lastModified":1660030828854.106,"size":1091},{"id":"b40edfa366d2cf59c53f32597097968e6f5006aa3a9ae2536945459c40746038a40e22bf100ff7aa8e3660ace27869615c34b7c15e3b54d68c784d10af39cd5d","href":"https://static.observableusercontent.com/files/b40edfa366d2cf59c53f32597097968e6f5006aa3a9ae2536945459c40746038a40e22bf100ff7aa8e3660ace27869615c34b7c15e3b54d68c784d10af39cd5d","name":"rabbit.svg","type":"image/svg+xml","lastModified":1660030828832.316,"size":867},{"id":"96c05659eb0fff991f426db4864c6dcb33d92c276e657aa47492cf2e447c6038f51d3cca93ab07ad1b456aff31c0f27bed492c04a70fee823fa1ba4dc30c1860","href":"https://static.observableusercontent.com/files/96c05659eb0fff991f426db4864c6dcb33d92c276e657aa47492cf2e447c6038f51d3cca93ab07ad1b456aff31c0f27bed492c04a70fee823fa1ba4dc30c1860","name":"moon.svg","type":"image/svg+xml","lastModified":1660030828814.497,"size":817},{"id":"971ce01861a72f2ab3c5104f66c62027c15534affb339342a93934a2cc85c05d03932ef208809c5dacf7007e0650067cce4b0b8a974b3b068baf2959cfc8b5a5","href":"https://static.observableusercontent.com/files/971ce01861a72f2ab3c5104f66c62027c15534affb339342a93934a2cc85c05d03932ef208809c5dacf7007e0650067cce4b0b8a974b3b068baf2959cfc8b5a5","name":"duck.svg","type":"image/svg+xml","lastModified":1660030828844.641,"size":1086},{"id":"30d39a892962e1b7e4cb111f1a2ecd9c91847091d15417dfee62c69e3d6d376ac77d6f083e92e68daa6f616d909111483653ffdd5ae91b9000367010a5ad710d","href":"https://static.observableusercontent.com/files/30d39a892962e1b7e4cb111f1a2ecd9c91847091d15417dfee62c69e3d6d376ac77d6f083e92e68daa6f616d909111483653ffdd5ae91b9000367010a5ad710d","name":"heart.svg","type":"image/svg+xml","lastModified":1660030828834.875,"size":562},{"id":"cf2faceebadc513abd886d7f7bd1a945a6aa81dea713807f5da5ecc4ef41fcb6a52135c5c9fe75da50d531f4b2165407a942ebd5a55984888d2ab0323ff82d0e","href":"https://static.observableusercontent.com/files/cf2faceebadc513abd886d7f7bd1a945a6aa81dea713807f5da5ecc4ef41fcb6a52135c5c9fe75da50d531f4b2165407a942ebd5a55984888d2ab0323ff82d0e","name":"butterfly.svg","type":"image/svg+xml","lastModified":1660030828854.076,"size":994},{"id":"599b86aba08fd701533251df93dd022d7d41d0fa256962414fc5442dc0dc10748fc5b5656265ed82593f970dd207dd5426598895ab7aa5fb6ef5767bc1c32b5b","href":"https://static.observableusercontent.com/files/599b86aba08fd701533251df93dd022d7d41d0fa256962414fc5442dc0dc10748fc5b5656265ed82593f970dd207dd5426598895ab7aa5fb6ef5767bc1c32b5b","name":"rocket.svg","type":"image/svg+xml","lastModified":1660030828834.349,"size":947},{"id":"7411764c1eef3223bcae94b3c0e0c2cd4ab761cafc85fa436ac95a5dff29305cbf9ef1ad0b09adadaf561f6daec922eb05dc6d4ea98f46cd3f8c5a5f5fa33992","href":"https://static.observableusercontent.com/files/7411764c1eef3223bcae94b3c0e0c2cd4ab761cafc85fa436ac95a5dff29305cbf9ef1ad0b09adadaf561f6daec922eb05dc6d4ea98f46cd3f8c5a5f5fa33992","name":"house.svg","type":"image/svg+xml","lastModified":1660030828818.435,"size":694}] 2e:{"title":"The Effect of Display Pixel Density on Minimum Legible Size of Fundamental Cartographic Symbols","cells":[{"id":0,"value":"*Companion notebook for research project*\n# The Effect of Display Pixel Density on Minimum Legible Size of Fundamental Cartographic Symbols","pinned":false,"hidden":false,"mode":"md"},{"id":862,"value":"For the timeline of phone pixel densities, see [Phone Pixel Densities 2000-2020](https://observablehq.com/d/4cb96c8765cd8cd2)","pinned":false,"hidden":false,"mode":"md"},{"id":460,"value":"----\n## Plot of Participants' Thresholds for Tasks & Displays","pinned":false,"hidden":false,"mode":"md"},{"id":88,"value":"viewof task = Inputs.select(Object.keys(tasks), {label: \"Task\", value: \"line_parallel\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"viewof visionFilter = Inputs.select(visionFilters, {label: \"Vision\", format: x => x.name, value: visionFilters[2] })","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"viewof subsetFilter = Inputs.select(participantFilters, {label: \"Subset\", format: x => x.name })","pinned":false,"hidden":false,"mode":"ojs"},{"id":806,"value":"viewof flagsChoices = Inputs.checkbox(Object.entries({\n showOrder: \"Station Order\",\n axisLabels: \"Axis Labels\",\n publish: \"Optimize for printing\"\n}), {\n label: \"Options\",\n format: d => d[1],\n valueof: d=> d[0],\n value: [\"axisLabels\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"----\n## Configuration","pinned":false,"hidden":false,"mode":"md"},{"id":725,"value":"### Stations","pinned":false,"hidden":false,"mode":"md"},{"id":63,"value":"viewof stations = Inputs.table([\n {\n name: \"C\",\n display: \"D1\",\n resolution: 228,\n model: \"LG P-970\",\n valueOf: function() { return this.resolution }\n },\n {\n name: \"A\",\n display: \"D2\",\n resolution: 342,\n model: \"Sony Xperia V\",\n valueOf: function() { return this.resolution }\n },\n {\n name: \"D\",\n display: \"D3\",\n resolution: 522,\n model: \"Samsung Galaxy Note 4\",\n valueOf: function() { return this.resolution }\n },\n {\n name: \"B\",\n display: \"D4\",\n resolution: 801,\n model: \"Sony Xperia Z5 Premium \",\n valueOf: function() { return this.resolution }\n }\n], {columns: [\"name\",\"display\",\"model\",\"resolution\"], width: 660})","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"### Categories for visual acuity of participants","pinned":false,"hidden":false,"mode":"md"},{"id":228,"value":"viewof logMARThresholds = Inputs.table([\n //{ category: \"all\", lowerBound: -Infinity, upperBound: Infinity },\n { category: \"poor\", lowerBound: 0, upperBound: Infinity },\n { category: \"regular\", lowerBound: -Infinity, upperBound: 0 },\n { category: \"average\", lowerBound: -0.25, upperBound: 0 },\n { category: \"exceptional\", lowerBound: -Infinity, upperBound: -0.25 },\n],{width: 500})","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"### Participants categories / filters","pinned":false,"hidden":false,"mode":"md"},{"id":871,"value":"#### Filter functions for above thresholds:","pinned":false,"hidden":false,"mode":"md"},{"id":661,"value":"visionFilters = {\n\n let filters = [\n { name: \"all\", filter: d => true },\n ];\n \n filters = filters.concat(logMARThresholds.map(t => ({\n name: t.category + \" (logMAR \" + (\n (t.upperBound == Infinity) ? \"> \" + t.lowerBound : (\n (t.lowerBound == -Infinity) ? \"< \" + t.upperBound : (\n inf(t.lowerBound) + \" – \" + inf(t.upperBound)\n )\n )\n ) + \")\",\n filter: d => d.logMAR >= t.lowerBound && d.logMAR < t.upperBound\n })));\n\n return filters;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"#### Further categories for participants:","pinned":false,"hidden":false,"mode":"md"},{"id":639,"value":"participantFilters = [\n { name: \"all\", filter: d => true },\n { name: \"Gender: male\", filter: d => d.gender == \"Male\" },\n { name: \"Gender: female\", filter: d => d.gender == \"Female\" },\n { name: \"Native Language Alphabet: latin\", filter: d => d.language_latin == \"true\" },\n { name: \"Native Language Alphabet: non-latin\", filter: d => d.language_latin == \"false\" },\n { name: \"Vision (self-reported): normal\", filter: d => d.vision == \"normal\" },\n { name: \"Vision (self-reported): normal or short-sighted\", filter: d => d.vision == \"normal\" || d.vision == \"short-sighted\" },\n { name: \"Vision (self-reported): corrected\", filter: d => d.vision == \"corrected\" },\n { name: \"Vision (self-reported): impaired\", filter: d => d.vision == \"impaired\" },\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":529,"value":"----\n## Experiment data\n","pinned":false,"hidden":false,"mode":"md"},{"id":757,"value":"Some information about the tasks, needed for extracting the data:","pinned":false,"hidden":false,"mode":"md"},{"id":82,"value":"tasks = ({\n snellen: {title: \"Tumbling E's\", offset: 3, attr: \"size\"},\n line_parallel: {title: \"Lateral Line Pattern\", offset: 4, attr: \"width\"},\n line_dashed: {title: \"Longditudinal Line Pattern\", offset: 5, attr: \"width\"},\n tao: {title: \"Point Symbols\", offset: 6, attr: \"size\"},\n tao_vanishing: {title: \"Vanishing Point Symbols\", offset: 7, attr: \"size\"},\n text: {title: \"Text Labels\", offset: 8, attr: \"fontSize\"},\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":936,"value":"The raw results data is an array with one entry for each participant, containing the trial data as `results` entry. Due to a bug in stimsrv, the task name for each of the main tasks was set to `loop` - so the results for each task have to be reconstructed based on the order of tasks. For each station, the identical sequence of tasks was run - three \"pause\" tasks with information for the user, followed by the tasks in the order listed above.","pinned":false,"hidden":false,"mode":"md"},{"id":391,"value":"allTrialsRaw = FileAttachment(\"all@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"md`The data, aggregated by person:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"dataParticipants = FileAttachment(\"all_aggregated_users@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"md`Unpack into per-station data, with one entry per person per station (fields for each task):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"\ndataStationThresholds = {\n let dat = [];\n dataParticipants.forEach(p => {\n stations.forEach(s => {\n let d = {\n participantId: p.participantId,\n ageGroup: p.ageGroup,\n gender: p.gender,\n language: p.language,\n language_latin: p.language_latin,\n vision: p.vision,\n logMAR: +p.logMAR,\n station: s.name,\n resolution: s.resolution,\n order: +p[\"station_\" + s.name+ \"_order\"],\n snellen_thresh: +p[\"snellen_thresh_\" + s.name],\n line_parallel_thresh: +p[\"line_parallel_thresh_\" + s.name],\n line_dashed_thresh: +p[\"line_dashed_thresh_\" + s.name],\n tao_thresh: +p[\"tao_thresh_\" + s.name],\n tao_vanishing_thresh: +p[\"tao_vanishing_thresh_\" + s.name],\n text_thresh: +p[\"text_thresh_\" + s.name],\n };\n dat.push(d);\n });\n });\n return dat;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"md`Unpack further into per-station, per-task data (One entry per person per station per task, with a *threshold* entry specifying the threshold reached):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"dataStationTaskThresholds = {\n let dat = [];\n dataStationThresholds.forEach(p => {\n Object.keys(tasks).forEach(t => {\n let d = {\n participantId: p.participantId,\n ageGroup: p.ageGroup,\n gender: p.gender,\n language: p.language,\n language_latin: p.language_latin,\n vision: p.vision,\n logMAR: p.logMAR,\n station: p.station,\n resolution: p.resolution,\n stationOrder: p.order,\n task: t,\n threshold: p[t + \"_thresh\"]\n };\n dat.push(d);\n });\n });\n return dat;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1090,"value":"avgNumberOfTrialsPerParticipant = {\n let allCount = 0;\n for (let task of Object.values(tasks)) {\n \n for (let participantData of allTrialsRaw) {\n let participantId = participantData.participantId;\n let taskIndex = 4 + task.offset; // skip survey tasks\n while (taskIndex < participantData.results.length) {\n \n let results = participantData.results[taskIndex];\n \n allCount += results.trials.length;\n \n taskIndex += 9;\n }\n }\n }\n return allCount / 27;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"----\n## Task 1 (Tumbing E's) further analysis","pinned":false,"hidden":false,"mode":"md"},{"id":946,"value":"The results of task 1 (tumbling E's) warrant further analysis (see paper for explanation). Here we extract for all **trials at critical size (0.26mm < *s* < 0.28mm)** for each station: the number of participants who reached that stimulus size, the total number of trials conducted at that size and the number and ratio of correct responses.","pinned":false,"hidden":false,"mode":"md"},{"id":965,"value":"Inputs.table(Object.entries(task1ResultsAtCriticalSize).map(([k,v]) => {\n v.station = k;\n v.successRate = (v.correct / v.trials * 100).toFixed(1) + \"%\";\n v.ppi = stations.find(s => s.name == k).resolution;\n return v;\n}), {columns: [\"station\", \"ppi\", \"participants\", \"trials\", \"correct\", \"successRate\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1236,"value":"----\n## Task 2 (Lateral line pattern) further analysis","pinned":false,"hidden":false,"mode":"md"},{"id":1245,"value":"Participants 2-4 were excluded from the analysis, because the task implementation was changed slightly after participant #4.","pinned":false,"hidden":false,"mode":"md"},{"id":1319,"value":"viewof t2station = Inputs.select([null].concat(stations), {label: \"Station\", format: s=> s ? (s.display + \" (\" + s.resolution + \"ppi)\") : \"All\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1231,"value":"renderConfusionMatrix({\n conditions: [0,3,4],\n station: t2station?.name,\n labels: [\"Solid Line\", \"-\", \"-\", \"3 Parallel\", \"4 Parallel\"],\n task: tasks.line_parallel,\n sizeInterval: [0.8, 1.0],\n conditionField: \"lineCount\"\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1228,"value":"renderConfusionMatrix({\n conditions: [0,3,4],\n station: t2station?.name,\n labels: [\"Solid Line\", \"-\", \"-\", \"3 Parallel\", \"4 Parallel\"],\n task: tasks.line_parallel,\n sizeInterval: [0.6, 0.8],\n conditionField: \"lineCount\"\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1206,"value":"renderConfusionMatrix({\n conditions: [0,3,4],\n station: t2station?.name,\n labels: [\"Solid Line\", \"-\", \"-\", \"3 Parallel\", \"4 Parallel\"],\n task: tasks.line_parallel,\n sizeInterval: [0.4, 0.6],\n conditionField: \"lineCount\"\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1254,"value":"----\n## Task 3 (Longitudinal line pattern) further analysis","pinned":false,"hidden":false,"mode":"md"},{"id":1329,"value":"viewof t3station = Inputs.select([null].concat(stations), {label: \"Station\", format: s=> s ? (s.display + \" (\" + s.resolution + \"ppi)\") : \"All\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1281,"value":"renderConfusionMatrix({\n sizeInterval: [0.15, 0.2],\n station: t3station?.name,\n conditions: [\"1-2\",\"3-1\",\"3-2-1-2\",\"100-0\"],\n labels: {\n \"1-2\": \"Dotted\",\n \"3-1\": \"Dashed\",\n \"3-2-1-2\": \"Dot-Dash\",\n \"100-0\": \"Solid\"\n },\n task: tasks.line_dashed,\n conditionField: \"dashpattern\",\n conditionToString: c => c.join(\"-\")\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1276,"value":"renderConfusionMatrix({\n sizeInterval: [0.1, 0.15],\n station: t3station?.name,\n conditions: [\"1-2\",\"3-1\",\"3-2-1-2\",\"100-0\"],\n labels: {\n \"1-2\": \"Dotted\",\n \"3-1\": \"Dashed\",\n \"3-2-1-2\": \"Dot-Dash\",\n \"100-0\": \"Solid\"\n },\n task: tasks.line_dashed,\n conditionField: \"dashpattern\",\n conditionToString: c => c.join(\"-\")\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1258,"value":"renderConfusionMatrix({\n sizeInterval: [0.05, 0.1],\n station: t3station?.name,\n conditions: [\"1-2\",\"3-1\",\"3-2-1-2\",\"100-0\"],\n labels: {\n \"1-2\": \"Dotted\",\n \"3-1\": \"Dashed\",\n \"3-2-1-2\": \"Dot-Dash\",\n \"100-0\": \"Solid\"\n },\n task: tasks.line_dashed,\n conditionField: \"dashpattern\",\n conditionToString: c => c.join(\"-\")\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1177,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1163,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1012,"value":"----\n## Task 4 (TAO Symbols) confusion matrix","pinned":false,"hidden":false,"mode":"md"},{"id":1342,"value":"viewof t4station = Inputs.select([null].concat(stations), {label: \"Station\", format: s=> s ? (s.display + \" (\" + s.resolution + \"ppi)\") : \"All\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1023,"value":"viewof taoSizeInterval = interval([0.1, 2.0], {\n step: .1,\n value: [0.3, 0.8],\n format: ([start, end]) => `${start}mm – ${end}mm`,\n label: 'Size interval',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1050,"value":"{\n let m = computeTaoMatrix({station: t4station, sizeInterval: taoSizeInterval})\n return md`${m._meta.filteredCount} of ${m._meta.allCount} trials (${Math.round(m._meta.filteredCount/m._meta.allCount*100)}%)` \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1365,"value":"renderTaoMatrix({station: t4station, sizeInterval: taoSizeInterval})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1373,"value":"----\n## Task 5 (TAO Symbols, vanishing) confusion matrix","pinned":false,"hidden":false,"mode":"md"},{"id":1379,"value":"viewof t5station = Inputs.select([null].concat(stations), {label: \"Station\", format: s=> s ? (s.display + \" (\" + s.resolution + \"ppi)\") : \"All\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1391,"value":"viewof t5SizeInterval = interval([0.1, 2.0], {\n step: .1,\n value: [0.7, 1.5],\n format: ([start, end]) => `${start}mm – ${end}mm`,\n label: 'Size interval',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1407,"value":"{\n let m = computeTaoMatrix({station: t5station, sizeInterval: t5SizeInterval, task: tasks.tao_vanishing})\n return md`${m._meta.filteredCount} of ${m._meta.allCount} trials (${Math.round(m._meta.filteredCount/m._meta.allCount*100)}%)` \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1418,"value":"renderTaoMatrix({station: t5station, sizeInterval: t5SizeInterval, task: tasks.tao_vanishing})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1427,"value":"----\n## Task 6 (Text labels) confusion matrix","pinned":false,"hidden":false,"mode":"md"},{"id":1444,"value":"viewof t6station = Inputs.select([null].concat(stations), {label: \"Station\", format: s=> s ? (s.display + \" (\" + s.resolution + \"ppi)\") : \"All\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1451,"value":"viewof t6SizeInterval = interval([0.1, 2.0], {\n step: .1,\n value: [0.8, 1.6],\n format: ([start, end]) => `${start}mm – ${end}mm`,\n label: 'Size interval',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1537,"value":"renderConfusionMatrix({\n sizeInterval: t6SizeInterval,\n station: t6station?.name,\n computeMatrix: computeTextOverviewMatrix,\n conditions: [\"a / e\",\"m / nn / rn\",\"ff / fl / lf / ll\",\"f / l\",\"il / li / ll\",\"i / l\",],\n task: tasks.text,\n conditionField: \"text\",\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1536,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1574,"value":"### Group *“a / e”*","pinned":false,"hidden":false,"mode":"md"},{"id":1458,"value":"renderConfusionMatrix({\n sizeInterval: t6SizeInterval,\n station: t6station?.name,\n conditions: [\"Kamao\",\"Kameo\",\"Kemao\",\"Kemeo\"],\n task: tasks.text,\n conditionField: \"text\",\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1480,"value":"renderConfusionMatrix({\n sizeInterval: t6SizeInterval,\n station: t6station?.name,\n conditions: [\"andarn\",\"andern\",\"endarn\",\"endern\"], \n task: tasks.text,\n conditionField: \"text\",\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1483,"value":"renderConfusionMatrix({\n sizeInterval: t6SizeInterval,\n station: t6station?.name,\n conditions: [\"Rasta\",\"Raste\",\"Resta\",\"Reste\"], task: tasks.text,\n conditionField: \"text\",\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1577,"value":"### Group *“m / nn / rn”*","pinned":false,"hidden":false,"mode":"md"},{"id":1486,"value":"renderConfusionMatrix({\n sizeInterval: t6SizeInterval,\n station: t6station?.name,\n conditions: [\"Lemos\",\"Lennos\",\"Lenos\",\"Lernos\"], \n task: tasks.text,\n conditionField: \"text\",\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1489,"value":"renderConfusionMatrix({\n sizeInterval: t6SizeInterval,\n station: t6station?.name,\n conditions: [\"Semato\",\"Senato\",\"Sennato\",\"Sernato\"], task: tasks.text,\n conditionField: \"text\",\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1492,"value":"renderConfusionMatrix({\n sizeInterval: t6SizeInterval,\n station: t6station?.name,\n conditions: [\"Kame\",\"Kane\",\"Kanne\",\"Karne\"], task: tasks.text,\n conditionField: \"text\",\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1585,"value":"### Group *“ff / fl / lf / ll”*","pinned":false,"hidden":false,"mode":"md"},{"id":1495,"value":"renderConfusionMatrix({\n sizeInterval: t6SizeInterval,\n station: t6station?.name,\n conditions: [\"Stoffen\",\"Stoflen\",\"Stolfen\",\"Stollen\"], task: tasks.text,\n conditionField: \"text\",\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1498,"value":"renderConfusionMatrix({\n sizeInterval: t6SizeInterval,\n station: t6station?.name,\n conditions: [\"Saffe\",\"Safle\",\"Salfe\",\"Salle\"], \n task: tasks.text,\n conditionField: \"text\",\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1591,"value":"### Group *“f / l”*","pinned":false,"hidden":false,"mode":"md"},{"id":1501,"value":"renderConfusionMatrix({\n sizeInterval: t6SizeInterval,\n station: t6station?.name,\n conditions: [\"Kofifa\",\"Kofila\",\"Kolifa\",\"Kolila\"], task: tasks.text,\n conditionField: \"text\",\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1504,"value":"renderConfusionMatrix({\n sizeInterval: t6SizeInterval,\n station: t6station?.name,\n conditions: [\"fokef\",\"fokel\",\"lokef\",\"lokel\"],\n task: tasks.text,\n conditionField: \"text\",\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1596,"value":"### Group *“il / li / ll”*","pinned":false,"hidden":false,"mode":"md"},{"id":1507,"value":"renderConfusionMatrix({\n sizeInterval: t6SizeInterval,\n station: t6station?.name,\n conditions: [\"Deila\",\"Delia\",\"Della\"],\n task: tasks.text,\n conditionField: \"text\",\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1510,"value":"renderConfusionMatrix({\n sizeInterval: t6SizeInterval,\n station: t6station?.name,\n conditions: [\"Monail\",\"Monali\",\"Monall\"],\n task: tasks.text,\n conditionField: \"text\",\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1602,"value":"### Group *“i / l”*","pinned":false,"hidden":false,"mode":"md"},{"id":1513,"value":"renderConfusionMatrix({\n sizeInterval: t6SizeInterval,\n station: t6station?.name,\n conditions: [\"Aiganei\",\"Aiganel\",\"Alganei\",\"Alganel\"],\n task: tasks.text,\n conditionField: \"text\",\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1016,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1056,"value":"taoShapes = [\n { name: \"butterfly\", svg: FileAttachment(\"butterfly.svg\") },\n { name: \"car\", svg: FileAttachment(\"car.svg\") },\n { name: \"duck\", svg: FileAttachment(\"duck.svg\") },\n { name: \"flower\", svg: FileAttachment(\"flower.svg\") },\n { name: \"heart\", svg: FileAttachment(\"heart.svg\") },\n { name: \"house\", svg: FileAttachment(\"house.svg\") },\n { name: \"moon\", svg: FileAttachment(\"moon.svg\") },\n { name: \"rabbit\", svg: FileAttachment(\"rabbit.svg\") },\n { name: \"rocket\", svg: FileAttachment(\"rocket.svg\") },\n { name: \"tree\", svg: FileAttachment(\"tree.svg\") }\n];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1160,"value":"----\n","pinned":false,"hidden":false,"mode":"md"},{"id":794,"value":"----\n## Helpers","pinned":false,"hidden":false,"mode":"md"},{"id":378,"value":"function boxY(data, {\n x = null,\n y = {transform: x => x},\n fill = \"#aaaaaa\",\n fillOpacity = 1.0,\n stroke = \"currentColor\",\n strokeWidth = 1,\n medianStrokeWidth = 2,\n ...options\n} = {}) {\n const group = x == null ? Plot.groupZ : Plot.groupX;\n return compose(\n Plot.barY(data, group({y1: quartile1, y2: quartile3}, {x, y, fill, fillOpacity, stroke, strokeWidth, ...options})),\n Plot.tickY(data, group({y: \"median\"}, {x, y, stroke, strokeWidth: strokeWidth * medianStrokeWidth, ...options})),\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"function compose(...marks) {\n marks.plot = Plot.Mark.prototype.plot;\n return marks;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"quartile1 = V => d3.quantile(V, 0.25)","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"quartile3 = V => d3.quantile(V, 0.75)","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1139,"value":"function acc() {}\n/*\n{\n let domain = [-0.4, 0.1];\n let binWidth = 0.025; \n let domainWidth = domain[1]-domain[0];\n let numBins = Math.ceil(domainWidth/binWidth);\n\n let thresholds = Array.from({length: numBins}, (_,i) => domain[0] - binWidth/2 + binWidth * i);\n console.log(thresholds.map(x => x.toFixed(2)).join(\",\"));\n \n return Plot.plot({\n height: 100,\n x: {\n //domain: domain,\n domain: [-0.35,0.05],\n //reverse: true,\n grid: true,\n label: \"logMAR\"\n },\n y: {\n //domain: [0,6],\n round: true\n },\n marks: [\n Plot.rectY(dataParticipants, Plot.binX({y: \"count\"}, {x: d => +d.logMAR, xthresholds: thresholds, thresholds: 26, interval: 0.025}))\n ]\n })\n}\n*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"// simple formatting function for infinite numbers\nfunction inf(number) {\n if (isFinite(number)) return number;\n if (number === -Infinity) return \"-∞\";\n return \"∞\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"----\n## Libs","pinned":false,"hidden":false,"mode":"md"},{"id":1026,"value":"import {interval} from '@mootari/range-slider@1781'","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"jstat = require(\"jstat\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"Plot = require(\"@observablehq/plot@0.3\");","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}