Hello,
I am new to observable and I wanted to create a step chart so I’ve been looking through the documentation and some topics but I never was able to find anything related to step charts. So I was wondering if it was even possible to create a step chart using observable plot.
Fil
April 25, 2024, 3:54pm
2
If you want to use Observable Plot, see the curve option, which has a “step” value (also “step-before” and “step-after”):
A curve defines how to turn a discrete representation of a line as a sequence of points [x₀, y₀, x₁, y₁, x₂, y₂, …] into a continuous path; i.e., how to interpolate between points. Curves are used by the line, area, and link marks, and are...
MP_Li
June 10, 2024, 10:14pm
3
Checkout Mike’s réponse on this post, it might be a great example for you.
The use of the gradient here is pretty subtle — it does piecewise blending between the two connected values (the two sleep states). Notice that when going from Awake to Light, the gradient skips the light blue of REM.
You can use a variable color encoding to achieve this. I’m sure the code could be simplified but here is my take. You’ll also need a fancier line renderer to have thick horizontal lines with rounded corners, with skinny vertical connectors…
[untitled - 2024-04-04T091729.270]
Pl…