Public
Edited
Mar 27, 2024
width
quantity
quantity
height = 650
chartWidth = 700
NumberFormat = selection === "Absolute values" ? d3.format(",.2~s") : d3.format(".0%")
colors = ["#E27227", "#789B8E", "#BECFC9"]
colorScale = d3
.scaleOrdinal()
.domain(["At-risk", "Not at-risk", "No data"]) // Replace with your actual category names
.range(colors)
import { chart as quantity, legend as legendLci } with {
quantity_risk as data,
keyCol as keyCol,
secondarycolumn as secondaryKeyCol,
value_quantity as valueCol,
valueTitle_prop as valueTitle,
valueUnits_prop as valueUnits,
showValueLabels,
sortBars,
keys,
height,
colorScale as colour,
chartWidth as width,
NumberFormat as numberFormat
} from "@trase/stacked-horizontal-bar-chart-2-0"
import { chart as count, legend as legendLci } with {
quantity_risk as data,
keyCol as keyCol,
secondarycolumn as secondaryKeyCol,
value_count as valueCol,
valueTitle_prop2 as valueTitle,
valueUnits_prop1 as valueUnits,
showValueLabels,
sortBars,
keys,
height,
colorScale as colour,
chartWidth as width,
NumberFormat as numberFormat
} from "@trase/stacked-horizontal-bar-chart-2-0"
margin = ({
top: 20,
right: showValueLabels ? 60 : 10,
bottom: 40,
left: Math.min(150, width / 4)
})
import { swatches } from "@trase/legends"
import { titleCard } from "@trase/title-card"
import { Tooltip, tooltipKeyValue, tooltipOffset } from "@trase/tooltip@440"
quantity_risk = FileAttachment("final_aggregated_table_importer.csv").csv()
viewof selection = Inputs.radio(["Absolute values", "Proportional values"], {
value: "Absolute values"
})
value_quantity = selection === "Absolute values" ? "Imported volume (Tonne)" : "Proportion of volume (%)";
value_count = selection === "Absolute values"
? "Number of countries"
: "Proportion of countries (%)"
keys = [
...new Set([
...quantity_risk.map((d) => d[secondarycolumn]),
...quantity_risk.map((d) => d[secondarycolumn])
])
]
keyCol = "country"
secondarycolumn = "risk"
valueTitle_prop = selection === "Absolute values"
? "Total imported volume"
: "Proportion of volume"
valueTitle_prop2 = selection === "Absolute values"
? "Total number of exporters"
: "Proportion of exporters"
valueUnits_prop = selection === "Absolute values" ? "tonnes" : "%";
valueUnits_prop1 = selection === "Absolute values" ? "" : "%"
showValueLabels = selection === "Absolute values" ? true : false
totals = d3.rollup(quantity_risk, d => d3.sum(d, d => d[value_quantity]), d => d[keyCol])
totals_count = d3.rollup(
quantity_risk,
(d) => Math.round(d3.sum(d, (d) => d[value_count])),
(d) => d[keyCol]
)
sortBars = {
let sortBars;
if (selection === "Absolute values") {
sortBars = ([a], [b]) => {
return totals.get(b) - totals.get(a);
};
} else if (selection === "Proportional values") {
// Sort alphabetically by keyCol
sortBars = ([a], [b]) => {
return a.localeCompare(b);
};
}
return sortBars;
}
sortBars_count = {
let sortBars;
if (selection === "Absolute values") {
sortBars = ([a], [b]) => {
return totals_count.get(b) - totals_count.get(a);
};
} else if (selection === "Proportional values") {
// Sort alphabetically by keyCol
sortBars = ([b], [a]) => {
return b.localeCompare(a);
};
}
return sortBars;
}
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.
