2b:null 2c:["$","title",null,{"children":"Cattle Deforestation by trader EU imports 2020 | Trase | Observable"}] 31:Tc88,chartOnly = { const id = DOM.uid("chart").id; const svg = d3 .create("svg") .attr("class", id) .attr("viewBox", [0, 0, width, height]) .call((svg) => svg.append("defs").html(fonts(`.${id}`))); const g = svg.append("g").attr("text-anchor", "middle"); let circles = g.selectAll("circle"); let text = g.selectAll("text"); const tooltip = new Tooltip(); svg.append(() => tooltip.node); const t = svg.transition().duration(800); const root = pack( d3 .hierarchy({ children: data.sort((a, b) => b[selected_value] - a[selected_value]) }) .sum((d) => d[selected_value]) ); const thresholds = colourRaw; const colour = d3.scaleThreshold().domain(thresholds).range(colourScheme); circles = circles .data(root.leaves(), (d) => d.data.key) .join( (enter) => enter .append("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", (d) => d.r) .attr("fill", (d) => colourRaw(d)), (update) => update.call((update) => update .transition(t) .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", (d) => d.r) .attr("fill", (d) => colourRaw(d)) ), (exit) => exit.remove() ); text = text .data(root.leaves(), (d) => d.data.key) .join( (enter) => enter .append("text") .attr("transform", (d) => `translate(${d.x}, ${d.y})`), (update) => update.call((update) => update .transition(t) .attr("transform", (d) => `translate(${d.x}, ${d.y})`) ), (exit) => exit.remove() ); text .style("fill", (d) => { const bgColor = colourRaw(d); return pickTextColorBasedOnBackground(bgColor); }) .selectAll("tspan") .data((d) => formatBubbleText(d)) .join("tspan") .attr("x", 0) .attr("y", (d, i, nodes) => i === nodes.length - 1 ? `${i - nodes.length / 2 + 1.1}em` : `${i - nodes.length / 2 + 0.8}em` ) .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null ) .style("font", (d, i, nodes) => i === nodes.length - 1 ? "14px var(--trase-mono)" : "bold 18px var(--trase-sans-serif)" ) .style("letter-spacing", (d, i, nodes) => i === nodes.length - 1 ? "0.03em" : null ) .text((d) => d) .style("pointer-events", "none"); circles .on("mouseout", () => tooltip.hide()) .on("mouseover", (d) => tooltip.show(d.data.key, d)) .on("mousemove", function () { let [xm, ym] = d3.clientPoint(this.closest("svg"), d3.event); if (navigator.userAgent.includes("Firefox")) { xm = d3.select(this).attr("cx"); ym = d3.select(this).attr("cy"); } xm += 10; if (xm + tooltip.width > width) xm -= tooltip.width + 20; if (ym + tooltip.height > height - margin.bottom) ym = height - margin.bottom - tooltip.height - 10; tooltip.position(xm, ym); }); svg.append("g").call(annotate); circles.call(hover, svg, selected_value); return svg.node(); }32:[{"id":"e67ff0ba24cd5f25d7c9928cf0f4ba7eacc790be584c7d13617b5f62b4256bb0583ac6366ac9567cee4003e12724ed846af216209e5319767ad965c015280094","href":"https://static.observableusercontent.com/files/e67ff0ba24cd5f25d7c9928cf0f4ba7eacc790be584c7d13617b5f62b4256bb0583ac6366ac9567cee4003e12724ed846af216209e5319767ad965c015280094","name":"commodity_deforestation_companies_2020.csv","type":"text/csv","lastModified":1695904349062.096,"size":4947}] 2f:{"id":"20a90930b0f4ad96","slug":null,"title":"Cattle Deforestation by trader EU imports 2020","thumbnail":"b899626033f04d746f8d681484212c5a0ade008811d94ed1b1462936cdf58761","access_level":"public","create_time":"$D2023-09-28T08:55:42.132Z","update_time":"$D2024-01-30T20:30:04.155Z","view_time":null,"first_public_time":"$D2023-10-06T14:46:51.939Z","has_unpublished_edits":null,"fork":{"id":"83e25b29d3a629b4","slug":null,"title":"Cattle Deforestation and Emission 2020","owner":{"id":"7ad1222ddb4e496a","login":"trase","name":"Trase"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7ad1222ddb4e496a","login":"trase","name":"Trase","avatar_url":"https://avatars-next.observableusercontent.com/b224aa7961f5a048a8038ec6325c50964fe0466aeb33b4e09887e1f552e8a676","tier":"pro"},"version":2191,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"62b540d564c5895c","login":"opereira","name":"Osvaldo Pereira","avatar_url":"https://avatars-next.observableusercontent.com/95253acfbd3dc32e5dc573bae043a3c3ffcfe39cadeaa2ccd1aca3bd567ec8b1","tier":null}],"members":[{"type":"individual","id":"62b540d564c5895c","login":"opereira","name":"Osvaldo Pereira","avatar_url":"https://avatars-next.observableusercontent.com/95253acfbd3dc32e5dc573bae043a3c3ffcfe39cadeaa2ccd1aca3bd567ec8b1","tier":null,"role":"editor"},{"type":"team","id":"7ad1222ddb4e496a","login":"trase","name":"Trase","avatar_url":"https://avatars-next.observableusercontent.com/b224aa7961f5a048a8038ec6325c50964fe0466aeb33b4e09887e1f552e8a676","tier":"pro","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Cattle Deforestation by trader EU imports 2020","cells":[{"id":0,"value":"md`# Cattle Deforestation by trader EU imports 2020`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1633,"value":"chart = htl.html`\n${titleCard1}\n${chartLegend}\n${chartOnly}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1055,"value":"titleCard1 = titleCard({\n title: \"Traders exposure to beef deforestation in South America\",\n subtitle:\n \"Total cattle deforestation exposure for all biomes and segmented by biome in Brazil and Paraguay, for volumes exported to the EU in 2020 (Brazil) and 2019 (Paraguay) (source: Trase Supply Chains).\",\n extra: html`\n Select a value:\n ${viewof selected_value}\n Select a biome:\n ${viewof SelectBiome}\n `,\n footnote:\n \"Total values may differ from the observed in the trade flows due to the existence of unknown municipalities of production and the harmonization between the cattle datasets. The values do not include the amount of exports for 'unknown' flows, which are the flows that couldn't be associated to a specific company due to database limitation.\",\n width: 1\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2077,"value":"chartLegend = legend({\n colour: d3.scaleThreshold([...thresholds], colourSchemeRev),\n title: selected_value,\n tickFormat: \".2~s\",\n width: 400\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2148,"value":"extentRadius = d3.extent(data, (d) => d[selected_value])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1843,"value":"r = d3\n .scaleSqrt()\n .domain(extentRadius)\n .range([width * 3e-3, width * 4e-2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1845,"value":"function getByValue(map, searchValue) {\n for (let [key, value] of map.entries()) {\n if (value === searchValue) return key;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1849,"value":"chartBubbleLegend = circleLegend({\n scale: r,\n ticks: 3,\n tickFormat: (d, i, g) =>\n i === g.length - 1\n ? `${formatTooltipValue(d)} ${selected_value}`\n : formatTooltipValue(d),\n tickWrap: false,\n marginRight: 80,\n marginBottom: 20\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2002,"value":"dataRaw = Object.assign(\n await FileAttachment(\n \"commodity_deforestation_companies_2020.csv\"\n ).csv({ typed: false }),\n { d: \" Commodity Deforestation Total Exposure (ha)\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2026,"value":"data = dataRaw.filter((d) => d.biome === SelectBiome);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1082,"value":"viewof SelectBiome = Inputs.select(\n [\"ALL\", \"MATA ATLANTICA\", \"AMAZONIA\", \"CERRADO\", \"PANTANAL\", \"GRAN CHACO\"],\n {\n value: \"ALL\",\n label: \"\",\n format: (d) => d\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1601,"value":"viewof selected_value = Inputs.radio(metrics_values, {\n value: \"Commodity Deforestation Total Exposure (ha)\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1691,"value":"metrics_values = new Map([\n [\n \"Commodity Deforestation Total Exposure (ha)\",\n \"Commodity Deforestation Total Exposure (ha)\"\n ],\n [\"Volume (Tonnes)\", \"Volume (Tonnes)\"]\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1431,"value":"legendItems = [\n {\n type: \"dot\",\n stroke: \"#bdbdbd\",\n fill: \"#bdbdbd\",\n text: \"No data\"\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"height = width * 0.65","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1592,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"margin = ({ top: 5, bottom: 5, right: 5, left: 5 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1194,"value":"colourKey = selected_value","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2084,"value":"// colourScheme = traseOranges[6]\ncolourScheme = traseOranges[6]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2086,"value":"colourSchemeRev = colourScheme.reverse()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2096,"value":"thresholds = [0.05, 0.1, 0.25, 0.5, 0.75, 0.9].map((d) =>\n Math.floor(\n d *\n d3.quantile(\n data.map((d) => d[selected_value]),\n 0.99\n )\n )\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2045,"value":"colourRaw = (d) => {\n if (d.data.exporter === \"\") return \"#bdbdbd\";\n return d3.scaleThreshold().domain(thresholds).range(colourSchemeRev)(\n d.data[colourKey]\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2093,"value":"keys = Object.keys(data[0]).filter((d) => d === \"Volume (Tonnes)\" | d === \"Commodity Deforestation Total Exposure (ha)\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2089,"value":"d3\n .hierarchy(\n d3.rollup(\n data,\n (v) => ({ value: d3.sum(v, (d) => d.value), data: v }),\n ...keys.map((k) => (d) => d[k])\n )\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2091,"value":"root = d3\n .hierarchy(\n d3.rollup(\n data,\n (v) => ({ value: d3.sum(v, (d) => d.value), data: v }),\n ...keys.map((k) => (d) => d[k])\n )\n )\n .sum(([, d]) => d.value)\n .sort((a, b) => b.value - a.value)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"pack = d3\n .pack()\n .size([\n width - (margin.left + margin.right),\n height - (margin.top + margin.bottom)\n ])\n .padding(3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"format = d3.format(\".03s\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"formatBubbleText = (d) => {\n let key = d.data.exporter;\n const length = getLabelLength(key, \"font: 10px var(--trase-sans-serif)\");\n const perimeter = d.r * 2 - 20;\n const prop = (length - perimeter) / length;\n if (perimeter < 50) return \"\";\n if (length > perimeter)\n key =\n key.substring(0, Math.floor(key.length * (1 - prop)) - 3).trim() + \"...\";\n return [...key.split(\" \"), format(d.value)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"annotate = g => {}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"function hover(bubbles, svg, selected_value) {\n const tooltip = new Tooltip();\n const tooltipKey = selected_value.replace(/_/g, \" \");\n bubbles\n .style(\"cursor\", \"pointer\")\n .on(\"touchstart\", (event) => event.preventDefault())\n .on(\"pointerenter\", (event, d) => {\n tooltip.position(\n ...tooltipOffset(tooltip, d3.pointer(event, svg.node()), width, height)\n );\n tooltip.show(d.data[\"exporter\"], tooltipKeyValueMultiple(d));\n })\n .on(\"pointermove\", function (event) {\n let [x, y] = tooltipOffset(\n tooltip,\n d3.pointer(event, svg.node()),\n width,\n height\n );\n tooltip.position(x, y);\n this.releasePointerCapture(event.pointerId);\n })\n .on(\"pointerout\", () => tooltip.hide());\n svg.append(() => tooltip.node);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1255,"value":"tooltipKeyValueMultiple = (d) => svg`\n VOLUME EXPORTED TO THE EU (TONNES):\n ${format(\n d.data[\"Volume (Tonnes)\"]\n )} \nCOMMODITY DEFORESTATION TOTAL EXPOSURE (HA):\n ${d3.format(\n \".03s\"\n )(d.data[\"Commodity Deforestation Total Exposure (ha)\"])}\n PROPORTIONAL CONTRIBUTION ON OVERALL DEFORESTATION:\n ${d3.format(\n \".0%\"\n )(d.data[\"Proportional contribution on overall deforestation (%)\"])}\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"formatTooltipValue = d3.format(\".03s\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"import {\n traseColours,\n traseCategory1,\n fonts,\n traseOranges,\n trasePurples,\n traseGreens,\n traseOrPu\n} from \"@trase/visual-id\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"import { getLabelLength, legend, swatches } from \"@trase/legends@376\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"import { Tooltip, tooltipKeyValue, tooltipOffset } from \"@trase/tooltip@440\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":997,"value":"import { pickTextColorBasedOnBackground } from \"@trase/pick-text-color-based-on-bg\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"import { slider, select, checkbox, radio } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"import { titleCard } from \"@trase/title-card\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1838,"value":"import { circleLegend } from \"@trase/legends\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":966,"value":"htl = require(\"htl@0.2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"