Public
Edited
Jan 28, 2024
Insert cell
Insert cell
Insert cell
Insert cell
data = [{ x: "A", y: 5 }, { x: "B", y: 7 }, { x: "C", y: 6 }, { x: "D", y: 5 }, { x: "E", y: 3 }]
Insert cell
Insert cell
Plot.plot({
height,
width,
insetLeft: 15,
insetRight: 15,
x: {
ticks: 0,
label: null,
grid: false,
tickSize: 0
},
y: {
grid: false,
label: null,
ticks: 0
},
marks: [
Plot.barY(data, { x: "x", y: "y", fill: "#4361ee"}),
Plot.tickY([0], {stroke: "#000"}),
]
})
Insert cell
Plot.plot({
height,
width,
insetTop: 15,
insetBottom: 15,
x: {
grid: true,
label: null,
ticks: 0
},
y: {
ticks: 0,
label: null,
grid: false,
tickSize: 0
},
marks: [
Plot.barX(data, { x: "y", y: "x", fill: "#4361ee" }),
Plot.tickX([0], {stroke: "#000"})
]
})
Insert cell
Plot.plot({
height,
width,
y: {
grid: true,
label: null
},
y: {
ticks: 0,
grid: true,
label: null
},
x: {
label: null
},
marks: [
Plot.lineY(data, { x: "x", y: "y", stroke: "#4361ee", strokeWidth: 3 }),
Plot.ruleY([0]),
Plot.tickY([0], {stroke: "#000"})
]
})
Insert cell
Plot.plot({
height,
width,
y: {
ticks: 0,
grid: true,
label: null
},
x: {
label: null,
ticks: 0,
tickSize: 0
},
marks: [
Plot.areaY(data, { x: "x", y: "y", fill: "#4361ee" }),
Plot.ruleY([0]),
Plot.tickY([0], {stroke: "#000"})
]
})
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