🏠 back to Observable

Using marks with start and end dates with Vega-Lite?

The US National Weather Service’s API Web Services use ISO 8601 Durations in their validTime for things like forecasts (which are intended to be valid starting at some time and ending at some time). An example would be 2019-07-04T18:00:00+00:00/PT3H representing an interval starting on July 4, 2019 at 1800 UTC and continuing for 3 hours (from 1800 to 2100).

I’d like to display this visually using Vega-Lite-API. It’s easy enough to transform(calculate(... and get the date, but I’m not sure how I might, on a timeline, start a mark and then end it at some point in the future.

You might get an idea of what I’m looking for on this worksheet. You may need to click around the map to find some rain, but the idea being that a rain prediction would cover the whole period for which that prediction is valid.

So there are kind of two related questions: The main one is how do I have a mark which has a start and end timestamp? The second mildly interesting question is whether there’s a way to leverage ISO 8601 Durations "out of the box.

1 Like

The answer is the x2() encoding channel.

Here’s a simplified example, and here’s the weather data I was monkeying with (using Moment.js’s Duration functionality).

1 Like