Public
Edited
Apr 11, 2024
1 fork
chart = htl.html`
${titleCard1}
${legendOnly}
${chartOnly}
`
data_ori = Object.assign(
await FileAttachment(
"global_beef_deforestation_deduce_fao_update_24@4.csv"
).csv({ typed: false }),
{ d: "volume_EU_2022" }
)
data = data_ori.filter((d) => {
// Check if deforestation_cptc is a number and is less than or equal to valuePct
return d["deforestation_cptc"] !== '' && d["deforestation_cptc"] != null && !isNaN(d["deforestation_cptc"]) && d["deforestation_cptc"] <= valuePct;
});
dataMap = new Map(
data.map(({ key, risk_categories, volume_EU_2022 }) => [
String(key),
risk_categories,
Number(volume_EU_2022)
])
)
viewof valuePctSelect = Inputs.select(["Total", "99%", "95%"], {
value: "Total",
label: ""
})
pct_select = [
1,
0.99,
0.95,
{
total: "Total",
trase: "99%",
cgf: "95%"
}
]
valuePct = pct_select[Object.values(pct_select[3]).indexOf(valuePctSelect)]
iso = new Map(data.map((d) => [String(d.M49_code), d.key]))
{
const countriesGeom = world.objects.countries.geometries.map((d) => {
return {
...d,
properties: { ...d.properties, trase_name: iso.get(String(d.id)) }
};
});
return {
...world,
objects: {
...world.objects,
countries: { ...world.objects.countries, geometries: countriesGeom }
}
};
}
world = FileAttachment("countries-110m-minus-antarctica@1.json").json()
height = width * 0.6
margin = ({ top: 0, right: 0, bottom: 0, left: 0 })
projection = d3
.geoNaturalEarth1()
.fitExtent(
[[margin.left, margin.top], [width - margin.right, height - margin.bottom]],
topojson.mesh(world, world.objects.countries)
)
.rotate([-15, 0]) // keep russia together
path = d3.geoPath(projection);
risk_code = 'risk_categories'
keys = [
...new Set([
...data.map((d) => d[risk_code]),
])
]
colour1 = d3
.scaleOrdinal()
.domain(keys)
.range(["#E27227", "#789B8E", "#BECFC9"])
colour = d3
.scaleOrdinal()
.domain(["At-risk", "Not at-risk", "No data"])
.range(["#E27227", "#789B8E", "#BECFC9"])
format = d3.format(",.2r")
annotate = g => {}
volume = new Map(
data.map(({ key, volume_EU_2022 }) => [String(key), Number(volume_EU_2022)])
)
// viewof selected_value = Inputs.radio(["Global", "European Union"], {
// value: "Global"
// })
maxDeforestation = d3.max(data_ori, (d) => d.volume_cum)
function hover(g, svg) {
const tooltip = new Tooltip();
g.style("cursor", "pointer")
.on("touchstart", (event) => event.preventDefault())
.on("pointerenter", function (event, f) {
if (!volume.has(iso.get(f.id))) return;
tooltip.position(...d3.pointer(event));
tooltip.show(
f.properties.name,
tooltipKeyValue(
tooltipKey.toUpperCase(),
format(volume.get(iso.get(f.id))),
f
)
);
// highlight jurisdiction
d3.select(this).transition().attr("opacity", 0.7);
})
.on("pointermove", function (event) {
let [x, y] = tooltipOffset(tooltip, d3.pointer(event), width, height);
tooltip.position(x, y);
this.releasePointerCapture(event.pointerId);
})
.on("pointerout", function () {
tooltip.hide();
d3.select(this).transition().attr("opacity", 1);
});
svg.append(() => tooltip.node);
}
tooltipKey = data["volume_EU_2022"] || "Volume placed on the EU market (tonnes)"
import { swatches, getLabelLength } from "@trase/legends-2-0"
import { Tooltip, tooltipKeyValue, tooltipOffset } from "@trase/tooltip@440"
d3 = require("d3@6")
topojson = require("topojson-client@3")
simple = require("simple-statistics@7")
import { traseColours, traseCategory1, fonts } from "@trase/visual-id@1366"
import { titleCard } from "@trase/title-card"
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.
