29:null 2a:["$","title",null,{"children":"Bivariate map (military spending, GDP) | Patrick Wojda | Observable"}] 2f:Tbc2,chartElem = Plot.plot({ // size and margins height: 540, width: 600, margin: 0, projection: { type: "azimuthal-equal-area", domain: nutsGeo, inset: 8 }, marks: [ // background (oceans and lakes) Plot.frame({ fill: "#f7fbfd" }), // "fuzzy" outline filter and missing data pattern () => svg` `, // base map Plot.geo(worldGeo, { fill: "#fff", strokeWidth: 0.5, stroke: "#cdcdcd" }), // outline of data map /* Plot.geo(nutsGeo, { fill: "#fff", stroke: "#222", strokeOpacity: (d) => (d.id.length === 2 ? 1 : 0), imageFilter: "url(#shadow)" }),*/ // missing data map Plot.geo(nutsGeo, { fill: "url(#diagonalHatch)" }), // data map Plot.geo(nutsGeo, { fill: (d) => gdpMilMap.has(d.id) ? gdpMilMap.get(d.id).color : "transparent" }), // country (data) level outline map Plot.geo(nutsGeo, { stroke: (d) => (d.properties.LEVL_CODE === 0 ? "#222" : "none"), strokeOpacity: 0.4 }), // legend (a, b, c, layout) => svg` ${Plot.plot({ height: 120, width: 120, margin: 0, inset: 16, marks: [ Plot.rect(d3.cross([0, 1, 2], [0, 1, 2]), { x: ([a, b]) => a, y: ([a, b]) => b, interval: 1, fill: ([a, b]) => colors[a + b * 3], stroke: "#222" }), Plot.text(["GDP →"], { fontWeight: "bold", fontSize: 14, x: 0, y: 0, rotate: 0, textAnchor: "middle", dx: 60 - 16, dy: 10 }), Plot.text(["MILITARY →"], { fontWeight: "bold", fontSize: 14, x: 0, y: 0, rotate: 0, textAnchor: "middle", rotate: -90, dx: -10, dy: -60 + 16 }) ] })} ` ] })30: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)); } }31: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"); }); }); }32:[{"id":"7c6167b65013c12f3978b4d8e85dd28a27e3b5eb580d1e76696ce5b0d399c196de2b02c45e734462931e1af823698e36bb072722253d5e03e7fb61222755bc0c","href":"https://static.observableusercontent.com/files/7c6167b65013c12f3978b4d8e85dd28a27e3b5eb580d1e76696ce5b0d399c196de2b02c45e734462931e1af823698e36bb072722253d5e03e7fb61222755bc0c","name":"countries-110m.json","type":"application/json","lastModified":1695991440988.643,"size":107761},{"id":"a38189d3f635963aa92f9300e6411b93b623eea2e59b9c85275c231bc6fcf6d606a5354daf61508fe66977927d0549524bb524fa2e9643cfe969c859175739a8","href":"https://static.observableusercontent.com/files/a38189d3f635963aa92f9300e6411b93b623eea2e59b9c85275c231bc6fcf6d606a5354daf61508fe66977927d0549524bb524fa2e9643cfe969c859175739a8","name":"NUTS_RG_20M_2016_4326 (1).json","type":"application/json","lastModified":1696344055761.004,"size":706629},{"id":"b892c091d04104c338050c17362c67f5a45cf5173ae2977b1879f4378e1e3f66948a8fdfb91b60cc851411f96dd3f958eac0c39611773cadb2ffd9f0d6aaca36","href":"https://static.observableusercontent.com/files/b892c091d04104c338050c17362c67f5a45cf5173ae2977b1879f4378e1e3f66948a8fdfb91b60cc851411f96dd3f958eac0c39611773cadb2ffd9f0d6aaca36","name":"nama_10_gdp_page_tabular.tsv","type":"text/tab-separated-values","lastModified":1697018041418.698,"size":1117},{"id":"26af56c5849e03c609b25f0348b168f81152eecb9c47a0694d2c4ac52c9f089af18884aff6d32e03a1768e45f3b610373da28e3e0a3891a0c111d78eb696e33b","href":"https://static.observableusercontent.com/files/26af56c5849e03c609b25f0348b168f81152eecb9c47a0694d2c4ac52c9f089af18884aff6d32e03a1768e45f3b610373da28e3e0a3891a0c111d78eb696e33b","name":"SIPRI-Milex-data-2022-Europe@2.tsv","type":"text/tab-separated-values","lastModified":1696410989572.857,"size":680}] 2d:{"id":"b6dd63b03ff2d486","slug":null,"title":"Bivariate map (military spending, GDP)","thumbnail":"33f9251f2ed4b1341b5b691c9662b1c9030413648eb7e063b3672a7f299052a3","access_level":"public","create_time":"$D2023-09-29T06:52:50.348Z","update_time":"$D2023-10-11T09:56:22.031Z","view_time":null,"first_public_time":"$D2023-09-29T06:52:50.348Z","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":2617,"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,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Bivariate map (military spending, GDP)","cells":[{"id":0,"value":"# Bivariate map (military spending, GDP)\nBivariate map showing military spending vs GDP in 2022.\n\n**Data**\n\nMilitary spending: https://www.sipri.org/databases/milex\n\nGDP: https://ec.europa.eu/eurostat/databrowser/view/NAMA_10_GDP/default/table?lang=en\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":343,"value":"## Chart elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":268,"value":"### Header element","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":53,"value":"header = svg`\n \n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":270,"value":"### Subheader element","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":182,"value":"subheader = svg`\n \n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":272,"value":"### Plot element","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":223,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2212,"value":"{\n /*\n Plot.dot(d3.cross([0, 1, 2], [0, 1, 2]), {\n x: ([a, b]) => b - a,\n y: ([a, b]) => b + a,\n symbol: \"square\",\n rotate: 45,\n r: 14,\n fill: (d, i) => colors[i],\n stroke: \"#222\"\n }),\n Plot.text([\"GDP →\"], {\n frameAnchor: \"right\",\n fontWeight: \"bold\",\n rotate: -45,\n dy: 19,\n dx: -4\n }),\n Plot.text([\"← Military\"], {\n frameAnchor: \"left\",\n fontWeight: \"bold\",\n textAnchor: \"start\",\n rotate: 45,\n dy: 14\n })\n */\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":274,"value":"### Footer element","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":276,"value":"footer = svg`\n \n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":348,"value":"## Composed chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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 },\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 const g = 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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":319,"value":"## Helper functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":393,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":884,"value":"colors = [\n \"#e8e8e8\",\n \"#ace4e4\",\n \"#5ac8c8\",\n \"#dfb0d6\",\n \"#a5add3\",\n \"#5698b9\",\n \"#be64ac\",\n \"#8c62aa\",\n \"#3b4994\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1143,"value":"nutsIgnoreList = [\n \"PT2\",\n \"PT3\",\n \"ES7\",\n \"FRY\",\n \"FRY1\",\n \"FRY2\",\n \"FRY3\",\n \"FRY4\",\n \"FRY5\",\n \"ES70\",\n \"PT20\",\n \"PT30\",\n \"ES703\",\n \"ES704\",\n \"ES705\",\n \"ES706\",\n \"ES707\",\n \"ES708\",\n \"ES709\",\n \"FRY10\",\n \"FRY20\",\n \"FRY30\",\n \"FRY40\",\n \"FRY50\",\n \"PT200\",\n \"PT300\",\n \"ESZZ\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1607,"value":"## Geo data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":566,"value":"nutsGeo = {\n //const geo = await FileAttachment(\"nuts3-continental-europe.json\").json();\n const geo = await FileAttachment(\"NUTS_RG_20M_2016_4326 (1).json\").json();\n\n const data = topojson\n .feature(geo, geo.objects[\"NUTS_RG_20M_2016_4326\"])\n .features.filter((d) => nutsIgnoreList.indexOf(d.id) === -1);\n\n return { type: \"FeatureCollection\", features: data };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":787,"value":"worldGeo = {\n //Plot.geo(worldTopo, { fill: \"#f9f9f9\", stroke: \"#d9d9d9\" }),\n const geo = await FileAttachment(\"countries-110m.json\").json();\n return topojson.feature(geo, geo.objects.countries);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1613,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1498,"value":"gdp2022 = {\n const data = await FileAttachment(\"nama_10_gdp_page_tabular.tsv\").tsv();\n\n const result = data.map((d) => {\n const values = Object.values(d);\n console.log(values);\n return {\n code: values[0].split(\",\")[3],\n value: +values[1].split(\" \")[0]\n };\n });\n\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1520,"value":"milSpending2022 = {\n const data = await FileAttachment(\"SIPRI-Milex-data-2022-Europe@2.tsv\").tsv();\n return data.map((d) => ({\n code: d.code,\n value: d.value ? parseFloat(d.value.replace(\",\", \".\")) : null\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1526,"value":"dbClient = DuckDBClient.of({\n gdp: gdp2022,\n mil: milSpending2022\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1528,"value":"select \n gdp.code as code,\n gdp.value as gdp,\n mil.value as mil,\nfrom gdp\n inner join mil on gdp.code = mil.code\nwhere \n gdp.value not null and\n mil.value not null","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"milGdpData","database":"var:dbClient"},{"id":1559,"value":"gdpMilMap = {\n // adapted from https://observablehq.com/@d3/bivariate-choropleth\n\n const n = Math.sqrt(colors.length);\n\n const x = d3.scaleQuantile(\n Array.from(milGdpData, (d) => d.mil).concat(0),\n d3.range(n)\n );\n\n const y = d3.scaleQuantile(\n Array.from(milGdpData, (d) => d.gdp).concat(0),\n d3.range(n)\n );\n\n const color = (value) => {\n if (!value) return \"#ccc\";\n const { mil, gdp } = value;\n return colors[y(gdp) + x(mil) * n];\n };\n\n const result = new Map();\n\n milGdpData\n .map((d) => ({ ...d, color: color(d) }))\n .forEach((d) => result.set(d.code, d));\n\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1801,"value":"gdpScale = d3.scaleQuantile(\n Array.from(milGdpData, (d) => d.gdp).concat(0),\n d3.range(3)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1833,"value":"milScale = d3.scaleQuantile(\n Array.from(milGdpData, (d) => d.mil).concat(0),\n d3.range(3)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1797,"value":"Plot.plot({\n title: \"GDP in Euros (€)\",\n height: 200,\n width: 700,\n marks: [\n Plot.barY(gdp2022, {\n marginLeft: 58,\n x: \"code\",\n y: \"value\",\n fill: (d) => colors[gdpScale(d.value)],\n sort: { x: \"y\" }\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1835,"value":"Plot.plot({\n title: \"Military spending as a percentage of GDP\",\n height: 200,\n width: 700,\n marks: [\n Plot.barY(milSpending2022, {\n marginLeft: 58,\n x: \"code\",\n y: \"value\",\n fill: (d) =>\n colors[milScale(d.value) === 0 ? 0 : milScale(d.value) === 1 ? 3 : 6],\n sort: { x: \"y\" }\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2502,"value":"Array.from(gdpMilMap)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2522,"value":"sortedData = Array.from(gdpMilMap)\n .sort((a, b) => (a[1].mil < b[1].mil ? -1 : 1))\n .map((d) => ({ ...d[1] }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2593,"value":"numberformatter = new Intl.NumberFormat(\"en-GB\", {\n notation: \"compact\",\n compactDisplay: \"short\",\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2497,"value":"Plot.plot({\n title: \"Totals (GDP and Military spending)\",\n height: 200,\n width: 800,\n y: {\n grid: true\n },\n marginTop: 32,\n marks: [\n Plot.barY(sortedData, {\n marginLeft: 58,\n x: (d) => d.code,\n y: (d) => d.gdp,\n fill: (d) => d.color,\n fillOpacity: 0.4,\n stroke: (d) => d.color,\n strokeWidth: 1,\n inset: 1,\n channels: { gdp: (d) => d.gdp * (d.mil / 100) },\n sort: { x: \"gdp\" }\n }),\n\n Plot.barY(sortedData, {\n marginLeft: 58,\n x: (d) => d.code,\n y: (d) => d.gdp * (d.mil / 100),\n fill: (d) => d.color,\n stroke: \"#222\",\n strokeWidth: 1,\n inset: 1,\n channels: { gdp: (d) => d.gdp * (d.mil / 100) },\n sort: { x: \"gdp\" }\n }),\n\n Plot.text(sortedData, {\n x: \"code\",\n y: \"gdp\",\n text: (d) =>\n `${numberformatter.format(d.gdp)}\\n${numberformatter.format(\n d.gdp * (d.mil / 100)\n )}`,\n dy: -6,\n fontSize: 8,\n lineAnchor: \"bottom\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2426,"value":"Plot.plot({\n title: \"GDP vs Military spedning (% GDP)\",\n grid: true,\n marginLeft: 64,\n insetBottom: 24,\n y: { label: \"GDP\" },\n x: { label: \"Military spending\" },\n marks: [\n Plot.dot(Array.from(gdpMilMap), {\n x: (d) => d[1].mil,\n y: (d) => d[1].gdp,\n r: 7,\n fill: (d) => d[1].color,\n fillOpacity: 0.8,\n stroke: \"#222\",\n strokeWidth: 0.5\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"