25:["$","title",null,{"children":"Pulp kayu Indonesia - konsumsi kayu pulp menurut grup | Trase | Observable"}] 49:T623,// adapted from https://observablehq.com/@d3/multi-line-chart function hover(svg) { // create vertical line const line = svg.append("g").attr("display", "none"); line .append("line") .attr("stroke", traseColours.get("youngmoss")) .attr("stroke-width", 1.5) .attr("y1", height - margin.bottom) .attr("y2", margin.top); // add tooltip const tooltip = new Tooltip(); svg .style("-webkit-tap-highlight-color", "transparent") .style("cursor", "pointer") .on("touchstart", event => event.preventDefault()) .on("pointerenter pointermove", enter) .on("pointerout", exit); svg.append(() => tooltip.node); function enter(event) { const pointer = d3.pointer(event, this); const xm = x.invert(pointer[0]); const i1 = d3.bisectLeft(dates, xm); const i0 = i1 - 1; if(i0 < 0) return; const i = xm - dates[i0] > dates[i1] - xm ? i1 : i0; let xp = x(dates[i]); let yp = pointer[1]; const yearData = [...new Map(values).get(dates[i].getTime()).entries()] .sort(([a], [b]) => positions.get(b) - positions.get(a)); line.attr("transform", `translate(${xp}, 0)`); tooltip.show(formatX(dates[i]), tooltipKeyValue(yearData)); xp += 10; if (xp + tooltip.width > width) xp -= tooltip.width + 20; if (yp + tooltip.height > height - margin.bottom) yp = height - margin.bottom - tooltip.height - 10; tooltip.position(xp, yp); line.attr("display", null); } function exit() { line.attr("display", "none"); tooltip.hide(); } }4a:[{"id":"33dbdd420d09fce1cc8768cd73e2c0ab3882e77d1079be2fd5af26bd733cc78698d0ba0128f6b8d6461a5514785af597114b6914e0b4ed8b12eb5c0ef65f54f0","href":"https://static.observableusercontent.com/files/33dbdd420d09fce1cc8768cd73e2c0ab3882e77d1079be2fd5af26bd733cc78698d0ba0128f6b8d6461a5514785af597114b6914e0b4ed8b12eb5c0ef65f54f0","name":"ws_grp_2015_2019@2.csv","type":"text/csv","lastModified":1612974796070.732,"size":588}] 29:{"id":"f5aab00f49a277c5","slug":null,"title":"Pulp kayu Indonesia - konsumsi kayu pulp menurut grup","thumbnail":"50cbd14a41133e309f3426a82703bde05f8ba63aa69fbac921d46f7aedc4a495","access_level":"unlisted","create_time":"$D2021-02-10T16:33:16.070Z","update_time":"$D2021-02-11T23:22:14.062Z","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":845,"publish_version":845,"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 - konsumsi kayu pulp menurut grup","cells":[{"id":0,"value":"md`# Pulp kayu Indonesia - konsumsi kayu pulp menurut grup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"chartTitle = titleCard({\n title:\n \"Meningkatnya konsumsi kayu menambah risiko deforestasi di masa depan \",\n subtitle: \"Volume pulp kayu yang dikonsumsi grup usaha berdasarkan tahun\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"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 svg.append(\"g\").call(grid);\n\n const paths = svg\n .append(\"g\")\n .selectAll(\"path\")\n .data(series)\n .join(\"path\")\n .attr(\"fill\", ({ key }) => colour(key))\n .attr(\"stroke-width\", 3)\n .attr(\"d\", area);\n\n svg.append(\"g\").call(xAxis);\n svg.append(\"g\").call(yAxis);\n \n svg.append(\"g\").call(annotate);\n \n svg.call(hover);\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":4,"value":"chartLegend = swatches({colour: colour, labelStyle: \"sans-serif\", orientation: \"vertical\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"height = width * 0.6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"margin = ({ top: 20, right: 30, bottom: 30, left: 40 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"data = Object.assign(\n d3.csvParse(\n await FileAttachment(\"ws_grp_2015_2019@2.csv\").text(),\n d3.autoType\n ),\n { y: \"Volume pulp kayu (m³)\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"keys = Array.from(d3.group(data, d => titleCase(d.key)).keys())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"values = Array.from(d3.rollup(data, ([d]) => d.value, d => +d.date, d => titleCase(d.key)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"dates = [...new Set(data.map(d => d.date.getTime()))].map(d3.utcDay)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"order = d3.stackOrderAscending","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"series = d3.stack()\n .keys(keys)\n .value(([, values], key) => values.get(key) || 0)\n .order(order)(values)\n .map(d => (d.forEach(v => (v.key = d.key)), d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"positions = d3.rollup(series, ([d]) => d3.mean(d[0]), d => d.key)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"keysOrdered = [\"Sinar Mas\", \"Royal Golden Eagle / Tanoto\", \"Marubeni\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"//grpColors = [\"#e07474\",\"#F3AD6A\",\"#87a2bc\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(series, d => d3.max(d, d => d[1]))])\n .nice()\n .range([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":31,"value":"area = d3.area()\n .x(d => x(d.data[0]))\n .y0(d => y(d[0]))\n .y1(d => y(d[1]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"colour = d3.scaleOrdinal()\n .domain(keysOrdered)\n .range(traseCategory1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"formatX = d3.utcFormat(\"%Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"formatY = d3.format(\"~s\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"xAxisTicks = Math.min(dates.length, width / 50)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .style(\"font\", \"12px var(--trase-mono)\")\n .style(\"color\", traseColours.get(\"moss\"))\n .call(\n d3.axisBottom(x)\n .ticks(xAxisTicks)\n .tickFormat(formatX)\n .tickSizeOuter(0)\n )\n .call(g => g.selectAll(\".tick line\").remove())\n .call(g => g.select(\".domain\").attr(\"stroke-width\", 1.5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .style(\"font\", \"12px var(--trase-mono)\")\n .style(\"color\", \"#658270\")\n .call(d3.axisLeft(y).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.y) {\n g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"start\")\n .text(data.y.toUpperCase()) \n }\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"grid = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).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.y\n ? getLabelLength(data.y, \"font: 12px var(--trase-mono)\") + 5\n : 0\n )\n .attr(\"x2\", width - margin.left - margin.right) \n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"annotate = g => {}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"tooltipKeyValue = d =>\n svg`${d.map((el, i) => svg`\n \n \n ${el[0]}\n ${formatTooltipValue(el[1])}\n `\n )}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"formatTooltipValue = d3.format(\"0.2s\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"titleCase = text => {\n const titled = text.replace(/(\\w)(\\w*)/g, (_, first, rest) => first.toUpperCase() + rest.toLowerCase());\n return titled\n .replace(\"April\", \"APRIL\")\n .replace(\"Oki\", \"OKI\")\n .replace(\"Pt \", \"PT \")\n .replace(\"Cv \", \"CV \")\n .replace(\" Ii\", \" II\")\n .replace(\"(Sk\", \"(SK\")\n .replace(\" Sba\", \" SBA\")\n .replace(\"Kud \", \"KUD \")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"import { traseColours, traseReds, traseGreens, traseOranges, traseCategory1,fonts} from \"@trase/visual-id@1375\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"import { titleCard, html } from \"0b0a1fb420786911@645\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"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":371,"value":"import { Tooltip } 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":40,"value":"d3 = require(\"d3@6\")","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