Interactive visualization of time series

[ICHydro]

Some time ago, we made a first attempt at coding a widget for the interactive visualization of the time series in javascript, with the ability to zoom in and out. We tested two approaches:

Our first widget pulled the entire time series from the database to the client side, and then vizualised the relevant time window on the client. This had the advantage that data had to be pulled in only once, and that zooming was quick (as the data was already at the client side). The disadvantage was that potentially a very large time series was pulled in (if the time series is long) and not all of it is needed (if the client never zooms out to the full time series). Some clients even struggled to keep the full time series in their memory.

In a second attempt, the client only requests the time slice that is visualised. This is quicker, but requires a request to the database for every zoom-out action. This can slow down the user experience. However, we mitigated this by making use of the aggregated (hourly, daily) data in the database. The widget calculated the resolution of the time series based on the size of the viewport (number of pixels) and select the coarsest time series needed to visualize. For example, if the visualization zoomed to 2 years of data, and the viewport is 600 pixels wide, then the daily data (730 data points) is perfectly fine. This method worked really well, as the amount of data transferred and processed per zoom action was minimized.

There are many such visualization widgets nowadays, and they may already have smart was to do this, but I thought I would document here in case it is still of relevance.

[CWestICL]

I don't think we've implemented a visualisation like this just yet but the Dash framework we've been building the graph views with may have some tool that can achieve this. @ICHydro Is this visualisation something you'd want for the Data Report page or is this a separate page?

[ICHydro]

Hi @CWestICL, thanks. For now, the data report page is fine. The visualization that is there now already seems to be able to do some zooming (although I can't test it fully because of the limited data) so it is perhaps just a matter of developing this further. Here are some examples of nice interactive visualization of time series (charts on the right hand side) that allow zooming in and out and also show the data when hovering over:

https://riverflow.io/dashboard/c85ed100-6520-11ee-b4f1-93943cd4439a?publicId=0a4f26d0-09db-11ec-a5fc-13b0e69e1d15

[dalonsoa]

I've open issue #222 to tackle this in the future. Unless you think that not having this is a blocker, and considering our limited time now that we are over budget, it will be best to focus on the must haves so you can test the tool end-to-end as soon as possible.