The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Unlisted
Edited
Oct 5, 2023
Plot.plot({
y: {grid: true},
marks: [
Plot.ruleY([0]),
Plot.lineY(data, {x: "begin", y: "flowrate", curve: "step-after"})
]
})
Plot.plot({
y: { grid: true },
marks: [
Plot.ruleY([0]),
Plot.lineY(
data.flatMap((d) => [
{ date: d.begin, flowrate: d.flowrate },
{ date: d.end, flowrate: d.flowrate }
]),
{ x: "date", y: "flowrate" }
)
]
})
Plot.plot({
y: { grid: true },
marks: [
Plot.ruleY([0]),
Plot.lineY(
[...data.slice(0, 16), ...data.slice(18)].flatMap((d, i, data) => [
{ date: d.begin, flowrate: d.begin <= data[i - 1]?.end ? d.flowrate : NaN },
{ date: d.begin, flowrate: d.flowrate },
{ date: d.end, flowrate: d.flowrate }
]),
{ x: "date", y: "flowrate" }
)
]
})
data = d3
.tsvParse(
`begin end flowrate
00:02:07 00:03:33 0.000000000000003552713678800501
00:03:33 00:03:35 27.411446
00:03:35 00:03:45 27.129249
00:03:45 00:03:46 134.570356
00:03:46 00:04:12 135.911525
00:04:12 00:04:14 113.602685
00:04:14 00:04:16 27.129400000000004
00:04:16 00:04:17 13.564667000000004
00:04:17 00:08:32 0.000000000000003552713678800501
00:08:32 00:08:33 27.273192000000005
00:08:33 00:08:43 27.129239000000002
00:08:43 00:08:44 134.548651
00:08:44 00:09:11 135.91146
00:09:11 00:09:13 112.875284
00:09:13 00:09:15 27.129207000000008
00:09:15 00:09:16 6.7823060000000055
00:09:16 00:13:31 0.000000000000005329070518200751
00:13:31 00:13:33 27.200278000000004
00:13:33 00:13:42 27.129345000000004
00:13:42 00:13:43 107.106682
00:13:43 00:14:11 135.911483
00:14:11 00:14:12 31.837013
00:14:12 00:14:13 27.129293
00:14:13 00:14:15 13.564652
00:14:15 00:18:30 0
00:18:30 00:18:31 27.273108
`
)
.map(({ begin, end, flowrate }) => ({
begin: new Date(`2023-10-01T${begin}Z`),
end: new Date(`2023-10-01T${end}Z`),
flowrate: +flowrate
}))
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.
