Computer Graphics & Visualization @ufrj.br
Public
Edited
May 8, 2024
1 star
Plot.plot({
color: { scheme: "paired" },
y: {
transform: (d) => d / 1000,
label: "↑ Unemployed (thousands)"
},
marks: [
Plot.areaY(industries, {
x: "date",
y: "unemployed",
fill: "industry",
order: (d) => sortedLegend.indexOf(d.industry)
}),
Plot.ruleY([0])
]
})
sortable = require("sortablejs")
function getDomain(data, field) {
return [...new Set(data.map((d) => d[field]))].toSorted();
}
sortableLegend = function (colorOptions) {
const legend = Plot.legend({ color: colorOptions });
function onUpdate() {
const value = [];
for (let span of legend.querySelectorAll("span")) {
value.push(span.__data__);
}
legend.value = value;
legend.dispatchEvent(new CustomEvent("input"));
}
onUpdate();
sortable.create(legend, { onUpdate });
return legend;
}
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.
