31: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)); }); } }32:[{"id":"f0d00409e5790d7d38b2d41217352477dc5ef83ae100fa253d5504063dd6db9d42fe5e6298cd055f5947a6fe0b724794a7960535348a460419512fefb88c300f","href":"https://static.observableusercontent.com/files/f0d00409e5790d7d38b2d41217352477dc5ef83ae100fa253d5504063dd6db9d42fe5e6298cd055f5947a6fe0b724794a7960535348a460419512fefb88c300f","name":"ortsteile_leipzig_wgs84.geojson","type":"application/geo+json","lastModified":1583186328299.716,"size":572114},{"id":"ea535344fa23eff5ea98ca032342b37e1a793c33d82b840ce6c9e5a5aa3c37a91f51f19545739a0c4c539acc3cdbe3e41a20f542d47927eb195c1595c4e7fa9c","href":"https://static.observableusercontent.com/files/ea535344fa23eff5ea98ca032342b37e1a793c33d82b840ce6c9e5a5aa3c37a91f51f19545739a0c4c539acc3cdbe3e41a20f542d47927eb195c1595c4e7fa9c","name":"wahlergebnis_obm2-ot_noextraheader.tsv","type":"text/tab-separated-values","lastModified":1583187856396.585,"size":3186}] 2f:{"title":"Leipzig Mayoral Election Results 2020","cells":[{"id":2200,"value":"md`# Leipzig Mayoral Election Results 2020\n## 2. Voting Round\n- Strongest party by borough (area)\n- Strongest party by borough, scaled by valid votes\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`# Oberbürgermeisterwahl 2020
Stadt Leipzig \n## 2. Wahlgang nach Ortsteilen\n\nGewinner der relativen Mehrheit je Ortsteil in \n- geographischer Lage\n- als Kreisfläche skaliert nach Gesamtzahl der gültigen Stimmen je Ortsteil\n\n🔴 Jung
\n⚫ Gemkow\n`","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: [Stadt Leipzig](https://www.leipzig.de/buergerservice-und-verwaltung/wahlen-in-leipzig/oberbuergermeisterwahlen-in-leipzig/oberbuergermeisterwahl-2020/wahlergebnis-2-wahlgang/)\n- Map: [Stadt Leipzig](https://www.leipzig.de/buergerservice-und-verwaltung/unsere-stadt/gebietsgliederung-und-strassennamen/kommunale-gebietsgliederung/#c22822)\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(svgToObjectURL(svgNode), `election-results-by-municipality-2019-${name}.svg`);\n await svgToCanvas(svgNode, ctx);\n download(ctx.canvas.toDataURL(), `election-results-by-municipality-2019-${name}.png`);\n }\n };\n return form;\n}\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-2019-%04d.png \\\\\n -c:v libx264 -vf fps=25 -pix_fmt yuv420p \\\\\n election-results-by-municipality-2019.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 = 90","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 = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1689,"value":"md`## Helper Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"projection = d3\n .geoAzimuthalEqualArea()\n .rotate([-10, -52])\n .fitExtent([[padding, padding], svgSize.map(d => d - padding)], leipzig)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1230,"value":"radiusScale = {\n return d3\n .scaleSqrt()\n .domain([0, maxVotes])\n .range([1, maxRadius]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1684,"value":"$31","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(url, `election-results-by-municipality-2019-${String(frame).padStart(4, '0')}.png`);\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":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 leipzig.features.map(municipality => {\n const id = municipality.properties.OT;\n const population = municipality.properties[\"Gültige Stimmen\"];\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\n }\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"spreadMunicipalities = {\n const [width, height] = svgSize;\n const data = municipalities.map(({ properties: { centroid, radius } }) => ({ centroid, radius }));\n const simulation = d3.forceSimulation(data)\n .force(\"cx\", d3.forceX().x(d => width / 2).strength(0.02))\n .force(\"cy\", d3.forceY().y(d => height / 2).strength(0.02))\n .force(\"x\", d3.forceX().x(d => d.centroid[0]).strength(0.3))\n .force(\"y\", d3.forceY().y(d => d.centroid[1]).strength(0.3))\n .force(\"charge\", d3.forceManyBody().strength(-1))\n .force(\"collide\", d3.forceCollide().radius(d => d.radius + nodePadding).strength(1))\n .stop()\n\n let i = 0; \n while (simulation.alpha() > 0.01 && i < 200) {\n simulation.tick(); \n i++;\n }\n\n return municipalities.map((municipality, i) => {\n return {\n ...municipality,\n properties: {\n ...municipality.properties,\n center: [data[i].x, data[i].y]\n }\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1631,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2046,"value":"leipzig_ortsteile = FileAttachment(\"ortsteile_leipzig_wgs84.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2053,"value":"text = FileAttachment(\"wahlergebnis_obm2-ot_noextraheader.tsv\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2139,"value":"SPDCOLOR = \"#E3000F\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2145,"value":"CDUCOLOR = \"#333\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2147,"value":"NONECOLOR = 'grey'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2061,"value":"function joinResults() {\n let leipzig_wahlergebnis_ortsteile = d3.tsvParse(text, d3.autoType);\n leipzig_ortsteile.features.forEach((f, i, arr) => {\n let list = leipzig_wahlergebnis_ortsteile.filter(\n ot => ot.Ortsteil == f.properties[\"Name\"]\n );\n let props = list ? list[0] : {};\n props.color = props.CDU > props.SPD ? CDUCOLOR : SPDCOLOR;\n props.color =\n props.CDU !== undefined && props.SPD !== undefined\n ? props.color\n : NONECOLOR;\n Object.assign(arr[i].properties, props);\n });\n return leipzig_ortsteile;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2096,"value":"leipzig = joinResults()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2009,"value":"maxVotes = d3.max(leipzig.features.map(d => d.properties[\"Gültige Stimmen\"]))","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"}],"files":"$W32","stdlib":"1","titling":"auto"}