Using Observable Plot, I wish to recreate the https://merrysky.net weather timeline with colored bands and text labels.
I have gotten an initial version working, but it has some flaws:
- The labels are often longer than the “section” they are labeling, so the text overlaps with the next label.
- The labels are not centered on the section. (I know how to fix this, except when adding icons to the left of the labels.)
- Live demo
- Relevant source code
Questions:
- First of all: is there a better way to create these colored & labeled sections in Observable Plot? My code uses Plot.areaY
- How do I filter out the labels that are too wide for their sections? Currently my code is a simple filter that removes repeated weather codes. The filter function has access to the data item, but the only information related to the X axis is time. I am not sure how to convert this time into pixels on the X axis. (Nor calculate the width of the label itself in pixels.)
- Finally, I would like to add a small image mark of the weather code icon to the left of the text label. When the section is too narrow, only the icon would display (if there is enough width.)
Of course, I am open to solutions using the underlying D3 API, as well.
Screenshot of current progress:
