29:null 2a:["$","title",null,{"children":"Training HowTo e2maps | lab | Observable"}] 2f:T25f4,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 = 40; const CITY_STROKE_WIDTH = 2.5; // Internes SVG-Koordinatensystem const WIDTH = 800; const HEIGHT = 400; // Feste sichtbare Höhe const DISPLAY_HEIGHT = 400; // 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 = 50; const RECT_ROUND = 4; const COLORS = originalPartyColors; const CELL_PATTERN = getPatternVertical; const LABEL_SIZE = 15; // 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("Trainingsbeispiel"); // -------------------------------------------------- // 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 Baden-Württemberg // -------------------------------------------------- const projection = d3.geoMercator().fitSize([200, 300], 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,00) scale(2,1.22)"); // -------------------------------------------------- // 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 ["W6"].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.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) + "%
" + "
" + "Wahlbeteiligung: " + ((d[ATTR_WAEHLER] / d[ATTR_WAHLBERECHTIGTE]) * 100).toFixed(1) + "%

" ); } // -------------------------------------------------- // viu:lab unter der Karte // -------------------------------------------------- svg .append("text") .attr("x", 140) .attr("y", 370) .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; }30:T999,addLegend = function (container, colors, gridRight, svgWidth, displayWidth) { // Skalierungsfaktor vom internen SVG // zur sichtbaren Darstellung const displayScale = displayWidth / svgWidth; // Rechte Kante des Tile-Grids in sichtbaren Pixeln const mapRight = gridRight * displayScale; const legend = d3 .select(container) .append("div") .attr("class", "legend") .style("position", "absolute") // Direkt RECHTS neben dem Tile-Grid .style("left", `${mapRight + 20}px`) // Vertikale Position .style("bottom", "90px") .style("background-color", "#fff") .style("padding", "8px 10px") .style("border-radius", "8px") .style("font-family", "'Open Sans', Arial, sans-serif") .style("font-size", "10px") .style("box-shadow", "0 0 4px rgba(0,0,0,0.25)") .style("box-sizing", "border-box") .style("z-index", "10"); // Überschrift legend .append("div") .text("Zweitstimmen") .style("margin", "0 0 6px 0") .style("font-size", "11px") .style("font-weight", "bold"); // Parteien const list = legend .append("div") .style("display", "flex") .style("flex-direction", "column") .style("gap", "4px"); Object.entries(colors).forEach(([party, color]) => { const item = list .append("div") .style("display", "flex") .style("align-items", "center") .style("white-space", "nowrap"); item .append("div") .style("width", "9px") .style("height", "9px") .style("background-color", color) .style("border-radius", "2px") .style("margin-right", "5px") .style("flex", "0 0 auto"); item.append("span").text(partiesLabels[party] ?? party); }); // Trennlinie zwischen Parteien und zusätzlicher Markierung legend .append("div") .style("border-top", "1px solid #ddd") .style("margin", "7px 0 6px 0"); // Markierung für Wahlkreise von Großstädten const cityItem = legend .append("div") .style("display", "flex") .style("align-items", "center") .style("white-space", "nowrap"); cityItem .append("div") .style("width", "9px") .style("height", "9px") .style("background-color", "#fff") .style("border", "2px solid #000") .style("border-radius", "2px") .style("margin-right", "5px") .style("box-sizing", "border-box") .style("flex", "0 0 auto"); cityItem.append("span").text("Großstadt-Wahlkreis"); }31: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; }32: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"; } } }33:[{"id":"b55a56932cb437746c376a7b9d3218e7dcb0da3175d31f4f51ea9269f4b594c22f1f3ed19455e9696ccd59c394e89cc5cf13125befb93bf6cecfc6dc42f89a6d","href":"https://static.observableusercontent.com/files/b55a56932cb437746c376a7b9d3218e7dcb0da3175d31f4f51ea9269f4b594c22f1f3ed19455e9696ccd59c394e89cc5cf13125befb93bf6cecfc6dc42f89a6d","name":"bodensee.geojson","type":"application/geo+json","lastModified":1786625434304.77,"size":431509},{"id":"cf2e660874c6060e6047efc48f4bbf9b2b94fbb2696da29ddfeb42223322fbd923f43ee7cf0f32d7b2446347dbc1270810ea5285c86a259e77928d29003a3308","href":"https://static.observableusercontent.com/files/cf2e660874c6060e6047efc48f4bbf9b2b94fbb2696da29ddfeb42223322fbd923f43ee7cf0f32d7b2446347dbc1270810ea5285c86a259e77928d29003a3308","name":"trainingsdaten_howTo_e2maps.csv","type":"text/csv","lastModified":1786630096677.484,"size":3224},{"id":"d0ad268d36c0373b70a369241ed5066b8450f171c22601c0ade36f17a7edea05aa2376aedc07dbd0f4fdc0df9f5acad328553154b1b063354ef6c79fc222f162","href":"https://static.observableusercontent.com/files/d0ad268d36c0373b70a369241ed5066b8450f171c22601c0ade36f17a7edea05aa2376aedc07dbd0f4fdc0df9f5acad328553154b1b063354ef6c79fc222f162","name":"BaWü_outline_4326 1.geojson","type":"application/geo+json","lastModified":1786625434304.77,"size":51515}] 2d:{"id":"dc9f8739a600f9ee","slug":null,"title":"Training HowTo e2maps","thumbnail":"d689c535e76d5b33f0bae994b12adc114d4f7ab804e6f5f90abb0f1f7dbb25e3","access_level":"public","create_time":"$D2026-08-13T12:50:34.304Z","update_time":"$D2026-08-27T04:49:01.811Z","view_time":null,"first_public_time":"$D2026-08-13T14:13:03.018Z","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":1204,"publish_version":null,"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":2,"collection":null,"type":"notebook","body":{"title":"Training HowTo e2maps","cells":[{"id":0,"value":"# Training HowTo e2maps","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":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":253,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"BaWü = [\n //Ba-Wü Wahlkreise\n { nr: 1, id: \"W1\", row: 1, col: 4 },\n { nr: 2, id: \"W2\", row: 2, col: 3 },\n { nr: 3, id: \"W3\", row: 3, col: 2 },\n { nr: 4, id: \"W4\", row: 3, col: 3 },\n { nr: 5, id: \"W5\", row: 3, col: 4 },\n { nr: 6, id: \"W6\", row: 3, col: 5 },\n { nr: 7, id: \"W7\", row: 4, col: 4 },\n { nr: 8, id: \"W8\", row: 4, col: 5 },\n { nr: 9, id: \"W9\", row: 4, col: 6 },\n { nr: 10, id: \"W10\", row: 5, col: 3 }\n]","pinned":true,"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":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"$32","pinned":true,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":778,"value":"electionData = d3.dsvFormat(\";\").parse(await FileAttachment(\"trainingsdaten_howTo_e2maps.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"