Public
Edited
Sep 28, 2023
1 fork
chart = htl.html`
${titleCard1}
${chartLegend}
${chartOnly}
`
extentRadius = d3.extent(data, (d) => d[selected_value])
r = d3
.scaleSqrt()
.domain(extentRadius)
.range([width * 3e-3, width * 4e-2])
function getByValue(map, searchValue) {
for (let [key, value] of map.entries()) {
if (value === searchValue) return key;
}
}
chartBubbleLegend = circleLegend({
scale: r,
ticks: 2,
tickFormat: (d, i, g) =>
i === g.length - 1
? `${formatTooltipValue(d)} ${selected_value}`
: formatTooltipValue(d),
tickWrap: false,
marginRight: 80,
marginBottom: 20
})
levelSelect
metrics_values = new Map([
["Cattle Deforestation Exposure (ha)", "Cattle Deforestation Exposure (ha)"],
["Net Carbon Emisson Exposure (Tonne)", "Net Carbon Emisson Exposure (Tonne)"]
])
keys = Object.keys(data[0]).filter((d) => d === "Net Carbon Emisson Exposure (Tonne)" | d === "Cattle Deforestation Exposure (ha)")
legendItems = [
{
type: "dot",
stroke: "#bdbdbd",
fill: "#bdbdbd",
text: "No data"
}
]
height = width * 0.8
width
margin = ({ top: 5, bottom: 5, right: 5, left: 5 })
// colourScheme = traseOranges[6]
colourScheme = traseOranges[7]
colourSchemeRev = colourScheme.reverse()
colourSchemeZdc = (d) => {
if (d.data.key === "") return "#bdbdbd";
return d3.scaleThreshold().domain(thresholds).range(colourSchemeRev)(
d.data[colourKey]
);
}
colourKey = selected_value
d3
.hierarchy(
d3.rollup(
data,
(v) => ({ value: d3.sum(v, (d) => d.value), data: v }),
...keys.map((k) => (d) => d[k])
)
)
root = d3
.hierarchy(
d3.rollup(
data,
(v) => ({ value: d3.sum(v, (d) => d.value), data: v }),
...keys.map((k) => (d) => d[k])
)
)
.sum(([, d]) => d.value)
.sort((a, b) => b.value - a.value)
pack = d3
.pack()
.size([
width - (margin.left + margin.right),
height - (margin.top + margin.bottom)
])
.padding(3)
thresholds = [0.01, 0.05, 0.1, 0.25, 0.5, 0.75].map((d) =>
Math.floor(d * d3.max(data, (d) => d[selected_value]))
)
full = levelSelect.csv({
typed: true
})
data = full.filter((d) => d.year === bubbleYearSelect)
format = d3.format(".03s")
formatBubbleText = (d) => {
let key = d.data.key;
const length = getLabelLength(key, "font: 10px var(--trase-sans-serif)");
const perimeter = d.r * 2 - 20;
const prop = (length - perimeter) / length;
if (perimeter < 50) return "";
if (length > perimeter)
key =
key.substring(0, Math.floor(key.length * (1 - prop)) - 3).trim() + "...";
return [...key.split(" "), format(d.value)];
}
annotate = g => {}
function hover(bubbles, svg, selected_value) {
const tooltip = new Tooltip();
const tooltipKey = selected_value.replace(/_/g, " ");
bubbles
.style("cursor", "pointer")
.on("touchstart", (event) => event.preventDefault())
.on("pointerenter", (event, d) => {
tooltip.position(
...tooltipOffset(tooltip, d3.pointer(event, svg.node()), width, height)
);
tooltip.show(d.data.key, tooltipKeyValueMultiple(d));
})
.on("pointermove", function (event) {
let [x, y] = tooltipOffset(
tooltip,
d3.pointer(event, svg.node()),
width,
height
);
tooltip.position(x, y);
this.releasePointerCapture(event.pointerId);
})
.on("pointerout", () => tooltip.hide());
svg.append(() => tooltip.node);
}
tooltipKeyValueMultiple = (d) => svg`<text>
<tspan font-size="10px" fill="#839095" x="0" dy="0em">DEFORESTATION AND CONVERSION EXPOSURE (HA):</tspan>
<tspan font-family="var(--trase-sans-serif)" font-size="14px" font-weight="700" fill="#31464e" x="0" dy="1.4em">${format(
d.data["Cattle Deforestation Exposure (ha)"]
)} </tspan>
<tspan font-size="10px" fill="#839095" x="0" dy="2.2em">NET CATTLE CARBON EMISSION (TONNES OF CO2):</tspan>
<tspan font-family="var(--trase-sans-serif)" font-size="14px" font-weight="700" fill="#31464e" x="0" dy="1.4em">${d3.format(
".03s"
)(d.data["Net Carbon Emisson Exposure (Tonne)"])}</tspan>
<tspan font-size="10px" fill="#839095" x="0" dy="2.2em">TRADED VOLUME (TONNES):</tspan>
<tspan font-family="var(--trase-sans-serif)" font-size="14px" font-weight="700" fill="#31464e" x="0" dy="1.4em">${d3.format(
".03s"
)(d.data.volume)}</tspan>
</text>`
formatTooltipValue = d3.format(".03s")
import {
traseColours,
traseCategory1,
fonts,
traseOranges,
trasePurples,
traseGreens,
traseOrPu
} from "@trase/visual-id"
import { getLabelLength, legend, swatches } from "@trase/legends@376"
import { Tooltip, tooltipKeyValue, tooltipOffset } from "@trase/tooltip@440";
import { pickTextColorBasedOnBackground } from "@trase/pick-text-color-based-on-bg"
import { slider, select, checkbox, radio } from "@jashkenas/inputs"
import { titleCard } from "@trase/title-card"
import { circleLegend } from "@trase/legends"
d3 = require("d3@6")
htl = require("htl@0.2")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
