2e:null 2f:["$","title",null,{"children":"Visualizing Electoral Bias | Jo Wood | Observable"}] 34:T760,function numWithSymbols(options = {}) { const {fs = 2, clrs = true, symbols = true} = options; const rows = [ ["diamond", "◈", 1], ["circle", "◎", 2], ["square", "▩", 3], ["circle", "◎", 4], ["triangle", "◃", 5], ["triangle", "◃", 6], ["circle", "◎", 7], ["diamond", "◈", 8], ["triangle", "◃", 9], ["diamond", "◈", 10], ["square", "▩", 11] ]; const colours = { diamond: flexoki.palette.magenta[1], circle: flexoki.palette.purple[1], square: flexoki.palette.orange[1], triangle: flexoki.palette.cyan[1] }; const root = html`

`; root.style.cssText = ` display: inline-block; line-height: 1; `; const table = document.createElement("table"); table.style.cssText = ` width: fit-content; margin: 0; border-collapse: separate; border-spacing: 0; font-size: ${fs}rem; line-height: 1; border-right: ${fs}px solid #555; border-bottom: ${fs}px solid #555; `; const cellStyle = ` min-width: ${fs * 2}rem; padding: ${fs / 10}rem ${fs / 4}rem; border-top: ${fs}px solid #555; border-left: ${fs}px solid #555; text-align: center; `; const cell = (text, kind, className = "") => { const td = document.createElement("td"); td.textContent = text; td.className = className; td.style.cssText = cellStyle; if (clrs) { td.style.background = colours[kind]; } if (className === "num") { td.style.fontWeight = "900"; } return td; }; const tbody = document.createElement("tbody"); for (const [kind, symbol, num] of rows) { const tr = document.createElement("tr"); if (symbols) { tr.append(cell(symbol, kind)); } tr.append(cell(String(num), kind, "num")); tbody.append(tr); } table.append(tbody); root.append(table); return root; }35:T7f3,function controlLegend(options = {}) { const {w = 640} = options; const data = [...new Set(Object.values(controlLookup))].map((party) => ({ party, code: party.slice(0, 3), noc: party.includes("NOC"), x: party.includes("NOC") ? 1 : 0 })); const codes = ["Lab", "Con", "Gre", "Lib", "Ref", "Asp"]; const labels = codes.map((code) => { const entries = data.filter((d) => d.code === code); return { code, party: entries.find((d) => !d.noc)?.party ?? entries[0].party, paired: entries.some((d) => d.noc) && entries.some((d) => !d.noc) }; }); return Plot.plot({ style: {background: flexoki.paper}, width: w, height: w / 10, margin: 0, marginLeft: w / 15, axis: null, fx: {domain: codes, padding: 0.08}, x: {domain: [0, 1], padding: 0.1}, y: {domain: [0, 1], padding: 0}, marks: [ Plot.cell(data, { x: "x", fx: "code", y: 0, fill: (d) => partyClrs[d.code], fillOpacity: (d) => (d.noc ? 0.4 : 1), stroke: "black", strokeWidth: 0.2 }), // No overall control Plot.text( data.filter((d) => d.noc), { fx: "code", x: "x", y: 0, text: (d) => "No overall control", lineWidth: 8, fontSize: w / 80, fontStyle: "italic" } ), // Single square: align the label with its x = 0 band. Plot.text( labels.filter((d) => !d.paired), { fx: "code", x: 0, text: "party", frameAnchor: "bottom", dy: -w / 45, fontSize: w / 45, fontWeight: "bold" } ), // Paired squares: centre the label within the facet. Plot.text( labels.filter((d) => d.paired), { fx: "code", text: "party", frameAnchor: "bottom", dy: -w / 45, fontSize: w / 45, fontWeight: "bold" } ) ] }); }36:T18a5,function biasMatrix(data, options = {}) { const { clrs = "base", title = "All parties", chi = false, maxChi = 25, maxCountFactor = 2.5, w = 480, showExpected = false, tauDigits = 2, // Current data format defaults groupKey = (d) => `${d.year}|${d.WD25CD}|${d.party}`, rankValue = (d) => d.partyRank, alphaValue = (d) => d.partyAlpha, candidatesValue = (d) => d.partyCandidates, // Useful if you want only 3-candidate party slates candidates = null } = options; const rows = data.filter((d) => { const partyRank = rankValue(d); const partyAlpha = alphaValue(d); const partyCandidates = candidatesValue(d); return ( Number.isFinite(partyRank) && Number.isFinite(partyAlpha) && Number.isFinite(partyCandidates) && (candidates == null || partyCandidates === candidates) ); }); const maxRank = d3.max(rows, candidatesValue) ?? 0; const key = (partyRank, partyAlpha) => `${partyRank}|${partyAlpha}`; const observed = new Map( d3 .rollups(rows, (v) => v.length, rankValue, alphaValue) .flatMap(([partyRank, alphaRows]) => alphaRows.map(([partyAlpha, count]) => [ key(partyRank, partyAlpha), count ]) ) ); function kendallTauB(counts, maxRank) { let concordant = 0; let discordant = 0; let tiedRank = 0; let tiedAlpha = 0; for (let r1 = 1; r1 <= maxRank; r1++) { for (let a1 = 1; a1 <= maxRank; a1++) { const n1 = counts.get(key(r1, a1)) ?? 0; if (!n1) { continue; } for (let r2 = 1; r2 <= maxRank; r2++) { for (let a2 = 1; a2 <= maxRank; a2++) { const n2 = counts.get(key(r2, a2)) ?? 0; if (!n2 || r2 < r1 || (r2 === r1 && a2 <= a1)) { continue; } const pairs = n1 * n2; if (r1 === r2) { tiedRank += pairs; } else if (a1 === a2) { tiedAlpha += pairs; } else if ((r2 - r1) * (a2 - a1) > 0) { concordant += pairs; } else { discordant += pairs; } } } const sameCellPairs = (n1 * (n1 - 1)) / 2; tiedRank += sameCellPairs; tiedAlpha += sameCellPairs; } } const denom = Math.sqrt( (concordant + discordant + tiedRank) * (concordant + discordant + tiedAlpha) ); return denom ? (concordant - discordant) / denom : 0; } const tau = showExpected ? 0 : kendallTauB(observed, maxRank); const titleText = `${title}\nKendall’s τ = ${tau.toFixed(tauDigits)}\n`; const expected = new Map(); const partyBallotGroups = d3.groups(rows, groupKey).map(([, rows]) => rows); for (const groupRows of partyBallotGroups) { const m = groupRows.length; for (let partyRank = 1; partyRank <= Math.min(m, maxRank); partyRank++) { for ( let partyAlpha = 1; partyAlpha <= Math.min(m, maxRank); partyAlpha++ ) { const k = key(partyRank, partyAlpha); expected.set(k, (expected.get(k) ?? 0) + 1 / m); } } } const cells = d3 .cross( d3.range(1, maxRank + 1), d3.range(1, maxRank + 1), (partyRank, partyAlpha) => { const k = key(partyRank, partyAlpha); const count = observed.get(k) ?? 0; const expectedCount = expected.get(k) ?? 0; const residual = expectedCount > 0 ? (count - expectedCount) / Math.sqrt(expectedCount) : undefined; return { partyRank, partyAlpha, count, expected: expectedCount, residual, residualCapped: residual == null ? undefined : Math.max(-maxChi, Math.min(maxChi, residual)) }; } ) .filter((d) => d.expected > 0) .map((d) => ({ ...d, shownValue: showExpected ? d.expected : d.count, fillValue: showExpected ? 0 : chi ? d.residualCapped : d.count })); const expCount = d3.max(cells, (d) => d.expected) ?? 0; const darkCount = expCount * maxCountFactor; const fSize = Math.sqrt(w / 5); const textFill = (d) => showExpected ? "black" : chi ? Math.abs(d.residual) > maxChi * 0.36 ? "white" : "black" : d.count > expCount * 0.85 ? "white" : "black"; return Plot.plot({ margin: w / 7, marginRight: w / 10, marginTop: w / 10, style: {background: flexoki.paper}, width: w, height: w, color: chi ? {scheme: "BrBG", domain: [-maxChi, maxChi], pivot: 0} : {interpolate: flexoki.interpolate(clrs), domain: [0, darkCount]}, x: {domain: d3.range(1, maxRank + 1), reverse: true}, y: {domain: d3.range(1, maxRank + 1)}, marks: [ Plot.text([titleText], { frameAnchor: "top", fontSize: fSize * 1.6, fontWeight: "bold", lineHeight: 1.1, dy: -4 * fSize }), Plot.axisX({ tickSize: 0, tickPadding: 8, label: "Rank of votes received within party", labelOffset: fSize * 4, tickFormat: ordinal, fontSize: fSize * 1.4 }), Plot.axisY({ tickSize: 0, tickPadding: 8, label: "Alphabetical ballot order within party", labelOffset: fSize * 6, tickFormat: ordinal, fontSize: fSize * 1.4 }), Plot.rect(cells, { x: "partyRank", y: "partyAlpha", fill: "fillValue", stroke: "black", strokeWidth: 0.2 }), Plot.text(cells, { x: "partyRank", y: "partyAlpha", text: (d) => (showExpected ? Math.round(d.shownValue) : d.shownValue), fill: textFill, fontSize: fSize * 2.5 }), !showExpected && Plot.text(cells, { x: "partyRank", y: "partyAlpha", text: (d) => `(expected ${Math.round(d.expected)}${ chi ? "\nz=" + d.residual.toFixed(1) : "" })`, fill: textFill, fontSize: fSize, dy: fSize * 2 }), Plot.frame({strokeWidth: 0.3}) ].filter(Boolean) }); }37:[{"id":"1bc61a109ac8d309b7435f445a510cae456af307fb5f0670ec2b08b88065ad207995c2ff943d86f5ffb40d7bf8d197ba70f2e48e6dd0fa70a4eafb3088bce9b7","href":"https://static.observableusercontent.com/files/1bc61a109ac8d309b7435f445a510cae456af307fb5f0670ec2b08b88065ad207995c2ff943d86f5ffb40d7bf8d197ba70f2e48e6dd0fa70a4eafb3088bce9b7","name":"londonDataStore.png","type":"image/png","lastModified":1783584481172.382,"size":209426},{"id":"0328c84d955bbfcd7e79f03c0ceaf4c0415fb1e2f9ec9a4fd27af19c283c12a27a0b3032015a9e1741f9632a790b02c38a437193aea6b6fa3f62a61606cb5960","href":"https://static.observableusercontent.com/files/0328c84d955bbfcd7e79f03c0ceaf4c0415fb1e2f9ec9a4fd27af19c283c12a27a0b3032015a9e1741f9632a790b02c38a437193aea6b6fa3f62a61606cb5960","name":"partyControl.csv","type":"text/csv","lastModified":1783240850245.075,"size":1481},{"id":"ce0145fde0daadecb711be91d0c962301c3a026e185e41de24b8947a3eaee52dfd6593eb7cb6352566c06fce9ca692d8e39a0c5716ea53dfa2bd2eb90e4169ec","href":"https://static.observableusercontent.com/files/ce0145fde0daadecb711be91d0c962301c3a026e185e41de24b8947a3eaee52dfd6593eb7cb6352566c06fce9ca692d8e39a0c5716ea53dfa2bd2eb90e4169ec","name":"bluesky.png","type":"image/png","lastModified":1789937782000,"size":6197},{"id":"f195934da25ca1d5c10a12eb51b9444eb45300358a9e4fc69b1265f29276bafa70ed16000ab9dc5908306dd146f2ac8d942a32ce7269be44d192af85fd69393f","href":"https://static.observableusercontent.com/files/f195934da25ca1d5c10a12eb51b9444eb45300358a9e4fc69b1265f29276bafa70ed16000ab9dc5908306dd146f2ac8d942a32ce7269be44d192af85fd69393f","name":"emailSmall.png","type":"image/png","lastModified":1789937779000,"size":21364},{"id":"c3488ded3b6671d2feaed960cacfefe0b2107a23e80e764d34b66a84762b7f7fbaae3fcebb5985e7196b59ed6d5d86e76018b0dae270facea56fc9c453818306","href":"https://static.observableusercontent.com/files/c3488ded3b6671d2feaed960cacfefe0b2107a23e80e764d34b66a84762b7f7fbaae3fcebb5985e7196b59ed6d5d86e76018b0dae270facea56fc9c453818306","name":"democracyClub.png","type":"image/png","lastModified":1789937774000,"size":637444},{"id":"1f91d08cebac2b18adb3f194f3c0406f280ce7d29e250a60f828be99debaf1840d069d0e728096d14e371691d94d533e7bb96e4cc89ee50068fd1f38341a8444","href":"https://static.observableusercontent.com/files/1f91d08cebac2b18adb3f194f3c0406f280ce7d29e250a60f828be99debaf1840d069d0e728096d14e371691d94d533e7bb96e4cc89ee50068fd1f38341a8444","name":"ballotPaper.jpg","type":"image/jpeg","lastModified":1789937838000,"size":269037}] 32:{"id":"60e9e33f1079cfe1","slug":"ldw-visualising-electoral-bias","title":"Visualizing Electoral Bias","thumbnail":"8c40845b50111a240f38f018d29d4518a11b4c3b73cfaa72915753b8feb559dc","access_level":"public","create_time":"$D2026-07-04T07:38:56.465Z","update_time":"$D2026-09-22T06:37:14.692Z","view_time":null,"first_public_time":"$D2026-09-21T08:03:29.108Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024"},"version":1441,"publish_version":1441,"role":null,"authored":false,"authors":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null}],"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":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"e02897f1b4db0237","slug":"slideshows","title":"slideshows","owner":{"id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood"}},"type":"notebook","body":{"title":"Visualizing Electoral Bias","cells":[{"id":0,"value":"# Visualizing Electoral Bias","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1193,"value":"Slideshow for my [London Data Week presentation](https://londondataweek.org/ldw26-events/#election-bias-and-ballot-mapping).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":212,"value":"slideshow(content, {invalidation, display})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1199,"value":"_Click somewhere in presentation below and press 'F' for full screen.
\nArrow keys to navigate between slides._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"spacer()","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1210,"value":"_Slideshow library and custom styles:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1209,"value":"import {\n slideshow,\n slide\n} from \"observable:@jwolondon/observable-embedded-slideshow\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1211,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1195,"value":"_Slideshow content:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1198,"value":"display(md`\\`▶ Introduction\\``);\n\nconst s1 = async () => md`\n## Election bias and ballot mapping\n\n### Jo Wood\n_Professor of Visual Analytics_
\n_City St George's, University of London_\n

\n\n

\n j.d.wood@city.ac.uk\n\n
\n\n

\n @jwoLondon.bsky.social\n`;\n\nconst s2 = () => md`\n_Thanks to_\n### Jason Dykes and Aidan Slingsby\n### Blazej Barski, Gursaiv Kaur, Rohan Ram and Beth Taylor\n`;","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"display(md`\\`▶ Ballot choices\\``);\n\nconst s3 = () => [\n numWithSymbols({fs: 3, clrs: false, symbols: false}),\n md`### Choose one number`\n];\nconst s4 = () => [\n numWithSymbols({fs: 3, clrs: true, symbols: true}),\n md`### Choose one number`\n];\nconst s5 = () => [\n numWithSymbols({fs: 3, clrs: true, symbols: true}),\n md`### Choose up to three numbers`\n];\nconst s6 = () => [\n numWithSymbols({fs: 3, clrs: true, symbols: true}),\n md`### Choose up to three numbers\nYour choices only count if among the three most popular.`\n];\nconst s7 = async () => [\n await FileAttachment(\"ballotPaper.jpg\").image({width: 420}),\n md`### Choose up to three candidates\nYour choices only count if among the three most popular.`\n];","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"display(md`\\`▶ Mapping results\\``);\n\nconst s8 = () => md`## How might we map the results?`;\nconst s9 = () => [\n md`**Local Authority Control by Party**`,\n controlLegend({w: 800}),\n controlMap({w: 800})\n];\nconst s10 = ({view}) => {\n const player = Player({secondsPerLoop: 3, alternate: true});\n return [view(player, (t) => gridAnimation(t, {w: 900})), player];\n};","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1201,"value":"display(md`\\`▶ Candidate level mapping\\``);\n\nconst s11 = () => md`## Candidate-level mapping`;\nconst s12 = async () => [\n await FileAttachment(\"democracyClub.png\").image({width: 1200}),\n md`### democracyclub.org.uk`\n];\nconst s13 = ({span}) => [\n html`

${ballotMapElectedBorough(results, {\n year: 2026,\n borough: \"Camden\",\n w: 640,\n h: 640,\n boroughLabel: \"LAD25NM\"\n })}

`,\n html`

← alphabetically first within party
\n← alphabetically second within party
\n← alphabetically third within party

`,\n span(electedLegend({w: 1330})) // Allow legend to span columns\n];\nconst s14 = () => md`## A null hypothesis`;\nconst s15 = () =>\n ballotMapElected(nullData, {\n year: 2026,\n w: 1060,\n shuffled: true,\n showTips: false\n });\nconst s16 = () => ballotMapElected(results, {year: 2026, w: 1060});","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"display(md`\\`▶ Who was elected\\``);\n\nconst s17 = () => md`## Who was elected / not elected because of their name?`;\nconst s18 = () => md`\n| Party | Elected with name advantage | Denied by name disadvantage | Net seats |\n| ----- | --------------------------: | --------------------------: | --------: |\n| Labour | 53 | 69 | -16 |\n| Aspire | 0 | 4 | -4 |\n| Conservatives | 19 | 17 | 2 |\n| Reform | 10 | 8 | 2 |\n| Lib Dems | 11 | 5 | 6 |\n| Greens | 40 | 27 | 13 |\n| Others | 7 | 10 | -3 |\n| **Total** | **140** | **140** | **0** |\n\n_Around **8%** of the c.1,800 councillors are likely elected because of name bias effects._\n`;\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1204,"value":"display(md`\\`▶ Vote ordering\\``);\n\nconst s19 = () => md`## Vote ordering`;\nconst s20 = ({span}) => [\n ballotMapVoteRanksBorough(results, {\n year: 2026,\n borough: \"Camden\",\n w: 640,\n h: 640,\n boroughLabel: \"LAD25NM\"\n }),\n md`

\n← alphabetically first within party

\n← alphabetically second within party

\n← alphabetically third within party\n

`,\n span(rankLegend({w: 1330})) // Allow legend to span columns\n];\nconst s21 = () => md`## The null hypothesis (again)`;\nconst s22 = () =>\n ballotMapVoteRanks(nullData, {\n year: 2026,\n w: 1060,\n shuffled: true,\n showTips: false\n });\nconst s23 = () => ballotMapVoteRanks(results, {year: 2026, w: 1060});","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1205,"value":"display(md`\\`▶ Trends over time\\``);\n\nconst s24 = () => md`## Trends over time`;\nconst s25 = async () => [\n await FileAttachment(\"londonDataStore.png\").image({width: 1200}),\n md`### data.london.gov.uk`\n];\nconst s26 = ({view}) => {\n const ys = Inputs.range([2006, 2026], {label: \"Year\", step: 4, value: 2006});\n return [view(ys, (y) => ballotMapElected(results, {year: y, w: 1060})), ys];\n};\nconst s27 = ({view}) => {\n const ys = Inputs.range([2006, 2026], {label: \"Year\", step: 4, value: 2006});\n return [view(ys, (y) => ballotMapVoteRanks(results, {year: y, w: 1060})), ys];\n};","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1206,"value":"display(md`\\`▶ Measuring name bias\\``);\n\nconst s28 = () => md`## Measuring name bias`;\nconst s29 = () => [\n biasMatrix(nullData, {\n title: \"Evenly spread party votes (null hypothesis)\",\n chi: true,\n showExpected: true\n }),\n biasMatrix(results2026, {title: \"2026 election data\", chi: true}),\n chiLegend({w: 640})\n];\nconst s30 = ({view}) => {\n const ps = Inputs.radio([\"All\", \"Grn\", \"Lab\", \"LD\", \"Con\"], {\n label: \"Party\",\n value: \"All\"\n });\n return [\n view(ps, (party) => ballotMapTimeline(results, {party, w: 1060})),\n ps\n ];\n};\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1207,"value":"display(md`\\`▶ Conclusions\\``);\nconst s31 = () => md`## Some concluding remarks`;\nconst s32 = () => md`\n### Alphabetic ordering bias has real effects (8% of London councillors)\n### Visualization is valuable in uncovering structures and biases in data\n### Name bias a useful indicator of shifting political allegiances\n`;","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1208,"value":"const content = [\n slide.central(s1),\n slide.central(s2),\n slide.columns(s3),\n slide.columns(s4),\n slide.columns(s5),\n slide.columns(s6),\n slide.columns(s7),\n slide.central(s8, {position: \"upper\"}),\n slide.central(s9),\n slide.central(s10),\n slide.central(s11, {position: \"upper\"}),\n slide.central(s12),\n slide.columns(s13),\n slide.central(s14, {position: \"upper\"}),\n slide.fit(s15),\n slide.fit(s16),\n slide.central(s17, {position: \"upper\"}),\n slide.central(s18),\n slide.central(s19, {position: \"upper\"}),\n slide.columns(s20),\n slide.central(s21, {position: \"upper\"}),\n slide.fit(s22),\n slide.fit(s23),\n slide.central(s24, {position: \"upper\"}),\n slide.central(s25),\n slide.central(s26),\n slide.central(s27),\n slide.central(s28, {position: \"upper\"}),\n slide.columns(s29),\n slide.central(s30),\n slide.central(s31, {position: \"upper\"}),\n slide.central(s32)\n];","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"_Geo data:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"const londonGeo = await d3\n .json(\"https://gicentre.github.io/data/geoTutorials/londonBoroughs.json\")\n .then((feats) => topojson.feature(feats, feats.objects.boroughs));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"const londonProj = d3.geoTransverseMercator().rotate([2, 0]);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"const londonCoords = (() => {\n // Select largest polygon ring in a multipolygon\n const getFeaturePoly = (feat) => {\n if (feat.geometry.type === \"MultiPolygon\") {\n const maxPoly = ([aMax, coords], cs) => {\n const area = d3.polygonArea(cs.flat());\n return area > aMax ? [area, cs] : [aMax, coords];\n };\n return feat.geometry.coordinates.reduce(maxPoly, [0, []])[1];\n }\n return feat.geometry.coordinates;\n };\n\n const geoCoords = londonGeo.features.map(getFeaturePoly).flat();\n const coords = geoCoords.map((feat) => feat.map(londonProj));\n const xDomain = d3.extent(coords.flat().map(([x, y]) => x));\n const yDomain = d3.extent(coords.flat().map(([x, y]) => y));\n const pad = (1 - (yDomain[1] - yDomain[0]) / (xDomain[1] - xDomain[0])) / 2;\n const xSc = d3.scaleLinear().domain(xDomain).range([0, 1]);\n const ySc = d3\n .scaleLinear()\n .domain(yDomain)\n .range([pad, 1 - pad]);\n return coords.map((feat) => feat.map(([x, y]) => [xSc(x), ySc(y)]));\n})();","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"const londonGrid = await d3.csv(\n \"https://gicentre.github.io/data/geoTutorials/londonCentroidsAndGrid.csv\"\n);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"// Wrap polygon coordinates in a geoJSON object\nfunction polygonsToGeo(polygons) {\n const closeRing = (ring) =>\n ring[0][0] === ring.at(-1)[0] && ring[0][1] === ring.at(-1)[1]\n ? ring\n : [...ring, ring[0]];\n\n return {\n type: \"FeatureCollection\",\n features: polygons.map((ring, i) => ({\n type: \"Feature\",\n properties: {id: i},\n geometry: {type: \"Polygon\", coordinates: [closeRing(ring)]}\n }))\n };\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"_For number choice examples:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":611,"value":"$34","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":274,"value":"_Results data:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":284,"value":"import {createLookup} from \"observable:@jwolondon/utilities-cdt-2026\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"const controlData = await FileAttachment(\"partyControl.csv\").csv();\nconst controlLookup = createLookup(controlData, {\n key: \"GSSCode\",\n value: \"shortControl\"\n});","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"import {results} from \"observable:@jwolondon/london-ballot-bias-trends-over-time\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"const results2026 = results.filter((d) => d.year === 2026);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"_For interpolation between geo and grid:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"import * as flubber from \"npm:flubber@0.4\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"// Interpolated borough coordinates based on value of t [0,1]\nfunction interplBoroughs(t) {\n return flubber.interpolateAll(londonCoords, normGrid, {\n string: false,\n single: true\n })(d3.easeCubicInOut(t));\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"// London grid normalised to [0,1] space\nconst normGrid = (() =>\n londonGrid.map((feat) => {\n const [cx, cy] = [feat.gridCol / 9, 0.05 + feat.gridRow / 9];\n const gw = 1 / 18.0;\n return [\n [cx - gw, cy - gw],\n [cx + gw, cy - gw],\n [cx + gw, cy + gw],\n [cx - gw, cy + gw]\n ];\n }))();","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"_For shuffling of names / alpha ranking (null hypothesis distributions):_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":899,"value":"function nullNames(data, options = {}) {\n const {\n seed = 1,\n key = (d) => `${d.year}|${d.WD25CD}|${d.party}`,\n nameFields = [\"personID\", \"lastName\", \"firstNames\"]\n } = options;\n\n const rng = d3.randomLcg(seed);\n const shuffle = d3.shuffler(rng);\n\n const out = data.map((d) => ({...d}));\n const groups = d3.group(out, key);\n\n for (const rows of groups.values()) {\n if (rows.length >= 2) {\n const names = rows.map((d) =>\n Object.fromEntries(nameFields.map((field) => [field, d[field]]))\n );\n\n const shuffledNames = shuffle(names.map((d) => ({...d})));\n\n for (const [i, row] of rows.entries()) {\n Object.assign(row, shuffledNames[i]);\n }\n\n const alphaRows = d3.sort(\n rows,\n (d) => d.lastName,\n (d) => d.firstNames\n );\n\n for (const [i, row] of alphaRows.entries()) {\n row.partyAlpha = i + 1;\n row.partyCandidates = rows.length;\n }\n }\n }\n\n return out;\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"const nullData = nullNames(results2026, {seed: 4});","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"_For colour schemes:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":319,"value":"import {flexoki} from \"observable:@jwolondon/hello-flexoki\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"const partyClrs = {\n Con: flexoki.palette[\"blue\"][6],\n Lab: flexoki.palette[\"red\"][6],\n Gre: flexoki.palette[\"green\"][6], // Greens\n Lib: flexoki.palette[\"orange\"][5], // LibDems\n Asp: flexoki.palette[\"magenta\"][4], // Aspire\n Ref: flexoki.palette[\"cyan\"][4] // Reform\n};","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"_Political control maps:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":568,"value":"function controlMap(options = {}) {\n const {w = 640} = options;\n const parties = [\n ...new Set(Object.values(controlLookup).map((d) => d.slice(0, 3)))\n ];\n\n return Plot.plot({\n style: {background: flexoki.paper},\n width: w,\n projection: {\n type: \"transverse-mercator\",\n rotate: [2, 0, 0],\n domain: {type: \"FeatureCollection\", features: londonGeo.features}\n },\n color: {domain: parties, range: parties.map((d) => partyClrs[d])},\n marks: [\n Plot.geo(londonGeo, {\n fill: (d) => controlLookup[d.properties.GSSCode]?.slice(0, 3),\n opacity: (d) =>\n controlLookup[d.properties.GSSCode]?.includes(\"NOC\") ? 0.4 : 1,\n stroke: \"white\"\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"$35","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"_For grid animation:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":104,"value":"import {Player} from \"observable:@jwolondon/utilities-cdt-2026\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"function gridAnimation(t = 0, options = {}) {\n const {w = 640} = options;\n const boroughs = polygonsToGeo(interplBoroughs(t));\n return Plot.plot({\n width: w,\n aspectRatio: 1,\n axis: null,\n x: {domain: [0, 1]}, // Set up normalised [0,1] space common to grid and geo boroughs\n y: {domain: [0, 1], reverse: true},\n marks: [\n Plot.geo(boroughs, {\n fill: (d) => (d.properties.id === 32 ? \"white\" : \"rgb(57,43,95)\"), // Separate City of London\n stroke: \"white\",\n strokeWidth: w / 320\n }),\n\n Plot.text(\n boroughs,\n Plot.centroid({\n fill: (d) => (d.properties.id === 32 ? \"darkgrey\" : \"white\"), // Separate City of London\n text: (d) => londonGrid[d.properties.id].shortName,\n fontSize: (d) => w / 80 + d3.easeCubicInOut(t) * (w / 50)\n })\n )\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"_For ballotMaps:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":761,"value":"import {\n ballotMapElected,\n ballotMapElectedBorough,\n ballotMapVoteRanks,\n ballotMapVoteRanksBorough,\n ballotMapTimeline,\n rankLegend,\n electedLegend\n} from \"observable:@jwolondon/london-ballot-bias-trends-over-time\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1121,"value":"_For matrix views:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1142,"value":"$36","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"function chiLegend(options = {}) {\n const { w = 420, h = 60, margin = 60 } = options;\n return Plot.legend({\n style: { fontSize: w / 40, background: flexoki.paper },\n width: w,\n height: h,\n marginLeft: margin,\n marginRight: margin,\n color: {\n type: \"linear\",\n scheme: \"BrBG\",\n label: null,\n ticks: 3,\n tickFormat: (d) =>\n d === 0\n ? \"fewer than expected\"\n : d === 0.5\n ? \"even spread of party votes\"\n : \"more than expected\"\n }\n });\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"_Number formatting:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":396,"value":"// For ordinal presentation of rank numbers\nfunction ordinal(n) {\n return `${n}${\n n % 10 === 1 && n !== 11\n ? \"st\"\n : n % 10 === 2 && n !== 12\n ? \"nd\"\n : n % 10 === 3 && n !== 13\n ? \"rd\"\n : \"th\"\n }`;\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"const yearFmt = d3.format(\"d\")","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"_For page style and layout_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"import {defaultStyle, spacer} from \"observable:@jwolondon/utilities-cdt-2026\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"defaultStyle()","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"2","titling":"auto"}} 33:"$32:body"