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:[] 2d:{"title":"Wahl in Thüringen 2019","cells":[{"id":0,"value":"md`# Wahl in Thüringen 2019\n- Strongest party by municipality, national council election 2019\n- Strongest party by municipality, scaled by population\n- [Party colors from NZZ Visuals Styleguide](https://nzzdev.github.io/Storytelling-Styleguide/#/colors?a=switzerland)`","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(2, 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(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.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(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":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\n .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).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":1962,"value":"thueringen = {\n const data = await fetch(\n \"https://interactive.zeit.de/g/wahllokale-2.topo.json\"\n ).then((response) => response.json());\n return topoToGeo(data);\n}","pinned":false,"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":"$W30","stdlib":"1","titling":"auto"}