How can I make Hours of Service box-graph using d3.js in Javascript ?

I wanted to use a stepline-box chart in my javascript applications for ELD, I failed to find out a similar box graph in the javascript chart section. The graph I have really looking for is attached here.
Could anyone please help me out?

It’s certainly possible to do it with d3.js, but it’s probably simpler with Observable Plot.

Here’s an example ELD Viewer / Fil / Observable

I haven’t found examples of ELD csv files, and the actual format is probably different (I just used a line for each {time, status}). As always with javascript applications, a difficulty is to deal with time zones.