2b:null 2c:["$","title",null,{"children":"Global deforestation exposure of the EU (Pendrill et al., 2022) | Trase | Observable"}] 31:T1591,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 `${formatTooltipValueBars(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 - 3) .attr("x2", (d) => x(parseDate(d[dateCol])) + 35) .attr("y1", (d) => yBar(Number(d[barCol])) + calloutSpacing) .attr("y2", (d) => yBar(Number(d[barCol])) + calloutSpacing) .attr("fill", "none") .attr("stroke-width", 1) .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", 1) .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(); }32: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(); } }33:T572,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] )} ha `; } /* ${series[1].key?.toUpperCase()} ${formatTooltipValue( series[1].values[yearIndex] )} ${valueUnits}*/34:[{"id":"e0c00dd82a08400cdaeae9df4f75d40a0ff0a5e91f8ec55d1c5be081cf3759b71eb0481f3f69e258e83efa462ebaaae01dc5b6b87463153c88887637c875768d","href":"https://static.observableusercontent.com/files/e0c00dd82a08400cdaeae9df4f75d40a0ff0a5e91f8ec55d1c5be081cf3759b71eb0481f3f69e258e83efa462ebaaae01dc5b6b87463153c88887637c875768d","name":"EU27_cattle_imports_deforestation_pendrill_2022@3.csv","type":"text/csv","lastModified":1718128289280.053,"size":199}] 2f:{"id":"58ef80972f468e2a","slug":null,"title":"Global deforestation exposure of the EU (Pendrill et al., 2022)","thumbnail":"28e5fbff0743d067a84590faddbd5ad12e06f74054227fb62f90752525ff8048","access_level":"public","create_time":"$D2023-09-13T12:48:21.963Z","update_time":"$D2024-06-11T18:18:53.588Z","view_time":null,"first_public_time":"$D2023-10-06T14:47:54.465Z","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"},"version":1148,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"62b540d564c5895c","login":"opereira","name":"Osvaldo Pereira","avatar_url":"https://avatars-next.observableusercontent.com/95253acfbd3dc32e5dc573bae043a3c3ffcfe39cadeaa2ccd1aca3bd567ec8b1","tier":null}],"members":[{"type":"individual","id":"62b540d564c5895c","login":"opereira","name":"Osvaldo Pereira","avatar_url":"https://avatars-next.observableusercontent.com/95253acfbd3dc32e5dc573bae043a3c3ffcfe39cadeaa2ccd1aca3bd567ec8b1","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":{"title":"Global deforestation exposure of the EU (Pendrill et al., 2022)","cells":[{"id":0,"value":"# Global deforestation exposure of the EU (Pendrill et al., 2022)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":1062,"value":"titleCard1 = titleCard({\n title: \"European union share of global tropical beef deforestation\",\n subtitle:\n \"Total tropical beef deforestation from global imports to EU countries and share of global deforestation from global cattle imports in relation to EU imports (source: Pendrill et al., 2022).\",\n width: 1\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"height = width * 0.6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":144,"value":"dataRaw = await FileAttachment(\"EU27_cattle_imports_deforestation_pendrill_2022@3.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"lineCols = [\n { name: \"Global share (%)\", key: \"global_share\" }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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[\"share\"] = d[col.key];\n obj[\"metric\"] = col.name;\n obj[barCol] = d[\"total_EU\"];\n return obj;\n })\n );\n }\n return rows.flat();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"valueCol = \"share\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"keyCol = \"metric\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"dateCol = \"year\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"barCol = \"total_EU\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"valueTitle = \"Deforestation\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"valueUnits = \"%\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"valueTitleBars = \"Beef deforestation\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"valueUnitsBars = \"ha\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"showValueLabels = true","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"showValueLabelsBars = true","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":577,"value":"dateFormat = \"%Y\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":605,"value":"typeof data[0][dateCol].getMonth === \"function\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","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","output":"$undefined","database":"$undefined"},{"id":729,"value":"barWidth = xBar.bandwidth()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"barPaddingWidth = xBar.bandwidth() * barPadding","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"barAndWidthCenter = barWidth / 2 + barPaddingWidth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":734,"value":"barPadding = 0.1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":31,"value":"line = d3\n .line()\n .defined((d) => !isNaN(d))\n .x((d, i) => x(dates[i]))\n .y((d) => y(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"line(series[0].values)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"series[0].values","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","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","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","output":"$undefined","database":"$undefined"},{"id":849,"value":"barColor = \"#8ba194\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":846,"value":"keys","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"numberFormat = \",.2r\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"formatX = d3.utcFormat(dateFormat)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"formatY = d3.format(numberFormat)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"annotate = g => {}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":905,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":99,"value":"formatTooltipKey = d3.utcFormat(dateFormat)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"formatTooltipValue = d3.format(\".2f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"formatTooltipValueBars = d3.format(\",.2r\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":1067,"value":"import { titleCard } from \"@trase/title-card\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"