25:["$","title",null,{"children":"Pulp kayu Indonesia - deforestasi | Trase | Observable"}] 49:[{"id":"f8eef6c3c5be85da7e8205f2a5ea4b8b2bae452f070b8a25a39660fd14d0e78c0356fcd9a5f7d95cd87f00cf2962a982b2cefe268968403a85288e7c3a7e578c","href":"https://static.observableusercontent.com/files/f8eef6c3c5be85da7e8205f2a5ea4b8b2bae452f070b8a25a39660fd14d0e78c0356fcd9a5f7d95cd87f00cf2962a982b2cefe268968403a85288e7c3a7e578c","name":"yearly_def_defrate_2001_2019-9.csv","type":"text/csv","lastModified":1612971293309.455,"size":827}] 29:{"id":"6b07da729ccbe688","slug":null,"title":"Pulp kayu Indonesia - deforestasi","thumbnail":"cbce93ea256e9b43718a452e78835659aeea5177120d740634e0136707605a5c","access_level":"unlisted","create_time":"$D2021-02-10T15:34:53.309Z","update_time":"$D2021-02-16T19:12:11.932Z","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":2287,"publish_version":2287,"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":"Pulp kayu Indonesia - deforestasi","cells":[{"id":0,"value":"md`# Pulp kayu Indonesia - deforestasi`","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: \"Deforestasi telah menurun sejak 2012\",\n subtitle:\n \"Luasan deforestasi per tahun (ribu hektare, merah) dan laju deforestasi (% dibandingkan dengan hutan alam tersisa dalam konsesi, hitam) terjadi dalam konsesi pulp pada tahun 2019\"\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 \nconst 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":false,"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(\"yearly_def_defrate_2001_2019-9.csv\").text(),\n d3.autoType\n );\n return Object.assign(data.map(d => ({ ...d, key: d.year })), {\n x: \"Tahun\",\n y1: \"Deforestasi (hektar)\",\n y2: \"Laju deforestasi (%)\"\n });\n}","pinned":true,"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.scaleBand()\n .domain(data.map(d => d.year))\n .rangeRound([margin.left, width - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"y1 = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.defor)]).nice()\n .rangeRound([height - margin.bottom, margin.top])","pinned":false,"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.defor_rate)).nice()\n .rangeRound([height - margin.bottom, margin.top])\n .domain([0,25])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"line = d3.line()\n .x(d => x(d.year) + x.bandwidth() / 2)\n .y(d => y2(d.defor_rate))","pinned":false,"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(\n d3\n .axisBottom(x)\n .ticks(width / 50)\n .tickSizeOuter(0)\n )\n .call(g => g.selectAll(\".tick line\").remove())\n .call(g =>\n g\n .selectAll(\".tick text\")\n .attr(\"y\", 10)\n .attr(\"x\", 17.5)\n .attr(\"dy\", \".45em\")\n //.attr(\"transform\", \"rotate(0)\")\n .attr(\"text-anchor\", \"end\")\n )","pinned":false,"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,200000]);","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,20]);","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(d3.axisLeft(y1).ticks(Math.max(height / 100, 2), formatY))\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\").clone()\n .attr(\"x\",0)\n .attr(\"text-anchor\", \"start\")\n .text(data.y1.toUpperCase()) \n }\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(d3.axisRight(y2).ticks(Math.max(height / 100, 2), formatY))\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\").clone()\n .attr(\"x\", -160)\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 = 500","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 = d3.format(\"~s\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1691,"value":"formatY1 = d3.format(\".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 = d3.format(\"~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 = d3.format(\".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 = d3.format(\"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":true,"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(d.defor)}\n ${tooltipKeyY.toUpperCase()}:\n ${formatY1(d.defor_rate)}\n`","pinned":false,"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\n .style(\"cursor\", \"pointer\")\n .on(\"touchstart\", event => event.preventDefault())\n .on(\"pointerenter\", function(event, d) {\n tooltip.position(...tooltipOffset(tooltip, d3.pointer(event), width, height));\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: 50, 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 * 5) / 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"}],"files":"$W49","stdlib":"1"}} 24:null