Unlisted
Edited
Jan 2, 2023
viewof bubbleYearSelect = Inputs.select([2018, 2019, 2020], {
step: 1,
value: 2018,
label: "Select year:",
format: (d) => d
})
draw = chart.update(keys[0])
keys = Object.keys(data[0]).filter((d) => d != "key" && d != "zdc_share")
legendItems = [
{
type: "dot",
stroke: "#bdbdbd",
fill: "#bdbdbd",
text: "No data"
}
]
// height = width
height = 906
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 === "DOMESTIC") | (d.data.key === "UNKNOWN COUNTRY"))
return "#bdbdbd";
return d3.scaleThreshold().domain(thresholds).range(colourSchemeRev)(
d.data[colourKey]
);
}
id_palm_zdc_shr_vols_imp_ctry1 = FileAttachment("id_palm_zdc_shr_vols_imp_ctry@4.csv").csv()
colourKey = "zdc_share"
defriskKey = "deforestation"
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.2, 0.4, 0.6, 0.8, 0.9, 0.95].map((d) =>
Math.floor(d * d3.max(data, (d) => d.zdc_share))
)
full = FileAttachment("id_palm_zdc_shr_vols_imp_ctry@4.csv").csv({
typed: true
})
data = full
.filter((d) => d.year === bubbleYearSelect)
.map((d) => ({
key: d.key,
volume: d.volume,
deforestation: d.def_risk,
zdc_share: d.zdc_share
}))
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">VOLUME:</tspan>
<tspan font-family="var(--trase-sans-serif)" font-size="14px" font-weight="700" fill="#31464e" x="0" dy="1.4em">${format(
d.data.volume
)} t</tspan>
<tspan font-size="10px" fill="#839095" x="0" dy="2.2em">DEFORESTATION RISK:</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.deforestation)} ha</tspan>
<tspan font-size="10px" fill="#839095" x="0" dy="2.2em">SHARE COVERED BY ZDC:</tspan>
<tspan font-family="var(--trase-sans-serif)" font-size="14px" font-weight="700" fill="#31464e" x="0" dy="1.4em">${
d.data[colourKey] >= 0 ? d3.format(".1%")(d.data[colourKey] / 100) : "N/A"
}</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"
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.
