2f:Te11,Graph = ({ height, width, nodes, links, biggest_shift }) => { const DEFAULT_COLOR = "red"; let layout = React.useMemo(() => { return new cola.Layout() .size([width, height]) .linkDistance((d) => (biggest_shift / (d.value || 0.001)) * 40 + 100); }, []); const mutating_nodes = React.useMemo(() => { // const new_map = new Map(nodes.map(x => [x.id, x])) const old = new Map(layout.nodes().map((d) => [d.id, d])); console.log("old:", old); let new_nodes = nodes.filter((x) => !old.has(x.id)); let new_map = new Map(nodes.map((x) => [x.id, x])); let x_nodes = [ ...layout .nodes() .filter((x) => new_map.has(x.id)) .map((d) => Object.assign(old.get(d.id) || {}, new_map.get(d.id))), ...new_nodes ]; console.log("x_nodes:", x_nodes); console.log("nodes:", nodes); // let refresh_nodes = layout.nodes(); // while (refresh_nodes.pop()) {} // refresh_nodes.push(...x_nodes); return x_nodes; }, [nodes]); const mutating_links = React.useMemo(() => { // const old = new Map( // layout.links().map((d) => [`${d.source.id}-${d.target.id}`, d]) // ); // console.log("old:", old); const index = new Map(mutating_nodes.map((d) => [d.id, d])); return links.map((d) => ({ ...d, source: index.get(d.source), target: index.get(d.target) })); }, [mutating_nodes, links]); console.log( "structuredClone(mutating_links):", structuredClone(mutating_links) ); let [forced_update, do_forced_update] = React.useState(0); React.useEffect(() => { console.log("#1"); layout.on("tick", () => { do_forced_update((x) => x + 1); }); }, [layout]); React.useEffect(() => { console.log("mutating_nodes:", mutating_nodes); layout.nodes(mutating_nodes).links(mutating_links).start(); }, [nodes, links]); return jsx`

`; }30:[] 2d:{"title":"Plotting The Parties (React)","cells":[{"id":0,"value":"# Plotting The Parties (React)","pinned":false,"hidden":false,"mode":"md"},{"id":663,"value":"import { React, jsx, render } from \"@dralletje/react-x-observable\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"viewof tel_niet_gestemd = Inputs.toggle({ label: \"Niet gestemd\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"viewof minimum_percentage = Inputs.range([0, 100], {\n label: \"Declutter\",\n step: 1,\n value: 80\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"viewof verkiezing = Inputs.select([\"TK2025\", \"TK2023\", \"TK2025 & TK2023\"], {\n label: \"Verkiezing\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"chart = {\n return render(\n this,\n jsx`\n <${Graph} height=${height} width=${width} nodes=${nodes} links=${links} biggest_shift=${biggest_shift} />\n `\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":680,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":502,"value":"htl.html`","pinned":false,"hidden":false,"mode":"html"},{"id":50,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"nodes = names.map((name) => ({ id: name, group: name }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"links = links_with_zeros","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"biggest_shift = _.max(links.map((x) => x.value))","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"md`## Raw Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"TK2025_kiezersstromen = await (\n await fetch(\"https://voteflow.api.nos.nl/TK25/peilingen/kiezersstromen.json\")\n).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"TK2023_kiezersstromen = await (\n await fetch(\"https://voteflow.api.nos.nl/TK23/peilingen/kiezersstromen.json\")\n).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"colors = ({\n \"Niet gestemd\": \"black\",\n ...Object.fromEntries(\n _.zip(\n [\n \"VVD\",\n \"D66\",\n \"GLPVDA\",\n \"PVV\",\n \"CDA\",\n \"SP\",\n \"FVD\",\n \"PVDD\",\n \"CU\",\n \"VOLT\",\n \"JA21\",\n \"SGP\",\n \"DENK\",\n \"50PLUS\",\n \"BBB\",\n \"NSC\",\n \"GL\",\n \"PVDA\"\n ],\n [\n \"#4c44ff\",\n \"#64dcaf\",\n \"#a90000\",\n \"#70d4ff\",\n \"#005c00\",\n \"#f00031\",\n \"#ad72d2\",\n \"#ffff99\",\n \"#3ca0ff\",\n \"#c66a6b\",\n \"#003599\",\n \"#f08836\",\n \"#32d2d2\",\n \"#654584\",\n \"#a2c976\",\n \"#F7C106\",\n \"#64dcaf\",\n \"#e61e14\"\n ]\n )\n ),\n\n /// Override PVDD because it is unreadable\n PVDD: \"#B48C1E\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"TK2025_uitgaand = flat_links(TK2025_kiezersstromen.uitgaand).map((link) => ({\n ...link,\n verkiezing: \"TK2025\",\n richting: \"uitgaand\"\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"TK2025_inkomend = flat_links(TK2025_kiezersstromen.inkomend).map((link) => ({\n ...link,\n verkiezing: \"TK2025\",\n richting: \"inkomend\"\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"md`## Calculations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"// kiezersstromen = [...TK2023_links_uitgaand, ...TK2023_links_inkomend]\nkiezersstromen = [\n ...TK2023_links_uitgaand,\n ...TK2023_links_inkomend,\n ...TK2025_uitgaand,\n ...TK2025_inkomend\n].filter((x) => verkiezing === \"TK2025 & TK2023\" || x.verkiezing === verkiezing)","pinned":true,"hidden":false,"mode":"ojs"},{"id":282,"value":"names = _.uniq(\n kiezersstromen.map((x) => (x.richting === \"uitgaand\" ? x.source : x.target))\n)\n .filter((x) => {\n if (tel_niet_gestemd) {\n return true;\n } else {\n return x !== \"Niet gestemd\";\n }\n })\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":449,"value":"kiezersstromen.filter((x) => x.target === \"PVDA\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":447,"value":"kiezersstromen","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"links_with_zeros = names.flatMap((source) => {\n return names\n .filter((x) => x !== source)\n .map((target) => {\n let stroom = kiezersstromen.filter(\n (x) => x.source === source && x.target === target\n );\n let mean = _.mean(stroom.map((x) => x.value));\n return {\n source: source,\n target: target,\n group: target,\n value: Number.isNaN(mean) ? 0 : mean\n };\n });\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"flat_links = (per_party) => {\n return Object.values(per_party).flatMap(({ nodes, links }) => {\n return links.map((link) => {\n return {\n source: nodes[link.source].id,\n target: nodes[link.target].id,\n value: link.value\n };\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"## [inkomend] Combine GL and PVDA into GLPVDA","pinned":false,"hidden":false,"mode":"md"},{"id":331,"value":"TK2023_links_inkomend_raw = flat_links(TK2023_kiezersstromen.inkomend).map(\n (link) => {\n return {\n ...link,\n richting: \"inkomend\",\n verkiezing: \"TK2023\"\n };\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"TK2023_links_inkomend_by_target = Object.groupBy(\n TK2023_links_inkomend_raw,\n (x) => x.target\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"TK2023_links_inkomend = Object.entries(TK2023_links_inkomend_by_target).flatMap(\n ([target, links]) => {\n let [glpvda, rest] = _.partition(\n links,\n (link) => link.source === \"GL\" || link.source === \"PVDA\"\n );\n\n return [\n ...rest,\n {\n source: \"GLPVDA\",\n target: target,\n richting: \"inkomend\",\n verkiezing: \"TK2023\",\n value: _.sum(glpvda.map((x) => x.value))\n }\n ];\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"md`## [uitgaand] Combine GL and PVDA into GLPVDA`","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"TK2023_links_uitgaand_raw = flat_links(TK2023_kiezersstromen.uitgaand).map(\n (link) => {\n return {\n ...link,\n richting: \"uitgaand\",\n verkiezing: \"TK2023\"\n };\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"gl_uitgaand_links = Object.fromEntries(\n TK2023_links_uitgaand_raw.filter((x) => x.source === \"GL\").map((x) => [\n x.target,\n x.value\n ])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"pvda_uitgaand_links = Object.fromEntries(\n TK2023_links_uitgaand_raw.filter((x) => x.source === \"PVDA\").map((x) => [\n x.target,\n x.value\n ])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"glpvda_links = _.uniq(TK2023_links_uitgaand_raw.map((x) => x.source))\n .filter((x) => x !== \"GL\" && x !== \"PVDA\")\n .map((name) => {\n return {\n source: \"GLPVDA\",\n target: name,\n richting: \"uitgaand\",\n verkiezing: \"TK2023\",\n value:\n (pvda_uitgaand_links[name] ?? 0) + (gl_uitgaand_links[name] ?? 0) / 2\n };\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"TK2023_links_uitgaand = [\n ...TK2023_links_uitgaand_raw.filter(\n (x) => x.source !== \"GL\" && x.source !== \"PVDA\"\n ),\n ...glpvda_links\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"cola = require(\"webcola@3/WebCola/cola.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"_ = await import(\"lodash-es\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}