The avatar for @trase
Trase
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
Public
Edited
Jan 16, 2024
Importers
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = FileAttachment("data_exporters_BR_Beef_2020_EU.csv").csv({typed: true})
Insert cell
height = Math.min(width, 500)
Insert cell
radius = Math.min(width, height) / 2.5;
Insert cell
minimumAngleForLabel = 0.15
Insert cell
arc = d3.arc().innerRadius(radius * 0.67).outerRadius(radius - 1);
Insert cell
pie = d3.pie()
.padAngle(0)
.sort(sortPie)
.value(d => d[value])
Insert cell
chart_tittle = "Exposição por empresa"
Insert cell
sortPie = null
Insert cell
greyLabel = "Other"
Insert cell
colour = d3
.scaleOrdinal()
.domain(
data
.map((d) => d[key])
.filter((d) => d != greyLabel)
.slice()
.reverse()
)
.range([
...traseCategory1.slice(0, data.length - 1),
traseColours.get("lightgrey")
])
Insert cell
format = d3.format(".3s")
Insert cell
labelOffset = 1.3;
Insert cell
show_labels = true
Insert cell
show_percentage = true
Insert cell
value_unit = "ha"
Insert cell
positionLabels = d => {
const π = Math.PI;
const ø = (d.startAngle + d.endAngle) / 2;
let anchor = ø < π ? "start" : "end";
let baseline = "middle";
if(ø < π / 8 | ø > π * 2 - π / 8) anchor = "middle", baseline = "auto";
if(ø > π - π / 8 && ø < π + π / 8) anchor = "middle", baseline = "hanging";
return Object.assign(d, { anchor, baseline });
}
Insert cell
annotate = g => {}
Insert cell
function hover(segments, svg) {
const tooltip = new Tooltip();
segments
.style("cursor", "pointer")
.on("touchstart", (event) => event.preventDefault())
.on("pointerenter", (event, d) => {
tooltip.position(
...tooltipOffset(tooltip, d3.pointer(event), width / 2, height / 2)
);
const formattedProportion = d3.format(".0%")(d.data[proportion_value]);
tooltip.show(
d.data[key],
tooltipKeyValue(
tooltipKey.toUpperCase(),
formattedProportion +
` (${formatTooltipValue(d.data[value])} ${value_unit})`,
d
)
);
})
.on("pointermove", function (event) {
let [x, y] = tooltipOffset(
tooltip,
d3.pointer(event),
width / 2,
height / 2
);
tooltip.position(x, y);
this.releasePointerCapture(event.pointerId);
})
.on("pointerout", () => tooltip.hide());
svg.append(() => tooltip.node);
}
Insert cell
tooltipKey = "value"
Insert cell
proportion_value = "proportion"
Insert cell
key = "key"
Insert cell
value = "value"
Insert cell
formatTooltipValue = d3.format(",d")
Insert cell
import { traseColours, traseCategory1, fonts } from "@trase/visual-id@1366"
Insert cell
import { swatches } from "@trase/legends@376"
Insert cell
import { Tooltip, tooltipKeyValue, tooltipOffset } from "@trase/tooltip@440"
Insert cell
d3 = require("d3@6")
Insert cell

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.
Learn more