29:null 2a:["$","title",null,{"children":"BaWü 2026 | Christoph Kinkeldey | Observable"}] 2f:T1ef5,chartCK = { const ATTR_STIMMEN = "Zweitstimmen gueltige (F)"; const ATTR_GRUENE = "F1"; const ATTR_CDU = "F2"; const ATTR_SPD = "F3"; const ATTR_FDP = "F4"; const ATTR_AFD = "F5"; const ATTR_LINKE = "F6"; const ATTR_WAHLBERECHTIGTE = "Wahlberechtigte gesamt (A)"; const ATTR_WAEHLER = "Waehler gesamt (B)"; const CELL_SIZE = 50; 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 2026 – Baden-Württemberg"); 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", "S1", "S2", "S3", "S4", "F1", "F2", "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.Wahlkreisname + "

" + "" + " 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; }30:Tb52,BaWü = [ //Ba-Wü Wahlkreise { nr: 35, id: "M1", row: 0, col: 5 }, { nr: 39, id: "WE", row: 1, col: 4 }, { nr: 36, id: "M2", row: 1, col: 5 }, { nr: 40, id: "SZ", row: 2, col: 5 }, { nr: 34, id: "HE", row: 2, col: 6 }, { nr: 38, id: "NO", row: 2, col: 8 }, { nr: 23, id: "MT", row: 2, col: 9 }, { nr: 29, id: "BR", row: 3, col: 5 }, { nr: 37, id: "WI", row: 3, col: 6 }, { nr: 41, id: "SH", row: 3, col: 7 }, { nr: 20, id: "NE", row: 3, col: 8 }, { nr: 30, id: "BT", row: 4, col: 5 }, { nr: 19, id: "EP", row: 4, col: 7 }, { nr: 20, id: "NS", row: 4, col: 8 }, { nr: 21, id: "HL", row: 4, col: 9 }, { nr: 28, id: "K2", row: 5, col: 3 }, { nr: 27, id: "K1", row: 5, col: 4 }, { nr: 18, id: "HB", row: 5, col: 7 }, { nr: 31, id: "ET", row: 6, col: 3 }, { nr: 44, id: "EZ", row: 6, col: 4 }, { nr: 13, id: "VA", row: 6, col: 5 }, { nr: 12, id: "LU", row: 6, col: 6 }, { nr: 30, id: "BE", row: 6, col: 7 }, { nr: 42, id: "PH", row: 7, col: 4 }, { nr: 3, id: "S3", row: 7, col: 6 }, { nr: 15, id: "WL", row: 7, col: 7 }, { nr: 17, id: "BN", row: 7, col: 8 }, { nr: 22, id: "SB", row: 7, col: 9 }, { nr: 32, id: "RA", row: 8, col: 3 }, { nr: 43, id: "CA", row: 8, col: 4 }, { nr: 1, id: "S1", row: 8, col: 6 }, { nr: 4, id: "S4", row: 8, col: 7 }, { nr: 16, id: "SD", row: 8, col: 8 }, { nr: 25, id: "SG", row: 8, col: 9 }, { nr: 26, id: "AA", row: 8, col: 10 }, { nr: 30, id: "BB", row: 9, col: 3 }, { nr: 45, id: "FS", row: 9, col: 4 }, { nr: 6, id: "LB", row: 9, col: 5 }, { nr: 2, id: "S2", row: 9, col: 6 }, { nr: 7, id: "ES", row: 9, col: 7 }, { nr: 10, id: "GÖ", row: 9, col: 8 }, { nr: 24, id: "HH", row: 9, col: 9 }, { nr: 52, id: "KE", row: 10, col: 2 }, { nr: 5, id: "Bö", row: 10, col: 5 }, { nr: 9, id: "NÜ", row: 10, col: 6 }, { nr: 8, id: "KH", row: 10, col: 7 }, { nr: 11, id: "GL", row: 10, col: 8 }, { nr: 51, id: "OF", row: 11, col: 3 }, { nr: 62, id: "TÜ", row: 11, col: 5 }, { nr: 60, id: "RL", row: 11, col: 6 }, { nr: 61, id: "HM", row: 11, col: 7 }, { nr: 65, id: "EH", row: 11, col: 8 }, { nr: 64, id: "UL", row: 11, col: 9 }, { nr: 50, id: "LH", row: 12, col: 3 }, { nr: 53, id: "RW", row: 12, col: 5 }, { nr: 63, id: "BA", row: 12, col: 6 }, { nr: 70, id: "SI", row: 12, col: 7 }, { nr: 66, id: "BI", row: 12, col: 8 }, { nr: 49, id: "ED", row: 13, col: 3 }, { nr: 54, id: "VS", row: 13, col: 5 }, { nr: 55, id: "TD", row: 13, col: 6 }, { nr: 67, id: "BS", row: 13, col: 7 }, { nr: 69, id: "RB", row: 13, col: 8 }, { nr: 68, id: "WA", row: 13, col: 9 }, { nr: 47, id: "F2", row: 14, col: 2 }, { nr: 46, id: "F1", row: 14, col: 3 }, { nr: 57, id: "SN", row: 14, col: 6 }, { nr: 48, id: "BG", row: 15, col: 2 }, { nr: 58, id: "LÖ", row: 15, col: 3 }, { nr: 59, id: "WH", row: 15, col: 4 }, { nr: 56, id: "KS", row: 15, col: 6 } ]31:T1714,results2021 = [ { id: "M1", GRUENE: 34, CDU: 24, SPD: 13, LINKE: 6, FDP: 8, AfD: 12, OTHERS: 3 }, { id: "WE", GRUENE: 29, CDU: 28, SPD: 15, LINKE: 5, FDP: 9, AfD: 11, OTHERS: 3 }, { id: "M2", GRUENE: 36, CDU: 22, SPD: 14, LINKE: 6, FDP: 7, AfD: 12, OTHERS: 3 }, { id: "SZ", GRUENE: 27, CDU: 30, SPD: 16, LINKE: 5, FDP: 10, AfD: 9, OTHERS: 3 }, { id: "HE", GRUENE: 31, CDU: 26, SPD: 14, LINKE: 6, FDP: 8, AfD: 12, OTHERS: 3 }, { id: "BR", GRUENE: 25, CDU: 32, SPD: 17, LINKE: 4, FDP: 8, AfD: 11, OTHERS: 3 }, { id: "WI", GRUENE: 30, CDU: 27, SPD: 15, LINKE: 5, FDP: 9, AfD: 11, OTHERS: 3 }, { id: "SH", GRUENE: 28, CDU: 29, SPD: 16, LINKE: 5, FDP: 8, AfD: 11, OTHERS: 3 }, { id: "NE", GRUENE: 24, CDU: 33, SPD: 18, LINKE: 4, FDP: 8, AfD: 10, OTHERS: 3 }, { id: "MA", GRUENE: 38, CDU: 20, SPD: 15, LINKE: 7, FDP: 6, AfD: 11, OTHERS: 3 }, { id: "BT", GRUENE: 26, CDU: 31, SPD: 17, LINKE: 4, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "EP", GRUENE: 32, CDU: 25, SPD: 14, LINKE: 6, FDP: 8, AfD: 12, OTHERS: 3 }, { id: "NS", GRUENE: 29, CDU: 28, SPD: 16, LINKE: 5, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "HL", GRUENE: 33, CDU: 24, SPD: 15, LINKE: 6, FDP: 8, AfD: 11, OTHERS: 3 }, { id: "K2", GRUENE: 22, CDU: 35, SPD: 18, LINKE: 4, FDP: 8, AfD: 10, OTHERS: 3 }, { id: "K1", GRUENE: 23, CDU: 34, SPD: 17, LINKE: 4, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "HB", GRUENE: 35, CDU: 23, SPD: 14, LINKE: 6, FDP: 8, AfD: 11, OTHERS: 3 }, { id: "ET", GRUENE: 27, CDU: 30, SPD: 16, LINKE: 5, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "EZ", GRUENE: 28, CDU: 29, SPD: 15, LINKE: 5, FDP: 9, AfD: 11, OTHERS: 3 }, { id: "VA", GRUENE: 30, CDU: 27, SPD: 15, LINKE: 6, FDP: 8, AfD: 11, OTHERS: 3 }, { id: "LU", GRUENE: 34, CDU: 23, SPD: 14, LINKE: 6, FDP: 9, AfD: 11, OTHERS: 3 }, { id: "BE", GRUENE: 29, CDU: 28, SPD: 16, LINKE: 5, FDP: 8, AfD: 11, OTHERS: 3 }, { id: "PH", GRUENE: 25, CDU: 32, SPD: 17, LINKE: 4, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "S3", GRUENE: 37, CDU: 21, SPD: 14, LINKE: 7, FDP: 7, AfD: 11, OTHERS: 3 }, { id: "WL", GRUENE: 26, CDU: 31, SPD: 17, LINKE: 4, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "BN", GRUENE: 28, CDU: 29, SPD: 16, LINKE: 5, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "SB", GRUENE: 24, CDU: 33, SPD: 18, LINKE: 4, FDP: 8, AfD: 10, OTHERS: 3 }, { id: "RA", GRUENE: 29, CDU: 28, SPD: 16, LINKE: 5, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "CA", GRUENE: 30, CDU: 27, SPD: 15, LINKE: 6, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "S1", GRUENE: 36, CDU: 22, SPD: 14, LINKE: 7, FDP: 8, AfD: 10, OTHERS: 3 }, { id: "S4", GRUENE: 35, CDU: 23, SPD: 15, LINKE: 6, FDP: 8, AfD: 10, OTHERS: 3 }, { id: "SD", GRUENE: 28, CDU: 29, SPD: 16, LINKE: 5, FDP: 8, AfD: 11, OTHERS: 3 }, { id: "SG", GRUENE: 27, CDU: 30, SPD: 16, LINKE: 5, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "AA", GRUENE: 26, CDU: 31, SPD: 17, LINKE: 4, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "BB", GRUENE: 23, CDU: 34, SPD: 18, LINKE: 4, FDP: 9, AfD: 9, OTHERS: 3 }, { id: "FS", GRUENE: 28, CDU: 29, SPD: 16, LINKE: 5, FDP: 8, AfD: 11, OTHERS: 3 }, { id: "LB", GRUENE: 31, CDU: 26, SPD: 15, LINKE: 6, FDP: 8, AfD: 11, OTHERS: 3 }, { id: "S2", GRUENE: 37, CDU: 21, SPD: 14, LINKE: 7, FDP: 8, AfD: 10, OTHERS: 3 }, { id: "ES", GRUENE: 32, CDU: 25, SPD: 15, LINKE: 6, FDP: 8, AfD: 11, OTHERS: 3 }, { id: "GR", GRUENE: 39, CDU: 19, SPD: 14, LINKE: 7, FDP: 8, AfD: 10, OTHERS: 3 }, { id: "HH", GRUENE: 27, CDU: 30, SPD: 16, LINKE: 5, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "KE", GRUENE: 24, CDU: 33, SPD: 18, LINKE: 4, FDP: 9, AfD: 9, OTHERS: 3 }, { id: "Bö", GRUENE: 33, CDU: 24, SPD: 15, LINKE: 6, FDP: 8, AfD: 11, OTHERS: 3 }, { id: "NÜ", GRUENE: 29, CDU: 28, SPD: 16, LINKE: 5, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "KH", GRUENE: 26, CDU: 31, SPD: 17, LINKE: 4, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "GL", GRUENE: 25, CDU: 32, SPD: 17, LINKE: 4, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "OF", GRUENE: 28, CDU: 29, SPD: 16, LINKE: 5, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "TÜ", GRUENE: 41, CDU: 17, SPD: 13, LINKE: 8, FDP: 8, AfD: 10, OTHERS: 3 }, { id: "RL", GRUENE: 30, CDU: 27, SPD: 15, LINKE: 6, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "HM", GRUENE: 27, CDU: 30, SPD: 16, LINKE: 5, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "EH", GRUENE: 26, CDU: 31, SPD: 17, LINKE: 4, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "UL", GRUENE: 29, CDU: 28, SPD: 16, LINKE: 5, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "LH", GRUENE: 25, CDU: 32, SPD: 17, LINKE: 4, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "RW", GRUENE: 27, CDU: 30, SPD: 16, LINKE: 5, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "BA", GRUENE: 28, CDU: 29, SPD: 16, LINKE: 5, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "SI", GRUENE: 26, CDU: 31, SPD: 17, LINKE: 4, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "BI", GRUENE: 27, CDU: 30, SPD: 16, LINKE: 5, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "ED", GRUENE: 24, CDU: 33, SPD: 18, LINKE: 4, FDP: 9, AfD: 9, OTHERS: 3 }, { id: "VS", GRUENE: 26, CDU: 31, SPD: 17, LINKE: 4, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "TD", GRUENE: 27, CDU: 30, SPD: 16, LINKE: 5, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "BS", GRUENE: 28, CDU: 29, SPD: 16, LINKE: 5, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "RB", GRUENE: 25, CDU: 32, SPD: 17, LINKE: 4, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "WA", GRUENE: 26, CDU: 31, SPD: 17, LINKE: 4, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "F2", GRUENE: 23, CDU: 34, SPD: 18, LINKE: 4, FDP: 9, AfD: 9, OTHERS: 3 }, { id: "F1", GRUENE: 24, CDU: 33, SPD: 18, LINKE: 4, FDP: 9, AfD: 9, OTHERS: 3 }, { id: "SN", GRUENE: 28, CDU: 29, SPD: 16, LINKE: 5, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "BG", GRUENE: 22, CDU: 35, SPD: 18, LINKE: 4, FDP: 8, AfD: 10, OTHERS: 3 }, { id: "LÖ", GRUENE: 33, CDU: 24, SPD: 15, LINKE: 6, FDP: 8, AfD: 11, OTHERS: 3 }, { id: "WH", GRUENE: 30, CDU: 27, SPD: 15, LINKE: 6, FDP: 9, AfD: 10, OTHERS: 3 }, { id: "KS", GRUENE: 27, CDU: 30, SPD: 16, LINKE: 5, FDP: 9, AfD: 10, OTHERS: 3 }, ];32:T448,createTiltedPattern = (defs, d, size, tilt = -20) => { if (!size || size <= 0) { console.error("Invalid size:", size) return } const values = parties.map(key => { const raw = d.properties?.[key] if (raw === undefined || raw === null) return 0 return Number(String(raw).replace(",", ".")) || 0 }) const total = values.reduce((a, b) => a + b, 0) if (!isFinite(total) || total <= 0) { console.warn("Invalid total:", total, d) return } console.log("values:", values) console.log("total:", total) const pattern = defs.append("pattern") .attr("id", "pat-" + d.id) .attr("patternUnits", "userSpaceOnUse") .attr("width", size) .attr("height", size) .attr("patternTransform", `rotate(${tilt}, ${size/2}, ${size/2})`) let cumulative = 0 values.forEach((value, i) => { const percent = value / total pattern.append("rect") .attr("x", 0) .attr("y", cumulative * size) .attr("width", size) .attr("height", percent * size) .attr("fill", partyColors[parties[i]]) cumulative += percent }) }33:Tf4c,getPatternVertical = function ( defs, tilt, bg_col_cell, boundsX, boundsY, patternFactor, colors ) { const ATTR_STIMMEN = "Zweitstimmen gueltige (F)"; const ATTR_GRUENE = "F1"; const ATTR_CDU = "F2"; const ATTR_SPD = "F3"; const ATTR_FDP = "F4"; const ATTR_AFD = "F5"; const ATTR_LINKE = "F6"; 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:Tc19,getPatternHorizontal = function ( defs, tilt, bg_col_cell, boundsX, boundsY, patternFactor, colors ) { let pattern = defs .selectAll(null) .data(results2021) .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); let sum = 0; // 1 GRUENE pattern .append("rect") .attr("x", function (d) { return boundsX[0]; }) .attr("y", boundsY[0]) .attr("width", function (d) { return d.GRUENE / 100; }) .attr("height", boundsY[1] - boundsY[0]) .attr("fill", colors["GRUENE"]); // 2 CDU pattern .append("rect") .attr("x", function (d) { return boundsX[0] + d.GRUENE / 100; }) .attr("y", boundsY[0]) .attr("width", function (d) { return d.CDU / 100; }) .attr("height", boundsY[1] - boundsY[0]) .attr("fill", colors["CDU"]); // AFD pattern .append("rect") .attr("x", function (d) { return boundsX[0] + (d.GRUENE / 100 + d.CDU / 100); }) .attr("y", boundsY[0]) .attr("width", function (d) { return d.AfD / 100; }) .attr("height", boundsY[1] - boundsY[0]) .attr("fill", colors["AfD"]); // SPD pattern .append("rect") .attr("x", function (d) { return boundsX[0] + d.GRUENE / 100 + d.CDU / 100 + d.AfD / 100; }) .attr("y", boundsY[0]) .attr("width", function (d) { return d.SPD / 100; }) .attr("height", boundsY[1] - boundsY[0]) .attr("fill", colors["SPD"]); // LINKE pattern .append("rect") .attr("x", function (d) { return ( boundsX[0] + d.GRUENE / 100 + d.CDU / 100 + d.AfD / 100 + d.SPD / 100 ); }) .attr("y", boundsY[0]) .attr("width", function (d) { return d.LINKE / 100; }) .attr("height", boundsY[1] - boundsY[0]) .attr("fill", colors["LINKE"]); // 5 FDP pattern .append("rect") .attr("x", function (d) { return ( boundsX[0] + d.GRUENE / 100 + d.CDU / 100 + d.AfD / 100 + d.SPD / 100 + d.LINKE / 100 ); }) .attr("y", boundsY[0]) .attr("width", function (d) { return d.FDP / 100; }) .attr("height", boundsY[1] - boundsY[0]) .attr("fill", colors["FDP"]); // SONSTIGE pattern .append("rect") .attr("x", function (d) { return ( boundsX[0] + d.GRUENE / 100 + d.CDU / 100 + d.AfD / 100 + d.SPD / 100 + d.FDP / 100 + d.LINKE / 100 ); }) .attr("y", boundsY[0]) .attr("width", function (d) { return ( 1 - (d.GRUENE / 100 + d.CDU / 100 + d.AfD / 100 + d.SPD / 100 + d.FDP / 100 + d.LINKE / 100) ); }) .attr("height", boundsY[1] - boundsY[0]) .attr("fill", colors["OTHERS"]); return pattern; }35:Tb68,getPatternHorizontalLeftoToRight = function ( defs, tilt, bg_col_cell, boundsX, boundsY, patternFactor, colors ) { let pattern = defs .selectAll(null) .data(results2021) .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); // LINKE pattern .append("rect") .attr("x", function (d) { return boundsX[0]; }) .attr("y", boundsY[0]) .attr("width", function (d) { return d.LINKE / 100; }) .attr("height", boundsY[1] - boundsY[0]) .attr("fill", colors["LINKE"]); // SPD pattern .append("rect") .attr("x", function (d) { return boundsX[0] + d.LINKE / 100; }) .attr("y", boundsY[0]) .attr("width", function (d) { return d.SPD / 100; }) .attr("height", boundsY[1] - boundsY[0]) .attr("fill", colors["SPD"]); // GRUENE pattern .append("rect") .attr("x", function (d) { return boundsX[0] + d.LINKE / 100 + d.SPD / 100; }) .attr("y", boundsY[0]) .attr("width", function (d) { return d.GRUENE / 100; }) .attr("height", boundsY[1] - boundsY[0]) .attr("fill", colors["GRUENE"]); // CDU pattern .append("rect") .attr("x", function (d) { return boundsX[0] + d.LINKE / 100 + d.SPD / 100 + d.GRUENE / 100; }) .attr("y", boundsY[0]) .attr("width", function (d) { return d.CDU / 100; }) .attr("height", boundsY[1] - boundsY[0]) .attr("fill", colors["CDU"]); // FDP pattern .append("rect") .attr("x", function (d) { return ( boundsX[0] + d.GRUENE / 100 + d.CDU / 100 + d.LINKE / 100 + d.SPD / 100 ); }) .attr("y", boundsY[0]) .attr("width", function (d) { return d.FDP / 100; }) .attr("height", boundsY[1] - boundsY[0]) .attr("fill", colors["FDP"]); // AFD pattern .append("rect") .attr("x", function (d) { return boundsX[0] + (d.GRUENE + d.CDU + d.LINKE + d.SPD + d.FDP) / 100; }) .attr("y", boundsY[0]) .attr("width", function (d) { return d.AfD / 100; }) .attr("height", boundsY[1] - boundsY[0]) .attr("fill", colors["AfD"]); // SONSTIGE pattern .append("rect") .attr("x", function (d) { return; boundsX[0] + (d.GRUENE + d.CDU + d.LINKE + d.SPD + d.FDP + d.AfD) / 100; }) .attr("y", boundsY[0]) .attr("width", function (d) { return ( 1 - (d.GRUENE / 100 + d.CDU / 100 + d.AfD / 100 + d.SPD / 100 + d.FDP / 100 + d.LINKE / 100) ); }) .attr("height", boundsY[1] - boundsY[0]) .attr("fill", colors["OTHERS"]); return pattern; }36:T85c,getTop4Pattern = function ( defs, tilt, bg_col_cell, boundsX, boundsY, patternFactor, colors ) { let pattern = defs .selectAll(null) .data(results2021) .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); let sum = 0; // 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.GRUENE / 100; }) .attr("fill", colors["GRUENE"]); // 2 CDU pattern .append("rect") .attr("x", boundsX[0]) .attr("y", function (d) { return boundsY[0] + d.GRUENE / 100; }) .attr("width", boundsX[1] - boundsX[0]) .attr("height", function (d) { return d.CDU / 100; }) .attr("fill", colors["CDU"]); // AFD pattern .append("rect") .attr("x", boundsX[0]) .attr("y", function (d) { return boundsY[0] + (d.GRUENE / 100 + d.CDU / 100); }) .attr("width", boundsX[1] - boundsX[0]) .attr("height", function (d) { return d.AfD / 100; }) .attr("fill", colors["AfD"]); // 3 SPD pattern .append("rect") .attr("x", boundsX[0]) .attr("y", function (d) { return boundsY[0] + d.GRUENE / 100 + d.CDU / 100 + d.AfD / 100; }) .attr("width", boundsX[1] - boundsX[0]) .attr("height", function (d) { return d.SPD / 100; }) .attr("fill", colors["SPD"]); // SONSTIGE pattern .append("rect") .attr("x", boundsX[0]) .attr("y", function (d) { return ( boundsY[0] + d.GRUENE / 100 + d.CDU / 100 + d.AfD / 100 + d.SPD / 100 ); }) .attr("width", boundsX[1] - boundsX[0]) .attr("height", function (d) { return 1 - (d.SPD / 100 + d.CDU / 100 + d.GRUENE / 100 + d.AfD / 100); }) .attr("fill", colors["OTHERS"]); return pattern; }37: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"; } } }38: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); }); }39:T9ba,chart4 = { const size = 40 const svg = d3.create("svg") .attr("width", 800) .attr("height", 900) .style("background-color", 'white'); const margineRight = 50; const defs = svg.append("defs") // Projektion const projection = d3.geoMercator() .fitSize([600, 700], outline) const path = d3.geoPath().projection(projection) const container = html``; // Outline svg.append("path") .datum(outline) .attr("d", path) .attr("fill", "#eee") .attr("stroke", "#aaa") .attr("stroke-width", 1) .attr("transform", "translate(100,120)") // Überschrift svg.append("text") .attr("x", 400) .attr("y", 40) .attr("font-family", "Arial, sans-serif") .attr("text-anchor", "middle") .attr("font-size", 22) .attr("font-weight", "bold") .text("Landtagswahl 2026 – Baden-Württemberg") svg.append("text") .attr("x", 400) .attr("y", 65) .attr("font-family", "Arial, sans-serif") .attr("text-anchor", "middle") .attr("font-size", 14) .attr("fill", "#555") .text("Gewinner oder Anteile je Wahlkreis") //Pattern data.forEach(d => createTiltedPattern(defs, d, size, -20)) // Rechtecke svg.selectAll("rect") .data(data) .join("rect") .attr("x", d => 165 + d.col * size) .attr("y", d => 120 + d.row * size) .attr("width", size) .attr("height", size) .attr("fill", d => { if (mode2 === "winner") return partyColors[winner(d)] if (mode2 === "percent-flat") return `url(#grad-${d.id})` if (mode2 === "percent-tilted") return `url(#pat-${d.id})` // zum Umschalten }) .attr("stroke", "#aaa") .attr("stroke-width", 1.5); // Labels zentriert im Quadrat svg.selectAll("text.labels") .data(data) .join("text") .attr("class", "labels") .attr("x", d => 165 + d.col * size + size / 2) .attr("y", d => 120 + d.row * size + size / 2) .attr("font-family", "Arial, sans-serif") .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("font-size", 10) .attr("fill", "#000") .text(d => d.id) return svg.node() }3a:T4a4,chart = { const size = 20 const svg = d3.create("svg") .attr("width", 800) .attr("height", 700) const margineRight = 100; createPattern(svg) const container = html``; svg.selectAll("polygon") .data(BaWü) .join("polygon") .attr("points", d => hexPoints( 60 + d.col * size * 1.6, 100 + d.row * size * 1.8 + (d.col % 2) * size * 0.9, size ) ) .attr("fill", "url(#diagonalStripes)") .attr("stroke", "#333") .attr("stroke-width", 1) svg.selectAll("text") .data(BaWü) .join("text") .attr("x", d => hexCenter(d, size).x) .attr("y", d => hexCenter(d, size).y) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("font-size", 12) .attr("fill", "#000") .text(d => d.id) return svg.node() } 3b:T4bc,chart2 = { const size = 20 const svg = d3.create("svg") .attr("width", 800) .attr("height", 750) // Überschrift svg.append("text") .attr("x", 400) .attr("y", 40) .attr("text-anchor", "middle") .attr("font-size", 22) .attr("font-weight", "bold") .text("Landtagswahl 2021 – Baden-Württemberg") svg.append("text") .attr("x", 400) .attr("y", 65) .attr("text-anchor", "middle") .attr("font-size", 14) .attr("fill", "#555") .text("Gewinner je Wahlkreis") svg.selectAll("polygon") .data(data) .join("polygon") .attr("points", d => hexPoints( 60 + d.col * size * 1.6, 120 + d.row * size * 1.8 + (d.col % 2) * size * 0.9, size ) ) .attr("fill", d => partyColors[winner(d)]) .attr("stroke", "#333") .attr("stroke-width", 1) svg.selectAll("text.labels") .data(data) .join("text") .attr("class", "labels") .attr("x", d => hexCenter(d, size).x) .attr("y", d => hexCenter(d, size).y + 20) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("font-size", 10) .attr("fill", "#000") .text(d => d.id) return svg.node() } 3c:T5a9,chart1 = { const size = 40 const svg = d3.create("svg") .attr("width", 800) .attr("height", 900) const margineRight = 100; const defs = svg.append("defs") // Überschrift svg.append("text") .attr("x", 400) .attr("y", 40) .attr("text-anchor", "middle") .attr("font-size", 22) .attr("font-weight", "bold") .text("Landtagswahl 2026 – Baden-Württemberg") svg.append("text") .attr("x", 400) .attr("y", 65) .attr("text-anchor", "middle") .attr("font-size", 14) .attr("fill", "#555") .text("Gewinner oder Anteile je Wahlkreis") //Pattern data.forEach(d => createGradient(defs, d)) // Rechtecke svg.selectAll("rect") .data(data) .join("rect") .attr("x", d => 60 + d.col * size) .attr("y", d => 120 + d.row * size) .attr("width", size) .attr("height", size) .attr("fill", d => mode === "winner" ? partyColors[winner(d)] : `url(#grad-${d.id})` //zum Umschalten zw. winner & Percent ) .attr("stroke", "#aaa") .attr("stroke-width", 1.5); // Labels zentriert im Quadrat svg.selectAll("text.labels") .data(data) .join("text") .attr("class", "labels") .attr("x", d => 60 + d.col * size + size / 2) .attr("y", d => 120 + d.row * size + size / 2) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("font-size", 10) .attr("fill", "#000") .text(d => d.id) return svg.node() } 3d:[{"id":"d0ad268d36c0373b70a369241ed5066b8450f171c22601c0ade36f17a7edea05aa2376aedc07dbd0f4fdc0df9f5acad328553154b1b063354ef6c79fc222f162","href":"https://static.observableusercontent.com/files/d0ad268d36c0373b70a369241ed5066b8450f171c22601c0ade36f17a7edea05aa2376aedc07dbd0f4fdc0df9f5acad328553154b1b063354ef6c79fc222f162","name":"BaWü_outline_4326 1.geojson","type":"application/geo+json","lastModified":1772915177902.882,"size":51515},{"id":"b55a56932cb437746c376a7b9d3218e7dcb0da3175d31f4f51ea9269f4b594c22f1f3ed19455e9696ccd59c394e89cc5cf13125befb93bf6cecfc6dc42f89a6d","href":"https://static.observableusercontent.com/files/b55a56932cb437746c376a7b9d3218e7dcb0da3175d31f4f51ea9269f4b594c22f1f3ed19455e9696ccd59c394e89cc5cf13125befb93bf6cecfc6dc42f89a6d","name":"bodensee.geojson","type":"application/geo+json","lastModified":1772915177902.882,"size":431509},{"id":"1009c862d94af69edc97da08d2afd015b2d8ad19cb6d2330516a6f32b8ab811aa3b0a801c1ab01bc9f142464994cf87f14c59d279ee6c7a1a37ba2304353f599","href":"https://static.observableusercontent.com/files/1009c862d94af69edc97da08d2afd015b2d8ad19cb6d2330516a6f32b8ab811aa3b0a801c1ab01bc9f142464994cf87f14c59d279ee6c7a1a37ba2304353f599","name":"ltw26-ergebnisse.csv","type":"text/csv","lastModified":1773003669711.109,"size":2961730},{"id":"f90d837b1f0474c7f58f4ed82e522f0f5449212b497dee0b5e94ec78668837bc7f56fbb0f4368454fd1f164f4fc4043827438be0059513f041d023d05ddb2046","href":"https://static.observableusercontent.com/files/f90d837b1f0474c7f58f4ed82e522f0f5449212b497dee0b5e94ec78668837bc7f56fbb0f4368454fd1f164f4fc4043827438be0059513f041d023d05ddb2046","name":"ltw26-ergebnisse.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1773004609525.226,"size":36441},{"id":"57d6bbd97a6d621016881a88c490769ec41ba2512c0da1fb91dd77dc03fb91491240721a013be4f9890009a24f082b7ca7f8114235f9e7570254bb793fa59e41","href":"https://static.observableusercontent.com/files/57d6bbd97a6d621016881a88c490769ec41ba2512c0da1fb91dd77dc03fb91491240721a013be4f9890009a24f082b7ca7f8114235f9e7570254bb793fa59e41","name":"ltw26-wahlkreise.csv","type":"text/csv","lastModified":1773004275245.194,"size":19394},{"id":"57d6bbd97a6d621016881a88c490769ec41ba2512c0da1fb91dd77dc03fb91491240721a013be4f9890009a24f082b7ca7f8114235f9e7570254bb793fa59e41","href":"https://static.observableusercontent.com/files/57d6bbd97a6d621016881a88c490769ec41ba2512c0da1fb91dd77dc03fb91491240721a013be4f9890009a24f082b7ca7f8114235f9e7570254bb793fa59e41","name":"ltw26-wahlkreise@1.csv","type":"text/csv","lastModified":1773045131714.029,"size":19394}] 2d:{"id":"0d557595a4f1177a","slug":null,"title":"BaWü 2026","thumbnail":"770789cc1fc75c359b714a30da8c44df51eba073f126b62d74ea28ff278d0624","access_level":"public","create_time":"$D2026-03-07T20:26:17.902Z","update_time":"$D2026-03-09T11:21:15.500Z","view_time":null,"first_public_time":"$D2026-03-07T20:26:17.902Z","fork":{"id":"214f794c4e23040b","slug":null,"title":"BaWü 2026","owner":{"id":"dc01608112438589","login":"lab24","name":"lab"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1b28227b930ead72","login":"ckinkeldey","name":"Christoph Kinkeldey","avatar_url":"https://avatars-next.observableusercontent.com/10ff9823e4f9abe76e879a914b766484a5407a60ea308387662406655c88c679","tier":"starter_2024"},"version":940,"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}],"members":[{"type":"team","id":"1b28227b930ead72","login":"ckinkeldey","name":"Christoph Kinkeldey","avatar_url":"https://avatars-next.observableusercontent.com/10ff9823e4f9abe76e879a914b766484a5407a60ea308387662406655c88c679","tier":"starter_2024","role":"editor"},{"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,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"BaWü 2026","cells":[{"id":0,"value":"# BaWü 2026","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":291,"value":"$2f","pinned":false,"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":383,"value":"# Vorherige Entwürfe","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":305,"value":"hsluv = require(\"d3-color@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":316,"value":"function brightenHsluv(hex, dl = 10, ds = 0) {\n let [h, s, l] = hsluv.hexToHsluv(hex);\n l = Math.min(100, l + dl);\n s = Math.max(0, Math.min(100, s + ds));\n return hsluv.hsluvToHex([h, s, l]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"createPattern = svg => { //die schräge einfärbung\n const defs = svg.append(\"defs\")\n\n const pattern = defs.append(\"pattern\")\n .attr(\"id\", \"diagonalStripes\")\n .attr(\"patternUnits\", \"userSpaceOnUse\")\n .attr(\"width\", 6)\n .attr(\"height\", 6)\n\n pattern.append(\"rect\")\n .attr(\"width\", 6)\n .attr(\"height\", 6)\n .attr(\"fill\", \"#fff\")\n\n pattern.append(\"line\")\n .attr(\"x1\", 0)\n .attr(\"y1\", 6)\n .attr(\"x2\", 6)\n .attr(\"y2\", 0)\n .attr(\"stroke\", \"#1f77b4\")\n .attr(\"stroke-width\", 2)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"hexCenter = (d, size) => ({ //mitte hexa für text\n x: 60 + d.col * size * 1.6,\n y: 100 + d.row * size * 1.8 + (d.col % 2) * size * 0.9\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"hexPoints = (cx, cy, r) => { //wie hexagone sich ausrichten (30 Grad)\n const a = Math.PI / 3\n return d3.range(6)\n .map(i => [\n cx + r * Math.cos(a * i),\n cy + r * Math.sin(a * i)\n ].join(\",\"))\n .join(\" \")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"$31","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":25,"value":"partyColors = ({\n GRUENE: \"#8BC34A\",\n CDU: \"#9E9E9E\",\n SPD: \"#E57373\",\n LINKE: \"#CE93D8\",\n FDP: \"#FFF176\",\n AfD: \"#81D4FA\",\n OTHERS: \"turquoise\"\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":322,"value":"pureColors = ({\n SPD: hsluv.color(\"red\"),\n CDU: hsluv.color(\"black\"),\n GRUENE: hsluv.color(\"green\"),\n LINKE: hsluv.color(\"purple\"),\n AfD: hsluv.color(\"blue\"),\n FDP: hsluv.color(\"yellow\"),\n OTHERS: hsluv.color(\"turquoise\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":325,"value":"targetLightness = 60 // 0..100 (Lab L*)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":328,"value":"pureColorsEqual = Object.fromEntries(\n Object.entries(pureColors).map(([k, v]) => [k, setLabLightness(v)])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"value":"lessRed = ({\n SPD: \"rgb(220, 70, 60)\",\n CDU: \"rgb(100, 100, 100)\", //\"rgb(145, 145, 145)\",\n GRUENE: \"rgb(62, 165, 48)\",\n LINKE: \"rgb(214, 100, 210)\",\n AfD: \"rgb(10, 130, 170)\",\n FDP: \"rgb(255, 204, 0)\",\n OTHERS: \"rgb(100, 150, 145)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":330,"value":"function setLabLightness(color, L = targetLightness) {\n const c = d3.lab(color);\n c.l = L;\n return c.formatRgb();\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 = BaWü.map((cell) => ({\n ...cell,\n ...electionData.find((r) => r.Wahlkreisnummer === cell.nr + \"\")\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"function createPattern1(defs, d, size) {\n\n const id = `pattern-${d.id}`\n\n const pattern = defs.append(\"pattern\")\n .attr(\"id\", id)\n .attr(\"patternUnits\", \"userSpaceOnUse\")\n .attr(\"width\", size)\n .attr(\"height\", size)\n\n let yOffset = 0\n\n parties.forEach(party => {\n\n const value = (d[party] || 0) / 100 * size\n\n pattern.append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", yOffset)\n .attr(\"width\", size)\n .attr(\"height\", value)\n .attr(\"fill\", partyColors[party])\n\n yOffset += value\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"createGradient = (defs, d) => {\n\n const total = parties.reduce((sum, p) => sum + (d[p] ?? 0), 0)\n\n const gradient = defs.append(\"linearGradient\")\n .attr(\"id\", \"grad-\" + d.id)\n // .attr(\"x1\", \"0%\") // horizontal\n // .attr(\"x2\", \"100%\") // horizontal\n // .attr(\"y1\", \"0%\") // horizontal\n // .attr(\"y2\", \"0%\") // horizontal\n .attr(\"x1\", \"0%\") // vertikal\n .attr(\"x2\", \"0%\") // vertikal\n .attr(\"y1\", \"100%\") // vertikal\n .attr(\"y2\", \"0%\") // vertikal\n\n let cumulative = 0\n\n parties.forEach(party => {\n const value = d[party] ?? 0\n const percent = value / total\n\n gradient.append(\"stop\")\n .attr(\"offset\", cumulative * 100 + \"%\")\n .attr(\"stop-color\", partyColors[party])\n\n cumulative += percent\n\n gradient.append(\"stop\")\n .attr(\"offset\", cumulative * 100 + \"%\")\n .attr(\"stop-color\", partyColors[party])\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"$32","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":682,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":700,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":335,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":215,"value":"outline = await FileAttachment(\"BaWü_outline_4326 1.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":472,"value":"bodensee = await FileAttachment(\"bodensee.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":778,"value":"electionData = d3.dsvFormat(\";\").parse(await FileAttachment(\"ltw26-wahlkreise@1.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"viewof mode2 = Inputs.radio(\n [\"winner\", \"percent-flat\", \"percent-tilted\"],\n {label: \"Darstellung\"}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":155,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"viewof mode = Inputs.radio(\n [\"winner\", \"percent\"],\n {label: \"Darstellung\"}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 2e:"$2d:body"