Unlisted
Edited
Aug 9, 2023
2 stars
Plot.plot({
marks: [
Plot.ruleX(
series,
Plot.pointerX(
Plot.groupX(
{ x: "min" },
{
x: "time",
strokeWidth: 40,
insetTop: -10,
stroke: "#eee"
}
)
)
),
Plot.line(series, {
stroke: "series",
x: "time",
y: "value",
marker: true,
curve: "natural"
}),
Plot.arrow(
series,
Plot.pointerX(
Plot.groupX(
{ y1: "min", y2: "max" },
{ x: "time", y: "value", z: "time", inset: 10 }
)
)
)
]
})
Plot.plot({
marks: [
Plot.rect(
series,
Plot.pointerX({
x: "time",
interval: {
floor: (x) => Math.floor(x) - 0.5,
offset: (x) => x + 1
},
fill: "#eee",
insetTop: -10
})
),
,
Plot.line(series, {
stroke: "series",
x: "time",
y: "value",
marker: true,
curve: "natural"
}),
Plot.arrow(
series,
Plot.pointerX(
Plot.groupX(
{ y1: "min", y2: "max" },
{ x: "time", y: "value", z: "time", inset: 10 }
)
)
)
]
})
series = [].concat(
d3
.range(10)
.map((i) => ({ series: "A", time: i, value: 15 + i - 0.3 * (i * i) })),
d3.range(12).map((i) => ({
series: "B",
time: i,
value: 12 * i - i * i
}))
)
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.
