Public
Edited
Feb 27, 2024
1 star
Insert cell
Insert cell
Insert cell
data = [
{g: "a", x: "a1", n:1},
{g: "a", x: "a2", n:2},
{g: "b", x: "b1", n:3},
{g: "b", x: "b2", n:4},
{g: "b", x: "b3", n:3},
]
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barY(data, {
x: "x",
y: "n",
fx: "g"
})
]
})

Insert cell
Insert cell
Plot.plot({
marginBottom: 70,
marks: [
Plot.axisX(data,
Plot.selectFirst({
x: "x",
z: "g",
text: "g",
tickSize: 35,
textStrokeWidth: 2,
tickFormat: "x",
label: null
})
),
Plot.axisX(data, {
x: "x",
textStroke: "#ffffff",
textStrokeWidth: 10,
tickFormat: x => x.x,
label: null
}),
Plot.barY(data, {
x: "x",
y: "n",
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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