djay / covidthailand

Thailand Covid testing and case data gathered and combined from various sources for others to download or view
126 stars 15 forks source link

hover to get detail on numbers (interactive js plot) #40

Closed djay closed 2 years ago

djay commented 3 years ago

The idea would be to have similar ability to view details for every day of every line similar to OWID. Could also show actual and average values this way.

Screen Shot 2021-11-28 at 11 58 39 am

Consider the time to reimplement all the customisations in plot function vs How nice the interactivity or plotting is

Proposed solution

Alternative solutions

djay commented 3 years ago

I did a test of using mpld3 in https://github.com/djay/covidthailand/pull/61. It works suprisingly well. There are some issues with titles and the fancybox for the legend and also haven't looked at all plots yet.

However its plugins for tooltips don't do what we want (as asked https://stackoverflow.com/questions/69186868/how-to-achieve-crosshair-timeseries-tooltip-with-mpld3).

I've found examples using pure D3 which gets close to what we want, so might be just a matter of converting those to our own plugin.

I've put some existing plugin code to try out in https://github.com/djay/covidthailand/blob/main/utils_pandas.py#L497 but not really working yet

djay commented 2 years ago

Started prototyping SVG with embedded JS in https://github.com/djay/covidthailand/pull/217. I think it will get us the tooltip with the least amount of effort since the plots won't change their look at all. It won't get us changing time scales or adding lines or other kinds of interactivity though. Also it won't come with copying to the clipboard out of the box without some extra JS. if you use img tag for svg it doesn't let you copy but then you lose interactivity.

djay commented 2 years ago

fixed in #217