25:["$","title",null,{"children":"Trase explainer: Indo palm oil - Deforestation risk of exporters (ID) | Trase | Observable"}] 49:T12b4,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}`))); svg.append("g").call(grid); svg.append("g").call(xAxis, svg); svg.append("g").call(xAxisLabels, svg); svg.append("g").call(yAxisLabels, svg); const bees_2018 = svg .append("g") .selectAll("circle") .data(nodes(value_2018, secondaryValue_2018, y)) .join("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", (d) => { if (isNaN(d[secondaryValue_2018]) && !isNaN(value_2018)) return r(1); // standard value return r(d[secondaryValue_2018]); }) .attr("fill", colour) .attr("data-exp", (d) => d.exporter_group) .attr("stroke-width", 1) .attr("stroke", "#a6150c"); const bees_2019 = svg .append("g") .selectAll("circle") .data(nodes(value_2019, secondaryValue_2019, y2019)) .join("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", (d) => { if (isNaN(d[secondaryValue_2019]) && !isNaN(value_2019)) return r(1); // standard value return r(d[secondaryValue_2019]); }) .attr("fill", colour) .attr("data-exp", (d) => d.exporter_group) .attr("stroke-width", 1) .attr("stroke", "#a6150c"); const bees_2020 = svg .append("g") .selectAll("circle") .data(nodes(value_2020, secondaryValue_2020, y2020)) .join("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", (d) => { if (isNaN(d[secondaryValue_2020]) && !isNaN(value_2020)) return r(1); // standard value return r(d[secondaryValue_2020]); }) .attr("fill", colour) .attr("data-exp", (d) => d.exporter_group) .attr("stroke-width", 1) .attr("stroke", "#a6150c"); //svg.append("g").call(annotate); bees_2018.call(hover, svg, bees_2019, bees_2020); bees_2019.call(hover, svg, bees_2018, bees_2020); bees_2020.call(hover, svg, bees_2018, bees_2019); const wilmar = bees_2018._groups[0].find((b) => b.dataset.exp === "WILMAR"); const wilmarOther = bees_2019._groups[0].find( (b) => b.dataset.exp === "WILMAR" ); const wilmarAnother = bees_2020._groups[0].find( (b) => b.dataset.exp === "WILMAR" ); d3.select(wilmar) .attr("fill", traseColours.get("moss")) .attr("stroke", "#333"); d3.select(wilmarOther) .attr("fill", traseColours.get("moss")) .attr("stroke", "#333"); d3.select(wilmarAnother) .attr("fill", traseColours.get("moss")) .attr("stroke", "#333"); const kpn = bees_2018._groups[0].find((b) => b.dataset.exp === "KPN CORP"); const kpnOther = bees_2019._groups[0].find( (b) => b.dataset.exp === "KPN CORP" ); const kpnAnother = bees_2020._groups[0].find( (b) => b.dataset.exp === "KPN CORP" ); d3.select(kpn).attr("fill", traseColours.get("green")).attr("stroke", "#333"); d3.select(kpnOther) .attr("fill", traseColours.get("green")) .attr("stroke", "#333"); d3.select(kpnAnother) .attr("fill", traseColours.get("green")) .attr("stroke", "#333"); const wilmar_2018 = bees_2018._groups[0].find( (b) => b.dataset.exp === "WILMAR" ); const wilmar_2019 = bees_2019._groups[0].find( (b) => b.dataset.exp === "WILMAR" ); const wilmar_2020 = bees_2020._groups[0].find( (b) => b.dataset.exp === "WILMAR" ); const wilmar_2020data = d3.select(wilmar_2020)._groups[0][0].__data__; const x1 = wilmar_2020data.x + 5; const y1 = wilmar_2020data.y - 5; const x2 = x1 + 50; const y2 = y1 - 50; svg .append("line") .attr("x1", x1) .attr("y1", y1) .attr("x2", x2) .attr("y2", y2) .attr("stroke", traseColours.get("moss")); svg .append("text") .attr("x", x2 + 2) .attr("y", y2 - 2) .style("font", "14px var(--trase-sans-serif)") .attr("fill", traseColours.get("moss")) .text("WILMAR"); const kpn_2018 = bees_2018._groups[0].find( (b) => b.dataset.exp === "KPN CORP" ); const kpn_2019 = bees_2019._groups[0].find( (b) => b.dataset.exp === "KPN CORP" ); const kpn_2020 = bees_2020._groups[0].find( (b) => b.dataset.exp === "KPN CORP" ); const kpn_2020data = d3.select(kpn_2020)._groups[0][0].__data__; const x1a = kpn_2020data.x + 5; const y1a = kpn_2020data.y - 5; const x2a = x1a + 50; const y2a = y1a - 50; svg .append("line") .attr("x1", x1a) .attr("y1", y1a) .attr("x2", x2a) .attr("y2", y2a) .attr("stroke", traseColours.get("moss")); svg .append("text") .attr("x", x2a + 2) .attr("y", y2a - 2) .style("font", "14px var(--trase-sans-serif)") .attr("fill", traseColours.get("moss")) .text("KPN CORP"); return svg.node(); }4a:T59d,xAxisLabels = (g, svg) => { const arrowId = DOM.uid("arrow"); svg .append("defs") .append("marker") .attr("id", arrowId.id) .attr("markerHeight", 10) .attr("markerWidth", 10) .attr("refX", 3.75) .attr("refY", 3.75) .attr("orient", "auto-start-reverse") .append("polyline") .attr("stroke", "#ddd") .attr("fill", "none") .attr("points", "0,0 3.75,3.75 0,7.5"); const left = width * 0.05, right = width * 0.95; g.append("line") .attr("x1", left) .attr("x2", right) .attr("y1", height - margin.bottom) .attr("y2", height - margin.bottom) .attr("stroke", "#ddd") .attr("stroke-width", 1.5) .attr("marker-start", arrowId) .attr("marker-end", arrowId); const text = g .append("g") .attr("transform", `translate(0, ${height - margin.bottom + 22})`) .style("pointer-events", "none") .style("font", "12px var(--trase-mono)") .style("fill", traseColours.get("moss")) .append("text"); text .append("tspan") .attr("x", width / 2) .attr("text-anchor", "middle") .style("font", "bold 14px var(--trase-sans-serif)") .text(`${valueTitle} (${valueUnits})`); text .append("tspan") .attr("x", left) .attr("text-anchor", "start") .text("KURANGNYA RISIKO DEFORESTASI"); text .append("tspan") .attr("x", right) .attr("text-anchor", "end") .text("NAIKNYA RISIKO DEFORESTASI"); }4b:T498,yAxisLabels = (g, svg) => { const text_2018 = g .append("g") .attr("transform", `translate(0, ${y})`) .style("pointer-events", "none") .style("font", "12px var(--trase-mono)") .style("fill", traseColours.get("moss")) .append("text") .append("tspan") .attr("x", 0) .attr("text-anchor", "start") .style("font", "bold 14px var(--trase-sans-serif)") .text(Label1); const text_2019 = g .append("g") .attr("transform", `translate(0, ${y2019})`) .style("pointer-events", "none") .style("font", "12px var(--trase-mono)") .style("fill", traseColours.get("moss")) .append("text") .append("tspan") .attr("x", 0) .attr("text-anchor", "start") .style("font", "bold 14px var(--trase-sans-serif)") .text(Label2); const text_2020 = g .append("g") .attr("transform", `translate(0, ${y2020})`) .style("pointer-events", "none") .style("font", "12px var(--trase-mono)") .style("fill", traseColours.get("moss")) .append("text") .append("tspan") .attr("x", 0) .attr("text-anchor", "start") .style("font", "bold 14px var(--trase-sans-serif)") .text(Label3); }4c:T76c,generateTooltip = (d) => { return svg` ${Label1} ${formatTooltipValue( d[value_2018] )} ${valueUnits} ${valueTitle} ${formatTooltipValue( d[secondaryValue_2018] )} ${secondaryValueUnits} ${secondaryValueTitle} ${Label2} ${formatTooltipValue( d[value_2019] )} ${valueUnits} ${valueTitle} ${formatTooltipValue( d[secondaryValue_2019] )} ${secondaryValueUnits} ${secondaryValueTitle} ${Label3} ${formatTooltipValue( d[value_2020] )} ${valueUnits} ${valueTitle} ${formatTooltipValue( d[secondaryValue_2020] )} ${secondaryValueUnits} ${secondaryValueTitle} `; }4d:Tac6,function hover(bees, svg, otherBees, anotherBees) { const tooltip = new Tooltip(); bees .style("cursor", "pointer") .on("touchstart", (event) => event.preventDefault()) .on("pointerenter", (event, d) => { tooltip.position( ...tooltipOffset( tooltip, d3.pointer(event, event.currentTarget.parentNode), width, height ) ); tooltip.show(d[keyCol], generateTooltip(d)); const thisBee = bees._groups[0].find((b) => b.__data__.index == d.index); const equivalentBee = otherBees._groups[0].find( (b) => b.dataset.exp == thisBee.dataset.exp ); const equivalentBee2 = anotherBees._groups[0].find( (b) => b.dataset.exp == thisBee.dataset.exp ); d3.select(thisBee).attr("fill", traseColours.get("darkred")); d3.select(equivalentBee).attr("fill", traseColours.get("darkred")); d3.select(equivalentBee2).attr("fill", traseColours.get("darkred")); }) .on("pointermove", function (event) { let [x, y] = tooltipOffset( tooltip, d3.pointer(event, event.currentTarget.parentNode), width, height ); tooltip.position(x, y); this.releasePointerCapture(event.pointerId); }) .on("pointerout", () => { tooltip.hide(); bees.attr("fill", traseColours.get("red")); otherBees.attr("fill", traseColours.get("red")); anotherBees.attr("fill", traseColours.get("red")); const wilmar = bees._groups[0].find((b) => b.dataset.exp === "WILMAR"); const wilmarOther = otherBees._groups[0].find( (b) => b.dataset.exp === "WILMAR" ); const wilmarAnother = anotherBees._groups[0].find( (b) => b.dataset.exp === "WILMAR" ); d3.select(wilmar) .attr("fill", traseColours.get("moss")) .attr("stroke", "#333"); d3.select(wilmarOther) .attr("fill", traseColours.get("moss")) .attr("stroke", "#333"); d3.select(wilmarAnother) .attr("fill", traseColours.get("moss")) .attr("stroke", "#333"); const kpn = bees._groups[0].find((b) => b.dataset.exp === "KPN CORP"); const kpnOther = otherBees._groups[0].find( (b) => b.dataset.exp === "KPN CORP" ); const kpnAnother = anotherBees._groups[0].find( (b) => b.dataset.exp === "KPN CORP" ); d3.select(kpn) .attr("fill", traseColours.get("green")) .attr("stroke", "#333"); d3.select(kpnOther) .attr("fill", traseColours.get("green")) .attr("stroke", "#333"); d3.select(kpnAnother) .attr("fill", traseColours.get("green")) .attr("stroke", "#333"); }); svg.append(() => tooltip.node); }4e:[{"id":"fb82f7a505fff14c4da1dda6acdd4395a52cca5f6d85fae48d8447e9786bb6184425802fd248280b5c07c182b22d1a83f4b0c3dbbe82bdd37561bcf59e26473f","href":"https://static.observableusercontent.com/files/fb82f7a505fff14c4da1dda6acdd4395a52cca5f6d85fae48d8447e9786bb6184425802fd248280b5c07c182b22d1a83f4b0c3dbbe82bdd37561bcf59e26473f","name":"id_palm_po_def_risk_vols_exp_grp@12.csv","type":"text/csv","lastModified":1662658459521.178,"size":13872}] 29:{"id":"e5a3599fcf73d3a3","slug":null,"title":"Trase explainer: Indo palm oil - Deforestation risk of exporters (ID)","thumbnail":"9b473933908ab5c1a3f409b746332313a16f25eacb3e6d929912765ae5bac54d","access_level":"unlisted","create_time":"$D2022-09-08T17:34:19.521Z","update_time":"$D2022-09-08T17:55:04.204Z","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":1493,"publish_version":1493,"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 risk of exporters (ID)","cells":[{"id":0,"value":"md`# Trase explainer: Indo palm oil - Deforestation risk of exporters (ID)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"chart = html`\n${title}\n${chartOnly}\n

