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; }