Setting date ranges and the timeline scale

[jgaehring]

It would be great to be able to adjust the date ranges displayed in the timeline, to "zoom" in and out for more or less detail. I really love this date range picker from toggl.com:

Also, I don't know how the scale is currently being set for the timeline as a whole, but one thing I've picked up from D3 is how beneficial it can be to have some centralized function or piece of state for setting the scale any kind of visualization. There are some great examples of how D3 handles this declaratively in their time scale docs. I've expressed my reservations about D3 in the past, and how I think it's largely unnecessary when you're using a reactive framework like Vue, but in this one instance, I think it might even be worth considering using just the D3 scaleTime library, which can be pulled in separately from the rest of D3.

I bring all this up in conjunction with the date range picker because I think it becomes fairly trivial to implement such a feature if you already have a centralized approach to scale in your code. In fact, two key concepts for how D3's scale functions work are the domain and range methods, where domain sets how many pixels across you want your timeline to span, and range sets the total range of dates you want to include in that span. Again, it's so nice how declarative D3 is in its design, it might be worth considering.

Also, this approach, in conjunction with my suggestions at #6 (comment), would enforce more consistent intervals along the x-axis, which I think creates a more readable visualization and a better UX overall.