2b:null 2c:["$","title",null,{"children":"Landtagswahl Sachsen Anhalt 2021 | lab | Observable"}] 31:T1edd,chartCK = { const ATTR_STIMMEN = "Gültige Zweitstimmen"; const ATTR_GRUENE = "GRÜNE"; const ATTR_CDU = "CDU"; const ATTR_SPD = "SPD"; const ATTR_FDP = "FDP"; const ATTR_AFD = "AfD"; const ATTR_LINKE = "DIE LINKE"; const ATTR_WAHLBERECHTIGTE = "Wahlberechtigte"; const ATTR_WAEHLER = "Wähler"; const CELL_SIZE = 70; const WIDTH = 800; const HEIGHT = 1050; const MARGIN_RIGHT = 0; const PADDING = cellPadding; const GRID_TOP = 180; const GRID_LEFT = 0; const RECT_ROUND = 4; const BG_COLOR = "#eee"; const COLORS = originalPartyColors; const CELL_PATTERN = getPatternVertical; const LABEL_SIZE = 15; const container = html``; const svg = d3 .select(container) .append("svg") .style("background", "white") .attr("viewBox", `0 0 ${width + MARGIN_RIGHT} ${HEIGHT}`); const div = d3.select(container).append("div").classed("tooltip", true); const defs = svg.append("svg:defs"); // Überschrift svg .append("text") .attr("x", 300) .attr("y", 40) .attr("text-anchor", "middle") .style("font-family", "'Open Sans', sans-serif") .attr("font-size", 22) .attr("font-weight", "bold") .text("Landtagswahl 2021 – Sachsen-Anhalt"); svg .append("text") .attr("x", 300) .attr("y", 65) .attr("text-anchor", "middle") .style("font-family", "'Open Sans', sans-serif") .attr("font-size", 14) .attr("fill", "#555") .text("Anteile oder Gewinner je Wahlkreis"); svg .append("text") .attr("x", 400) .attr("y", 1045) .attr("text-anchor", "middle") .style("font-family", "'Open Sans', sans-serif") .attr("font-size", 14) .attr("fill", "#999") .text("viu:lab Forschungsgruppe, HAW Hamburg"); // Outline const projection = d3.geoMercator().fitSize([600, 700], outline); const path = d3.geoPath().projection(projection); //Ba-Wü svg .append("g") .selectAll("path") .data(outline.features) .enter() .append("path") .attr("d", path) .attr("fill", "#eee") .attr("stroke", "#aaa") .attr("stroke-width", 0) .attr("transform", "translate(0,170) scale(1,1.22)"); // Bodensee const see = d3.geoMercator().fitSize([600, 700], bodensee); const pathSee = d3.geoPath().projection(see); const center = path.centroid(bodensee); const scale = 0.9; svg .append("path") .datum(bodensee) .attr("d", path) .attr("fill", "#badbfe") .attr( "transform", `translate(369, 986) scale(${scale}) translate(${-center[0]},${-center[1]})` ); // Pattern let pattern = CELL_PATTERN( defs, patternTilt, "#fff", [0, 1], [0, 1], 1, COLORS ); // Rechtecke svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("class", "cell") .attr("x", (d) => GRID_LEFT + d.col * (CELL_SIZE + PADDING)) .attr("y", (d) => GRID_TOP + d.row * (CELL_SIZE + PADDING)) .attr("width", CELL_SIZE) .attr("height", CELL_SIZE) .attr("rx", RECT_ROUND) .attr("fill", (d) => display === "Stimmanteile" ? `url(#${d.id})` : COLORS[winner(d)] ) .attr("stroke", "#222") .attr("stroke-width", (d) => (isCity(d.id) ? 2 : 0)); function isCity(id) { return [ "M1", "M2", "M3", "M4", "H1", "H2", "H3", "H4", "K1", "K2" ].includes(id); } svg .selectAll("text.labels") .data(data) .join("text") .attr("class", "labels") .attr("x", (d) => GRID_LEFT + d.col * (CELL_SIZE + PADDING) + CELL_SIZE / 4) .attr("y", (d) => GRID_TOP + d.row * (CELL_SIZE + PADDING) + LABEL_SIZE / 2) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .style("font-family", "'Open Sans', sans-serif") .attr("font-size", LABEL_SIZE) .attr("fill", "#fff") .attr("fill-opacity", 0.8) .text((d) => d.id); const tooltip = new Tooltip(div); // highlight for hover svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("class", "overlay") .attr("x", (d) => GRID_LEFT + d.col * (CELL_SIZE + PADDING)) .attr("y", (d) => GRID_TOP + d.row * (CELL_SIZE + PADDING)) .attr("width", CELL_SIZE) .attr("height", CELL_SIZE) .attr("rx", RECT_ROUND) .attr("id", function (d) { return "bezirk" + d.id; }) //.attr("d", path) .style("opacity", 0) .style("fill-opacity", 0) .style("stroke", "#fff") .style("stroke-width", "4px") .on("mouseover", (event, d) => { d3.select("#bezirk" + d.id) .transition() .duration(10) .style("opacity", 1); tooltip.display(d, tooltipContents); }) .on("mouseout", (event, d) => { d3.select("#bezirk" + d.id) .transition() .style("opacity", 0); tooltip.hide(); }) .on("mousemove", (event) => { tooltip.move(event); }); function tooltipContents(d) { const swatch_html = ";width:1em;height:1em;border: 0px solid #eee;;border-radius:5px'>oo"; return ( "

" + "

Wahlkreis " + d.Name + "

" + "" + " CDU: " + ((100 * d[ATTR_CDU]) / d[ATTR_STIMMEN]).toFixed(1) + "%
" + "" + " SPD: " + ((100 * d[ATTR_SPD]) / d[ATTR_STIMMEN]).toFixed(1) + "%
" + "" + " FDP: " + ((100 * d[ATTR_FDP]) / d[ATTR_STIMMEN]).toFixed(1) + "%
" + "" + //Wählende: " + //d.properties.Waehler + "
" + "Wahlbeteiligung: " + ((d[ATTR_WAEHLER] / d[ATTR_WAHLBERECHTIGTE]) * 100).toFixed(1) + "%

" ); } // Legende addLegend(container, COLORS); return container; }32:T67e,SA = [ //Ba-Wü Wahlkreise { nr: 1, id: "SW", row: 0, col: 3 }, { nr: 2, id: "GK", row: 1, col: 3 }, { nr: 3, id: "HO", row: 0, col: 5 }, { nr: 4, id: "SD", row: 1, col: 4 }, { nr: 5, id: "GT", row: 1, col: 5 }, { nr: 6, id: "BG", row: 2, col: 5 }, { nr: 7, id: "HL", row: 2, col: 3 }, { nr: 8, id: "WS", row: 2, col: 4 }, { nr: 9, id: "OW", row: 3, col: 3 }, { nr: 10, id: "M1", row: 3, col: 4 }, { nr: 11, id: "M2", row: 4, col: 4 }, { nr: 12, id: "M3", row: 4, col: 5 }, { nr: 13, id: "M4", row: 3, col: 5 }, { nr: 14, id: "HS", row: 4, col: 2 }, { nr: 15, id: "BB", row: 4, col: 1 }, { nr: 16, id: "WR", row: 5, col: 0 }, { nr: 17, id: "QB", row: 5, col: 1 }, { nr: 18, id: "AL", row: 5, col: 2 }, { nr: 19, id: "SF", row: 5, col: 3 }, { nr: 20, id: "SB", row: 5, col: 4 }, { nr: 21, id: "BU", row: 5, col: 5 }, { nr: 22, id: "KT", row: 6, col: 5 }, { nr: 23, id: "ZB", row: 4, col: 6 }, { nr: 24, id: "WB", row: 5, col: 8 }, { nr: 25, id: "JS", row: 6, col: 6 }, { nr: 26, id: "DR", row: 5, col: 6 }, { nr: 27, id: "DRW", row: 5, col: 7 }, { nr: 28, id: "BW", row: 6, col: 4 }, { nr: 29, id: "SK", row: 8, col: 3 }, { nr: 30, id: "EL", row: 6, col: 3 }, { nr: 31, id: "SH", row: 6, col: 2 }, { nr: 32, id: "QF", row: 7, col: 3 }, { nr: 33, id: "MB", row: 8, col: 5 }, { nr: 34, id: "BDS", row: 8, col: 6 }, { nr: 35, id: "H1", row: 7, col: 4 }, { nr: 36, id: "H2", row: 7, col: 5 }, { nr: 37, id: "H3", row: 7, col: 6 }, { nr: 38, id: "H4", row: 7, col: 7 }, { nr: 39, id: "WF", row: 9, col: 5 }, { nr: 40, id: "NB", row: 8, col: 4 }, { nr: 41, id: "ZT", row: 9, col: 6 } ]33:Tf57,getPatternVertical = function ( defs, tilt, bg_col_cell, boundsX, boundsY, patternFactor, colors ) { const ATTR_STIMMEN = "Gültige Zweitstimmen"; const ATTR_GRUENE = "Grüne"; const ATTR_CDU = "CDU"; const ATTR_SPD = "SPD"; const ATTR_FDP = "FDP"; const ATTR_AFD = "AfD"; const ATTR_LINKE = "DIE LINKE"; let pattern = defs .selectAll(null) .data(data) .enter() .append("svg:pattern") .attr("id", function (d) { return d.id; }) .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 GRUENE pattern .append("rect") .attr("x", boundsX[0]) .attr("y", function (d) { return boundsY[0]; }) .attr("width", boundsX[1] - boundsX[0]) .attr("height", function (d) { return d[ATTR_GRUENE] / d[ATTR_STIMMEN]; }) .attr("fill", colors["GRUENE"]); // 2 CDU pattern .append("rect") .attr("x", boundsX[0]) .attr("y", function (d) { return boundsY[0] + d[ATTR_GRUENE] / d[ATTR_STIMMEN]; }) .attr("width", boundsX[1] - boundsX[0]) .attr("height", function (d) { return d[ATTR_CDU] / d[ATTR_STIMMEN]; }) .attr("fill", colors["CDU"]); // AFD pattern .append("rect") .attr("x", boundsX[0]) .attr("y", function (d) { return ( boundsY[0] + d[ATTR_GRUENE] / d[ATTR_STIMMEN] + d[ATTR_CDU] / d[ATTR_STIMMEN] ); }) .attr("width", boundsX[1] - boundsX[0]) .attr("height", function (d) { return d[ATTR_AFD] / d[ATTR_STIMMEN]; }) .attr("fill", colors["AfD"]); // 3 SPD pattern .append("rect") .attr("x", boundsX[0]) .attr("y", function (d) { return ( boundsY[0] + (d[ATTR_GRUENE] / d[ATTR_STIMMEN] + d[ATTR_CDU] / d[ATTR_STIMMEN] + d[ATTR_AFD] / d[ATTR_STIMMEN]) ); }) .attr("width", boundsX[1] - boundsX[0]) .attr("height", function (d) { return d[ATTR_SPD] / d[ATTR_STIMMEN]; }) .attr("fill", colors["SPD"]); // 4 LINKE pattern .append("rect") .attr("x", boundsX[0]) .attr("y", function (d) { return ( boundsY[0] + d[ATTR_GRUENE] / d[ATTR_STIMMEN] + d[ATTR_CDU] / d[ATTR_STIMMEN] + d[ATTR_AFD] / d[ATTR_STIMMEN] + d[ATTR_SPD] / d[ATTR_STIMMEN] ); }) .attr("width", boundsX[1] - boundsX[0]) .attr("height", function (d) { return d[ATTR_LINKE] / d[ATTR_STIMMEN]; }) .attr("fill", colors["LINKE"]); // 5 FDP pattern .append("rect") .attr("x", boundsX[0]) .attr("y", function (d) { return ( boundsY[0] + d[ATTR_GRUENE] / d[ATTR_STIMMEN] + d[ATTR_CDU] / d[ATTR_STIMMEN] + d[ATTR_AFD] / d[ATTR_STIMMEN] + d[ATTR_SPD] / d[ATTR_STIMMEN] + d[ATTR_LINKE] / d[ATTR_STIMMEN] ); }) .attr("width", boundsX[1] - boundsX[0]) .attr("height", function (d) { return d[ATTR_FDP] / d[ATTR_STIMMEN]; }) .attr("fill", colors["FDP"]); // SONSTIGE pattern .append("rect") .attr("x", boundsX[0]) .attr("y", function (d) { return ( d[ATTR_GRUENE] / d[ATTR_STIMMEN] + d[ATTR_CDU] / d[ATTR_STIMMEN] + d[ATTR_AFD] / d[ATTR_STIMMEN] + d[ATTR_SPD] / d[ATTR_STIMMEN] + d[ATTR_LINKE] / d[ATTR_STIMMEN] + d[ATTR_FDP] / d[ATTR_STIMMEN] ); }) .attr("width", boundsX[1] - boundsX[0]) .attr("height", function (d) { return ( 1 - d[ATTR_GRUENE] / d[ATTR_STIMMEN] + d[ATTR_CDU] / d[ATTR_STIMMEN] + d[ATTR_AFD] / d[ATTR_STIMMEN] + d[ATTR_SPD] / d[ATTR_STIMMEN] + d[ATTR_LINKE] / d[ATTR_STIMMEN] ); }) .attr("fill", colors["OTHERS"]); return pattern; }34: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"; } } }35:T4cb,addLegend = function (container, colors) { const legend = d3 .select(container) .append("div") .attr("class", "legend") .style("position", "absolute") .style("left", "65px") // X .style("top", "80px") .style("background-color", "#fff") .style("padding", "10px") .style("border-radius", "10px") .style("font-family", "Arial, sans-serif") .style("font-size", "12px") .style("box-shadow", "0 0 5px rgba(0,0,0,0.3)"); legend .append("h3") .text("Zweitstimmen") .style("margin", "0 0 5px 0") .style("font-size", "14px"); const row = legend .append("div") .style("display", "flex") .style("gap", "18px") .style("align-items", "center") .style("justify-content", "center"); // Parteien hinzufügen Object.entries(colors).forEach(([party, color]) => { const item = row .append("div") .style("display", "flex") .style("align-items", "center"); item .append("div") .style("width", "1em") .style("height", "1em") .style("background-color", color) .style("border-radius", "3px") .style("margin-right", "5px"); item.append("span").text(partiesLabels[party] ?? party); }); }36:[{"id":"d0ad268d36c0373b70a369241ed5066b8450f171c22601c0ade36f17a7edea05aa2376aedc07dbd0f4fdc0df9f5acad328553154b1b063354ef6c79fc222f162","href":"https://static.observableusercontent.com/files/d0ad268d36c0373b70a369241ed5066b8450f171c22601c0ade36f17a7edea05aa2376aedc07dbd0f4fdc0df9f5acad328553154b1b063354ef6c79fc222f162","name":"BaWü_outline_4326 1.geojson","type":"application/geo+json","lastModified":1783069343894.216,"size":51515},{"id":"b55a56932cb437746c376a7b9d3218e7dcb0da3175d31f4f51ea9269f4b594c22f1f3ed19455e9696ccd59c394e89cc5cf13125befb93bf6cecfc6dc42f89a6d","href":"https://static.observableusercontent.com/files/b55a56932cb437746c376a7b9d3218e7dcb0da3175d31f4f51ea9269f4b594c22f1f3ed19455e9696ccd59c394e89cc5cf13125befb93bf6cecfc6dc42f89a6d","name":"bodensee.geojson","type":"application/geo+json","lastModified":1783069343894.216,"size":431509},{"id":"57d6bbd97a6d621016881a88c490769ec41ba2512c0da1fb91dd77dc03fb91491240721a013be4f9890009a24f082b7ca7f8114235f9e7570254bb793fa59e41","href":"https://static.observableusercontent.com/files/57d6bbd97a6d621016881a88c490769ec41ba2512c0da1fb91dd77dc03fb91491240721a013be4f9890009a24f082b7ca7f8114235f9e7570254bb793fa59e41","name":"ltw26-wahlkreise@1.csv","type":"text/csv","lastModified":1783069343894.216,"size":19394},{"id":"f94cff16007cdc2e6a727b114f930a00601ea32e4557a12967f20a1da8980b2e71453eb2d5c16be545d732edd4d57b347e9498d68c6a369ede54f50f0084d2e7","href":"https://static.observableusercontent.com/files/f94cff16007cdc2e6a727b114f930a00601ea32e4557a12967f20a1da8980b2e71453eb2d5c16be545d732edd4d57b347e9498d68c6a369ede54f50f0084d2e7","name":"landesgrenze-sachsen.geojson","type":"application/geo+json","lastModified":1783425588757.005,"size":32973},{"id":"09431d462909a1f9ed0b54f429e3134c185890f2e85ff6e414bcab9a444527bcd80b7ad4dd260fa5bf8213f8d9025ccf4f266ca0269d4f5169fd1611f4cf04b2","href":"https://static.observableusercontent.com/files/09431d462909a1f9ed0b54f429e3134c185890f2e85ff6e414bcab9a444527bcd80b7ad4dd260fa5bf8213f8d9025ccf4f266ca0269d4f5169fd1611f4cf04b2","name":"SA-Daten-2021.csv","type":"text/csv","lastModified":1783426657136.127,"size":9184}] 2f:{"id":"92b93f0e8abf20a9","slug":"landtagswahl-sachsen-anhalt-2021","title":"Landtagswahl Sachsen Anhalt 2021","thumbnail":"d1edc5e108560a868b9d804eaaaa5afc78d1a692e59bf64baa6002d7a47b045c","access_level":"public","create_time":"$D2026-07-03T09:02:23.894Z","update_time":"$D2026-07-07T12:21:35.636Z","view_time":null,"first_public_time":"$D2026-09-08T07:37:59.099Z","fork":{"id":"c7cd4c8bb3fc4e55","slug":null,"title":"Landtagswahl BaWü 08.03.2026","owner":{"id":"dc01608112438589","login":"lab24","name":"lab"}},"stars":0,"starred":false,"owner":{"type":"team","id":"dc01608112438589","login":"lab24","name":"lab","avatar_url":"https://avatars-next.observableusercontent.com/af750d65b5749c2a042ef49e68a93f5d5c831603a570d95f116b61016d2b9a89","tier":"starter_2024"},"version":1180,"publish_version":1180,"role":null,"authored":false,"authors":[{"type":"individual","id":"32a5f44203d7d8b4","login":"pbm","name":"PBM","avatar_url":"https://avatars-next.observableusercontent.com/2587db4c2e879822288060724b00a9f903f222aa423422152e4e638bbec00ec2","tier":null}],"members":[{"type":"team","id":"dc01608112438589","login":"lab24","name":"lab","avatar_url":"https://avatars-next.observableusercontent.com/af750d65b5749c2a042ef49e68a93f5d5c831603a570d95f116b61016d2b9a89","tier":"starter_2024","role":"editor"},{"type":"individual","id":"32a5f44203d7d8b4","login":"pbm","name":"PBM","avatar_url":"https://avatars-next.observableusercontent.com/2587db4c2e879822288060724b00a9f903f222aa423422152e4e638bbec00ec2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Landtagswahl Sachsen Anhalt 2021","cells":[{"id":0,"value":"# Landtagswahl Sachsen Anhalt 2021","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":291,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":638,"value":"viewof display = Inputs.radio([\"Stimmanteile\", \"Gewinner\"], {\n label: \"\",\n value: \"Stimmanteile\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":293,"value":"viewof patternTilt = Inputs.range([-90, 90], {\n label: \"Winkel\",\n step: 1,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":296,"value":"viewof cellPadding = Inputs.range([0, 10], {\n label: \"Zellabstand\",\n step: 1,\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"parties = [\"GRUENE\", \"CDU\", \"SPD\", \"LINKE\", \"FDP\", \"AfD\", \"OTHERS\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":666,"value":"partiesLabels = ({\n GRUENE: \"Grüne\",\n CDU: \"CDU\",\n AfD: \"AfD\",\n SPD: \"SPD\",\n LINKE: \"DIE LINKE\",\n FDP: \"FDP\",\n OTHERS: \"Sonstige\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":319,"value":"originalPartyColors = ({\n GRUENE: \"#418940\",\n CDU: \"#505050\",\n AfD: \"#0c82bf\",\n SPD: \"#cc2028\",\n LINKE: \"#CE93D8\", // \"rgb(193, 49, 151)\"\n FDP: \"#fdb716\",\n OTHERS: \"#999\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"winner = (d) => {\n let votes = [\n { key: \"GRUENE\", value: +d.F1 },\n { key: \"CDU\", value: +d.F2 },\n { key: \"AfD\", value: +d.F5 }\n ];\n\n let max = votes.reduce((a, b) => (a.value > b.value ? a : b));\n return max.key;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"data = SA.map((cell) => ({\n ...cell,\n ...electionData.find((r) => r.Schlüsselnummer === cell.nr + \"\")\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":215,"value":"outline = await FileAttachment(\"landesgrenze-sachsen.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":472,"value":"bodensee = await FileAttachment(\"bodensee.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":778,"value":"electionData = d3.dsvFormat(\";\").parse(await FileAttachment(\"SA-Daten-2021.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"