Plot.plot({
label: null,
marginLeft: 50,
color: {
scheme: "PiYG",
type: "ordinal"
},
marks: [
Plot.barX(data, {
x: "value",
y: "label",
fill: (d) => d.label,
sort: { y: "x" }
}),
Plot.axisX({
tickSize: 0,
ticks: ""
}),
Plot.axisY({
x: 0,
dx: -20,
ticks: data.map((d) => d.label),
tickSize: 0,
anchor: "right",
textAnchor: "end"
}),
Plot.textX(data, {
x: "value",
y: "label",
text: (d) => d.value,
textAnchor: "start",
dx: 4
})
]
})
data = [
{ label: "AAA", value: 10 },
{ label: "BBB", value: 15 }
]
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.