\n${legend}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1047,"value":"title = titleCard({\n title: `Perubahan risiko deforestasi di antara pengekspor utama`,\n subtitle: `Pada 2018–2020, beberapa pengekspor terbesar Indonesia (misalnya, Wilmar International, gelembung hijau gelap) berhasil mengurangi risiko deforestasi sesudah menerapkan komitmen antideforestasi. Namun, banyak pengekspor dengan pertumbuhan tercepat di Indonesia (misalnya, KPN Corp, gelembung hijau muda) menunjukkan kenaikan risiko deforestasi (Sumber: Trase Supply Chains).`,\n footnote: ``,\n width: \"100%\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1067,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"legend = circleLegend({\n scale: r,\n ticks: 3,\n tickFormat: (d, i, g) =>\n i === g.length - 1\n ? `${d3.format(numberFormat)(d)} ${secondaryValueUnits} ${\n secondaryValueTitle ? secondaryValueTitle.toUpperCase() : \"\"\n }`\n : d3.format(numberFormat)(d),\n tickWrap: true,\n marginRight: 80,\n marginBottom: 20\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"nodes = (value_2018, secondaryValue_2018, y) => {\n const nodes = data.map(Object.create);\n const simulation = d3\n .forceSimulation(nodes)\n .force(\"x\", d3.forceX((d) => x(d[value_2018])).strength(xStrength))\n .force(\"y\", d3.forceY(y))\n .force(\n \"collide\",\n d3.forceCollide((d) => r(d[secondaryValue_2018]) + 1)\n )\n .randomSource(d3.randomLcg(0.4212687683098432008))\n .stop();\n for (let i = 0; i < 300; ++i) simulation.tick();\n invalidation.then(() => simulation.stop());\n return nodes;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"// height = Math.max(width * 0.4, 150)\nheight = 850","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"margin = ({ top: 30, right: width * 0.12, bottom: 30, left: 200 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"//data = FileAttachment(\"id-palm-2015-importers.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"//data = FileAttachment(\"3_CompareCountries.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1130,"value":"data = FileAttachment(\"id_palm_po_def_risk_vols_exp_grp@12.csv\").csv({\n typed: true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"value_2018 = \"deforestation_2018\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"value_2019 = \"deforestation_2019\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1072,"value":"value_2020 = \"deforestation_2020\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"valueTitle = \"Risiko deforestasi\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"valueTitle_2018 = \"Risiko deforestasi (2018)\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"valueTitle_2019 = \"Risiko deforestasi (2019)\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1074,"value":"valueTitle_2020 = \"Risiko deforestasi (2020)\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"valueUnits = \"ha\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"keyCol = \"exporter_group\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"secondaryValue_2018 = \"volume_2018\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"secondaryValue_2019 = \"volume_2019\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1077,"value":"secondaryValue_2020 = \"volume_2020\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"secondaryValueTitle = \"Volume\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"secondaryValueTitle_2018 = \"Volume (2018)\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"secondaryValueTitle_2019 = \"Volume (2019)\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1080,"value":"secondaryValueTitle_2020 = \"Volume (2020)\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"secondaryValueUnits = \"Mt\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"numberFormat = \".2~s\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"// colour = d => d3.scaleSequentialSqrt(extent, d3.interpolateRgbBasis(colourScheme[9]))(d[valueCol])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"colour = (d) => traseColours.get(\"red\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"colourScheme = traseReds","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"// extent = d3.extent(data, (d) => d[valueCol])\nextent = [\n 0,\n d3.max([\n d3.max(data, (d) => Number(d[value_2018])),\n d3.max(data, (d) => Number(d[value_2019])),\n d3.max(data, (d) => Number(d[value_2020]))\n ])\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"// extentRadius = d3.extent(data, (d) => Number(d[secondaryValueCol]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"extentRadius = [\n d3.min([\n d3.min(data, (d) => Number(d[secondaryValue_2018])),\n d3.min(data, (d) => Number(d[secondaryValue_2019])),\n d3.min(data, (d) => Number(d[secondaryValue_2020]))\n ]),\n d3.max([\n d3.max(data, (d) => Number(d[secondaryValue_2018])),\n d3.max(data, (d) => Number(d[secondaryValue_2019])),\n d3.max(data, (d) => Number(d[secondaryValue_2020]))\n ])\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"x = d3\n .scaleLinear()\n .domain(extent)\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":373,"value":"y = (height / 6) * 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"y2019 = (height / 6) * 2.75","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1093,"value":"y2020 = (height / 6) * 4.75","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"xStrength = 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"// gridAdjustment = -margin.left / 20\ngridAdjustment = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"grid = (g) =>\n g.attr(\"stroke\", traseColours.get(\"lightgrey\")).call((g) =>\n g\n .append(\"g\")\n .selectAll(\"line\")\n .data(x.ticks(xAxisTicks, d3.format(numberFormat)))\n .join(\"line\")\n .attr(\"stroke-width\", 2)\n .attr(\"x1\", (d) => gridAdjustment + x(d))\n .attr(\"x2\", (d) => gridAdjustment + x(d))\n .attr(\"y1\", margin.top)\n .attr(\"y2\", height - margin.bottom - margin.top)\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"xAxisTicks = width / 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"xAxis = (g) =>\n g\n .attr(\"transform\", `translate(${gridAdjustment}, 0)`)\n .style(\"font\", \"12px var(--trase-mono)\")\n .style(\"color\", \"#658270\")\n .call(\n d3\n .axisBottom(x)\n .ticks(xAxisTicks, d3.format(numberFormat))\n .tickSizeOuter(0)\n )\n .call((g) => g.select(\".domain\").attr(\"stroke-width\", 0))\n .call((g) => g.selectAll(\".tick line\").remove())\n// .call((g) =>\n// g\n// .append(\"text\")\n// .attr(\"x\", width)\n// .attr(\"y\", height - margin.bottom - 4)\n// .style(\"font\", \"12px var(--trase-mono)\")\n// .style(\"fill\", \"#658270\")\n// .attr(\"text-anchor\", \"end\")\n// .attr(\"fill\", \"black\")\n// .text(tooltipKey ? tooltipKey.toUpperCase() + \" →\" : \"\")\n// )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"Label1 = \"2018\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"Label2 = \"2019\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1086,"value":"Label3 = \"2020\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"format = d3.format(numberFormat)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"annotate = g => {}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"tooltipKey = `${valueTitle} | ${secondaryValueTitle}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"formatTooltipValue = (t) => {\n if (isNaN(t)) {\n return \"N/A\";\n }\n if (t < 1) {\n return \"<1\";\n }\n return d3.format(\",.0~f\")(t);\n // if (t < 100000) {\n // return d3.format(\",.0~f\")(t);\n // }\n // return d3.format(numberFormat)(t);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"import {\n traseColours,\n traseReds,\n traseGreens,\n traseCategory1,\n fonts\n} 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":237,"value":"import { Tooltip, tooltipKeyValue, 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":664,"value":"import { circleLegend } from \"@trase/legends\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1049,"value":"import { titleCard } from \"@trase/title-card\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"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":"$W4e","stdlib":"1"}} 24:null