41:null 42:["$","title",null,{"children":"Stimulus Simulator | Jo Wood | Observable"}] 48:T5f5,Subjects were each presented with 5 charts and asked to make comparisons between a pair of values indicated by dots overlaid on a bar chart. Charts were either grouped (types 1 and 3) or stacked (types, 2, 4 and 5). Unusually, the first bar in the grouped bar charts showed the total of the remaining 4 bars in the group. Subjects were never asked to compare any of these total bars. In each case subjects were asked to estimate the proportion of the smaller magnitude as a fraction of the larger in the pair. - **Type 1:** A comparison of the first two non-total bars in the left-hand bars of a grouped bar chart. As both bars have a common baseline, Cleveland and McGill describe this as a _position_ on a common scale comparison. - **Type 2:** A comparison between the bottom segment of two stacked bar charts. Again because of the common baseline, Cleveland and McGill described this as a _position_ comparison. - **Type 3:** A comparison betwen the first non-total bar in two groups of a grouped bar chart. Another _position_ comparison, but this time with a greater degree of horizontal separation between the two bars to compare. - **Type 4:** A comparison between the top segment of two stacked bar charts. The segments do not have a common baseline (position depends on the segments below each), so Cleveland and McGill describe this as a _length_ comparison. - **Type 5:** A comparison between the top two segments of a stacked bar. Again, no common baseline, so this was also described as as _length_ comparison.49:T46c,For the 5 judgement task types identified by Cleveland and McGill (Figure 4 from their paper, shown above), here is an attempt to match their sampling process as reported on p.539 of their paper. We draw one uniform random sample from the 45 pairwise combinations, guaranteeing the pair will be of different magnitudes. These form the two values the judgment task requires subjects to compare. The remaining 6 samples can be drawn randomly (uniform) from all 10 magnitude values in the sampling frame. For Type 4 samples, we have an additional constraint: The totals of the two groups must not be equal (otherwise the two stacked bars would be of equal height and the judgement turns from a position to length judgement). Nor must the totals of the first three stacked segments in each group (otherwise the bottom of the two segments to compare would be common making this a length judgement). To confirm the samples capture the distribution of (10) original values, here is a simulation of 10,000 runs of samples (${tex`5 \times 8=40`} samples per run), where we would expect a uniform distribution of the 10 possible magnitudes:4a:T42e,{ const ratios = pairs .map(([a, b]) => Math.min(a, b) / Math.max(a, b)) .map((d) => ({ratio: d.toFixed(2)})); const cmSample = [ {ratio: "0.18", freq: 0.1 * 45}, {ratio: "0.22", freq: 0}, {ratio: "0.26", freq: 0.1 * 45}, {ratio: "0.32", freq: 0}, {ratio: "0.38", freq: 0.1 * 45}, {ratio: "0.46", freq: 0.2 * 45}, {ratio: "0.56", freq: 0.1 * 45}, {ratio: "0.68", freq: 0.2 * 45}, {ratio: "0.83", freq: 0.2 * 45} ]; display( Plot.plot({ width: 400, height: 250, x: {type: "band"}, y: { tickFormat: (d) => (d / 45).toFixed(2), label: "Probability of selection", domain: [0, 9], ticks: [0, 2.25, 4.5, 6.75, 9] }, marks: [ Plot.rectY( ratios, Plot.groupX({y: "count"}, {x: "ratio", fill: "tan"}) ), Plot.dot(cmSample, { x: "ratio", y: "freq", stroke: "firebrick", fill: (d) => (d.freq === 0 ? "white" : "firebrick"), r: 4 }) ] }) ); }4b:T72e,There are a number of idiosyncrasies with the example charts given in Figure 3 of the paper (p.533) that may have implications for replication and transferability of results. Some are common with the position-length charts of Figure 4 discussed above, while others are specific to these charts. - The selection of the original subjects of the test. - Charts had no interior fill, which may influence the challenging magnitude comparisons in the pie chart especially. - Pie charts are designed for part-to-whole comparison, yet the task involves part-to-part comparison, which is much harder. It is possible that poor accuracy in responses could reflect this specific task rather than the one more commonly applied to pie charts. - The non standard label orientation of the pie chart may be to support rotation of the paper copy about the pie's centre. In a digital context, this would not be possible, so care should be taken in generalising results to modern computing environments. - The non-standard start and ordering of pie chart segments (anticlockwise from east) reflects trigonometrical convenience, but not the convention assoicated with most pie charts, which are more likely to start with the first segment at "12 o'clock", either aligned with its left edge, or centre, with subsequent segments in clockwise order. ${await FileAttachment("clevelandAndMcGillFig3Annotated@1.png").image({ width: 640 })} Of the characteristics noted above, I would argue the most significant is the the part-to-part task being applied to pie charts designed for part-to-whole comparison. Cleveland and McGill state _"...perceptual tasks subjects were asked to carry out were very basic ones carried out in everyday activities."_ (p.539-540). I would question how often and how important part-to-part comparisons within pie charts actually are.4c:T98a,function createSample() { const [v1, v2] = d3.shuffle(pairs[pairSample()]); let t4; const t1 = [ { group: "A", cat: "a", val: v1 }, { group: "A", cat: "b", val: v2 }, { group: "A", cat: "c", val: sFrame[magSample()] }, { group: "A", cat: "d", val: sFrame[magSample()] }, { group: "B", cat: "a", val: sFrame[magSample()] }, { group: "B", cat: "b", val: sFrame[magSample()] }, { group: "B", cat: "c", val: sFrame[magSample()] }, { group: "B", cat: "d", val: sFrame[magSample()] } ]; const t2 = [ { group: "A", cat: "a", val: v1 }, { group: "A", cat: "b", val: sFrame[magSample()] }, { group: "A", cat: "c", val: sFrame[magSample()] }, { group: "A", cat: "d", val: sFrame[magSample()] }, { group: "B", cat: "a", val: v2 }, { group: "B", cat: "b", val: sFrame[magSample()] }, { group: "B", cat: "c", val: sFrame[magSample()] }, { group: "B", cat: "d", val: sFrame[magSample()] } ]; const t3 = [ { group: "A", cat: "a", val: v1 }, { group: "A", cat: "b", val: sFrame[magSample()] }, { group: "A", cat: "c", val: sFrame[magSample()] }, { group: "A", cat: "d", val: sFrame[magSample()] }, { group: "B", cat: "a", val: v2 }, { group: "B", cat: "b", val: sFrame[magSample()] }, { group: "B", cat: "c", val: sFrame[magSample()] }, { group: "B", cat: "d", val: sFrame[magSample()] } ]; // For type 4, totals of two groups must not be equal, nor the totals of cats a-c in both groups do { t4 = [ { group: "A", cat: "a", val: sFrame[magSample()] }, { group: "A", cat: "b", val: sFrame[magSample()] }, { group: "A", cat: "c", val: sFrame[magSample()] }, { group: "A", cat: "d", val: v1 }, { group: "B", cat: "a", val: sFrame[magSample()] }, { group: "B", cat: "b", val: sFrame[magSample()] }, { group: "B", cat: "c", val: sFrame[magSample()] }, { group: "B", cat: "d", val: v2 } ]; } while (invalidSample(t4)); const t5 = [ { group: "A", cat: "a", val: sFrame[magSample()] }, { group: "A", cat: "b", val: sFrame[magSample()] }, { group: "A", cat: "c", val: v1 }, { group: "A", cat: "d", val: v2 }, { group: "B", cat: "a", val: sFrame[magSample()] }, { group: "B", cat: "b", val: sFrame[magSample()] }, { group: "B", cat: "c", val: sFrame[magSample()] }, { group: "B", cat: "d", val: sFrame[magSample()] } ]; return [t1, t2, t3, t4, t5]; }4d:T59e,function groupedBars(data, options = {}) { const {select = [], caption = ""} = options; const selData = select .map((d) => d.split("")) .map(([group, cat]) => ({group, cat})); const dataWithTotals = [ ...data, ...Array.from( d3.group(data, (d) => d.group), ([group, items]) => ({ group, cat: "total", val: d3.sum(items, (d) => d.val) }) ) ]; const maxTotal = d3.max(dataWithTotals, (d) => d.val); const scaledData = dataWithTotals.map((d) => ({ ...d, val: (vScaling * d.val) / maxTotal })); return Plot.plot({ width: 400, height: 400, margin: 50, caption, style: {fontSize: 22, fontWeight: "bold"}, x: { axis: null, paddingOuter: 0.5, paddingInner: 0, domain: ["total", "a", "b", "c", "d"] }, facet: {label: null}, fx: {padding: 0, tickPadding: 15}, insetLeft: 20, marks: [ Plot.rectY(scaledData, { x: "cat", y: "val", fx: "group", fill: baseClr, stroke: "black", strokeWidth: 2 }), Plot.dot(selData, { x: "cat", fx: "group", y: 0, dy: -10, fill: "black", r: 4 }), Plot.axisY([0, 100], {ticks: 1, label: null, strokeWidth: 2}), Plot.frame({anchor: "bottom", strokeWidth: 2}), Plot.frame({fx: ["A"], anchor: "left", strokeWidth: 2}) ] }); }4e:T668,function stackedBars(data, options = {}) { const {select = [], caption = ""} = options; const dataWithTotals = [ ...data, ...Array.from( d3.group(data, (d) => d.group), ([group, items]) => ({ group, cat: "total", val: d3.sum(items, (d) => d.val) }) ) ]; const maxTotal = d3.max(dataWithTotals, (d) => d.val); const scaledData = data.map((d) => ({ ...d, val: (vScaling * d.val) / maxTotal })); const selData = select .map((d) => d.split("")) .map(([group, cat]) => scaledData .filter((d) => d.group === group) .reduce( (acc, v) => v.cat <= cat ? {...acc, lastVal: v.val, cVal: acc.cVal + v.val} : {...acc}, { group, cat, cVal: 0 } ) ); return Plot.plot({ style: {fontSize: 20, fontWeight: "bold"}, width: 400, height: 400, margin: 50, caption, x: { tickPadding: 15, tickSize: 0, label: null, insetRight: 0, insetLeft: 50, paddingInner: 0.4 }, marks: [ Plot.rectY(scaledData, { x: "group", y: "val", z: "cat", fill: baseClr, stroke: "black", strokeWidth: 2 }), Plot.dot(selData, { x: "group", y: (d) => d.cVal - d.lastVal / 2, fill: "black", r: 4 }), Plot.axisY([0, 100], {ticks: 1, label: null, strokeWidth: 2}), Plot.frame({anchor: "bottom", strokeWidth: 2}), Plot.frame({anchor: "left", strokeWidth: 2}) ] }); }4f:[{"id":"5c86304396519e43adc441fe84cd2d85ad0e0838612791bfccf087d039f2cc1fb2b1b7a98629042cea7470e39acd516b87309d3d133b6aae81070941f706242e","href":"https://static.observableusercontent.com/files/5c86304396519e43adc441fe84cd2d85ad0e0838612791bfccf087d039f2cc1fb2b1b7a98629042cea7470e39acd516b87309d3d133b6aae81070941f706242e","name":"clevelandAndMcGillFig3.png","type":"image/png","lastModified":1765792684912.074,"size":105617},{"id":"ac9277fd73bc62e9118173ac1ca27afea18721f6cb74917ff1c793e163d504396a66cb7fffa2c43d02ceed24bc415234dcd45da707d45e95a06404d96f0c427f","href":"https://static.observableusercontent.com/files/ac9277fd73bc62e9118173ac1ca27afea18721f6cb74917ff1c793e163d504396a66cb7fffa2c43d02ceed24bc415234dcd45da707d45e95a06404d96f0c427f","name":"clevelandAndMcGillFig4.png","type":"image/png","lastModified":1765792694175.138,"size":160179},{"id":"826c62412a1c9e6bf4035f05ca5f182fa3c1f48c7c9883614f0f73a66f358b28fa53e906c4aba67e438d4cc51e4aac973f3546bfc5854487af04688c22b3adcf","href":"https://static.observableusercontent.com/files/826c62412a1c9e6bf4035f05ca5f182fa3c1f48c7c9883614f0f73a66f358b28fa53e906c4aba67e438d4cc51e4aac973f3546bfc5854487af04688c22b3adcf","name":"clevelandAndMcGillFig4Annotated.png","type":"image/png","lastModified":1765876916409.577,"size":139725},{"id":"9ae2c7ca17be24d0543769be90b98d6de6f03e3ecda26071bbd16349c1c2a426661ef34160e672e70323b3b931670ad307bf71618ed7d2ab650b4b57efe47271","href":"https://static.observableusercontent.com/files/9ae2c7ca17be24d0543769be90b98d6de6f03e3ecda26071bbd16349c1c2a426661ef34160e672e70323b3b931670ad307bf71618ed7d2ab650b4b57efe47271","name":"clevelandAndMcGillFig3Annotated@1.png","type":"image/png","lastModified":1765876916774.793,"size":186970}] 46:{"id":"311722edd141445d","slug":"stimulus-simulator","title":"Stimulus Simulator","thumbnail":"46aa5d4f332d5712eed79fb20d0dbd0287bc568138191d12a6499f418c25eb86","access_level":"public","create_time":"$D2025-12-12T09:03:54.952Z","update_time":"$D2026-09-24T01:44:03.408Z","view_time":null,"first_public_time":"$D2025-12-16T11:20:01.305Z","has_unpublished_edits":null,"fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024","bio":"Professor of Visual Analytics interested in design, geovisualization, visual storytelling and computational thinking.","following":false},"version":2011,"publish_version":2011,"role":null,"authored":false,"authors":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null,"bio":"Professor of Visual Analytics interested in design, geovisualization, visual storytelling and computational thinking.","following":false}],"members":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null,"role":"editor"},{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024","role":"viewer"}],"comments":[{"id":"a2850f3aa66fd296","reply_to_id":null,"content":"Check order of ABCDE in pie 🥧?","create_time":"$D2025-12-16T09:45:25.651Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"955e37df990d4e95","login":"jsndyks","name":"jason dykes","avatar_url":"https://avatars-next.observableusercontent.com/ce8c740e3f4f161e440b04f5d1f16368eb63cba559ce4c7bdec538f4316764d8","tier":null}},{"id":"bf068569d7ffb846","reply_to_id":"a2850f3aa66fd296","content":"Minor bug fixed.","create_time":"$D2025-12-16T11:09:50.894Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Stimulus Simulator","cells":[{"id":0,"value":"# Stimulus Simulator\n\n_Just about resisting the urge to call this a 'stimulator'._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1112,"value":"This notebook considers the experiments conducted by ${bib.cite(\"cleveland_graphical_1984\")} providing foundational empirical evidence for the effectiveness of value estimation from some common chart types. It includes the generation of random charts supporting replication studies of their experiments, as well as some considerations for the replicability and transferability of their approach and results.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1109,"value":"## 1. Position-length experiment","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"This experiment, asked subjects to judge the relative magnitude of pairs of values represented in grouped and stacked bar charts. Comparison tasks were one of five types as illustrated in Figure 4 of their paper (p.534):\n\n${await FileAttachment(\"clevelandAndMcGillFig4.png\").image({ width: 640 })}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"$48","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"### 1.1 Sample frame","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":268,"value":"Cleveland and McGill report generating numbers from the following distribution:\n\n${tex`10 \\times 10^{(i-1)/12}, i=1 \\dots 10`}\n\nThis yields 10 numbers ranging from 10 to 56.2:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":279,"value":"Plot.plot({\n x: {label: \"magnitude value\", tickSize: 0},\n marks: [\n Plot.dot(\n sFrame.map((d) => ({x: d})),\n {x: \"x\", fill: \"tan\", r: 5, stroke: \"black\"}\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"and therefore with a fixed interval on a log scale:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":310,"value":"Plot.plot({\n x: {label: \"magnitude value (log scale)\", tickSize: 0, type: \"log\"},\n marks: [\n Plot.dot(\n sFrame.map((d) => ({x: d})),\n {x: \"x\", fill: \"tan\", r: 5, stroke: \"black\"}\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"From these ${sFrame.length} simulated magnitude values, there are **${pairs.length}** possible pair-wise comparisons that could be made assuming, as Cleveland and McGill describe, no pairwise comparisons of equal magnitudes:\n\n

