31:T5ed,chart = (Links, Nodes, height= 350, width = 450) => vl .layer( vl .markRule() .data(Links) .encode( vl .x() .fieldQ('x1') .axis({ labels: false, ticks: false, grid: false, tickExtra: false, domain: false }) .title(''), vl .y() .fieldQ('y1') .axis({ labels: false, ticks: false, grid: false, tickExtra: false, domain: false }) .title(''), vl.x2().fieldQ('x2'), vl.y2().fieldQ('y2'), // vl.color().value('#000'), vl .color({ "legend": false }) .fieldQ('cor') .scale({ domain: [-1, 1], range: ["red", "#fff", "blue"]}) ), vl .markCircle() .data(Nodes) .encode( vl.x().fieldQ('x'), vl.y().fieldQ('y'), // vl.text().fieldN('label'), vl.color().value('black'), vl.size().value(20), ), vl .markText({ font: "Roboto", fontSize: "0", color: "#383838" }) .data(Nodes) .encode( vl.x().fieldQ('textX'), vl.y().fieldQ('textY'), vl.text().fieldN('label') ) ) .config({ view: { stroke: 'transparent' } }) .width(width) .height(height) .render()32:[{"id":"c0a5d89018a3e2e931f3558d154414f3cbc106dff012df6016208fabaacdf39c71eec5f2f701de0c95b9d9c3f1e41f32fb29b8005cb63d17722aeba1945508c4","href":"https://static.observableusercontent.com/files/c0a5d89018a3e2e931f3558d154414f3cbc106dff012df6016208fabaacdf39c71eec5f2f701de0c95b9d9c3f1e41f32fb29b8005cb63d17722aeba1945508c4","name":"candidate_correlations@2.json","type":"application/json","lastModified":1670454814233.246,"size":15712},{"id":"9a30af3b3f8cf8dde3cc61a010a0460016f5956efb26cf67399f4de510ec2f38bc14bed57f4ec8afd0c2934e620596b6e62ef6d9eb7960e825af0070f3fe472b","href":"https://static.observableusercontent.com/files/9a30af3b3f8cf8dde3cc61a010a0460016f5956efb26cf67399f4de510ec2f38bc14bed57f4ec8afd0c2934e620596b6e62ef6d9eb7960e825af0070f3fe472b","name":"ctWithResults@3.json","type":"application/json","lastModified":1670430399222.238,"size":473866}] 2f:{"title":"Correlation - Place & Politics Toronto","cells":[{"id":0,"value":"md`# Correlation - Place & Politics Toronto`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2076,"value":"md`Forked and adapted for the Place & Politics in Toronto blog`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2087,"value":"chart(links(filterCor(-1., 1.)), Nodes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"vl\n .markRect()\n .data(fullCor)\n .encode(\n vl.x().fieldN('key1'),\n vl.y().fieldN('key2'),\n vl.color().fieldQ('cor').scale({ domain: [-1, 1], range: [\"#ca0020\",\"#f4a582\",\"#f7f7f7\",\"#92c5de\",\"#0571b0\"]}),\n vl.tooltip().fieldQ('cor')\n )\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"viewof thresholds = interval([-1,1], {\n label: 'Filter by correlation:',\n value: [0.75, 1],\n step: 0.01,\n color: '#021530',\n format: ([start, end]) => `${start.toFixed(2)} to ${end.toFixed(2)}`,\n width: '300px'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1230,"value":"ch = chart(Links, Nodes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1481,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2148,"value":"md`---\n\n### Appendix: Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"data = newData2","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"dl = require('datalib')","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"flds = Object.keys(data[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"cor = {\n let out = [];\n for (let i = 0; i < flds.length; i++) {\n for (let j = i + 1; j < flds.length; j++) {\n let obj = {\n key1: flds[i],\n key2: flds[j],\n cor: Math.min(1, Math.max(dl.cor(data, flds[i], flds[j]), -1))\n };\n out.push(obj);\n }\n }\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2606,"value":"candidate_correlations = FileAttachment(\"candidate_correlations@2.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1847,"value":"fullCor = {\n let out = [];\n for (let i = 0; i < flds.length; i++) {\n for (let j = 0; j < flds.length; j++) {\n let obj = {\n key1: flds[i],\n key2: flds[j],\n cor: Math.min(1, Math.max(dl.cor(data, flds[i], flds[j]), -1))\n };\n out.push(obj);\n }\n }\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"TreshHoldInterval = format(HThreshold - LThreshold)","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"format = d3.format('.2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2515,"value":"textSet = Object({\n \"Hall 1997\": 10,\n \"Lastman 1997\": 14,\n \"Lastman 2000\": 14,\n \"Gomberg 2000\": 14,\n \"Hall 2003\": 10,\n \"Tory 2003\": 10,\n \"Nunziata 2003\": -14,\n \"Miller 2003\": -11,\n \"Pitfield 2006\": -12,\n \"Miller 2006\": -11,\n \"R Ford 2010\": -12,\n \"Smitherman 2010\": -17,\n \"Pantalone 2010\": -15,\n \"D Ford 2014\": -12,\n \"Chow 2014\": -11,\n \"Tory 2014\": -10,\n \"Tory 2018\": 10,\n \"Keesmaat 2018\": 15,\n \"Tory 2022\": 10,\n \"Penalosa 2022\": 14,\n \"Brown 2022\": 12\n })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"Nodes = {\n let out = [];\n let angle = (2 * Math.PI) / flds.length;\n for (let i = 0; i < flds.length; i++) {\n let angle_i = angle * i;\n let obj = {\n label: flds[i],\n angle: angle_i,\n x: CircleRadius * Math.cos(angle_i),\n y: CircleRadius * Math.sin(angle_i),\n textX: (CircleRadius) * Math.cos(angle_i) + textSet[flds[i]],\n textY: (CircleRadius) * Math.sin(angle_i)\n };\n out.push(obj);\n }\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"function GetNode(sLabel) {\n return Nodes.find(x => x.label === sLabel);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"filteredCor = filterCor(LThreshold, HThreshold)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1260,"value":"filterCor = (lo, hi) => candidate_correlations.filter(x => x.cor >= lo && x.cor <= hi)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1233,"value":"Links = links(filteredCor)","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"links = cor => cor.map(d => {\n let node1 = GetNode(d.key1);\n let node2 = GetNode(d.key2);\n return { x1: node1.x, y1: node1.y, x2: node2.x, y2: node2.y, cor: d.cor };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1309,"value":"stepFormat = d3.format('.2f')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1540,"value":"filteredCor","pinned":false,"hidden":false,"mode":"ojs"},{"id":1266,"value":"mini = {\n let step = 0.2;\n return Promise.all(\n d3.range(-1, 1, step).map(\n async lo =>\n html`

${await chart(\n links(filterCor(lo, lo + step)),\n Nodes,\n 125\n )}

\n ${stepFormat(lo)} to ${stepFormat(lo + step)}

\n `\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1192,"value":"textOffset = 50 - CircleRadius","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"CircleRadius = 45","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"LThreshold = thresholds[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"HThreshold = thresholds[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"import { text, slider, radio, button } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"import { rangeSlider, themes } from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2578,"value":"import {interval} from '@mootari/range-slider@1781'","pinned":true,"hidden":false,"mode":"ojs"},{"id":2484,"value":"newData2 = FileAttachment(\"ctWithResults@3.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":957,"value":"parseObject = obj =>\n Object.fromEntries(\n Object.entries(obj)\n .filter(([k, v]) => k != '')\n .map(([k, v]) => [k, +v])\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1285,"value":"html`