31:T761,vote_map_animation = { const svg = d3 .select(DOM.svg(width, height)) .attr("viewBox", `0 0 ${width} ${height}`) .style("width", `${width}px`) .style("height", "auto"); const color = d3.scaleSequential(d3.interpolateRdBu); // render map const path = d3.geoPath(projection); svg .append("g") .selectAll("path") .data(kreise) .enter() .append("path") .attr("class", "countyShape") .attr("fill", (kreis) => kreis.properties.stimmen.Partei === "CDU" || kreis.properties.stimmen.Partei === "CSU" ? "#000" : kreis.properties.stimmen.Partei === "AfD" ? "#469CDA" : kreis.properties.stimmen.Partei === "GRÜNE" ? "#4D7832" : kreis.properties.stimmen.Partei === "SPD" ? "#C42A27" : "#F2EEF2" ) .attr("d", path) .attr("stroke", "white") .attr("stroke-width", 0.5) .append("title") .text((d) => [ d.properties.name, d.properties.stimmen.Partei, d.properties.stimmen.Prozent ].join(" – ") ); setInterval(() => { svg .selectAll(".countyShape") .transition() .delay((d) => d.rank * 2) .duration(5000) .attrTween("d", function (d, i) { return flubber.toCircle(path(d), d.x, d.y, d.properties.radius, { maxSegmentLength: 2 }); }); svg .selectAll(".countyShape") .transition() .delay((d) => 8000 + d.rank * 2) .duration(5000) .attrTween("d", function (d, i) { return flubber.fromCircle(d.x, d.y, d.properties.radius, path(d), { maxSegmentLength: 2 }); }); }, 25000); svg .append("text") .attr("font-family", "Inter") .attr("font-size", "11px") .text("@chrispahm") .attr("bottom", 0) .attr("x", 20) .attr("y", 40); return svg.node(); }32:T554,vote_map = { const svg = d3 .select(DOM.svg(width, height)) .attr("viewBox", `0 0 ${width} ${height}`) .style("width", `${width}px`) .style("height", "auto"); // render map const path = d3.geoPath(projection); svg .append("g") .selectAll("path") .data(kreise) .enter() .append("path") .attr("fill", (kreis) => kreis.properties.stimmen.Partei === "CDU" || kreis.properties.stimmen.Partei === "CSU" ? "#000" : kreis.properties.stimmen.Partei === "AfD" ? "#469CDA" : kreis.properties.stimmen.Partei === "GRÜNE" ? "#4D7832" : kreis.properties.stimmen.Partei === "SPD" ? "#C42A27" : "#F2EEF2" ) .attr("d", path) .append("title") .text((d) => [ d.properties.name, d.properties.stimmen.Partei, d.properties.stimmen.Prozent ].join(" – ") ); svg .append("path") .datum(topojson.mesh(de, de.objects.VG250_KRS, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("stroke-width", 0.5) .attr("d", path); svg .append("text") .attr("font-family", "Inter") .attr("font-size", "11px") .text("@chrispahm") .attr("bottom", 0) .attr("x", 20) .attr("y", 40); return svg.node(); }33:T427,vote_map_population_spread_bubble = { const svg = d3 .select(DOM.svg(width, height)) .attr("viewBox", `0 0 ${width} ${height}`) .style("width", `${width}px`) .style("height", "auto"); const color = d3.scaleSequential(d3.interpolateRdBu); // render map const path = d3.geoPath(projection); svg .append("g") .selectAll("circle") .data(spreadCounties) .enter() .append("circle") .attr("fill", (kreis) => kreis.properties.stimmen.Partei === "CDU" || kreis.properties.stimmen.Partei === "CSU" ? "#000" : kreis.properties.stimmen.Partei === "AfD" ? "#469CDA" : kreis.properties.stimmen.Partei === "GRÜNE" ? "#4D7832" : kreis.properties.stimmen.Partei === "SPD" ? "#C42A27" : "#F2EEF2" ) .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", (d) => d.properties.radius) .style("stroke", "white"); // render legend const x = d3.scaleLinear().domain(color.domain()).rangeRound([0, 260]); return svg.node(); }34:T511,kreise = topojson .feature(de, de.objects.VG250_KRS) .features.map((kreis) => { const stimmen = stimmen_kreise.find((k) => k.AGS === kreis.properties.AGS); const kreisFlaeche = turf.area(kreis); let centroid; try { centroid = turf.centroid(kreis.geometry).geometry.coordinates; } catch (error) { // } return { ...kreis, properties: { name: kreis.properties.GEN, state: kreis.properties.SN_L, stimmen: stimmen, density: stimmen.Wahlberechtigte / kreisFlaeche, centroid: centroid ? projection(centroid) : null, radius: radiusScale(stimmen.Wahlberechtigte) } }; }) .filter((c) => c.properties.centroid) //.filter(c => c.geometry.type === "MultiPolygon") .sort((a, b) => a.properties.centroid[0] < b.properties.centroid[0] ? -1 : 1 ) .map((d, i) => { let geometry; if (d.geometry.type !== "MultiPolygon") { geometry = d.geometry; } else { geometry = { type: d.geometry.type, coordinates: d.geometry.coordinates .sort((a, b) => turf.area(turf.polygon(a)) > turf.area(turf.polygon(b)) ? -1 : 1 ) .slice(0, 1) }; } return { ...d, rank: i, geometry }; })35:T5a7,SELECT a.Gebietsnummer as AGS, a.Gebietsname as Kreis, a.Gruppenname as Partei, a.Prozent, c.Wahlberechtigte, d.Wählende, e.Ungültige, f.Gültige, d.Wählende/c.Wahlberechtigte*100 as Prozent_Wahlbeteiligung, e.Ungültige/d.Wählende*100 as Prozent_Ungültig FROM stimmen a INNER JOIN ( SELECT Gebietsname, MAX(Prozent) Prozent FROM stimmen WHERE Gebietsart = 'Kreis' AND Gruppenart = 'Partei' GROUP BY Gebietsname ) b ON a.Gebietsname = b.Gebietsname AND a.Prozent = b.Prozent INNER JOIN ( SELECT Gebietsname, SUM(Anzahl) as Wahlberechtigte FROM stimmen WHERE Gebietsart = 'Kreis' AND Gruppenart = 'System-Gruppe' AND Gruppenname = 'Wahlberechtigte' GROUP BY Gebietsname ) c ON a.Gebietsname = c.Gebietsname INNER JOIN ( SELECT Gebietsname, SUM(Anzahl) as Wählende FROM stimmen WHERE Gebietsart = 'Kreis' AND Gruppenart = 'System-Gruppe' AND Gruppenname = 'Wählende' GROUP BY Gebietsname ) d ON a.Gebietsname = d.Gebietsname INNER JOIN ( SELECT Gebietsname, SUM(Anzahl) as Ungültige FROM stimmen WHERE Gebietsart = 'Kreis' AND Gruppenart = 'System-Gruppe' AND Gruppenname = 'Ungültige' GROUP BY Gebietsname ) e ON a.Gebietsname = e.Gebietsname INNER JOIN ( SELECT Gebietsname, SUM(Anzahl) as Gültige FROM stimmen WHERE Gebietsart = 'Kreis' AND Gruppenart = 'System-Gruppe' AND Gruppenname = 'Gültige' GROUP BY Gebietsname ) f ON a.Gebietsname = f.Gebietsname36:[{"id":"b90baff80d9a5b68f8c10447983042464ad256260592027e4ca09ec60af5d41328ecf08da077f3f2e99007c7e8359d877b11246d05459a9256116ede0f14574b","href":"https://static.observableusercontent.com/files/b90baff80d9a5b68f8c10447983042464ad256260592027e4ca09ec60af5d41328ecf08da077f3f2e99007c7e8359d877b11246d05459a9256116ede0f14574b","name":"VG250_KRS (1)@1.json","type":"application/json","lastModified":1718295436899.353,"size":334095},{"id":"725f4aae6c5c57b33fee741d473c3ffd2152b965e27267fabe1ff63808c7e0354bf5cea1576a9ec6fe0714bb7192be1d4ce65ca837421e2729cb1d9f9d9a1ab7","href":"https://static.observableusercontent.com/files/725f4aae6c5c57b33fee741d473c3ffd2152b965e27267fabe1ff63808c7e0354bf5cea1576a9ec6fe0714bb7192be1d4ce65ca837421e2729cb1d9f9d9a1ab7","name":"kerg2.csv","type":"text/csv","lastModified":1718189203004.113,"size":1786200}] 2f:{"title":"Nicht die Fläche wählt, sondern die Menschen!","cells":[{"id":0,"value":"md`# Nicht die Fläche wählt, sondern die Menschen!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1681,"value":"Wahlergebnisse werden häufig als [Choroplethenkarten](https://de.wikipedia.org/wiki/Choroplethenkarte) auf Landkreisebene dargestellt. \nEin Nachteil bei dieser Darstellungsform ist jedoch, dass die Größe der gezeigten Flächen (Landkreise) nicht mit der Bevölkerungsdichte zusammenhängt. \n\nDas Wahlergebnis wird dadurch visuell verzerrt, da z.B. große Landkreise mit geringer Bevölkerungsdichte (z.B. Stendal) mehr Raum einnehmen als Großstädte wie Berlin, Hamburg oder Köln.\n\nDie hier gezeigte, animierte Karte wandelt jeden Landkreis in einen Punkt um, wobei die Größe des Punktes proportional zur Anzahl der Wähler-/innen ist 👉 \nDas Wahlergebnis wird dadurch besser abgebildet und weniger Verzerrt dargestellt. \n\nDie Darstellung basiert auf der Karte [Try to impeach this? Challenge accepted!](https://observablehq.com/@karimdouieb/try-to-impeach-this-challenge-accepted) von Karim Douïeb.","pinned":false,"hidden":false,"mode":"md"},{"id":1626,"value":"

Europawahl
Stärkste Kraft 2024

","pinned":false,"hidden":false,"mode":"html"},{"id":1295,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1581,"value":"

${Swatches(\n d3.scaleOrdinal(\n [\"CDU/CSU\", \"AfD\", \"GRÜNE\", \"SPD\"],\n [\"#000\", \"#469CDA\", \"#4D7832\", \"#C42A27\"]\n )\n)}

","pinned":false,"hidden":false,"mode":"html"},{"id":1661,"value":"

Europawahl
Stärkste Kraft 2024

","pinned":false,"hidden":false,"mode":"html"},{"id":1239,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1663,"value":"

${Swatches(\n d3.scaleOrdinal(\n [\"CDU/CSU\", \"AfD\", \"GRÜNE\", \"SPD\"],\n [\"#000\", \"#469CDA\", \"#4D7832\", \"#C42A27\"]\n )\n)}

","pinned":false,"hidden":false,"mode":"html"},{"id":1654,"value":"

Europawahl
Stärkste Kraft 2024

","pinned":false,"hidden":false,"mode":"html"},{"id":1262,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1656,"value":"

${Swatches(\n d3.scaleOrdinal(\n [\"CDU/CSU\", \"AfD\", \"GRÜNE\", \"SPD\"],\n [\"#000\", \"#469CDA\", \"#4D7832\", \"#C42A27\"]\n )\n)}

","pinned":false,"hidden":false,"mode":"html"},{"id":1522,"value":"width = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":1539,"value":"height = 500","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":1230,"value":"radiusScale = {\n const populationMax = d3.max(stimmen_kreise, (c) => c.Wahlberechtigte);\n return d3.scaleSqrt().domain([0, populationMax]).range([1, maxRadius]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1285,"value":"spreadCounties = applySimulation(kreise)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"applySimulation = (nodes) => {\n const simulation = d3.forceSimulation(nodes)\n .force(\"cx\", d3.forceX().x(d => width / 2).strength(0.02))\n .force(\"cy\", d3.forceY().y(d => width * (5/8) / 2).strength(0.02))\n .force(\"x\", d3.forceX().x(d => d.properties.centroid ? d.properties.centroid[0] : 0).strength(0.3))\n .force(\"y\", d3.forceY().y(d => d.properties.centroid ? d.properties.centroid[1] : 0).strength(0.3))\n .force(\"charge\", d3.forceManyBody().strength(-1))\n .force(\"collide\", d3.forceCollide().radius(d => d.properties.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 console.log(`${Math.round(100*i/200)}%`)\n }\n\n return simulation.nodes();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"format = ({\n density: (x) => x > 1000 ? d3.format(\".2s\")(x) : d3.format(\".3r\")(x),\n percent: d3.format(\".1%\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"projection = d3\n .geoAlbers()\n .angle(297)\n .fitSize([400, 500], topojson.feature(de, de.objects.VG250_KRS))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1441,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1404,"value":"$35","pinned":true,"hidden":false,"mode":"sql","output":"stimmen_kreise","database":"var:stimmen"},{"id":1384,"value":"stimmen = {\n // Die Daten wurden vom Open-Data Portal der Landeswahlleiterin am 12.06.2024 abgerufen:\n // https://www.bundeswahlleiterin.de/europawahlen/2024/ergebnisse/opendata/ew24/csv/kerg2.csv\n // Da im Open-Data Portal kein CORS-Header gesetzt wird, können wir im Notebook leider nicht direkt mit der URL arbeiten. Ich habe die Datei deshalb heruntergeladen und im Notebook angehangen.\n\n // Wie es sich gehört für eine deutsche Behörde ist die CSV-Datei auch unnötig komplex aufgebaut, damit man sie auch möglichst umständlich parsen muss. Die eigentliche Kopfzeile befindet sich in der 10. Zeile, davor befinden sich Metadaten.\n const csvString = await FileAttachment(\"kerg2.csv\").text();\n // Wir trennen den Dateiinhalt nach Zeilenumbrüchen, und ignorieren alles vor der 10. Zeile\n return d3\n .dsvFormat(\";\")\n .parse(csvString.split(\"\\n\").slice(9).join(\"\\n\"), (d, i) => ({\n ...d,\n Prozent: +d.Prozent.replace(\",\", \".\"),\n Anzahl: +d.Anzahl\n }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1399,"value":"de = {\n // Quelle der Landkreisgeometrien: GeoBasis-DE / BKG 2023\n // https://www.zensus2022.de/DE/Presse/Grafik/shapefile.html\n // Die im Link enthaltene Shape-Datei \"VG250_KRS\" wurden mit mapshaper.org in WGS84 reprojeziert. Die Geometrien wurden vereinfacht, um die Darstellung im Browser zu beschleunigen.\n return FileAttachment(\"VG250_KRS (1)@1.json\").json();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"regression = require(\"https://bundle.run/regression@2.0.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1569,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1576,"value":"import { Swatches } from \"@d3/color-legend\"","pinned":true,"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":1223,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1289,"value":"flubber = require('flubber')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}

EuropawahlStärkste Kraft 2024

EuropawahlStärkste Kraft 2024

EuropawahlStärkste Kraft 2024

Europawahl
Stärkste Kraft 2024

Europawahl
Stärkste Kraft 2024

Europawahl
Stärkste Kraft 2024