2f:T5e6,function createRenderer(svgNode) { const path = d3.geoPath(projection); const polygons = spreadMunicipalities .map(feature => turf.flatten(feature).features).flat() .map((polygon) => { const { properties } = polygon; const { center, radius } = polygon.properties; polygon.properties = { ...properties, fromCircle: flubber.fromCircle(center[0], center[1], radius, path(polygon), {maxSegmentLength: 2}), toCircle: flubber.toCircle(path(polygon), center[0], center[1], radius, {maxSegmentLength: 2}) } return polygon; }); const xValues = polygons.map(({ properties: { center: [x] }}) => x); const xDomain = [d3.min(xValues), d3.max(xValues)]; const paths = d3.select(svgNode).append("g") .selectAll("path") .data(polygons) .enter().append("path") //.attr("fill", ({ properties: { id } }) => partyToColor.get(strongestParties.get(id))) .attr("fill", ({ properties: { color } }) => color) .attr("stroke", "white") .attr("stroke-width", 0.5); const delay = d3.scaleLinear() .domain(xDomain) .range([0, 1]); const phases = ['toCircle', 'fromCircle']; return (step, steps) => { const phase = Math.floor(step / steps) % phases.length; const t = (step % steps) / steps * phases.length; paths.attr('d', (d) => { const tDelayed = Math.min(1, Math.max(0, t - delay(d.properties.center[0]))); return d.properties[phases[phase]](d3.easeCubic(tDelayed)); }); } }30:T496,spreadMunicipalities = { const [width, height] = svgSize; const data = municipalities.map(({ properties: { centroid, radius } }) => ({ centroid, radius })); const simulation = d3 .forceSimulation(data) .force( "cx", d3 .forceX() .x((d) => width / 2) .strength(0.02) ) .force( "cy", d3 .forceY() .y((d) => height / 2) .strength(0.02) ) .force( "x", d3 .forceX() .x((d) => d.centroid[0]) .strength(0.3) ) .force( "y", d3 .forceY() .y((d) => d.centroid[1]) .strength(0.3) ) .force("charge", d3.forceManyBody().strength(-1)) .force( "collide", d3 .forceCollide() .radius((d) => d.radius + nodePadding) .strength(1) ) .stop(); let i = 0; while (simulation.alpha() > 0.01 && i < 200) { simulation.tick(); i++; } return municipalities.map((municipality, i) => { return { ...municipality, properties: { ...municipality.properties, center: [data[i].x, data[i].y] } }; }); }31:[{"id":"d8e3a4f5adf98ea0bf2930562b63b2eacf3326a6039316cddc2bb0522dfde2d7c8b9aaf0a4758fcf9e43b3ae7865a3fb4e0b57f516ce8460c2dd3b8e67e3c028","href":"https://static.observableusercontent.com/files/d8e3a4f5adf98ea0bf2930562b63b2eacf3326a6039316cddc2bb0522dfde2d7c8b9aaf0a4758fcf9e43b3ae7865a3fb4e0b57f516ce8460c2dd3b8e67e3c028","name":"data.geojson","type":"application/geo+json","lastModified":1694688162785.021,"size":8721168},{"id":"434e979b0afaed5d34af5aedc6ec665f48abe3ec6053bbdb790168dddf6b9f25916009007938c445ef24bbe6dc52a21a5808e4adbbae00d58c02dbe5402a1cd9","href":"https://static.observableusercontent.com/files/434e979b0afaed5d34af5aedc6ec665f48abe3ec6053bbdb790168dddf6b9f25916009007938c445ef24bbe6dc52a21a5808e4adbbae00d58c02dbe5402a1cd9","name":"data.topo.json","type":"application/json","lastModified":1694688238451.063,"size":20857192}] 2d:{"title":"Bundestagswahl 2021","cells":[{"id":0,"value":"md`# Bundestagswahl 2021\n- Strongest party by municipality, national council election 2019\n- Strongest party by municipality, scaled by population`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1685,"value":"{\n const [width, height] = svgSize;\n \n const svgNode = DOM.svg(width, height);\n svgNode.style.width = '100%';\n svgNode.style.height = 'auto';\n \n const renderer = createRenderer(svgNode);\n \n yield svgNode;\n let step = 0;\n const steps = 60;\n \n const isGeneratingThumbnail = navigator.userAgent.match('HeadlessChrome');\n if (isGeneratingThumbnail) {\n renderer(1, 2);\n } else {\n let running = true;\n invalidation.then(() => running = false);\n while (running) {\n renderer(step, steps);\n step += 1;\n await Promises.tick(100);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1887,"value":"md`## Attributions\n- Inspiration: [Observable Notebook by KDO](https://observablehq.com/@karimdouieb/try-to-impeach-this-challenge-accepted)\n- Election results: [Bundesamt für Statistik BFS](https://opendata.swiss/de/dataset/eidg-wahlen-2019)\n- Map: [© BFS, ThemaKart 2019](https://www.bfs.admin.ch/bfs/en/home/statistics/regional-statistics/base-maps/cartographic-bases.assetdetail.7546177.html)\n- Population: [© BFS, STATPOP 2018](https://www.bfs.admin.ch/bfs/en/home/statistics/catalogues-databases/tables.assetdetail.7966022.html)\n- Colors: [NZZ Visuals Styleguide](https://nzzdev.github.io/Storytelling-Styleguide/#/colors?a=switzerland)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1919,"value":"md`## Image export\nClick button below to export SVGs and PNGs with municipality shapes and circles scaled by population.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1921,"value":"{\n const form = html``;\n form.button.onclick = async (event) => {\n event.preventDefault();\n\n const pngPixelRatio = 2;\n const [width, height] = svgSize;\n const svgNode = DOM.svg(width, height);\n const renderer = createRenderer(svgNode);\n\n const ctx = DOM.context2d(width, height, pngPixelRatio);\n\n const names = [\"shapes\", \"circles\"];\n for (let i = 0; i < 2; i += 1) {\n const name = names[i];\n renderer(i, 1);\n download(\n svgToObjectURL(svgNode),\n `election-results-by-municipality-2021-${name}.svg`\n );\n await svgToCanvas(svgNode, ctx);\n download(\n ctx.canvas.toDataURL(),\n `election-results-by-municipality-2021-${name}.png`\n );\n }\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1800,"value":"md`## Video export\n\nClick button below, then convert frames to mp4 using [ffmpeg](https://www.ffmpeg.org/).\n\n~~~\nffmpeg -i election-results-by-municipality-2021-%04d.png \\\\\n -c:v libx264 -vf fps=25 -pix_fmt yuv420p \\\\\n election-results-by-municipality-2021.mp4\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1805,"value":"{\n const form = html``;\n form.button.onclick = event => {\n event.preventDefault();\n exportVideoFrames();\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1641,"value":"md`## Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1227,"value":"maxRadius = 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":1254,"value":"nodePadding = 0.1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1543,"value":"svgSize = [1920, 1080]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1822,"value":"padding = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":1689,"value":"md`## Helper Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"projection = d3.geoMercator()\n //.reflectY(true)\n //.fitExtent([[200, padding], [1080,720-padding]], thueringen);\n .fitExtent([[padding, padding], svgSize.map(d => d - padding)], thueringen);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1230,"value":"radiusScale = {\n return d3.scaleSqrt()\n .domain([0, maxPopulation])\n .range([1, maxRadius]) \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1684,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1796,"value":"async function exportVideoFrames() {\n const [width, height] = svgSize;\n\n const svgNode = DOM.svg(width, height);\n\n const renderer = createRenderer(svgNode);\n\n const ctx = DOM.context2d(width, height, 1);\n\n const frames = 120;\n for (let frame = 0; frame < frames; frame += 1) {\n console.log(`Frame ${frame + 1} / ${frames}`);\n renderer(frame, frames / 2);\n await svgToCanvas(svgNode, ctx);\n const url = ctx.canvas.toDataURL();\n download(\n url,\n `election-results-by-municipality-2021-${String(frame).padStart(\n 4,\n \"0\"\n )}.png`\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1492,"value":"function svgToCanvas(svg, context) {\n return new Promise((resolve) => {\n const { width, height } = svg.viewBox.baseVal;\n const serializer = new XMLSerializer();\n const svgString = serializer.serializeToString(svg);\n const image = new Image();\n image.src = `data:image/svg+xml;base64,${btoa(svgString)}`;\n image.onload = () => {\n context.fillStyle = '#fff';\n context.fillRect(0, 0, width, height);\n context.drawImage(image, 0, 0);\n resolve();\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1930,"value":"function svgToObjectURL(svg) {\n const serializer = new XMLSerializer();\n const svgString = serializer.serializeToString(svg);\n return URL.createObjectURL(new Blob([svgString]));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1793,"value":"async function download (url, name) {\n\tconst a = document.createElement('a');\n\ta.download = name;\n\ta.href = url;\n\ta.style.display = 'none';\n\tdocument.body.append(a);\n\ta.click();\n\tawait Promises.delay(100);\n\ta.remove();\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":1968,"value":"function topoToGeo(topoData) {\n const topojsonObjectKeys = Object.keys(topoData.objects);\n\n if (!topojsonObjectKeys || !topojsonObjectKeys.length) {\n console.log(\"error: topojson geodata file seems to be broken.\");\n return false;\n }\n\n // console.log(topojson.mesh(topoData, topoData.objects[topojsonObjectKeys[0]]));\n\n return topojson.feature(topoData, topoData.objects[topojsonObjectKeys[0]]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1644,"value":"md`## Data Preparation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"municipalities = {\n const projectPoint = (point) => d3GeoProjection.geoProject(point, projection);\n\n return thueringen.features.map((municipality) => {\n const id = municipality.properties.AGS;\n const population = municipality.properties[\"Gültige\"];\n\n return {\n ...municipality,\n properties: {\n id,\n population,\n centroid: projectPoint(turf.centroid(municipality.geometry).geometry)\n .coordinates,\n radius: radiusScale(population),\n color: municipality.properties.color || \"white\"\n }\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1631,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1962,"value":"dataTopo = FileAttachment(\"data.topo.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2057,"value":"\nthueringen = topoToGeo(dataTopo)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2009,"value":"maxPopulation = d3.max(thueringen.features.map((d) => d.properties[\"Gültige\"]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1220,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":1437,"value":"d3GeoProjection = require('d3-geo-projection@2');","pinned":false,"hidden":false,"mode":"ojs"},{"id":1223,"value":"turf = require(\"@turf/turf@5\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":1289,"value":"flubber = require('flubber@0.4.2');","pinned":false,"hidden":false,"mode":"ojs"},{"id":1966,"value":"topojson = require(\"topojson-client\");\n","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}