31:Tb45,chart = { const _nodes = nodes.map((d) => ({ ...d // width: 120 + 20, // height: 60 + 20 })); const index = new Map(_nodes.map((d) => [d.id, d])); const _links = links.map((d) => Object.assign(Object.create(d), { source: index.get(d.source), target: index.get(d.target) }) ); const DEFAULT_COLOR = "red"; const svg = d3.select(DOM.svg(width, height)); const layout = cola .d3adaptor(d3) .size([width, height]) .nodes(_nodes) .links(_links) // .jaccardLinkLengths(40, 0.7) // .linkDistance((d) => _.clamp(biggest_shift / d.value, 0, 5) ** 2 * 20 + 100) .linkDistance((d) => { let x = (biggest_shift / (d.value || 0.1)) * 40 + 100; console.log(x); return x; }) .avoidOverlaps(true); layout.start(90); let link_selection = svg.selectAll(".link"); let link = link_selection.data( _links, (d) => d.source.id + "-" + d.target.id ); let link_elements = link .enter() .append("line") .attr("class", "link") .attr("stroke", (d) => { // console.log("d:", d); return colors[d.group] ?? DEFAULT_COLOR; }) .style("--width", (d) => { let percentage = d.value / biggest_shift; return percentage; }); link.exit().remove(); // link // .append("title") // .text((d) => `${d.source.id} => ${d.value} => ${d.target.id}`); const node = svg .append("g") .attr("class", "nodes") // Good practice to add a class .selectAll("g") .data(_nodes, (x) => x.id) .enter() .append("g") // Append the group element .call(layout.drag); node .append("rect") .attr("fill", "white") .attr("stroke", (d) => colors[d.group] ?? DEFAULT_COLOR) .attr("stroke-width", "4") .attr("rx", "3") .attr("width", "120px") .attr("x", "-60") .attr("height", "30px") .attr("y", "-15"); // 2. Append the text element to the group node .append("svg:text") .text((d) => d.id) // Use the 'id' (or 'name', etc.) for the label .attr("class", "node-label") .attr("text-anchor", "middle") // Center the text horizontally .attr("dominant-baseline", "central") // Center the text vertically .style("font-family", "arial") .style("font-weight", "bold") // Add other styling attributes here (font size, color, etc.) .attr("fill", (d) => colors[d.group] ?? DEFAULT_COLOR); node.append("title").text((d) => d.id); layout.on("tick", () => { link_elements .attr("x1", (d) => d.source.x) .attr("y1", (d) => d.source.y) .attr("x2", (d) => d.target.x) .attr("y2", (d) => d.target.y); // node.attr("x", (d) => d.x).attr("y", (d) => d.y); node.attr("transform", (d) => `translate(${d.x}, ${d.y})`); }); invalidation.then(() => layout.stop()); svg.attr("style", "background: white"); return svg.node(); }32:[{"id":"8b391f350b54e976fbec80b8285f42447ced47aed5b5de20f77b3f916cc48abff217cd4da39baf44d43b4690f988661266fa47436ba4669053e5deefd6b45b32","href":"https://static.observableusercontent.com/files/8b391f350b54e976fbec80b8285f42447ced47aed5b5de20f77b3f916cc48abff217cd4da39baf44d43b4690f988661266fa47436ba4669053e5deefd6b45b32","name":"image-2025-10-29-221851.png","type":"image/png","lastModified":1761847087276.535,"size":185759},{"id":"006ad5ec28f80848409d1b5de5eb5d2b54fe8a6dc2f1372e51e9e56a935cb9950eb69745c3d7b9450443b0bf3031dc53b977f3e12858e24f1af2c9c55858693c","href":"https://static.observableusercontent.com/files/006ad5ec28f80848409d1b5de5eb5d2b54fe8a6dc2f1372e51e9e56a935cb9950eb69745c3d7b9450443b0bf3031dc53b977f3e12858e24f1af2c9c55858693c","name":"image-2025-10-29-233133.png","type":"image/png","lastModified":1761847305390.85,"size":159483},{"id":"a3b3c42c7d0a557dff0bd2e8040d148645d14e993a80a0866962751837aeab3fbc4ddb7f1bc79f30918800190eee94271675503265b8c52eb911a86aae4c2599","href":"https://static.observableusercontent.com/files/a3b3c42c7d0a557dff0bd2e8040d148645d14e993a80a0866962751837aeab3fbc4ddb7f1bc79f30918800190eee94271675503265b8c52eb911a86aae4c2599","name":"kiezersstromen-TK2023.json","type":"application/json","lastModified":1761932752260.972,"size":46172},{"id":"53a6cbe9978ed3148c847f1ba769079278d155dde9d4bf19bf8386ddb7d774c336a9c4fcd9caf8accd0f6b8105bfedd3add7e22ca1eae2af2a63a44396e9d8b9","href":"https://static.observableusercontent.com/files/53a6cbe9978ed3148c847f1ba769079278d155dde9d4bf19bf8386ddb7d774c336a9c4fcd9caf8accd0f6b8105bfedd3add7e22ca1eae2af2a63a44396e9d8b9","name":"kiezersstromen-TK2025.json","type":"application/json","lastModified":1761932752318.27,"size":15111}] 2f:{"title":"Plotting The Parties","cells":[{"id":0,"value":"# Plotting The Parties\n\nVoor de mensen op mobiel:\n- [Mijn beste rendering TK2023](#rendering_2023)\n- [Mijn beste rendering TK2023](#rendering_2025)","pinned":false,"hidden":false,"mode":"md"},{"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":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"htl.html`","pinned":false,"hidden":false,"mode":"html"},{"id":50,"value":"height = 1000","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":"/// From https://app.nos.nl/nieuws/tk2025/\n// TK2025_kiezersstromen = await (\n// await fetch(\"https://voteflow.api.nos.nl/TK25/peilingen/kiezersstromen.json\")\n// ).json()\nTK2025_kiezersstromen = await FileAttachment(\n \"kiezersstromen-TK2025.json\"\n).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"/// From https://app.nos.nl/nieuws/tk2023/\n// TK2023_kiezersstromen = await (\n// await fetch(\"https://voteflow.api.nos.nl/TK23/peilingen/kiezersstromen.json\")\n// ).json()\nTK2023_kiezersstromen = await FileAttachment(\n \"kiezersstromen-TK2023.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":false,"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"},{"id":692,"value":"# Renderings voor op mobiel\n\nOmdat dit notebook niet echt op mobiel te gebruiken is, maar jij waarschijnlijk wel op je mobiel zit!\n\nDit zijn voorbeelden van hoe het gerenderd kan worden. Ik verander nog steeds af en toe de constraints, waardoor jouw uitkomsten misschien wel helemaal anders lijken.","pinned":false,"hidden":false,"mode":"md"},{"id":695,"value":"rendering_2023 = htl.html`\n

TK2023

\n${await FileAttachment(\"image-2025-10-29-221851.png\").image()}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"rendering_2025 = htl.html`\n

TK2025

\n${await FileAttachment(\"image-2025-10-29-233133.png\").image()}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}