Vega-lite chart for zoomable timeline histogram with dynamic timeUnit binning

user_1823988 0
Viewed 475

Does Vega-Lite support creating a zoomable timeline histogram with dynamic timeUnit binning?

Input data: array of events, each with time field, spanning short or long time range, depends on the data

Desired chart: histogram with static number of bins, dynamically binning in current selected time range (large timeUnit when zoomed out, small timeUnit when zoomed in)

Attached sample screencast of another library shows zooming, additionally the timeline should act as selection for another chart. Note that binning time unit changes with current zoom.

video

vega vega-lite
1 Answers

Check out this example: https://codepen.io/epicyclist/pen/ZEWMzxb

It lacks the perfect binning of timeUnit (I don't know if that's a hard requirement), but I'll try to achieve it via vega-embed's patch feature.

The two key components are:

  selection: {
    brush: {
      type: 'interval',
      encodings: ['x'],
      bind: 'scales',
    },
  },

And:

  bin: {
    maxbins: 40,
    extent: {
      selection: 'brush',
    },
  },

I'm unsure on how to get better axis formatting; if format is not specified, the axis is only formatted as a time.

Vega-Lite does support custom formatting and an error was fixed in the docs today; however, I'm still having issues with it as seen here. I'll submit an issue if I cannot figure it out and let you know if I find a solution.

user_17295860
Related