${pairs.map(([x1,x2],i)=>`${x1.toFixed(1)}/${x2.toFixed(1)}, ${[8,16,23,29,34,38,41,43].includes(i)?\"
\":\"\"}`)}

\n${groupedBars(t1, {\n select: [\"Aa\", \"Ab\"],\n caption: html`

Type 1

`\n})}\n${stackedBars(t2, {\n select: [\"Aa\", \"Ba\"],\n caption: html`

Type 2

`\n})}\n${groupedBars(t3, {\n select: [\"Aa\", \"Ba\"],\n caption: html`

Type 3

`\n})}\n${stackedBars(t4, {\n select: [\"Ad\", \"Bd\"],\n caption: html`

Type 4

`\n})}\n${stackedBars(t5, {\n select: [\"Ac\", \"Ad\"],\n caption: html`

Type 5

`\n})}\n

\n`);\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1837,"value":"The charts are shown juxtaposed on this page for comparison with Figure 4, although during the original experiment, they were presented one at a time in random order.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1292,"value":"## 2. Position-angle experiment","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1294,"value":"In a second experiment reported in the same paper, subjects were separately shown a pie chart and a bar chart (examples shown as Figure 3 in their paper) representing 5 values. The largest value was indicated with an `X` and subjects were asked to estimate the proportion of this larger value that each of the other 4 parts occupied. It is not entirely clear from the paper where the `X` was indicated, but it was mentioned to be on the 'answer sheet', so it is assumed here to be indirectly identified by the segment letter (A-E) and not directly on the chart.\n\n${await FileAttachment(\"clevelandAndMcGillFig3.png\").image({ width: 400 })}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1388,"value":"### 2.1 Sampling Process","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1304,"value":"As reported in the paper, each set of 5 numbers shown in the charts was created as follows:\n\n- 5 uniform random numbers generated and scaled so they summed to 100\n- No scaled value permitted that was less than 3 or greater than 39\n- All pairwise differences must be greater than 0.1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1391,"value":"The distribution of values produced under these constraints is shown below (simulated with 100,000 samples of 5 values). By definition, each permitted value ${tex`x`} is constrained between ${tex`3 < x < 39`}, but the summation to 100 constraint leads to an asymmetrical distribution. The flattening effect produced by the 'minimum difference between pairs' constraint is minimal given its small size (0.1).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1465,"value":"const regenQuints = view(Inputs.button(\"Regenerate 100,000 5-tuples\"));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1393,"value":"Plot.plot({\n width: 640,\n height: 300,\n x: {domain: [0, 40], label: \"x (constrained)\"},\n y: {label: \"frequency\"},\n marks: [\n Plot.rectY(\n posAngleSamples.flat(),\n Plot.binX({y: \"count\", interval: 1}, {x: \"val\", fill: \"tan\"})\n ),\n Plot.frame({anchor: \"bottom\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1729,"value":"This yields the following distribution of pairwise comparisons between the largest value in the 5-tuple and each of the others. Cleveland and McGill reported ratios from their ten 5-tuples used in their experiment as ranging from 10% to 99.7%. In this run of 100,000 samples the range is from ${d3.min(posAngleRatios,d=>d.ratio).toFixed(1)}% to ${d3.max(posAngleRatios,d=>d.ratio).toFixed(1)}%. The discrepancy is due to the relatively small probability of a sub-10% small-to-large ratio that likely only appears with larger sample sizes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1662,"value":"Plot.plot({\n width: 640,\n height: 300,\n x: {\n domain: [0, 100],\n tickFormat: (d) => `${d}%`,\n label: \"small-to-large ratio\"\n },\n marks: [\n Plot.rectY(\n posAngleRatios,\n Plot.binX({y: \"count\", interval: 2}, {x: \"ratio\", fill: \"tan\"})\n ),\n Plot.frame({anchor: \"bottom\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1502,"value":"### 2.2 Cleveland and McGill's test charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1781,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1499,"value":"### 2.3 Simulation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1790,"value":"As with the position-length experiments, the goal here was to generate charts that resembled Cleveland and McGill's test charts as closely as possible. The two design exceptions here were to fill mark interiors to reduce interior contrast, and to keep pie segment labels horizontal.\n\nBoth charts are shown juxtaposed on this page, although during the original experiment, they were presented one at a time in random order.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1509,"value":"const regenQunitSample = view(Inputs.button(\"New random sample\"));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1613,"value":"

\n${pieChart(posAngleData)}\n${barChart(posAngleData)}\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1748,"value":"_\"What are the percentages of the largest value in category **${posAngleMaxCat}** occupied by the values in categories **${[...posAngleData].map(d=>d.cat).sort().filter(d=>d!==posAngleMaxCat).join(\", \")}**?\"_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"## References\n\n${bib.bibliography()}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":227,"value":"_For data generation and counting:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":179,"value":"function pairwiseCombinations(xs) {\n return xs.map((v, i) => xs.slice(i + 1).map((w) => [v, w])).flat();\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"function addToFreqTable(freqTable, v, n = 1) {\n const entry = freqTable.find((d) => d.val === v);\n if (entry) {\n entry.freq += n;\n } else {\n freqTable.push({ val: v, freq: n });\n }\n return freqTable;\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"function ratioCounts(pairs) {\n const ratios = pairs\n .map(([v1, v2]) => Math.min(v1, v2) / Math.max(v1, v2))\n .sort((a, b) => a - b)\n .map((d) => Math.round(d * 100) / 100);\n\n return ratios.reduce((freqs, v) => addToFreqTable(freqs, v), []);\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"const sFrame = d3.range(1, 11).map((i) => 10 * Math.pow(10, (i - 1) / 12))","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"const pairs = pairwiseCombinations(sFrame)","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1675,"value":"const posAngleSamples = (() => {\n regenQuints; // Regenerate on button press\n const runs = [];\n for (let i = 0; i < 100000; i++) {\n runs.push(quintSample({minDiff: 0.1}));\n }\n return runs;\n})();","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1737,"value":"const posAngleRatios = posAngleSamples\n .flatMap(calcRatios)\n .map((d) => ({ratio: d}));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1505,"value":"regenQunitSample; // Regenerate sample on button press\nconst posAngleData = quintSample();","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1764,"value":"const posAngleMaxCat = [...posAngleData].sort((a, b) => b.val - a.val)[0].cat","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"$4c","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1159,"value":"function invalidSample(sample) {\n const gA = sample.filter((d) => d.group === \"A\");\n const gB = sample.filter((d) => d.group === \"B\");\n return (\n gA[0].val + gA[1].val + gA[2].val === gB[0].val + gB[1].val + gB[2].val ||\n d3.sum(gA, (d) => d.val) === d3.sum(gB, (d) => d.val)\n );\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"const magSample = d3.randomInt(0, sFrame.length);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"const pairSample = d3.randomInt(0, pairs.length);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1308,"value":"function quintSample(options = {}) {\n const {min = 3, max = 39, minDiff = 0.1} = options;\n let rs = Array(5).fill(0);\n let diffs,\n vals,\n it = 0;\n const maxIter = 1000;\n\n do {\n it++; // Precaution in case no values can be found in reasonable time.\n rs = rs.map((d) => Math.random());\n const total = d3.sum(rs);\n vals = rs.map((d) => (100 * d) / total);\n\n const sorted = [...vals].sort((a, b) => a - b);\n diffs = sorted.slice(1).reduce((acc, v, i) => {\n acc.push(v - sorted[i]);\n return acc;\n }, []);\n } while (\n it < maxIter &&\n (d3.min(vals) <= min || d3.max(vals) >= max || d3.min(diffs) <= minDiff)\n );\n\n if (it === maxIter) {\n throw Error(\"Maximum iterations reached\");\n }\n\n const cats = [\"A\", \"B\", \"C\", \"D\", \"E\"];\n return vals.map((d, i) => ({val: d, cat: cats[i]}));\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1660,"value":"function calcRatios(quint) {\n const sorted = [...quint].sort((a, b) => b.val - a.val);\n const maxVal = sorted[0].val;\n return sorted.slice(1).map((d) => (100 * d.val) / maxVal);\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"_For plotting sampled values:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1366,"value":"import {\n radialProj,\n pie,\n rose,\n radar,\n polarGrid,\n toPolar\n} from \"observable:@jwolondon/plot-gallery-radial\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"const baseClr = \"rgb(204,217,231)\";\nconst vScaling = 95; // Maximum scaled height of largest total (C & McG appear to use about 95% in Figure 4)","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$4d","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"$4e","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1369,"value":"function pieChart(data) {\n return Plot.plot({\n style: {fontSize: 22, fontWeight: \"bold\"},\n width: 300,\n height: 300,\n projection: radialProj, // Creates the radial projection\n marks: [\n pie([{val: 0}], {\n value: \"val\",\n strokeWidth: 6,\n stroke: \"black\",\n rotate: 90,\n outer: 0.75\n }),\n pie([...data].reverse(), {\n value: \"val\",\n fill: baseClr,\n strokeWidth: 3,\n stroke: \"black\",\n rotate: 90,\n outer: 0.75\n }),\n\n Plot.text(\n toPolar([...data].reverse(), {\n theta: \"val\",\n rotate: 90,\n r: 0.9\n }),\n {text: \"cat\", x: \"lon\", y: \"lat\"}\n )\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1514,"value":"function barChart(data) {\n return Plot.plot({\n style: {fontSize: 22, fontWeight: \"bold\"},\n width: 300,\n height: 300,\n x: {label: null, tickSize: 0},\n marks: [\n Plot.rectY(data, {\n x: \"cat\",\n y: \"val\",\n fill: baseClr,\n stroke: \"black\",\n strokeWidth: 3,\n insetRight: 2,\n insetLeft: 2\n }),\n Plot.axisY([0, 40], {ticks: 1, label: null, strokeWidth: 3}),\n Plot.frame({anchor: \"left\", strokeWidth: 3}),\n Plot.frame({anchor: \"bottom\", strokeWidth: 3})\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"_For referencing:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"import { Refs } from \"observable:@gicentre/references-class\"","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"const bib = Refs.create(`\n@article{cleveland_graphical_1984,\n title={Graphical perception: Theory, experimentation, and application to the development of graphical methods},\n author={Cleveland, William S and McGill, Robert},\n journal={Journal of the American statistical association},\n volume={79},\n number={387},\n pages={531--554},\n year={1984},\n publisher={Taylor \\& Francis},\n doi={10.1080/01621459.1984.10478080}\n}\n`);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"_For page layout and styles:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"import {defaultStyle} from \"observable:@jwolondon/utilities-cdt-2026\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"defaultStyle()","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"2"}} 47:"$46:body"