Unlisted
Edited
Jan 6
Insert cell
Insert cell
Plot.plot({
height: 200,
marginLeft: 0,
marginTop: 15,
y: { axis: false },
x: {
tickFormat: d3.format('$,.0f'),
label: 'Pay →',
tickSize: 0,
},
marks: [
Plot.rectY(PAY_DATA, Plot.binX(
{ y: 'count', title: d => d },
{
x: { value: d => d, interval: 25 },
z: (_, i) => i,
inset: 0.5,
tip: true,
},
)),
],
})
Insert cell
Insert cell
Plot.plot({
height: 200,
marginLeft: 0,
marginTop: 15,
y: { axis: false },
x: {
tickFormat: d3.format('$,.0f'),
label: 'Pay →',
tickSize: 0,
},
marks: [
Plot.cell(PAY_DATA, Plot.stackY({
x: d => d,
title: d => d3.format('$,.2f')(d),
tip: true,
})),
],
})
Insert cell
PAY_DATA = [
130,
75,
120,
75,
80,
150,
150,
60,
160,
100,
100,
175,
100,
40,
50,
200,
306,
300,
228,
145,
120,
209.44,
]
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