25:["$","title",null,{"children":"Brazilian Soy Production vs. Deforestation | Trase | Observable"}] 49:T158d,chartOnly = { const id = DOM.uid("chart").id; const svg = d3 .create("svg") .attr("class", id) .attr("viewBox", [0, 0, width, height]) .attr("overflow", "visible") .call((svg) => svg.append("defs").html(fonts(`.${id}`))); // svg.append("g").call(grid); const bars = svg .append("g") .attr("id", "bars") .selectAll("rect") .data(data) .join("rect") .attr("fill", (d) => barColor) .attr("x", (d) => xBar(d[dateCol])) .attr("y", (d) => yBar(d[barCol])) .attr("height", (d) => yBar(0) - yBar(d[barCol])) .attr("width", xBar.bandwidth()); const paths = svg .append("g") .selectAll("path") .data(series) .join("path") .attr("fill", "none") .attr("stroke", (d) => colour(d.key)) .attr("stroke-width", 3.5) .attr("stroke-linejoin", "round") .attr("d", (d) => line(d.values)); if (showValueLabelsBars) { const labels = svg .append("g") .selectAll(".labels") .data(data) .enter() .append("text") .attr("x", (d) => xBar(d[dateCol])) .attr("dx", (d) => { // if (d[barCol] === d3.max(data, (x) => x[barCol])) { // return xBar.bandwidth() / 4; // } return xBar.bandwidth() / 2; }) .attr("y", (d) => yBar(d[barCol])) .attr("dy", -height / 100) .text((d) => { // if (d[barCol] === d3.max(data, (x) => x[barCol])) { // return `${formatTooltipValue(Number(d[barCol]))} ${ // valueUnitsBars ? valueUnitsBars : "" // } ${valueTitleBars}`; // } return `${formatTooltipValue(Number(d[barCol]))} ${ valueUnitsBars ? valueUnitsBars : "" }`; }) .style("font", `12px var(--trase-mono)`) .style("text-anchor", (d) => { // if (d[barCol] === d3.max(data, (x) => x[barCol])) { // return "start"; // } return "middle"; }) .style("alignment-baseline", "baseline") .style("fill", traseColours.get("moss")); const calloutSpacing = -10; const calloutLineBars = svg .append("g") .selectAll(".callout-bars") .data( data .filter( (d) => parseDate(d[dateCol]).getTime() === d3.max(dates).getTime() ) .slice(0, 1) ) .enter() .append("line") .attr("x1", (d) => x(parseDate(d[dateCol])) + barAndWidthCenter - 5) .attr("x2", (d) => x(parseDate(d[dateCol])) + 22) .attr("y1", (d) => yBar(Number(d[barCol])) + calloutSpacing) .attr("y2", (d) => yBar(Number(d[barCol])) + calloutSpacing) .attr("fill", "none") .attr("stroke-width", 2) .attr("stroke", "#666"); const calloutLabel = svg .append("g") .selectAll(".callout-labels-bars") .data( data .filter( (d) => parseDate(d[dateCol]).getTime() === d3.max(dates).getTime() ) .slice(0, 1) ) .enter() .append("text") .attr("dx", barAndWidthCenter) .attr("x", (d) => x(parseDate(d[dateCol]))) .attr("y", (d) => yBar(Number(d[barCol])) + calloutSpacing) .text((d) => { return valueTitleBars; }) .style("font", keyLabelFont) .style("alignment-baseline", "middle") .style("text-anchor", "start") .style("fill", traseColours.get("moss")); } if (showValueLabels) { const calloutLine = svg .append("g") .selectAll(".callout") .data( data.filter( (d) => parseDate(d[dateCol]).getTime() === d3.max(dates).getTime() ) ) .enter() .append("line") .attr("x1", (d) => x(parseDate(d[dateCol])) + barAndWidthCenter - 5) .attr("x2", (d) => x(parseDate(d[dateCol])) + 5) .attr("y1", (d) => y(Number(d[valueCol]))) .attr("y2", (d) => y(Number(d[valueCol]))) .attr("fill", "none") .attr("stroke-width", 2) .attr("stroke", "#666"); const labels = svg .append("g") .selectAll(".labels") .data( data.filter( (d) => parseDate(d[dateCol]).getTime() === d3.max(dates).getTime() ) ) .enter() .append("text") .attr("dx", barAndWidthCenter) .attr("x", (d) => x(parseDate(d[dateCol]))) .attr("y", (d) => y(Number(d[valueCol]))) .text((d) => { return `${d[keyCol]}`; }) .style("font", keyLabelFont) .style("alignment-baseline", "middle") .style("text-anchor", "start") .style("fill", traseColours.get("moss")); const valueLabels = svg .append("g") .selectAll(".labels") .data( data.filter( (d) => parseDate(d[dateCol]).getTime() === d3.max(dates).getTime() ) ) .enter() .append("text") .attr("dx", barAndWidthCenter) .attr("dy", "1.5em") .attr("x", (d) => x(parseDate(d[dateCol]))) .attr("y", (d) => y(Number(d[valueCol]))) .text((d) => { return `${formatTooltipValue(Number(d[valueCol]))} ${ valueUnits ? valueUnits : "" }`; }) .style("font", `11px var(--trase-mono)`) .style("alignment-baseline", "middle") .style("text-anchor", "start") .style("fill", traseColours.get("moss")); } svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg.append("g").call(yAxisBars); svg.append("g").call(annotate); // bars.call(hoverBars, svg); paths.call(hover, svg); return svg.node(); }4a:T7d3,// adapted from https://observablehq.com/@d3/multi-line-chart function hover(g, svg) { // create dot const dot = svg.append("g").attr("display", "none"); dot .append("circle") .attr("r", 6) .attr("stroke-width", 3) .attr("fill", "white"); // add tooltip const tooltip = new Tooltip(); tooltip.node.style = "transition: all 200ms"; 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) { event.preventDefault(); const pointer = d3.pointer(event, this); const xm = x.invert(pointer[0]); const ym = y.invert(pointer[1]); const i1 = d3.bisectLeft(dates, xm); const i0 = i1 - 1; const i = xm - dates[i0] > dates[i1] - xm ? i1 : i0; const s = d3.least(series, (d) => Math.abs(d.values[i] - ym)); let xp = x(dates[i]); let yp = y(s.values[i]); g.attr("stroke", (d) => // d === s ? colour(d.key) : traseColours.get("lightgrey") colour(d.key) ) .filter((d) => d === s) .raise(); dot .attr("display", null) .attr("stroke", colour(s.key)) .attr("transform", `translate(${xp},${yp})`); // tooltip.show( // s.key, // tooltipKeyValue( // formatTooltipKey(dates[i]), // `${formatTooltipValue(s.values[i])} ${valueUnits ? valueUnits : ""}` // ) // ); tooltip.show(s.key, tooltipKeyValueMultiple(s.key, dates[i], i)); 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); } function exit() { // g.style("mix-blend-mode", "multiply").attr("stroke", ({ key }) => // colour(key) // ); dot.attr("display", "none"); tooltip.hide(); } }4b:T577,tooltipKeyValueMultiple = (valueName, year, yearIndex) => { const yearFormatted = d3.utcFormat(dateFormat)(year); const marginLeft = 17; return svg` ${series.map((s, i) => { return svg` `; })} ${series[0].key?.toUpperCase()} ${formatTooltipValue( series[0].values[yearIndex] )} ${valueUnits} ${valueTitleBars?.toUpperCase()} ${formatTooltipValueBars( data.find((x) => String(x[dateCol]) === String(yearFormatted))[barCol] )} million tonnes `; } /* ${series[1].key?.toUpperCase()} ${formatTooltipValue( series[1].values[yearIndex] )} ${valueUnits}*/4c:[{"id":"6706f0f8da97e591fe5f0058474c385ee4a4c25efc3ac1e3fca6326d0cfb79736b186b8834cd6354b3d3bf5c0304c72be6861e9971a54bbbdab62dd87ba81572","href":"https://static.observableusercontent.com/files/6706f0f8da97e591fe5f0058474c385ee4a4c25efc3ac1e3fca6326d0cfb79736b186b8834cd6354b3d3bf5c0304c72be6861e9971a54bbbdab62dd87ba81572","name":"graph_year_sum-5.csv","type":"text/csv","lastModified":1664800712740.325,"size":584},{"id":"24aaf6698d1d2534751ca36add320a21713d91ba76178e826673489e7c88bc0ec217c28d26e28dc32327863a70d133cfce313e80295fc2e43e2c008f1c80ccb6","href":"https://static.observableusercontent.com/files/24aaf6698d1d2534751ca36add320a21713d91ba76178e826673489e7c88bc0ec217c28d26e28dc32327863a70d133cfce313e80295fc2e43e2c008f1c80ccb6","name":"graph_year_sum@1.csv","type":"text/csv","lastModified":1666199276252.406,"size":567}] 29:{"id":"e2a84c86af16d52f","slug":null,"title":"Brazilian Soy Production vs. Deforestation","thumbnail":"f255cdfc6aefd0536a8256f7f97ed94c1a7fae09de60c19176ca1fb3a736bbce","access_level":"unlisted","create_time":"$D2022-10-03T12:37:51.326Z","update_time":"$D2023-07-26T13:05:04.375Z","view_time":null,"first_public_time":"$D2022-10-19T18:34:15.747Z","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":1102,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2afbe130e224f76e","login":"bernardol","name":"Bernardo Loureiro","avatar_url":"https://avatars-next.observableusercontent.com/3ddb97df58abc437d5bbc6349f9def4591d2d148c1ccc8047e6c56067eb89987","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"2afbe130e224f76e","login":"bernardol","name":"Bernardo Loureiro","avatar_url":"https://avatars-next.observableusercontent.com/3ddb97df58abc437d5bbc6349f9def4591d2d148c1ccc8047e6c56067eb89987","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":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Brazilian Soy Production vs. Deforestation","cells":[{"id":0,"value":"# Brazilian Soy Production vs. Deforestation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1058,"value":"chart = htl.html`\n${titleCard1}\n${legendOnly}\n${chartOnly}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1062,"value":"titleCard1 = titleCard({\n title:\n \"Soy deforestation and conversion in Brazil has declined while production has risen\",\n subtitle:\n \"Soy deforestation and conversion (annual area of soy harvested on land that was deforested in the five preceding years) and soy production (million tonnes per year) in Brazil, 2013-2020 (Source: Trase Supply Chains).\",\n width: 1\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"legendOnly = swatches({ colour: colourLegend, labelStyle: \"sans-serif\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$49","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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"margin = ({\n top: 20,\n right: showValueLabels ? biggestKeyLabel * 1.1 : 30,\n bottom: 30,\n left: 40\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"dataRaw = await FileAttachment(\"graph_year_sum@1.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"dataDifferenceRaw = dataRaw.map((d) => ({\n ...d,\n other: d[\"territorial_deforestation\"] - d[\"soy_deforestation_absolute_total\"]\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"lineCols = [\n /*{\n name: \"Total annual deforestation\",\n key: \"territorial_deforestation\"\n },*/\n {\n name: \"Soy deforestation and conversion\",\n key: \"soy_deforestation_absolute_total\"\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"data = {\n const rows = [];\n for (const col of lineCols) {\n rows.push(\n dataRaw.map((d) => {\n const obj = {};\n obj[dateCol] = d[dateCol];\n obj[\"deforestation\"] = d[col.key];\n obj[\"metric\"] = col.name;\n obj[barCol] = d[barCol];\n return obj;\n })\n );\n }\n return rows.flat();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"dataDifference = {\n const rows = [];\n for (const col of [\n { name: \"Soy deforestation\", key: \"soy_deforestation_absolute_total\" },\n { name: \"Other commodities deforestation\", key: \"other\" }\n ]) {\n rows.push(\n dataDifferenceRaw.map((d) => {\n const obj = {};\n obj[dateCol] = d[dateCol];\n obj[\"deforestation\"] = d[col.key];\n obj[\"metric\"] = col.name;\n return obj;\n })\n );\n }\n return rows.flat();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"valueCol = \"deforestation\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"keyCol = \"metric\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"dateCol = \"year\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"barCol = \"total_soy_prod\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"valueTitle = \"Deforestation\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"valueUnits = \"ha\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"valueTitleBars = \"Soy Production\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"valueUnitsBars = \"Mt\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"showValueLabels = true","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"showValueLabelsBars = true","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"keyLabelFont = \"bold 12px var(--trase-sans-serif)\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"dateFormat = \"%Y\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"dateFormatIn = \"%Y-%m-%d\" // what is the format of dates in your input dataset?","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"parseDate = (d) => {\n if (typeof d.getMonth === \"function\") {\n return d;\n } // is already a date\n if (String(d)?.length === 4) {\n return d3.utcParse(dateFormatIn)(`${d}-01-01`);\n } // year without month / day\n return d3.utcParse(dateFormatIn)(d); // parse the date\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"typeof data[0][dateCol].getMonth === \"function\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"biggestKeyLabel = d3.max([\n ...keys.map((d) => {\n return getLabelLength(d, \"font: \" + keyLabelFont);\n }),\n ...data.map((d) => {\n return getLabelLength(\n `${formatTooltipValue(Number(d[valueCol]))} ${\n valueUnits ? valueUnits.toUpperCase() : \"\"\n }`,\n \"font: 11px var(--trase-mono)\"\n );\n })\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"keys = d3\n .rollups(\n data,\n (v) => d3.sum(v, (d) => Number(d[valueCol])),\n (d) => d[keyCol]\n )\n .sort(([, a], [, b]) => b - a)\n .map(([key]) => key)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"values = d3.rollup(\n data,\n ([d]) => Number(d[valueCol]),\n (d) => d[keyCol],\n (d) => +parseDate(d[dateCol])\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"dates = [...new Set(data.map((d) => parseDate(d[dateCol]).getTime()))]\n .map(d3.utcDay)\n .sort((a, b) => a - b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"series = keys.map((k) => ({\n key: k,\n values: dates.map((d) => values.get(k).get(+d))\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"barWidth = xBar.bandwidth()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"barPaddingWidth = xBar.bandwidth() * barPadding","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"barAndWidthCenter = barWidth / 2 + barPaddingWidth","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\n .scaleUtc()\n .domain(d3.extent(dates))\n .range([\n margin.left + barAndWidthCenter,\n width - margin.right - barAndWidthCenter\n ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"barPadding = 0.1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"xBar = d3\n .scaleBand()\n .domain(data.map((d) => d[dateCol]))\n .rangeRound([margin.left, width - margin.right])\n .padding(barPadding)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"y = d3\n .scaleLinear()\n .domain([0, d3.max(series.flatMap((d) => d3.extent(d.values)))])\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":688,"value":"yBar = d3\n .scaleLinear()\n .domain([0, d3.max(data, (d) => d[barCol])])\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":31,"value":"line = d3\n .line()\n .defined((d) => !isNaN(d))\n .x((d, i) => x(dates[i]))\n // .x((d, i) => x(dates[i]) + xBar.bandwidth() / 2)\n .y((d) => y(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"line(series[0].values)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"series[0].values","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"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":750,"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(xBar)\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\", 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":26,"value":"yAxis = (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(y).ticks(Math.max(height / 100, 2), formatY))\n .call(d3.axisRight(y).ticks(0, formatY))\n .call((g) => g.selectAll(\".tick line\").remove())\n .call((g) => g.select(\".domain\").remove())\n .call((g) => {\n if (valueTitle) {\n g.select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"end\")\n .text(\n `${valueTitle.toUpperCase()} ${\n valueUnits ? `(${valueUnits.toUpperCase()})` : \"\"\n }`\n );\n }\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"yAxisBars = (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(yBar).ticks(Math.max(height / 100, 2), formatY))\n .call(d3.axisLeft(yBar).ticks(0, formatY))\n .call((g) => g.selectAll(\".tick line\").remove())\n .call((g) => g.select(\".domain\").remove())\n .call((g) => {\n if (valueTitleBars) {\n g.select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"start\")\n .text(\n `${valueTitleBars.toUpperCase()} ${\n valueUnitsBars ? `(${valueUnitsBars.toUpperCase()})` : \"\"\n }`\n );\n }\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"grid = (g) =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n // .call(d3.axisLeft(y).ticks(height / 100, formatY))\n .call(d3.axisLeft(y).ticks(1, 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 && valueTitle\n ? getLabelLength(\n valueTitle + valueUnits,\n \"font: 12px var(--trase-mono)\"\n ) + 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":28,"value":"colour = d3\n .scaleOrdinal()\n .domain(keys)\n // .range(traseCategory1)\n .range([/*traseColours.get(\"darkred\"),*/ traseColours.get(\"red\")])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"barColor = \"#8ba194\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"colourLegend = d3\n .scaleOrdinal()\n .domain([valueTitleBars, ...keys])\n // .range(traseCategory1)\n .range([barColor, /*traseColours.get(\"darkred\"),*/ traseColours.get(\"red\")])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"keys","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"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":279,"value":"formatX = d3.utcFormat(dateFormat)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"formatY = d3.format(numberFormat)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"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":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"`${series.map((s, i) => {\n return `\n\n`;\n})}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"function hoverBars(bars, svg) {\n const tooltip = new Tooltip();\n bars\n .style(\"cursor\", \"pointer\")\n .on(\"touchstart\", (event) => event.preventDefault())\n .on(\"pointerenter\", (event, d) => {\n tooltip.position(\n ...tooltipOffset(tooltip, d3.pointer(event), width, height)\n );\n tooltip.show(\n valueTitleBars,\n tooltipKeyValue(\n valueTitleBars.toUpperCase(),\n formatTooltipValue(d[1] - d[0]),\n d\n )\n );\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":99,"value":"formatTooltipKey = d3.utcFormat(dateFormat)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"formatTooltipValue = d3.format(\",.0d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"formatTooltipValueBars = d3.format(\".1f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"import {\n traseColours,\n traseCategory1,\n fonts,\n traseReds\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":46,"value":"import { swatches, getLabelLength } from \"@trase/legends-2-0\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"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":1067,"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":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":"$W4c","stdlib":"1"}} 24:null