25:["$","title",null,{"children":"Trase explainer: Indo palm oil - deforestation (ID) | Trase | Observable"}] 49:T45b,d3Format = (specifier) => { // Define a custom locale (you can customize this baseLocale as needed) const baseLocale = { decimal: ",", // Decimal separator (e.g., Indonesian style) thousands: ".", // Thousands separator grouping: [3] // Group digits by 3 }; const d3SiPrefixMap = { k: "rb", // Customize the SI-prefixes M: "jt", // jt for millions G: "m", // m for billions (miliar) T: "t" // t for trillions }; const locale = d3.formatLocale(baseLocale); const formattedSpecifier = d3.formatSpecifier(specifier); const valueFormatter = locale.format(specifier); // Return a function that formats values based on the specifier return (value) => { const result = valueFormatter(value); if (formattedSpecifier.type === "s") { // If using si-prefix, map to custom prefixes const lastChar = result[result.length - 1]; if (Object.keys(d3SiPrefixMap).includes(lastChar)) { return result.slice(0, -1) + d3SiPrefixMap[lastChar]; // Replace SI prefix } } return result; // Return default format if not using SI-prefix }; }4a:[{"id":"4845fe36bc37ab491bbcf781bcaba55753e1ffa5b954bfde68b0cd9b816bd6e9854c9174924b9e569063b6f413fe268535647f3a50832fa97b53ed3a9b3da24b","href":"https://static.observableusercontent.com/files/4845fe36bc37ab491bbcf781bcaba55753e1ffa5b954bfde68b0cd9b816bd6e9854c9174924b9e569063b6f413fe268535647f3a50832fa97b53ed3a9b3da24b","name":"id_palm_defor_prod_2001_2022@2.csv","type":"text/csv","lastModified":1729528128719.759,"size":750}] 29:{"id":"99bb5f3a5cca5651","slug":null,"title":"Trase explainer: Indo palm oil - deforestation (ID)","thumbnail":"6a677e0558bdd48806278c67864b3c626f9de322df3e4aca60c1f39ee4882c0a","access_level":"unlisted","create_time":"$D2024-10-21T16:28:48.719Z","update_time":"$D2024-10-21T22:33:25.575Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"7ad1222ddb4e496a","login":"trase","name":"Trase","avatar_url":"https://avatars-next.observableusercontent.com/b224aa7961f5a048a8038ec6325c50964fe0466aeb33b4e09887e1f552e8a676","tier":"pro","bio":"Trase is a supply chain transparency initiative that seeks to transform our understanding of how companies and governments involved in the trade of agricultural commodities are linked to impacts and opportunities for more sustainable production","followed_by_you":false,"follows_you":false},"version":2714,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"848d46b552d9d034","login":"jasonjb82","name":"Jason J. Benedict","avatar_url":"https://avatars-next.observableusercontent.com/f38c50f136ea7fda190b9d5fe667c8144f827e69a8ebebc72acecb800a2a92cd","tier":null,"bio":"Researcher @ UC Santa Barbara - Land Systems | dataviz, rstats & python","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"848d46b552d9d034","login":"jasonjb82","name":"Jason J. Benedict","avatar_url":"https://avatars-next.observableusercontent.com/f38c50f136ea7fda190b9d5fe667c8144f827e69a8ebebc72acecb800a2a92cd","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":{"titling":"auto","title":"Trase explainer: Indo palm oil - deforestation (ID)","cells":[{"id":0,"value":"md`# Trase explainer: Indo palm oil - deforestation (ID)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1451,"value":"chartTitle = titleCard({\n title:\n \"Deforestasi yang didorong industri minyak kelapa sawit telah menurun selama hampir satu dekade\",\n subtitle:\n \"Kawasan hutan tahunan yang beralih fungsi menjadi perkebunan kelapa sawit (ribuan hektare, batang merah) dan produksi minyak kelapa sawit mentah tahunan (juta ton, garis hitam) 2001–2022. Sumber: Trase\",\n width: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"chart = {\n const id = DOM.uid(\"chart\").id;\n const svg = d3\n .create(\"svg\")\n .attr(\"class\", id)\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"overflow\", \"visible\")\n .call((svg) => svg.append(\"defs\").html(fonts(`.${id}`)));\n\n const bars = svg\n .append(\"g\")\n .attr(\"id\", \"bars\")\n .selectAll(\"rect\")\n .data(data)\n .join(\"rect\")\n .attr(\"fill\", (d) => colour(d))\n .attr(\"x\", (d) => x(d.year))\n .attr(\"y\", (d) => y1(d.defor))\n .attr(\"height\", (d) => y1(0) - y1(d.defor))\n .attr(\"width\", x.bandwidth());\n\n svg\n .append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#34444C\")\n .attr(\"stroke-miterlimit\", 1)\n .attr(\"stroke-width\", 3)\n .attr(\"d\", line(data));\n\n svg.append(\"g\").call(xAxis);\n svg.append(\"g\").call(y1Axis);\n svg.append(\"g\").call(y2Axis);\n // svg.append(\"g\").call(annotate);\n bars.call(hover, svg);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1098,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2257,"value":"data = {\n const data = d3.csvParse(\n await FileAttachment(\"id_palm_defor_prod_2001_2022@2.csv\").text(),\n d3.autoType\n );\n return Object.assign(\n data.map((d) => ({ ...d, key: d.year })),\n {\n x: \"Year\",\n y1: \"Deforestasi (hektar)\",\n y2: \"Produksi CPO (juta ton)\"\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1096,"value":"md`### Variables and templates`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"x = d3\n .scaleBand()\n .domain(data.map((d) => d.year))\n .rangeRound([margin.left, width - margin.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"y1 = d3\n .scaleLinear()\n .domain([0, d3.max(data, d => d.defor)])\n //.nice()\n .rangeRound([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"y2 = d3\n .scaleLinear()\n .domain(d3.extent(data, (d) => d.prod))\n //.nice()\n .rangeRound([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"line = d3\n .line()\n .x((d) => x(d.year) + x.bandwidth() / 2)\n .y((d) => y2(d.prod))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2563,"value":"years = {\n let allYears = [...new Set(data.map((d) => d.year))];\n return width >= 600\n ? allYears.filter((d, i) => i % 2)\n : allYears.filter((d, i) => (i + 1) % 4 === 0);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"xAxis = (g) =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .style(\"font\", \"bold 12px var(--trase-mono)\")\n .style(\"color\", traseColours.get(\"moss\"))\n .attr(\"stroke-width\", 1.5)\n .call(d3.axisBottom(x).tickValues(years).tickSizeOuter(0))\n .call((g) => g.selectAll(\".tick line\").remove())\n .call((g) =>\n g\n .selectAll(\".tick text\")\n .attr(\"y\", 15)\n .attr(\"x\", 15)\n .attr(\"dy\", \".45em\")\n .attr(\"transform\", \"rotate(360)\")\n .attr(\"text-anchor\", \"end\")\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1716,"value":"grid = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y1).ticks(height / 100, formatY))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick text\").remove())\n .call(g => \n g\n .selectAll(\".tick line\")\n .attr(\"stroke\", traseColours.get(\"lightgrey\"))\n .attr(\"x1\", (d, i, g) => \n i === g.length - 1 && data.y1\n ? getLabelLength(data.y1, \"font: 12px var(--trase-mono)\") + 5\n : 0\n )\n .attr(\"x2\", width - margin.left - margin.right) \n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2078,"value":"y1.domain([0, 250000])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2092,"value":"y2.domain([0, 50])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"y1Axis = (g) =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .style(\"font\", \"12px var(--trase-mono)\")\n .style(\"color\", traseColours.get(\"moss\"))\n .call(\n d3\n .axisLeft(y1)\n .ticks(Math.max(height / 100, 2))\n .tickFormat(formatY)\n )\n .call((g) => g.selectAll(\".tick line\").remove())\n .call((g) => g.select(\".domain\").remove())\n .call((g) => {\n if (data.y1) {\n g.select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"start\")\n .text(data.y1.toUpperCase());\n }\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"y2Axis = (g) =>\n g\n .attr(\"transform\", `translate(${width - margin.right},0)`)\n .style(\"font\", \"12px var(--trase-mono)\")\n .style(\"color\", traseColours.get(\"moss\"))\n .call(\n d3\n .axisLeft(y2)\n .ticks(Math.max(height / 100, 2))\n .tickFormat(formatY)\n )\n .call((g) => g.select(\".domain\").remove())\n .call((g) => g.selectAll(\".tick line\").remove())\n .call((g) => {\n if (data.y2) {\n g.select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", -240)\n .attr(\"text-anchor\", \"start\")\n .text(data.y2.toUpperCase());\n }\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"height = width * 0.45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1778,"value":"colour = () => traseColours.get(\"red\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1952,"value":"formatY = d3Format(\".2s\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1691,"value":"formatY1 = d3Format(\".03s\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1955,"value":"formatX = d3Format(\"~s\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1917,"value":"formatX1 = d3Format(\".03s\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1746,"value":"formatTooltipValue = d3Format(\"0.1s\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1786,"value":"annotate = g => {}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1905,"value":"tooltipKeyX = data.y1 || \"X\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1909,"value":"tooltipKeyY = data.y2 || \"X\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1900,"value":"tooltipKeyValue = (d) => svg`\n ${tooltipKeyX.toUpperCase()}:\n ${formatX1(\n d.defor\n )}\n ${tooltipKeyY.toUpperCase()}:\n ${formatY1(\n d.prod\n )}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1925,"value":"function hover(g, svg) {\n const tooltip = new Tooltip();\n g.style(\"cursor\", \"pointer\")\n .on(\"touchstart\", (event) => event.preventDefault())\n .on(\"pointerenter\", function (event, d) {\n tooltip.position(\n ...tooltipOffset(tooltip, d3.pointer(event), width, height)\n );\n tooltip.show(d.key, tooltipKeyValue(d));\n })\n .on(\"pointermove\", function (event) {\n let [x, y] = tooltipOffset(tooltip, d3.pointer(event), width, height);\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"margin = ({ top: 10, right: 20, bottom: 30, left: 50 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1686,"value":"crop = (text, style, margin) => {\n const length = getLabelLength(text, style);\n const prop = (length - margin * 1) / length;\n return prop <= 0\n ? text\n : text.substr(0, Math.floor(text.length * (1 - prop))).trim() + \"...\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1087,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1688,"value":"import { swatches, getLabelLength } from \"@trase/legends@376\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1646,"value":"import { traseColours, traseCategory1, fonts } from \"@trase/visual-id@1366\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1748,"value":"import { Tooltip, tooltipOffset } from \"@trase/tooltip@440\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1673,"value":"import { titleCard } from \"0b0a1fb420786911@645\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1204,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2673,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null