2b:null 2c:["$","title",null,{"children":"Berlin Repeat State Election 2023\"It's not a majority vote, my friend!\" | Christoph Kinkeldey | Observable"}] 31:T153b,chart = { let tilt = cellType == "Hexagonal" ? 0 : -5; let boundsX = cellType == "Hexagonal" ? [-0.2, 1.2] : [0, 1]; let boundsY = cellType == "Hexagonal" ? [0, 1] : [0, 1]; let patternFactor = 1; //boundsY[1] - boundsY[0]; let cell_stroke_width = "0.5px"; const width = 400, height = 300; const marginRight = 100; let bg_col = "#fff"; let bg_col_cell = "#fff"; let bg_col_stroke = "#fff"; let colors = { spd: hsluv.color("red"), cdu: hsluv.color("black"), green: hsluv.color("green"), linke: hsluv.color("purple"), afd: hsluv.color("blue"), fdp: hsluv.color("yellow"), others: hsluv.color("turquoise") }; const container = html``; const svg = d3 .select(container) .append("svg") .style("background", bg_col) .attr("viewBox", `0 0 ${width + marginRight} ${height}`); const div = d3.select(container).append("div").classed("tooltip", true); var projection = d3.geoMercator(); projection.fitSize([width, height], outline); var path = d3.geoPath().projection(projection); var defs = svg.append("svg:defs"); let pattern = getPattern( defs, tilt, bg_col_cell, boundsX, boundsY, patternFactor, colors ); svg .append("g") .selectAll("path") .data(outline.features) .enter() .append("path") .attr("id", "chart_outline") .attr("d", path) .style("fill", "#eee") .style("stroke", "#aaa") .style("stroke-width", 0); //cell_stroke_width); svg .append("g") .selectAll("path") .data(electionData.features) .enter() .append("path") .attr("id", "chart_svg") .attr("d", path) .style("fill", function (d) { return "url(#" + d.properties.AWK + ")"; }) .style("fill-opacity", function (d) { return 0.5 + (0.5 * (d.properties.Waehler - 13316)) / (24692 - 13316); }) .style("stroke", bg_col_stroke) .style("stroke-width", cell_stroke_width); // highlight for hover svg .append("g") .selectAll("path") .data(electionData.features) .enter() .append("path") .attr("id", function (d) { return "bezirk" + d.properties.AWK; }) .attr("d", path) .style("opacity", 0) .style("fill-opacity", 0) .style("stroke", "#fff") .style("stroke-width", "2px") .on("mouseover", (event, d) => { d3.select("#bezirk" + d.properties.AWK) .transition() .duration(10) .style("opacity", 1); tooltip.display(d, tooltipContents); }) .on("mouseout", (event, d) => { d3.select("#bezirk" + d.properties.AWK) .transition() .style("opacity", 0); tooltip.hide(); }) .on("mousemove", (event) => { tooltip.move(event); }); const tooltip = new Tooltip(div); function tooltipContents(d) { const swatch_html = ";width:1em;height:1em;border: 0px solid #eee;;border-radius:5px'>oo"; return ( "

" + "

" + d.properties.Gebietsnam + "

" + "" + " CDU: " + d.properties.P02p + "%
" + "" + " DIE LINKE: " + d.properties.P04p + "%
" + "" + " FDP: " + d.properties.P06p + "%
" + "Wählende: " + d.properties.Waehler + "
" + "Wahlbeteiligung: " + d.properties.Waehlerp + "%

" ); } addLegend(container, colors); return container; }32:T4e5,## What can we see here? This is an _experimental map_ of the Berlin election of February 2023 (https://en.wikipedia.org/wiki/2023_Berlin_repeat_state_election). Each cell (you can switch between hex and square) represents an electoral district (Wahlkreis). It shows the fractions of the parties' votes (Zweitstimmen) as colored subareas. Hover over the cells to get detailed information. ⚠️ The location of the cells is not really intiuitive, handle with caution. Although the CDU won overall, the result is not easy to interpret. It seems true that many areas in the inner city were won by the GREENS and the outer areas by the CDU—but this map paints a more nuanced picture: * The SPD has had fairly consistent success across the city (it may see this as its mission to reunite voters). * The LINKE has been quite successful in the center and east (in areas dominated by both the GRÜNE and the AfD). * Apart from their well-known success in the eastern districts, other parts of Berlin show a remarkable performance of the AfD (Reinickendorf, Spandau). I am not an expert in election analysis and none of this is new. But this kind of map provides a new perspective, don't you think? Feel free to contact me [here](https://kinkeldey.com)!33:T4d0, ## Why did I do this? I was a bit frustrated about the simplistic interpretation of the election results by certain media. Parts of it were due to maps showing green (GRÜNE) in the inner city and black (CDU) in the outer parts. This is just part of the story! So I asked myself: why are election maps usually choropleths? We all love choroplets, they are nice to look at and make it easy to identify areas of the city. But here: * The exact geographic regions are of little importance. * Topology (which areas are contiguous) is important, but doesn't have to be perfect. * In the German electoral system (proportional representation), it is not only the party with the majority that is important, but the _distribution_ of votes. It is certainly not a good idea to try to represent several parties in a choropleth map. So how about **tile grid maps**? There were some approaches using tile grid maps for election maps (e.g., by [Cedric Scherer](https://twitter.com/cedscherer/status/1441849715541397506) or [ElectionMapsUK](https://twitter.com/ElectionMapsUK/status/1697184532741460262) but I only know examples showing the winning party per cell. This is a hack to explore the potential of tile grid maps for this purpose.34:T718,addLegend = function (container, colors) { const swatch_html = ";width:1em;height:1em;border: 0px solid #eee;;border-radius:5px'>oo"; d3.select(container) .append("div") .attr("class", "legend") .attr("id", "legend") .style("background-color", "#fff") .style("position", "absolute") .style("top", "10%") .style("right", "10%") .style("padding", "10px") .style("border-radius", "10px") .style("font-family", "arial") .style("font-size", "1vw") .html( "

Zweitstimmen
Berlinwahl 2023

" + " CDU
" + " LINKE
" + " FDP
" + "Halbtransparent = weniger Wählende" ); }35:T1171,getPattern = function ( defs, tilt, bg_col_cell, boundsX, boundsY, patternFactor, colors ) { let pattern = defs .selectAll(null) .data(electionData.features) .enter() .append("svg:pattern") .attr("id", function (d) { return d.properties.AWK; }) .attr("patternTransform", "rotate(" + tilt + ")") .attr("patternUnits", "objectBoundingBox") .attr("viewBox", "0 0 1 1") .attr("width", 1) .attr("height", 1) .attr("fill", bg_col_cell); // 1 SPD pattern .append("rect") .attr("x", boundsX[0]) .attr("y", boundsY[0]) .attr("width", boundsX[1] - boundsX[0]) .attr("height", function (d) { return (patternFactor * d.properties.P01p.replace(",", ".")) / 100; }) .attr("fill", colors["spd"]); // 2 CDU pattern .append("rect") .attr("x", boundsX[0]) .attr("y", function (d) { return ( boundsY[0] + (patternFactor * d.properties.P01p.replace(",", ".")) / 100 ); }) .attr("width", boundsX[1] - boundsX[0]) .attr("height", function (d) { return (patternFactor * d.properties.P02p.replace(",", ".")) / 100; }) .attr("fill", colors["cdu"]); // 3 GRUENE pattern .append("rect") .attr("x", boundsX[0]) .attr("y", function (d) { return ( boundsY[0] + patternFactor * (d.properties.P01p.replace(",", ".") / 100 + d.properties.P02p.replace(",", ".") / 100) ); }) .attr("width", boundsX[1] - boundsX[0]) .attr("height", function (d) { return (patternFactor * d.properties.P03p.replace(",", ".")) / 100; }) .attr("fill", colors["green"]); // LINKE pattern .append("rect") .attr("x", boundsX[0]) .attr("y", function (d) { return ( boundsY[0] + patternFactor * (d.properties.P01p.replace(",", ".") / 100 + d.properties.P02p.replace(",", ".") / 100 + d.properties.P03p.replace(",", ".") / 100) ); }) .attr("width", boundsX[1] - boundsX[0]) .attr("height", function (d) { return (patternFactor * d.properties.P04p.replace(",", ".")) / 100; }) .attr("fill", colors["linke"]); // AFD pattern .append("rect") .attr("x", boundsX[0]) .attr("y", function (d) { return ( boundsY[0] + patternFactor * (d.properties.P01p.replace(",", ".") / 100 + d.properties.P02p.replace(",", ".") / 100 + d.properties.P03p.replace(",", ".") / 100 + d.properties.P04p.replace(",", ".") / 100) ); }) .attr("width", boundsX[1] - boundsX[0]) .attr("height", function (d) { return d.properties.P05p.replace(",", ".") / 100; }) .attr("fill", colors["afd"]); // FDP pattern .append("rect") .attr("x", boundsX[0]) .attr("y", function (d) { return ( boundsY[0] + patternFactor * (d.properties.P01p.replace(",", ".") / 100 + d.properties.P02p.replace(",", ".") / 100 + d.properties.P03p.replace(",", ".") / 100 + d.properties.P04p.replace(",", ".") / 100 + d.properties.P05p.replace(",", ".") / 100) ); }) .attr("width", boundsX[1] - boundsX[0]) .attr("height", function (d) { return d.properties.P06p.replace(",", ".") / 100; }) .attr("fill", colors["fdp"]); // SONSTIGE pattern .append("rect") .attr("x", boundsX[0]) .attr("y", function (d) { return ( boundsY[0] + patternFactor * (d.properties.P01p.replace(",", ".") / 100 + d.properties.P02p.replace(",", ".") / 100 + d.properties.P03p.replace(",", ".") / 100 + d.properties.P04p.replace(",", ".") / 100 + d.properties.P05p.replace(",", ".") / 100 + d.properties.P06p.replace(",", ".") / 100) ); }) .attr("width", boundsX[1] - boundsX[0]) .attr("height", function (d) { return ( patternFactor * (1 - (d.properties.P01p.replace(",", ".") / 100 + d.properties.P02p.replace(",", ".") / 100 + d.properties.P03p.replace(",", ".") / 100 + d.properties.P04p.replace(",", ".") / 100 + d.properties.P05p.replace(",", ".") / 100 + d.properties.P06p.replace(",", ".") / 100)) ); }) .attr("fill", colors["others"]); return pattern; }36:T559,class Tooltip { constructor(selection) { if (!selection || !selection.size()) { throw "Requires a tooltip div element selection"; } this._selection = selection; } move(event) { if (!event) return; const margin = 20; const { clientX: x, clientY: y } = event; const { width, height } = this.selection.node().getBoundingClientRect(); const left = this.clamp( margin, x - width / 2, window.innerWidth - width - margin ); const svg_height = this.selection .node() .parentNode.getBoundingClientRect().height; const top = svg_height > y + margin + height ? y + margin : y - height - margin; this.selection.style("top", `${top}px`).style("left", `${left}px`); } display(datum, callback) { if (!callback || typeof callback !== "function") { throw "ToolTip.display requires a callback function that returns an HTML string"; } this.selection.style("display", "block").html(callback(datum)); } hide() { this.selection.style("display", "none").html(""); } clamp(min, d, max) { return Math.max(min, Math.min(max, d)); } get selection() { return this._selection; } set selection(sel) { if (sel && sel.size()) { this._selection = sel; } else { throw "selection must be a non-empty selected element"; } } }37:[{"id":"06a8b64c6f28b4d033be91ea0676f58e49642878a07cfc602f4152c4cc7331242c111fdc96bb0adf62f0fdf11aa7e2724fba585e14c38ca65b8d97244db3a32a","href":"https://static.observableusercontent.com/files/06a8b64c6f28b4d033be91ea0676f58e49642878a07cfc602f4152c4cc7331242c111fdc96bb0adf62f0fdf11aa7e2724fba585e14c38ca65b8d97244db3a32a","name":"bw23-cells_hex_4326@13.geojson","type":"application/geo+json","lastModified":1676847007612.723,"size":208821},{"id":"8c4f38b908b16cfa745a69579bd7c7896348a15f1ce173dcf5a4770e7dfcf223bf32222cd77db7761ac17139632a7fd8ec3d319e466660ba4a384f65d07915c8","href":"https://static.observableusercontent.com/files/8c4f38b908b16cfa745a69579bd7c7896348a15f1ce173dcf5a4770e7dfcf223bf32222cd77db7761ac17139632a7fd8ec3d319e466660ba4a384f65d07915c8","name":"bw23-cells_4326@7.geojson","type":"application/geo+json","lastModified":1676634855698.386,"size":438273},{"id":"00bfdb5f78feb9d930e79079bb485305248727d1920781b6a4f2cb922ac1a68214408b64a542d73a7ddcd1c69050f5652d4048c1b70a471c4a23f52e0fa567c6","href":"https://static.observableusercontent.com/files/00bfdb5f78feb9d930e79079bb485305248727d1920781b6a4f2cb922ac1a68214408b64a542d73a7ddcd1c69050f5652d4048c1b70a471c4a23f52e0fa567c6","name":"bw23-cells_diamond_4326.geojson","type":"application/geo+json","lastModified":1676641521456.422,"size":219150},{"id":"2d46c837a9dd884e724c929e4a53bb53d4c3547fa1f93bb48959aef336d046434cf487dbb75226b12a7b8197f1e023d48b825929752ba4dc3265b7558f34dc9a","href":"https://static.observableusercontent.com/files/2d46c837a9dd884e724c929e4a53bb53d4c3547fa1f93bb48959aef336d046434cf487dbb75226b12a7b8197f1e023d48b825929752ba4dc3265b7558f34dc9a","name":"bw23-cells_hex_4326@10.geojson","type":"application/geo+json","lastModified":1676807869371.07,"size":226005},{"id":"91367b80b766e33e517c1e02ba1a64dc038b54b098cceff6d0de3db78a23b06e8700d4889f31d071838316bc31a26b1e608a4c0e6fbff0b28c18bccdbcde3882","href":"https://static.observableusercontent.com/files/91367b80b766e33e517c1e02ba1a64dc038b54b098cceff6d0de3db78a23b06e8700d4889f31d071838316bc31a26b1e608a4c0e6fbff0b28c18bccdbcde3882","name":"bw23-cells_4326_newtry@1.geojson","type":"application/geo+json","lastModified":1676845939337.427,"size":200981},{"id":"37854608e634c11d01833a2099402f5efa8aae2e9544abecdcba576b8fc39e0d72460e17c6e0eb424a20f219b1416b7ec4896afc6b6e5d91233befe8a001062b","href":"https://static.observableusercontent.com/files/37854608e634c11d01833a2099402f5efa8aae2e9544abecdcba576b8fc39e0d72460e17c6e0eb424a20f219b1416b7ec4896afc6b6e5d91233befe8a001062b","name":"bw23-cells_4326_new.geojson","type":"application/geo+json","lastModified":1676840551768.968,"size":201004},{"id":"f7e54f176117b894144047e6907999f59ffc2fa63b95341391c141674b03220b9fd706b2c6a78632f3a5c274ea489f0806fe0177eb4c03779842b1dff20a05f6","href":"https://static.observableusercontent.com/files/f7e54f176117b894144047e6907999f59ffc2fa63b95341391c141674b03220b9fd706b2c6a78632f3a5c274ea489f0806fe0177eb4c03779842b1dff20a05f6","name":"bw23-cells_4326_newtry@2.geojson","type":"application/geo+json","lastModified":1676846702171.979,"size":201917},{"id":"4b2238995b06366a47948f6b9ac6c486d5b692e99949cc2782d28dc0c78085dc83384a1752a8eab01b52dc11cf268f5aa6c9bf7771e2dc84668f92dfc1955a34","href":"https://static.observableusercontent.com/files/4b2238995b06366a47948f6b9ac6c486d5b692e99949cc2782d28dc0c78085dc83384a1752a8eab01b52dc11cf268f5aa6c9bf7771e2dc84668f92dfc1955a34","name":"bw23-cells_hex_4326@11.geojson","type":"application/geo+json","lastModified":1676837945483.56,"size":207885},{"id":"e45593efad60a1304815542a658d33c02a1dc171cda3e8092ccf6d0e2c98d51e771e363f2528ef9d9225ba2074f70534b73e3fb975944a2f5350bc8b0b44fde8","href":"https://static.observableusercontent.com/files/e45593efad60a1304815542a658d33c02a1dc171cda3e8092ccf6d0e2c98d51e771e363f2528ef9d9225ba2074f70534b73e3fb975944a2f5350bc8b0b44fde8","name":"bw23-cells_4326_new@2.geojson","type":"application/geo+json","lastModified":1676844617901.417,"size":200997},{"id":"ef3ee948d106b6da0ea315f4c266695b9c7e646ee634cd642aacafd80d8469c85b6d9f1d3e1d8dfb34b620e3de47033b491d45d19d9d9ef28dcd78dd28cb9ebf","href":"https://static.observableusercontent.com/files/ef3ee948d106b6da0ea315f4c266695b9c7e646ee634cd642aacafd80d8469c85b6d9f1d3e1d8dfb34b620e3de47033b491d45d19d9d9ef28dcd78dd28cb9ebf","name":"bw23-cells_4326@13.geojson","type":"application/geo+json","lastModified":1676846863170.565,"size":201598},{"id":"12cbffc520d7c7ede8010b8ff43f2e82cd1936d5c837812b95418bc1e10c7cef20dc0585153c244ea995ae8da5e12cc51d84e9090e6dde6b4ae2cfa88acc0bc9","href":"https://static.observableusercontent.com/files/12cbffc520d7c7ede8010b8ff43f2e82cd1936d5c837812b95418bc1e10c7cef20dc0585153c244ea995ae8da5e12cc51d84e9090e6dde6b4ae2cfa88acc0bc9","name":"bw23-cells_4326_new2.geojson","type":"application/geo+json","lastModified":1676844957618.768,"size":200998},{"id":"fdb220da8a2c2cd17e4de7606f23fdfcf2473aa92ecc15fa8dea933dc24cd6cd24a9796c914a00c8e9eeef593c76b084f1b88ff725d62573760a4520740ca573","href":"https://static.observableusercontent.com/files/fdb220da8a2c2cd17e4de7606f23fdfcf2473aa92ecc15fa8dea933dc24cd6cd24a9796c914a00c8e9eeef593c76b084f1b88ff725d62573760a4520740ca573","name":"bw23-cells_4326@11.geojson","type":"application/geo+json","lastModified":1676845139443.004,"size":200993},{"id":"fdb220da8a2c2cd17e4de7606f23fdfcf2473aa92ecc15fa8dea933dc24cd6cd24a9796c914a00c8e9eeef593c76b084f1b88ff725d62573760a4520740ca573","href":"https://static.observableusercontent.com/files/fdb220da8a2c2cd17e4de7606f23fdfcf2473aa92ecc15fa8dea933dc24cd6cd24a9796c914a00c8e9eeef593c76b084f1b88ff725d62573760a4520740ca573","name":"bw23-cells_4326@12.geojson","type":"application/geo+json","lastModified":1676845285171.668,"size":200993},{"id":"4012e3c23e37aa0beff07fac1325785567ba5fcb6300146b3bf5b9034026959571dbf1e397f4040f80f2f306142ef76d3fec8df798e83a9e35dadaa2b3c06a59","href":"https://static.observableusercontent.com/files/4012e3c23e37aa0beff07fac1325785567ba5fcb6300146b3bf5b9034026959571dbf1e397f4040f80f2f306142ef76d3fec8df798e83a9e35dadaa2b3c06a59","name":"bw23-cells_4326_works.geojson","type":"application/geo+json","lastModified":1676845553902.408,"size":210431},{"id":"9d3222072744335628c9aad5184b6b64cfc3f9a60cfbe6fbc401c8509240e9c9c85d544e69e5070933aefc403716990c07bf4acd7338bc464f5cd2bb29aba868","href":"https://static.observableusercontent.com/files/9d3222072744335628c9aad5184b6b64cfc3f9a60cfbe6fbc401c8509240e9c9c85d544e69e5070933aefc403716990c07bf4acd7338bc464f5cd2bb29aba868","name":"bw23-cells_4326_newtry.geojson","type":"application/geo+json","lastModified":1676845657366.493,"size":210438},{"id":"e45593efad60a1304815542a658d33c02a1dc171cda3e8092ccf6d0e2c98d51e771e363f2528ef9d9225ba2074f70534b73e3fb975944a2f5350bc8b0b44fde8","href":"https://static.observableusercontent.com/files/e45593efad60a1304815542a658d33c02a1dc171cda3e8092ccf6d0e2c98d51e771e363f2528ef9d9225ba2074f70534b73e3fb975944a2f5350bc8b0b44fde8","name":"bw23-cells_4326_new@1.geojson","type":"application/geo+json","lastModified":1676842000942.807,"size":200997},{"id":"fdb220da8a2c2cd17e4de7606f23fdfcf2473aa92ecc15fa8dea933dc24cd6cd24a9796c914a00c8e9eeef593c76b084f1b88ff725d62573760a4520740ca573","href":"https://static.observableusercontent.com/files/fdb220da8a2c2cd17e4de7606f23fdfcf2473aa92ecc15fa8dea933dc24cd6cd24a9796c914a00c8e9eeef593c76b084f1b88ff725d62573760a4520740ca573","name":"bw23-cells_4326@10.geojson","type":"application/geo+json","lastModified":1676839640083.235,"size":200993},{"id":"a044fede0ccd9295a75813f5a3ae62ae956897a8b0af4a2a601bfb14b8bd12ca7bb4adc9bf4cf22d71bb7bace8b44ea80bbbd158df5878b5e7818379e9fefe0f","href":"https://static.observableusercontent.com/files/a044fede0ccd9295a75813f5a3ae62ae956897a8b0af4a2a601bfb14b8bd12ca7bb4adc9bf4cf22d71bb7bace8b44ea80bbbd158df5878b5e7818379e9fefe0f","name":"bw23-cells_hex_3857@3.geojson","type":"application/geo+json","lastModified":1676839725779.127,"size":213311},{"id":"4b2238995b06366a47948f6b9ac6c486d5b692e99949cc2782d28dc0c78085dc83384a1752a8eab01b52dc11cf268f5aa6c9bf7771e2dc84668f92dfc1955a34","href":"https://static.observableusercontent.com/files/4b2238995b06366a47948f6b9ac6c486d5b692e99949cc2782d28dc0c78085dc83384a1752a8eab01b52dc11cf268f5aa6c9bf7771e2dc84668f92dfc1955a34","name":"bw23-cells_hex_4326@12.geojson","type":"application/geo+json","lastModified":1676839763421.561,"size":207885},{"id":"84a17a56972bfd736a34b5de312242ad2c744b6ca655c02f121d0f0882e5dd4f60e2272bae7bf2ebb8f790ef894b6474c0e3cb510546e296493da5e8aba76fd0","href":"https://static.observableusercontent.com/files/84a17a56972bfd736a34b5de312242ad2c744b6ca655c02f121d0f0882e5dd4f60e2272bae7bf2ebb8f790ef894b6474c0e3cb510546e296493da5e8aba76fd0","name":"berlinwahl23_4326@1.geojson","type":"application/geo+json","lastModified":1676885454632.655,"size":2322082},{"id":"88d4f29351f6fa8538491ede00f3ecd482f70e96fec41f3c9caf128b893cf83893365a603f845608ac530082bfac9b96846607266615bbd3e80b21996a5e12af","href":"https://static.observableusercontent.com/files/88d4f29351f6fa8538491ede00f3ecd482f70e96fec41f3c9caf128b893cf83893365a603f845608ac530082bfac9b96846607266615bbd3e80b21996a5e12af","name":"berlin-outline_4326.geojson","type":"application/geo+json","lastModified":1676885706081.52,"size":357643},{"id":"f26abf5fc29ba233c06668fcc4f2d3cc872c2c684c5f6a5b91ba34696239ae91342faa82708c9acc722585929fccc4fb70aca1aaee404e3eb928bf105a81c74a","href":"https://static.observableusercontent.com/files/f26abf5fc29ba233c06668fcc4f2d3cc872c2c684c5f6a5b91ba34696239ae91342faa82708c9acc722585929fccc4fb70aca1aaee404e3eb928bf105a81c74a","name":"bw-stripes.png","type":"image/png","lastModified":1676888891199.787,"size":358438},{"id":"34baefeaadd35aa5524e87721dc15a49460948ef6ab4beffdfea5aacd52aaf4dea38b0861acc8cf0ca1cda560407552fa9be54acde59a6de5b3b194d9d5d5979","href":"https://static.observableusercontent.com/files/34baefeaadd35aa5524e87721dc15a49460948ef6ab4beffdfea5aacd52aaf4dea38b0861acc8cf0ca1cda560407552fa9be54acde59a6de5b3b194d9d5d5979","name":"Screenshot 2023-02-20 at 11.34.49.png","type":"image/png","lastModified":1676892937915.538,"size":331161}] 2f:{"id":"d5281363fc067564","slug":null,"title":"Berlin Repeat State Election 2023\"It's not a majority vote, my friend!\"","thumbnail":"289cfad8913dc23363cd89d4c15317c2f855b13fb0efce02a3bd2d08e6094b7c","access_level":"public","create_time":"$D2023-02-15T15:38:37.601Z","update_time":"$D2026-03-04T18:25:05.437Z","view_time":null,"first_public_time":"$D2023-02-15T15:38:37.601Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"1b28227b930ead72","login":"ckinkeldey","name":"Christoph Kinkeldey","avatar_url":"https://avatars-next.observableusercontent.com/10ff9823e4f9abe76e879a914b766484a5407a60ea308387662406655c88c679","tier":"starter_2024","bio":""},"version":1473,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"75c82712345a6f86","login":"ckinkeldey","name":"Christoph Kinkeldey","avatar_url":"https://avatars-next.observableusercontent.com/8127dfe755d2fb390cd77786e3ffaa51a0f7040aef8b4237fe98e0cb639afd89","tier":null,"bio":""}],"members":[{"type":"individual","id":"75c82712345a6f86","login":"ckinkeldey","name":"Christoph Kinkeldey","avatar_url":"https://avatars-next.observableusercontent.com/8127dfe755d2fb390cd77786e3ffaa51a0f7040aef8b4237fe98e0cb639afd89","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Berlin Repeat State Election 2023\"It's not a majority vote, my friend!\"","cells":[{"id":0,"value":"# Berlin Repeat State Election 2023
\"It's not a majority vote, my friend!\"\n## Zweitstimmen der Wiederholungswahl zum 19. Abgeordnetenhaus von Berlin vom 12. Februar 2023","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1264,"value":"Hover over the map for more information on specific electoral areas (Wahlkreise).
\nTransparency means smaller absolute number of voters than in other areas.\nWorks OK on mobile devices but not 100%.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":414,"value":"viewof cellType = Inputs.radio([\"Hexagonal\", \"Square\"], {\n label: \"Switch grid type:\",\n value: \"Hexagonal\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1214,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1236,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1245,"value":"## Are they any better than a choropleth map?\n☀ No distortions due to large (visually prominent) areas
\n☀ We can show more subtle patterns in the distribution of votes
\n☀ Number of votes can be shown (although not yet in ideal form)
\n🌧 Geography is distorted: Cells do not have the shape of Berlin & locations are not always as expected (e.g. Mitte ist too far northwest)
\n🌧 In current form: percentages as shown in the cells are not exact\n\nAll in all, it was harder than I expected and a lot of small issues emerged when working with the cells. It starts with the location of the tiles that cannot really be intuitive because the areas are quite different in size in reality. \n\nNow I know why there are so few tile grid maps!\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1288,"value":"## What could be the next steps?\nIn my next procrastination phase, I would:\n* Add geographic features to make maps more representative of Berlin (S-Bahn-Ring? Spree river?)\n* Visually weight the percentages\n* Try to only show three winning parties or so\n* Explore the power of patterns further\n* Use tilted squares as grid\n* Try to represent non-voters\n\nI also played around with equally-sized stripes, representing percentages by opacity. Did not work well visually.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1450,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1203,"value":"## How did I make this?\n\nI used the following sources:\n\n* Election Data (12 February 2023): https://www.wahlen-berlin.de/wahlen/BE2023/AFSPRAES/agh/downloads.html\n* Tiles created with `tilemaps` library in R: https://github.com/kaerosen/tilemaps\n* Visualization in D3.js https://d3js.org/\n* Perceptually equidistant colors with https://github.com/petulla/d3-hsluv\n* Tooltip class from https://observablehq.com/@clhenrick/tooltip-component\n\n& special thanks to my buddies [Till Nagel](https://services.informatik.hs-mannheim.de/~nagel/) and [Seb Meier](https://www.sebastianmeier.eu/) for their input!\n\n---\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":939,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"electionData = cellType == \"Hexagonal\"\n ? await FileAttachment(\"bw23-cells_hex_4326@13.geojson\").json()\n : //await FileAttachment(\"bw23-cells_4326_new2.geojson\").json()\n await FileAttachment(\"bw23-cells_4326@13.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1390,"value":"outline = await FileAttachment(\"berlin-outline_4326.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":721,"value":"hsluv = require(\"d3-color@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 30:"$2f:body"

ZweitstimmenBerlinwahl 2023

Zweitstimmen
Berlinwahl 2023