Published unlisted
Edited
Sep 12, 2022
Insert cell
Insert cell
data = {
const rand = d3.randomLcg(24);

return ["A", "B", "C", "E", "F", "G", "H"].map((letter) => ({
name: letter,
value1: rand(),
value2: rand()
}));
}
Insert cell
Insert cell
Plot.plot({
marks: [Plot.barY(data, { x: "name", y: "value1" })]
})
Insert cell
Insert cell
Plot.plot({
marks: [Plot.barY(data, { x: "name", y: "value1", sort: { x: "y" } })]
})
Insert cell
Insert cell
Plot.plot({
marks: [Plot.barY(data, { x: "name", y: "value1", sort: "value1" })]
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barY(data, {
x: "name",
y: "value1",
sort: (d) => {
console.log(d.value1);
return d.value1;
}
})
]
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barY(data, {
x: "name",
y: "value1",
sort: (d1, d2) => {
console.log(d1.value1, d2.value1);
return d1.value1 - d2.value1;
}
})
]
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barY(data, {
x: "name",
y: "value1",
sort: Plot.sort("value1")
})
]
})
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