POC for timeline with bars

[joschne]

Context

For issue #116 we need a timeline

• that can handle / print a large number of events
• that allows to select a start and end date
• that emits the events of start/end date selection change (to be used to filter the data displayed on the map)

Goal

Have a POC that the requirements can be implemented with Plotly.

[ZEDz318]

Here is a codepen link to the component I was able to code. I created a dummy repo to simulate some data. For now it ticks most of the boxes.

What it does

• It allows to select a start and end date using the rangeslider
• It returns any change in the rangeslider in the 'dates' div (to be used to filter the data displayed on the map)
• It returns the events when the graph is clicked (that are active at that x-axis/date)

What it doesn't do

• It can be displayed as a bar graph, but the rangeslider's graph representation will disappear (you can try that out by replacing :

return [{ mode: 'lines', x: x, y: y }]; with return [{ type: 'bar', x: x, y: y }];

• It's inaccurate (visually) with noisy data (it's hard to see sharp dips as it will seem as one whole block || see datapoint at 2022/04/20 & 200/04/27)

Note

• I haven't tried it with large data yet (I am concerned with how it handles y-axis data... since it is a line-graph (continuous) and not a point-graph, it has to maintain the values of y throughout the range of x, meaning, all dates between start and end date)

[joschne]

Nice job @zedz318 ! :-)

In the Plotly documentation I saw that there are histograms that may fit our ideas. I am going to create a second POC with type: 'histogram' instead of 'lines'or 'bar'. After that, we'll probably need a meeting.

[joschne]

Here is a stackblitz example of using plotly historgram for the timeline with bars.

What it does

• It allows to select a start and end date using the rangeslider
• It returns any change in the rangeslider (to be used to filter the data displayed on the map)
• It can handle / print a large number of events (mock data with 2000 event intervals)
• It allows the user to select a bin size out of 'century' | 'decade' | 'year' | 'month' | 'day'
• It maps incoming time intervals (start-end) to the bins. For example, with bin size day an interval 1400-01-01 to 1400–12-31 is mapped to all 365 days of the year 1400.
• On hover over a bar, the label looks good for 'month' | 'day'

Problems

• The binning is wrong for decade and century: The values fall into a too low bin (probably my addToBins() function is not good)
• On hover over a bar, the label is not good for 'century' | 'decade' | 'year':
  • for century it should be 1400-1499 instead of Jan 1400
  • for decade it should be 1400-1409 instead of Dec 1409
  • for year it should be 1400 instead of Jan 1400

[ZEDz318]

Hello! Sorry for my delayed response, I had a dental emergency earlier this week and had to recover. I'll be working on this today and I'll get back to you asap.

[ZEDz318]

Hello again! I forked your stackblitz project, this is mine.

Solved

I was able to solve the "on hover" issue.

Problem/Details

1. Since the on hover for 'decade' and 'century' is a range, and the histogram starts from 0 (maybe we can change that so that the histogram starts from the lowest starting date?), thus what would be logical for the the ranges? For it to be 0-1400 in both cases (decade and century)? Or just as they are now (1390-1400 for decade, and 1300-1400 for century)?
2. As for the wrong binning, could you elaborate more on the matter? Is it adding the data to the bin that's before the correct one? or is the calculation wrong somehow and the bins are just incorrect? basically, what do you mean by "The values fall into a too low bin"?

[flicksolutions]

Please also keep performance in mind: At the moment, month is a pain to use, day is unusable. Why is that the case? How can we make it faster?

[ZEDz318]

I've been working on this and I think the issue highlighted by @flicksolutions is the same as the one I asked about last in the Problem/Details section number 2. From what I could tell, the reason why it takes too long to render month and day bin sizes is because of how the binning was working. I've changed it and it should be faster and more accurate(I've also increased the range of each datapoint just for testing since it requires more computation this way) Here is the link (it's the same as the one before)

If you want, we can have a 10-20 minute meeting to discuss the details further