29:null 2a:["$","title",null,{"children":"Berlinwahl 23 | Christoph Kinkeldey | Observable"}] 2f:T19d9,chart = { let colors = { spd: hsluv.color("red"), cdu: hsluv.color("black"), green: hsluv.color("green"), linke: hsluv.color("purple"), afd: hsluv.color("blue"), fdp: hsluv.color("yellow"), others: hsluv.color("turquoise") }; let tilt = -10; let maxPercent = 47.3; let dY = 1 / 7; let opacity_factor = 1; function getOpacity(percent) { return 0.2 + (0.8 * percent) / maxPercent; } const width = 800, height = 700; //const container = DOM.svg(width, height); const container = html``; const svg = d3 .select(container) .append("svg") .style("background", "#fff") .attr("viewBox", `0 0 ${width} ${height}`); const div = d3.select(container).append("div").classed("tooltip", true); var projection = d3.geoMercator(); projection.fitSize([width, height - 100], electionData); //projection.translate([0, 1]); var path = d3.geoPath().projection(projection); const tooltip = new Tooltip(div); // function that sets the tooltip's HTML when revealed // can be passed the hovered selection's datum function tooltipContents(d) { return ( "" + d.properties.Gebietsname + "
" + "SPD: " + d.properties.P01p + "%
" + "CDU: " + d.properties.P02p + "%
" + "GRÜNE: " + d.properties.P03p + "%
" + "DIE LINKE: " + d.properties.P04p + "%
" + "AFD: " + d.properties.P05p + "%
" + "FDP: " + d.properties.P06p + "%
" + "Sonstige: " + ( 100 - d.properties.P05p.replace(",", ".") - d.properties.P04p.replace(",", ".") - d.properties.P03p.replace(",", ".") - d.properties.P02p.replace(",", ".") - d.properties.P01p.replace(",", ".") ).toFixed(1) + "%

" + "Wählende: " + d.properties.Waehler + "
" + "Wahlbeteiligung: " + d.properties.Waehlerp + "%
" ); } var path = d3.geoPath().projection(projection); var defs = svg.append("svg:defs"); // // // // // let pattern = defs .selectAll(null) .data(electionData.features) .enter() .append("svg:pattern") .attr("id", function (d) { return d.properties.AWK; }) .attr("patternTransform", "rotate(" + tilt + ")") .attr("patternUnits", "objectBoundingBox") .attr("viewBox", "0 0 1 1") .attr("width", 1) .attr("height", 1); // 1 SPD pattern .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 1) .attr("height", dY) .attr("fill", colors["spd"]) .style("opacity", function (d) { return getOpacity(d.properties.P01p.replace(",", ".")); }); // 2 CDU pattern .append("rect") .attr("x", 0) .attr("y", dY) .attr("width", 1) .attr("height", dY) .attr("fill", colors["cdu"]) .style("opacity", function (d) { return getOpacity(d.properties.P02p.replace(",", ".")); }); // 3 GRÜNE pattern .append("rect") .attr("x", 0) .attr("y", 2 * dY) .attr("width", 1) .attr("height", dY) .attr("fill", colors["green"]) .style("opacity", function (d) { return getOpacity(d.properties.P03p.replace(",", ".")); }); // 4 LINKE pattern .append("rect") .attr("x", 0) .attr("y", 3 * dY) .attr("width", 1) .attr("height", dY) .attr("fill", colors["linke"]) .style("opacity", function (d) { return getOpacity(d.properties.P04p.replace(",", ".")); }); // 5 AFD pattern .append("rect") .attr("x", 0) .attr("y", 4 * dY) .attr("width", 1) .attr("height", dY) .attr("fill", colors["afd"]) .style("opacity", function (d) { return getOpacity(d.properties.P05p.replace(",", ".")); }); // 6 FDP pattern .append("rect") .attr("x", 0) .attr("y", 5 * dY) .attr("width", 1) .attr("height", dY) .attr("fill", colors["fdp"]) .style("opacity", function (d) { return getOpacity(d.properties.P06p.replace(",", ".")); }); // 7 SONSTIGE pattern .append("rect") .attr("x", 0) .attr("y", 6 * dY) .attr("width", 1) .attr("height", dY) .attr("fill", colors["others"]) .attr("opacity", function (d) { return getOpacity( 1 / maxPercent - (d.properties.P01p.replace(",", ".") / maxPercent + d.properties.P02p.replace(",", ".") / maxPercent + d.properties.P03p.replace(",", ".") / maxPercent + d.properties.P04p.replace(",", ".") / maxPercent + d.properties.P05p.replace(",", ".") / maxPercent + d.properties.P06p.replace(",", ".") / maxPercent) ); }); svg .append("g") .selectAll("path") .data(electionData.features) .enter() .append("path") .attr("d", path) .style("fill", function (d) { return "url(#" + d.properties.AWK + ")"; }) .style("fill-opacity", function (d) { return 0.5 + (0.5 * (d.properties.Waehler - 13316)) / (24692 - 13316); }) .style("stroke", "#fff") .style("stroke-width", "0.25px"); svg .append("g") .selectAll("path") .data(electionData.features) .enter() .append("path") .attr("id", function (d) { return "bezirk" + d.properties.AWK; }) .attr("d", path) .style("opacity", 0) .style("fill-opacity", 0) .style("stroke", "#ff0") .style("stroke-width", "5px") .on("mouseover", (event, d) => { d3.select("#bezirk" + d.properties.AWK) .transition() .style("opacity", 1); tooltip.display(d, tooltipContents); }) .on("mouseout", (event, d) => { d3.select("#bezirk" + d.properties.AWK) .transition() .style("opacity", 0); tooltip.hide(); }) .on("mousemove", (event) => { tooltip.move(event); }); return container; }30:T509,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 top = window.innerHeight > 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"; } } }31:[{"id":"ceb96f3ab52a13954156521566f348c692d3b20a5296a91b0524b2dfca4c87f1ce46b47787badea78beec23b0da04ae2efd6901457875ccb6154c684551a979d","href":"https://static.observableusercontent.com/files/ceb96f3ab52a13954156521566f348c692d3b20a5296a91b0524b2dfca4c87f1ce46b47787badea78beec23b0da04ae2efd6901457875ccb6154c684551a979d","name":"bw23-cells_hex_4326.geojson","type":"application/geo+json","lastModified":1676626014673.427,"size":224205},{"id":"b6103e4e0c889604018c3ddc8e923a4041a6098e9cf924ddf595b82b27dc74e73063462df05657a8acea09029754469adcbcc0e7a28c0fbb0f757c66a25f507a","href":"https://static.observableusercontent.com/files/b6103e4e0c889604018c3ddc8e923a4041a6098e9cf924ddf595b82b27dc74e73063462df05657a8acea09029754469adcbcc0e7a28c0fbb0f757c66a25f507a","name":"bw23-cells_4326.geojson","type":"application/geo+json","lastModified":1676626014576.13,"size":217340},{"id":"8c4f38b908b16cfa745a69579bd7c7896348a15f1ce173dcf5a4770e7dfcf223bf32222cd77db7761ac17139632a7fd8ec3d319e466660ba4a384f65d07915c8","href":"https://static.observableusercontent.com/files/8c4f38b908b16cfa745a69579bd7c7896348a15f1ce173dcf5a4770e7dfcf223bf32222cd77db7761ac17139632a7fd8ec3d319e466660ba4a384f65d07915c8","name":"bw23-cells_4326@1.geojson","type":"application/geo+json","lastModified":1676636522598.123,"size":438273},{"id":"e45593efad60a1304815542a658d33c02a1dc171cda3e8092ccf6d0e2c98d51e771e363f2528ef9d9225ba2074f70534b73e3fb975944a2f5350bc8b0b44fde8","href":"https://static.observableusercontent.com/files/e45593efad60a1304815542a658d33c02a1dc171cda3e8092ccf6d0e2c98d51e771e363f2528ef9d9225ba2074f70534b73e3fb975944a2f5350bc8b0b44fde8","name":"bw23-cells_4326_new.geojson","type":"application/geo+json","lastModified":1676843929769.649,"size":200997},{"id":"ef3ee948d106b6da0ea315f4c266695b9c7e646ee634cd642aacafd80d8469c85b6d9f1d3e1d8dfb34b620e3de47033b491d45d19d9d9ef28dcd78dd28cb9ebf","href":"https://static.observableusercontent.com/files/ef3ee948d106b6da0ea315f4c266695b9c7e646ee634cd642aacafd80d8469c85b6d9f1d3e1d8dfb34b620e3de47033b491d45d19d9d9ef28dcd78dd28cb9ebf","name":"bw23-cells_4326@2.geojson","type":"application/geo+json","lastModified":1676888837316.738,"size":201598}] 2d:{"id":"4e2d4231ac093cde","slug":null,"title":"Berlinwahl 23","thumbnail":"34eef7bcd5fb7564bb80894eb52eb4e2a9ccbf3607d8e2acb28ab2d34d975688","access_level":"public","create_time":"$D2023-02-17T09:25:52.372Z","update_time":"$D2023-02-20T10:27:28.411Z","view_time":null,"first_public_time":"$D2023-02-17T09:25:52.372Z","fork":false,"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":123,"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":"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":0,"collection":null,"type":"notebook","body":{"title":"Berlinwahl 23","cells":[{"id":0,"value":"# Berlinwahl 23","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"electionData = await FileAttachment(\"bw23-cells_4326@1.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"hsluv = require(\"d3-color@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"