31:T5ac,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("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:[] 2f:{"title":"Swiss National Elections 2019","cells":[{"id":0,"value":"md`# Swiss National Elections 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(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(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 = 25","pinned":false,"hidden":false,"mode":"ojs"},{"id":1254,"value":"nodePadding = 0.1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1543,"value":"svgSize = [1280, 720]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1822,"value":"padding = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":1689,"value":"md`## Helper Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"projection = d3.geoIdentity()\n .reflectY(true)\n .fitExtent([[padding, padding], svgSize.map(d => d - padding)], switzerland);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1230,"value":"radiusScale = {\n const populationMax = d3.max([...populations.values()])\n return d3.scaleSqrt()\n .domain([0, populationMax])\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 switzerland.features\n .map(municipality => {\n const { id } = municipality;\n const population = populations.get(id);\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 }\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":1365,"value":"switzerland = fetch('https://gist.githubusercontent.com/rkaravia/f5a9617c852560ffc0852b9808874ca8/raw/a24d50d63c4ea177c933d3f637357fbf647efd54/switzerland-municipalities-2019-LV95.json').then(response => response.json());","pinned":false,"hidden":false,"mode":"ojs"},{"id":1404,"value":"populations = {\n const data = await d3.csv('https://gist.githubusercontent.com/rkaravia/f138d166d3b34791240f6024706bdb91/raw/e2c8970955788d25b8b23ebd514ec9c3461b4ca3/switzerland-population-by-municipality-2019.csv');\n return new Map(data.map(({ id, population }) => [+id, +population]));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1835,"value":"strongestParties = {\n const data = await d3.csv('https://gist.githubusercontent.com/rkaravia/231864dd4bce2fd21197eb7306bbaacd/raw/3f0c31d019f3bb08da03de4bff9bf00bf2883c31/strongest-parties-2019.csv');\n return new Map(data.map(({ id, party }) => [+id, party]));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1483,"value":"partyToColor = new Map([\n [\"SVP\", \"#408b3d\"],\n [\"SP\", \"#c31906\"],\n [\"FDP\", \"#0084c7\"],\n [\"LPS\", \"#0084c7\"],\n [\"CVP\", \"#d28b00\"],\n [\"CSP\", \"#d28b00\"],\n [\"GPS\", \"#54ba00\"],\n [\"GLP\", \"#a9cf00\"],\n [\"BDP\", \"#d1cc00\"],\n [\"PDA\", \"#616161\"],\n [\"LEGA\", \"#ac5038\"]\n]);","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"}