29:null 2a:["$","title",null,{"children":"WIP Bivariate map (dogs vs cats) | Patrick Wojda | Observable"}] 2f:T83c,chartElem = Plot.plot({ // size and margins height: 540, width: 600, margin: 0, projection: { type: "azimuthal-equal-area", domain: europeGeo, inset: 16 }, marks: [ // background (oceans and lakes) Plot.frame({ fill: "#f7fbfd" }), // base map Plot.geo(worldGeo2, { fill: "#fff", strokeWidth: 0.5, stroke: "#cdcdcd" }), // data map Plot.geo(europeGeo, { fill: (d) => catDogMap.has(d.properties.NAME) ? catDogMap.get(d.properties.NAME).color : "url(#diagonalHatch)", fillOpacity: 0.8, stroke: (d) => countryHighlight.includes(d.properties.NAME) ? "#222" : "#535353", strokeWidth: (d) => countryHighlight.includes(d.properties.NAME) ? 1 : 0.5, strokeOpacity: (d) => (catDogMap.has(d.properties.NAME) ? 1 : 0.2) }), // legend (a, b, c, layout) => svg` ${Plot.plot({ height: 120, width: 120, margin: 0, inset: 17, 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], inset: -1, stroke: "#222", strokeWidth: 0.5 }), Plot.text(["More dogs →"], { fontWeight: "bold", fontSize: 12, x: 0, y: 0, rotate: 0, textAnchor: "middle", dx: 60 - 16, dy: 10 }), Plot.text(["More cats →"], { fontWeight: "bold", fontSize: 12, 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":"6e32ed3f60677b8281d975ede26eababb0257f1631d9d76aa1b6096232ff75cd961f27598afd32393a1b75dcaac8da871b420f7eafc8656461bedafcfa9c3658","href":"https://static.observableusercontent.com/files/6e32ed3f60677b8281d975ede26eababb0257f1631d9d76aa1b6096232ff75cd961f27598afd32393a1b75dcaac8da871b420f7eafc8656461bedafcfa9c3658","name":"europe-geo.json","type":"application/json","lastModified":1697036342251.73,"size":196194},{"id":"7c6167b65013c12f3978b4d8e85dd28a27e3b5eb580d1e76696ce5b0d399c196de2b02c45e734462931e1af823698e36bb072722253d5e03e7fb61222755bc0c","href":"https://static.observableusercontent.com/files/7c6167b65013c12f3978b4d8e85dd28a27e3b5eb580d1e76696ce5b0d399c196de2b02c45e734462931e1af823698e36bb072722253d5e03e7fb61222755bc0c","name":"countries-110m.json","type":"application/json","lastModified":1697026484515.294,"size":107761},{"id":"ce8603027948b9c110ad95f39f08d9cadbac115dc25ee6afd56a42507ab94f9e11b217bb4428e5e0f5b730198809fff9a36ead1ff62d21da6a5f3ce4b1062bff","href":"https://static.observableusercontent.com/files/ce8603027948b9c110ad95f39f08d9cadbac115dc25ee6afd56a42507ab94f9e11b217bb4428e5e0f5b730198809fff9a36ead1ff62d21da6a5f3ce4b1062bff","name":"europe 2022 cat dog@2.csv","type":"text/csv","lastModified":1697036647805.391,"size":527},{"id":"9ad3edcb654e9abc86c80041d8a7ccd60eea852f629774ef2941be99a4417d969d8ee2e4f971f4f3a36ea020cf4622dcaf1712744d0658f8e8b5e27351e048bd","href":"https://static.observableusercontent.com/files/9ad3edcb654e9abc86c80041d8a7ccd60eea852f629774ef2941be99a4417d969d8ee2e4f971f4f3a36ea020cf4622dcaf1712744d0658f8e8b5e27351e048bd","name":"ne_10m_admin_0_countries (1).json","type":"application/json","lastModified":1697099221660.754,"size":1761259}] 2d:{"id":"e0e976aa68b3b555","slug":null,"title":"WIP Bivariate map (dogs vs cats)","thumbnail":"28c4949a858c1515fa9df26bb40faa59ea4d2f4ac5543163bb26564e75b4093c","access_level":"public","create_time":"$D2023-10-11T12:14:44.515Z","update_time":"$D2023-11-06T21:09:50.786Z","view_time":null,"first_public_time":"$D2023-10-11T12:14:44.515Z","fork":{"id":"b6dd63b03ff2d486","slug":null,"title":"Bivariate map (military spending, GDP)","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":2918,"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":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"WIP Bivariate map (dogs vs cats)","cells":[{"id":0,"value":"# WIP Bivariate map (dogs vs cats)\n\n**Data**\nhttps://europeanpetfood.org/about/statistics/\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":2860,"value":"countryHighlight = [\n \"France\",\n \"Switzerland\",\n \"Norway\",\n \"Denmark\",\n \"Spain\",\n \"Ireland\"\n]","pinned":false,"hidden":false,"mode":"ojs","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":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 \"#e7e9de\",\n \"#9abfd0\",\n \"#4b96b8\",\n \"#e8cb7e\",\n \"#9aa771\",\n \"#4b8364\",\n \"#e9aa01\",\n \"#9b8c01\",\n \"#4c6e01\"\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":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":2624,"value":"europe2022CatDog = await FileAttachment(\"europe 2022 cat dog@2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2640,"value":"catDogMap = {\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(europe2022CatDog, (d) => d.cat).concat(0),\n d3.range(n)\n );\n\n const y = d3.scaleQuantile(\n Array.from(europe2022CatDog, (d) => d.dog).concat(0),\n d3.range(n)\n );\n\n const color = (value) => {\n if (!value) return \"#ccc\";\n const { cat, dog } = value;\n return colors[y(dog) + x(cat) * n];\n };\n\n const result = new Map();\n europe2022CatDog\n .map((d) => ({ ...d, color: color(d) }))\n .forEach((d) => result.set(d.country, d));\n\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2648,"value":"countries = europe2022CatDog\n .map((d) => d.country)\n .filter((c) => c !== \"Russia\" && c !== \"Turkey\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2654,"value":"null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2681,"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.properties.NAME) > -1\n )\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2721,"value":"averages = {\n return {\n dog:\n europe2022CatDog.reduce((pre, cur) => pre + cur.dog, 0) /\n europe2022CatDog.length /\n 100,\n cat:\n europe2022CatDog.reduce((pre, cur) => pre + cur.cat, 0) /\n europe2022CatDog.length /\n 100\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2739,"value":"percentFormat = new Intl.NumberFormat(\"en-US\", {\n style: \"percent\",\n minimumFractionDigits: 1,\n maximumFractionDigits: 1\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2758,"value":"worldGeo2 = {\n const geo = await FileAttachment(\"ne_10m_admin_0_countries (1).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"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"