2b:null 2c:["$","title",null,{"children":"WIP - EU Elections 2019 windmap | Patrick Wojda | Observable"}] 31:Tce5,chartElem = Plot.plot({ // size and margins height: 540, width: 600, margin: 0, projection: { type: "azimuthal-equal-area", domain: europeGeo, inset: 16 }, length: { domain: [0, 1], range: [5, 200] }, marks: [ () => svg` `, // background (oceans and lakes) Plot.frame({ fill: "#f7fbfd" }), // base map Plot.geo(worldGeo, { fill: "#fff", strokeWidth: 0.5, stroke: "#cdcdcd" }), // lean map Plot.geo(europeGeo, { fill: (d) => { if (election2019Lean[d.id] < 0) { return "#c01717"; } else { return "#2b4b8e"; } }, fillOpacity: (d) => { return Math.abs(election2019Lean[d.id]) / maxSeatsCountry.get(d.id); }, //fill: "#fff", stroke: "#535353", strokeWidth: 0.5 }), // data map /* Plot.geo(europeGeo, { fill: (d) => { const red = electionDiffGroup[0]; const blue = electionDiffGroup[1]; const green = electionDiffGroup[2]; if (red[d.id] > blue[d.id]) { return "#c01717"; } else { return "#2b4b8e"; } }, fillOpacity: (d) => { const red = election2019Grouped[0]; const blue = election2019Grouped[1]; const green = election2019Grouped[2]; if (red[d.id] > blue[d.id]) { return Math.abs(red[d.id]) / maxSeatsCountry.get(d.id); } else { return Math.abs(blue[d.id]) / maxSeatsCountry.get(d.id); } }, //fill: "#fff", stroke: "#535353", strokeWidth: 0.5 }),*/ Plot.vector( europeGeo.features, Plot.centroid({ anchor: "start", length: (d) => { const red = electionDiffGroup[0]; const blue = electionDiffGroup[1]; const green = electionDiffGroup[2]; if (red[d.id] > blue[d.id]) { return Math.abs(red[d.id]) / maxSeatsCountry.get(d.id); } else { return Math.abs(blue[d.id]) / maxSeatsCountry.get(d.id); } }, stroke: (d) => { const red = electionDiffGroup[0]; const blue = electionDiffGroup[1]; const green = electionDiffGroup[2]; if (red[d.id] > blue[d.id]) { return "#c01717"; } else { return "#2b4b8e"; } }, rotate: (d) => { const red = electionDiffGroup[0]; const blue = electionDiffGroup[1]; const green = electionDiffGroup[2]; if (red[d.id] > blue[d.id]) { return -60; } else { return 60; } }, strokeWidth: 4, imageFilter: "url(#outline)" }) ) ] })32:T564,/** This function select all the direct children of the svg, calculates the height of each child and translates it its correct position based on the height. The function also sets the height and width of the svg based on its content. **/ function joinElement(svg) { const postRender = (svg) => { const size = { height: 0, width: 0 }; svg .selectChildren() .nodes() .forEach((el) => { const datum = d3.select(el).datum(); if (datum.transform) { datum.transform(el); } const box = el.getBBox(); // always translate the element with the previous elements height d3.select(el).attr("transform", `translate(0, ${size.height})`); // get the height of the element and add an offset if there is one specified in the datum size.height += box.height + (datum.offset ? datum.offset : 0); // use the width of the widest element size.width = box.width > size.width ? box.width : size.width; }); svg.attr("width", size.width); svg.attr("height", size.height); }; // do this once the svg has been rendered to screen, ie. it has a height and width if (svg.isConnected) { Promise.resolve().then(() => postRender(svg)); } else if (typeof requestAnimationFrame !== "undefined") { requestAnimationFrame(() => postRender(svg)); } }33:Ta3f,/** Copied (and adapted) from https://observablehq.com/@jtrim-ons/svg-text-wrapping **/ function textwrap( chart, width = 500, selector = "text", lineHeightEms = 1.05, lineHeightSquishFactor = 1, splitOnHyphen = true, centreVertically = true ) { const text = d3.select(chart).selectAll("text"); text.each(function () { const text = d3.select(this); const x = text.attr("x"); const y = text.attr("y"); // get the styles of the text element, need to re-apply on each new text && tspan element const textStyle = text.attr("style"); console.log(text.text()); const words = []; text .text() .split(/\s+/) .forEach(function (w) { if (splitOnHyphen) { const subWords = w.split("-"); for (var i = 0; i < subWords.length - 1; i++) words.push(subWords[i] + "-"); words.push(subWords[subWords.length - 1] + " "); } else { words.push(w + " "); } }); text.text(null); // Empty the text element text.attr("style", textStyle); text.attr("dy", "1em"); // `tspan` is the tspan element that is currently being added to let tspan = text.append("tspan").attr("style", textStyle); let line = ""; // The current value of the line let prevLine = ""; // The value of the line before the last word (or sub-word) was added let nWordsInLine = 0; // Number of words in the line for (var i = 0; i < words.length; i++) { let word = words[i]; prevLine = line; line = line + word; ++nWordsInLine; tspan.text(line.trim()); if (tspan.node().getComputedTextLength() > width && nWordsInLine > 1) { // The tspan is too long, and it contains more than one word. // Remove the last word and add it to a new tspan. tspan.text(prevLine.trim()); prevLine = ""; line = word; nWordsInLine = 1; tspan = text.append("tspan"); tspan.attr("style", textStyle); tspan.text(word.trim()); } } const tspans = text.selectAll("tspan"); let h = lineHeightEms; // Reduce the line height a bit if there are more than 2 lines. if (tspans.size() > 2) for (var i = 0; i < tspans.size(); i++) h *= lineHeightSquishFactor; tspans.each(function (d, i) { // Calculate the y offset (dy) for each tspan so that the vertical centre // of the tspans roughly aligns with the text element's y position. let dy = i * h; d3.select(this) .attr("y", y) .attr("x", x) .attr("dy", dy + "em"); }); }); }34:[{"id":"6e32ed3f60677b8281d975ede26eababb0257f1631d9d76aa1b6096232ff75cd961f27598afd32393a1b75dcaac8da871b420f7eafc8656461bedafcfa9c3658","href":"https://static.observableusercontent.com/files/6e32ed3f60677b8281d975ede26eababb0257f1631d9d76aa1b6096232ff75cd961f27598afd32393a1b75dcaac8da871b420f7eafc8656461bedafcfa9c3658","name":"europe-geo.json","type":"application/json","lastModified":1699304877088.5,"size":196194},{"id":"9ad3edcb654e9abc86c80041d8a7ccd60eea852f629774ef2941be99a4417d969d8ee2e4f971f4f3a36ea020cf4622dcaf1712744d0658f8e8b5e27351e048bd","href":"https://static.observableusercontent.com/files/9ad3edcb654e9abc86c80041d8a7ccd60eea852f629774ef2941be99a4417d969d8ee2e4f971f4f3a36ea020cf4622dcaf1712744d0658f8e8b5e27351e048bd","name":"ne_10m_admin_0_countries.json","type":"application/json","lastModified":1699519025761.559,"size":1761259}] 2f:{"id":"17f0f1ea69ced30f","slug":null,"title":"WIP - EU Elections 2019 windmap","thumbnail":"4bca4c1697a6606e7f4777bebda273131a62aad31a5f13f9705603b898eb077d","access_level":"public","create_time":"$D2023-11-04T20:46:53.080Z","update_time":"$D2024-03-06T14:25:24.386Z","view_time":null,"first_public_time":"$D2023-11-04T20:46:53.080Z","has_unpublished_edits":null,"fork":{"id":"dfd8535b56b572ab","slug":null,"title":"Chart layout template","owner":{"id":"02bf290f098d5a95","login":"gitnoise","name":"Patrick Wojda"}},"stars":0,"starred":false,"owner":{"type":"team","id":"02bf290f098d5a95","login":"gitnoise","name":"Patrick Wojda","avatar_url":"https://avatars-next.observableusercontent.com/37de83ff866855b411b5ed7c2da3c3587abe6a5035f6f746f9988ddddeadc493","tier":"starter_2024"},"version":969,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"66c365e4a7f918e6","login":"gitnoise","name":"Patrick Wojda","avatar_url":"https://avatars-next.observableusercontent.com/37de83ff866855b411b5ed7c2da3c3587abe6a5035f6f746f9988ddddeadc493","tier":null}],"members":[{"type":"individual","id":"66c365e4a7f918e6","login":"gitnoise","name":"Patrick Wojda","avatar_url":"https://avatars-next.observableusercontent.com/37de83ff866855b411b5ed7c2da3c3587abe6a5035f6f746f9988ddddeadc493","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"984bb401353479d9","slug":"democracy","title":"Democracy","owner":{"id":"02bf290f098d5a95","login":"gitnoise","name":"Patrick Wojda"}},"type":"notebook","body":{"titling":"auto","title":"WIP - EU Elections 2019 windmap","cells":[{"id":0,"value":"# WIP - EU Elections 2019 windmap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":343,"value":"## Chart elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":268,"value":"### Header element\nTitle of the chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"header = svg`\n \n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"### Subheader element\nSub header is the explanation of the chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"subheader = svg`\n \n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"### Plot element\nThe main data visualisation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":223,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"### Footer element\nCaption of the chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":276,"value":"footer = svg`\n \n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"## Composed chart\nThis is the final composed chart based on the chart elements specified above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"{\n // make sure to add all the chart elements you want in the order you want them\n const elements = [\n //{ element: header, offsest: 100, transform: (el) => textwrap(el, 100) }, // not working properly\n { element: header, offsest: 100 },\n { element: subheader, offset: 16 },\n { element: chartElem, offset: 16 },\n { element: footer, offset: 0 }\n ];\n\n // create new svg container\n const chart = d3.create(\"svg\");\n\n // wrap all elements in groups for cleaner rendering and add the offset to the datum of the group\n elements.forEach((el, i) => {\n chart\n .append(\"g\")\n .datum({ offset: el.offset, transform: el.transform })\n .append(() => el.element);\n });\n\n chart.call(joinElement);\n\n return chart.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"## Helper functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"createGroupMap = (data) => {\n const res = [];\n\n // set default data\n const countriesObject = {};\n countries.forEach((c) => (countriesObject[c] = 0));\n\n const resMap = new Map();\n resMap.set(\"red\", { ...countriesObject });\n resMap.set(\"blue\", { ...countriesObject });\n resMap.set(\"green\", { ...countriesObject });\n\n // group and calculate\n data.forEach((d) => {\n if (redGroup.find((rg) => rg === d.Group)) {\n const data = resMap.get(\"red\");\n countries.forEach((c) => (data[c] += +d[c]));\n resMap.set(\"red\", { ...data });\n }\n\n if (blueGroup.find((rg) => rg === d.Group)) {\n const data = resMap.get(\"blue\");\n countries.forEach((c) => (data[c] += +d[c]));\n resMap.set(\"blue\", { ...data });\n }\n\n if (greenGroup.find((rg) => rg === d.Group)) {\n const data = resMap.get(\"green\");\n countries.forEach((c) => (data[c] += +d[c]));\n resMap.set(\"green\", { ...data });\n }\n });\n\n return Array.from(resMap).map((d) => ({ Group: d[0], ...d[1] }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"# DATA","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":811,"value":"### Auxiliary data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":639,"value":"countries = [\n \"AT\",\n \"BE\",\n \"BG\",\n \"CY\",\n \"CZ\",\n \"DE\",\n \"DK\",\n \"EE\",\n \"GR\", // previously \"EL\",\n \"ES\",\n \"FI\",\n \"FR\",\n \"GB\",\n \"HR\",\n \"HU\",\n \"IE\",\n \"IT\",\n \"LT\",\n \"LU\",\n \"LV\",\n \"MT\",\n \"NL\",\n \"PL\",\n \"PT\",\n \"RO\",\n \"SE\",\n \"SI\",\n \"SK\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"redGroup = [\"S&D\", \"The Left\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"greenGroup = [\"Greens/EFA\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"europeGeo = {\n const geo = await FileAttachment(\"europe-geo.json\").json();\n let topo = topojson.feature(geo, geo.objects.europe);\n\n // transform data\n topo.features.forEach(\n (d) => (d.properties.NAME = d.properties.NAME.replace(/[^a-zA-Z ]/g, \"\"))\n );\n\n return {\n type: \"FeatureCollection\",\n features: topo.features.filter(\n (f) => countries.findIndex((c) => c === f.id) > -1\n )\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"worldGeo = {\n const geo = await FileAttachment(\"ne_10m_admin_0_countries.json\").json();\n return topojson.feature(geo, geo.objects.ne_10m_admin_0_countries);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"blueGroup = [\"Renew\", \"EPP\", \"ECR\", \"ID\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"maxSeatsCountry = new Map(\n [\n { AT: 19 },\n { BE: 21 },\n { BG: 17 },\n { CY: 6 },\n { CZ: 21 },\n { DE: 96 },\n { DK: 14 },\n { EE: 7 },\n { GR: 21 },\n { ES: 59 },\n { FI: 14 },\n { FR: 79 },\n { HR: 12 },\n { HU: 21 },\n { IE: 13 },\n { IT: 76 },\n { LT: 11 },\n { LU: 6 },\n { LV: 8 },\n { MT: 6 },\n { NL: 29 },\n { PL: 52 },\n { PT: 21 },\n { RO: 33 },\n { SE: 21 },\n { SI: 8 },\n { SK: 14 }\n ].map((o) => {\n const obj = Object.entries(o);\n return [obj[0][0], obj[0][1]];\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"### Election data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":576,"value":"election2014 = d3.csvParse(\n `Group,AT,BE,BG,CY,CZ,DE,DK,EE,GR,ES,FI,FR,GB,HR,HU,IE,IT,LT,LU,LV,MT,NL,PL,PT,RO,SE,SI,SK\nEPP,5,4,7,2,7,34,1,1,5,17,3,20,0,5,12,4,17,2,3,4,3,5,23,7,15,4,5,6\nS&D,5,4,4,2,4,27,3,1,4,14,2,13,20,2,4,1,31,2,1,1,3,3,5,8,16,6,1,4\nECR,0,4,2,0,2,8,4,0,1,0,2,0,19,1,0,1,0,1,0,1,0,2,19,0,0,0,0,2\nRenew,1,6,4,0,4,4,3,3,0,8,4,7,1,2,0,1,0,3,1,0,0,7,0,2,1,3,1,1\nThe Left,0,0,0,2,3,8,1,0,6,11,1,4,0,0,0,4,3,0,0,0,0,3,0,4,0,1,0,0\nGreens/EFA,3,2,0,0,0,13,1,1,0,4,1,6,6,1,2,0,0,1,1,1,0,2,0,0,0,4,1,0\nID,0,0,0,0,1,0,0,0,0,0,0,1,24,0,0,0,17,2,0,1,0,0,0,0,0,2,0,0\nNI,4,1,0,0,0,2,0,0,5,0,0,23,0,0,3,0,5,0,0,0,0,4,4,0,0,0,0,0`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"election2019 = d3.csvParse(\n `Group,AT,BE,BG,CY,CZ,DE,DK,EE,GR,ES,FI,FR,GB,HR,HU,IE,IT,LT,LU,LV,MT,NL,PL,PT,RO,SE,SI,SK\nEPP,7,4,7,2,5,29,1,0,8,12,3,8,0,4,13,4,7,4,2,2,2,6,17,7,14,6,4,4\nS&D,5,3,5,2,0,16,3,2,2,20,2,5,10,3,5,0,19,2,1,2,4,6,8,9,10,5,2,3\nECR,0,3,2,0,4,1,0,0,1,3,0,0,4,1,0,0,5,1,0,2,0,4,26,0,0,3,0,2\nRenew,1,4,3,0,6,7,5,3,0,8,3,21,16,1,2,1,0,2,2,1,0,6,0,0,8,3,2,2\nThe Left,0,1,0,2,1,6,1,0,6,6,1,6,0,0,0,4,0,0,0,0,0,1,0,4,0,1,0,0\nGreens/EFA,2,3,0,0,3,25,2,0,0,2,2,12,11,0,0,2,0,2,1,1,0,3,0,1,0,2,0,0\nID,3,3,0,0,2,11,1,1,0,0,2,22,0,0,0,0,28,0,0,0,0,0,0,0,0,0,0,0\nNI,0,0,0,0,0,1,0,0,4,3,0,0,29,2,1,0,14,0,0,0,0,0,0,0,0,0,0,2`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"electionDiff = election2019.map((d) => {\n const e2014 = election2014.find((o) => o.Group === d.Group);\n\n const res = { Group: d.Group };\n\n countries.forEach((c) => {\n res[c] = +d[c] - +e2014[c];\n });\n\n return res;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"electionDiffGroup = createGroupMap(electionDiff)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"election2019Grouped = createGroupMap(election2019)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"election2019Lean = {\n const leanObj = {};\n\n Object.entries(election2019Grouped[0]).forEach((d, i) => {\n if (d[0] != \"Group\") {\n leanObj[d[0]] = election2019Grouped[1][d[0]] - d[1];\n }\n });\n\n return leanObj;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"election2019LeanArray = Object.entries(election2019Lean).map((d) => {\n const o = { country: d[0], value: d[1] };\n return o;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":965,"value":"select sum(\"value\") from election2019LeanArray","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"var:election2019LeanArray"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"