The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Unlisted
Edited
Apr 4, 2024
1 star
Plot.plot({
height: 400,
marginTop: 0,
style: "background: #292952; color: #ccc; padding: 1rem;",
x: {
inset: 10,
tickSize: -6
},
y: {
padding: 0,
inset: 20,
label: null,
tickSize: 0,
domain: ["awake", "rem", "light", "deep"]
},
marks: [
() => htl.svg`<defs>
<linearGradient id="awake-rem" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#E24D70" />
<stop offset="100%" stop-color="#8DC3F9" />
</linearGradient>
<linearGradient id="awake-light" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#E24D70" />
<stop offset="100%" stop-color="#538BF7" />
</linearGradient>
<linearGradient id="awake-deep" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#E24D70" />
<stop offset="100%" stop-color="#254AA1" />
</linearGradient>
<linearGradient id="light-rem" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#8DC3F9" />
<stop offset="100%" stop-color="#538BF7" />
</linearGradient>
<linearGradient id="deep-rem" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#8DC3F9" />
<stop offset="100%" stop-color="#254AA1" />
</linearGradient>
<linearGradient id="deep-light" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#538BF7" />
<stop offset="100%" stop-color="#254AA1" />
</linearGradient>
</defs>`,
Plot.frame({anchor: "bottom"}),
Plot.lineY(data, {
x: "date",
y: "state",
z: null,
curve: "step-after",
stroke: (d, i, data) => `url(#${[d.state, data[i + 1]?.state].sort().join("-")})`,
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round"
})
]
})
data = [
{date: new Date("2024-04-03T00:14:43.444Z"), state: "awake"},
{date: new Date("2024-04-03T00:15:26.888Z"), state: "light"},
{date: new Date("2024-04-03T00:19:04.111Z"), state: "awake"},
{date: new Date("2024-04-03T00:23:24.777Z"), state: "light"},
{date: new Date("2024-04-03T00:37:10.222Z"), state: "deep"},
{date: new Date("2024-04-03T01:04:41.111Z"), state: "rem"},
{date: new Date("2024-04-03T01:24:14.111Z"), state: "deep"},
{date: new Date("2024-04-03T01:26:24.444Z"), state: "light"},
{date: new Date("2024-04-03T01:32:55.444Z"), state: "deep"},
{date: new Date("2024-04-03T01:50:18.111Z"), state: "light"},
{date: new Date("2024-04-03T02:19:15.888Z"), state: "awake"},
{date: new Date("2024-04-03T02:26:30.333Z"), state: "light"},
{date: new Date("2024-04-03T02:40:15.777Z"), state: "rem"},
{date: new Date("2024-04-03T02:58:21.888Z"), state: "light"},
{date: new Date("2024-04-03T03:47:36.111Z"), state: "rem"},
{date: new Date("2024-04-03T03:57:00.888Z"), state: "light"},
{date: new Date("2024-04-03T04:25:15.222Z"), state: "deep"},
{date: new Date("2024-04-03T04:33:13.111Z"), state: "light"},
{date: new Date("2024-04-03T04:46:15.111Z"), state: "rem"},
{date: new Date("2024-04-03T05:15:12.888Z"), state: "light"},
{date: new Date("2024-04-03T05:53:35.444Z"), state: "rem"},
{date: new Date("2024-04-03T06:03:43.666Z"), state: "light"},
{date: new Date("2024-04-03T06:10:58.111Z"), state: "rem"},
{date: new Date("2024-04-03T06:31:14.555Z"), state: "light"},
{date: new Date("2024-04-03T06:43:33.111Z"), state: "awake"}
]
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.
