{
button;
// const threshold = 100;
return Plot.plot({
width,
x: {
// non-linear time
type: "sqrt",
reverse: true
},
marks: [
Plot.ruleY([0]),
// bars
Plot.rectY([...data.data].reverse().slice(0, threshold), {
y: (d) => d,
x1: (d, i) => i,
x2: (d, i) => i + 1,
fill: (d, i) => (i % 2 === 0 ? "#888" : "#aaa"),
inset: 0
}),
// area
Plot.areaY([...data.data].reverse().slice(threshold - 1), {
y: (d) => d,
x: (d, i) => i + threshold - 1,
fill: "#aaa"
})
]
});
}
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.
