Public
Edited
May 15
Insert cell
Insert cell
data = [
{
"minute": 0,
"count": 0
},
{
"minute": 1,
"count": 4
},
{
"minute": 2,
"count": 4
},
{
"minute": 3,
"count": 7
},
{
"minute": 4,
"count": 3
},
{
"minute": 5,
"count": 3
},
{
"minute": 6,
"count": 6
},
{
"minute": 7,
"count": 10
},
{
"minute": 8,
"count": 11
},
{
"minute": 9,
"count": 1
},
{
"minute": 10,
"count": 4
},
{
"minute": 11,
"count": 5
},
{
"minute": 12,
"count": 4
},
{
"minute": 13,
"count": 3
},
{
"minute": 14,
"count": 3
},
{
"minute": 15,
"count": 4
},
{
"minute": 16,
"count": 3
},
{
"minute": 17,
"count": 1
},
{
"minute": 18,
"count": 1
},
{
"minute": 19,
"count": 3
},
{
"minute": 20,
"count": 0
},
{
"minute": 21,
"count": 1
},
{
"minute": 22,
"count": 1
},
{
"minute": 23,
"count": 3
},
{
"minute": 24,
"count": 0
},
{
"minute": 25,
"count": 0
},
{
"minute": 26,
"count": 1
},
{
"minute": 27,
"count": 1
},
{
"minute": 28,
"count": 0
},
{
"minute": 29,
"count": 2
},
{
"minute": 30,
"count": 3
}
]
Insert cell
Plot.plot({
x: {
ticks: 29,
tickSpacing: 100,
tickFormat: (d) => (d > 30 ? "30+" : d)
},
marks: [
Plot.rectY(data, {
x1: "minute",
x2: (d) => d.minute + 1,
y: "count",
fill: "blue",
inset: 2,
tip: true
}),
Plot.ruleX([10.67], { stroke: "orange", strokeWidth: 2, tip: true })
]
})
Insert cell
Plot.ruleX(
{ length: 100 },
{ x: d3.randomNormal(200, 15), strokeOpacity: 0.2 }
).plot()
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