31: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.32: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:33:T410,{ 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 } ]; return 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 }) ] }); }34:T52e,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.35: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]; }36:T5ae,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 }) ] }); }37:T676,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 }) ] }); }38:[{"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}] 2f:{"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"},{"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"},{"id":1109,"value":"## 1. Position-length experiment","pinned":false,"hidden":false,"mode":"md"},{"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):","pinned":false,"hidden":false,"mode":"md"},{"id":58,"value":"FileAttachment(\"clevelandAndMcGillFig4.png\").image({ width: 640 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":170,"value":"### 1.1 Sample frame","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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":"ojs"},{"id":518,"value":"and therefore with a fixed interval on a log scale:","pinned":false,"hidden":false,"mode":"md"},{"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":"ojs"},{"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)?\"
\":\"\"}`)}

","pinned":false,"hidden":false,"mode":"md"},{"id":485,"value":"The frequencies of _small : large_ ratios possible from these 45 pairwise combinations vary, but a consequence of the fixed log intervals is that there is one of only 9 possible ratios between any pair of values. There are 9 times as many close ratios (83%) as extreme ratios (18%).\n\nThe reported results (p.540), and especially the error charts (Figure 13) suggest the 10 true ratios judged by each subject were\n\n18%, 26%, 38%, 2 x 46%, 56%, 2 x 68% and 2 x 83%.\n\nIt would appear therefore that no subjects were exposed to the 22% or 32% ratios. It is not clear from the reported results which of the length comparisons were used to generate these ratios (all but the 18% ratios could be generated in more than one way).","pinned":false,"hidden":false,"mode":"md"},{"id":371,"value":"{\n const data = pairs.flatMap(([x1, x2]) => {\n const ratio = (Math.min(x1, x2) / Math.max(x1, x2)).toFixed(2);\n return [\n { xa: x1, xb: x2, val: x1, bar: \"a\", r: ratio },\n { val: x2, xa: x1, xb: x2, bar: \"b\", r: ratio }\n ];\n });\n\n return Plot.plot({\n width: 480,\n height: 480,\n x: { axis: null, paddingInner: 0.15, paddingOuter: 0.5 },\n y: { axis: null },\n color: {\n type: \"categorical\",\n legend: true,\n reverse: true,\n tickFormat: (d) => `${Math.round(d * 100)}%`\n },\n fx: { tickFormat: (d) => `${d.toFixed(2)}${d < 13 ? \"\\n(larger)\" : \"\"}` },\n fy: { tickFormat: (d) => `${d < 11 ? \"smaller\\n\" : \"\"}${d.toFixed(2)}` },\n facet: { label: null },\n marks: [\n Plot.rectY(data, { x: \"bar\", y: \"val\", fill: \"r\", fx: \"xb\", fy: \"xa\" })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1840,"value":"It should be noted that 5 of the 9 ratios are within 2 percentage points of their rounded equivalent (68%, 38%, 32%, 22% and 18%). If subjects chose to describe ratios as rounded percentages to nearest 10, it is possible that rounding could result in a small but systematic increase in accuracy of people's judgement scores. However, the authors suggest rounding occurred to the nearest 5 percentage points (not 10), and given the absence of 22% and 32% and two instances of 46% and 83%, it is unlikely this had an effect on their reported results.","pinned":false,"hidden":false,"mode":"md"},{"id":535,"value":"### 1.2 Sampling Process","pinned":false,"hidden":false,"mode":"md"},{"id":537,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":1285,"value":"viewof regenRuns = Inputs.button(\"Regenerate 10,000 runs\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1063,"value":"{\n regenRuns; // Allow new samples to be generated on button press\n const data = [];\n\n for (let i = 0; i < 10000; i++) {\n data.push(createSample().flat());\n }\n const freqData = [\n ...data\n .flatMap((d) => d.map((d) => d.val))\n .reduce((freqs, v) => freqs.set(v, (freqs.get(v) || 0) + 1), new Map())\n ].map(([v, f]) => ({ mag: v.toFixed(2), freq: f }));\n\n return Plot.plot({\n width: 400,\n height: 200,\n marginLeft: 50,\n x: { type: \"band\", label: \"Simulated magnitude\" },\n y: { label: \"Frequency\" },\n marks: [Plot.rectY(freqData, { x: \"mag\", y: \"freq\", fill: \"tan\" })]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1849,"value":"Note however, this represents a random selection from the 45 ratios (brown bars below), not the 10 selected ones reported in the paper (red dots below). A true uniform random selection from the candidate magnitudes will tend to have fewer low ratios (i.e. big contrasts in magnitude) than Cleveland and McGill's sample.","pinned":false,"hidden":false,"mode":"md"},{"id":1851,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"### 1.3 Cleveland and McGill's test charts","pinned":false,"hidden":false,"mode":"md"},{"id":1130,"value":"Looking the charts and experimental setup in more detail, any replication study should consider the degree to which results might (a) reflect very specific circumstances of the original experiments; (b) the transferability of the specific results to the more general case of chart magnitude estimation.\n\nSome issues to consider:\n\n- The selection of the original subjects of the test\n- Each chart 'filled a large proportion of the [8.5 x 11 inch] page' (p.539), so eye gaze would likely be wider than typical modern screen-based chart presentation. This is especially the case for comparison types 2, 3 and 4 that involve moving between more widely separated bars.\n- Charts had no interior fill, so there was high contrast between bar boundaries and both the interior and exterior. This is less common than modern filled chart marks.\n- There were a number of idiosyncrasies in the design of the experimental charts as detailed below:","pinned":false,"hidden":false,"mode":"md"},{"id":1041,"value":"FileAttachment(\"clevelandAndMcGillFig4Annotated.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1143,"value":"### 1.4 Simulation","pinned":false,"hidden":false,"mode":"md"},{"id":1151,"value":"The goal here was to generate the charts as closely as possible to Cleveland and McGill's test charts. One design exception was to fill the interior of each bar to reduce higher interior contrast between adjacent bars or bar segments.","pinned":false,"hidden":false,"mode":"md"},{"id":593,"value":"viewof regenSample = Inputs.button(\"New random sample\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"{\n regenSample;\n const [t1, t2, t3, t4, t5] = createSample();\n return md`\n

\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":"ojs"},{"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"},{"id":1292,"value":"## 2. Position-angle experiment","pinned":false,"hidden":false,"mode":"md"},{"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.","pinned":false,"hidden":false,"mode":"md"},{"id":1297,"value":"FileAttachment(\"clevelandAndMcGillFig3.png\").image({ width: 400 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1388,"value":"### 2.1 Sampling Process","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":1465,"value":"viewof regenQuints = Inputs.button(\"Regenerate 100,000 5-tuples\")","pinned":false,"hidden":false,"mode":"ojs"},{"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":"ojs"},{"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"},{"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":"ojs"},{"id":1502,"value":"### 2.2 Cleveland and McGill's test charts","pinned":false,"hidden":false,"mode":"md"},{"id":1781,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":1777,"value":"FileAttachment(\"clevelandAndMcGillFig3Annotated@1.png\").image({ width: 640 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1822,"value":"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.","pinned":false,"hidden":false,"mode":"md"},{"id":1499,"value":"### 2.3 Simulation","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":1509,"value":"viewof regenQunitSample = Inputs.button(\"New random sample\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1613,"value":"

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

","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":50,"value":"## References","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"bib.bibliography()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":227,"value":"_For data generation and counting:_","pinned":false,"hidden":false,"mode":"md"},{"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":"ojs"},{"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":"ojs"},{"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":"ojs"},{"id":172,"value":"sFrame = d3.range(1, 11).map((i) => 10 * Math.pow(10, (i - 1) / 12))","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"pairs = pairwiseCombinations(sFrame)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1675,"value":"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":"ojs"},{"id":1737,"value":"posAngleRatios = posAngleSamples.flatMap(calcRatios).map((d) => ({ ratio: d }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1505,"value":"posAngleData = {\n regenQunitSample; // Regenerate sample on button press\n return quintSample();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1764,"value":"posAngleMaxCat = [...posAngleData].sort((a, b) => b.val - a.val)[0].cat","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"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":"ojs"},{"id":570,"value":"magSample = d3.randomInt(0, sFrame.length)","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"pairSample = d3.randomInt(0, pairs.length)","pinned":false,"hidden":false,"mode":"ojs"},{"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":"ojs"},{"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":"ojs"},{"id":248,"value":"_For plotting sampled values:_","pinned":false,"hidden":false,"mode":"md"},{"id":1366,"value":"import {\n radialProj,\n pie,\n rose,\n radar,\n polarGrid,\n toPolar\n} from \"@jwolondon/gallery-radial\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"baseClr = \"rgb(204,217,231)\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":948,"value":"vScaling = 95 // Maximum scaled height of largest total (C & McG appear to use about 95% in Figure 4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"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":"ojs"},{"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":"ojs"},{"id":26,"value":"_For referencing:_","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"import { Refs } from \"@gicentre/references-class\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"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":"ojs"},{"id":7,"value":"_For page layout and styles:_","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"import { setFonts, setPageStyle } from \"@jwolondon/cdt-utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"setFonts()","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"setPageStyle()","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}