chartCK = { const ATTR_STIMMEN = "F.Gültige.Zweitstimmen"; const ATTR_GRUENE = "F06.GRÜNE"; const ATTR_CDU = "F01.CDU"; const ATTR_SPD = "F04.SPD"; const ATTR_FDP = "F05.FDP"; const ATTR_AFD = "F02.AfD"; const ATTR_LINKE = "F03.Die Linke"; const ATTR_BSW = "F15.BSW"; const ATTR_WAHLBERECHTIGTE = "A.Wahlberechtigte"; const ATTR_WAEHLER = "B.Wähler"; const CELL_SIZE = 49; // Internes SVG-Koordinatensystem const WIDTH = 800; const HEIGHT = 1000; // Feste sichtbare Höhe const DISPLAY_HEIGHT = 700; // Sichtbare Breite des SVG const DISPLAY_WIDTH = (DISPLAY_HEIGHT * WIDTH) / HEIGHT; const PADDING = cellPadding; // Karte linksbündig const GRID_LEFT = 0; // Karte näher an die Überschrift const GRID_TOP = 90; const RECT_ROUND = 2; const COLORS = originalPartyColors; const CELL_PATTERN = getPatternVertical; const LABEL_SIZE = 15; const CITY_STROKE_WIDTH = 2.5; // Fester Abstand des Labels vom linken Zellrand const LABEL_PADDING_LEFT = 4; // -------------------------------------------------- // Tatsächliche Ausdehnung des Tile-Grids // -------------------------------------------------- const GRID_WIDTH = (d3.max(data, (d) => d.col) + 1) * (CELL_SIZE + PADDING); const GRID_RIGHT = GRID_LEFT + GRID_WIDTH; // -------------------------------------------------- // Container // -------------------------------------------------- const container = html` `; // -------------------------------------------------- // HTML-Überschrift // -------------------------------------------------- d3.select(container) .append("div") .attr("class", "chart-title") .text("Landtagswahl 2026 – Sachsen-Anhalt"); // -------------------------------------------------- // SVG // -------------------------------------------------- const svg = d3 .select(container) .append("svg") .style("background", "white") .attr("viewBox", `0 0 ${WIDTH} ${HEIGHT}`) .attr("preserveAspectRatio", "xMinYMin meet"); const div = d3.select(container).append("div").classed("tooltip", true); const defs = svg.append("svg:defs"); // -------------------------------------------------- // Outline Sachsen-Anhalt // -------------------------------------------------- const projection = d3.geoMercator().fitSize([420, 500], outline); const path = d3.geoPath().projection(projection); 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,80) scale(1.3,1.1)"); // -------------------------------------------------- // Pattern // -------------------------------------------------- CELL_PATTERN(defs, patternTilt, "#fff", [0, 1], [0, 1], 1, COLORS); // -------------------------------------------------- // Zellen // -------------------------------------------------- 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) => `url(#${d.id})`) .attr("stroke", "#222") .attr("stroke-width", (d) => (isCity(d.id) ? CITY_STROKE_WIDTH : 0)); function isCity(id) { return [ "M1", "M2", "M3", "M4", "H1", "H2", "H3", "H4" ].includes(id); } // -------------------------------------------------- // Labels // -------------------------------------------------- svg .selectAll("text.labels") .data(data) .join("text") .attr("class", "labels") // Alle Labels starten exakt am selben // relativen Punkt der Zelle .attr( "x", (d) => GRID_LEFT + d.col * (CELL_SIZE + PADDING) + LABEL_PADDING_LEFT ) .attr("y", (d) => GRID_TOP + d.row * (CELL_SIZE + PADDING) + LABEL_SIZE / 2) .attr("text-anchor", "start") .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); // -------------------------------------------------- // Tooltip // -------------------------------------------------- const tooltip = new Tooltip(div); // -------------------------------------------------- // Hover-Overlay // -------------------------------------------------- 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", (d) => "bezirk" + d.id) .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); }); // -------------------------------------------------- // Tooltip-Inhalt // -------------------------------------------------- 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) + "%
" + " GRÜNE: " + ((100 * d[ATTR_GRUENE]) / d[ATTR_STIMMEN]).toFixed(1) + "%
" + " BSW: " + ((100 * d[ATTR_BSW]) / d[ATTR_STIMMEN]).toFixed(1) + "%
" + " SONSTIGE: " + ( 100 - ( d[ATTR_AFD] / d[ATTR_STIMMEN] + d[ATTR_CDU] / d[ATTR_STIMMEN] + d[ATTR_SPD] / d[ATTR_STIMMEN] + d[ATTR_GRUENE] / d[ATTR_STIMMEN] + d[ATTR_LINKE] / d[ATTR_STIMMEN] + d[ATTR_BSW] / d[ATTR_STIMMEN] + d[ATTR_FDP] / d[ATTR_STIMMEN] ) * 100 ).toFixed(1) + "%

" + "Wahlbeteiligung: " + ((d[ATTR_WAEHLER] / d[ATTR_WAHLBERECHTIGTE]) * 100).toFixed(1) + "%

" ); } // -------------------------------------------------- // viu:lab unter der Karte // -------------------------------------------------- svg .append("text") .attr("x", 300) .attr("y", 950) .attr("text-anchor", "middle") .style("font-family", "'Open Sans', sans-serif") .attr("font-size", 14) .attr("fill", "#999") .text("viu:lab Forschungsgruppe, HAW Hamburg"); // -------------------------------------------------- // Legende rechts NEBEN dem tatsächlichen Tile-Grid // -------------------------------------------------- addLegend(container, COLORS, GRID_RIGHT, WIDTH, DISPLAY_WIDTH); return container; }