hover to get detail on numbers (interactive js plot)

[djay]

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.

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

Proposed solution

• SVG with embedded JS
  • prototype in https://github.com/djay/covidthailand/pull/217 based on Tooltip example but instead set a single mouseover on the main plot rectangle and then work out the date and update tooltip based on this
  • Pro: plots look exactly the same with no extra effort. Only have to get this custom JS to work.
  • Con: lose ability to copy and paste plots (but might be able to add in a button to do this?)
  • Con: we can't have the JS work and cut and paste the image at the same time but with some JS we can maybe add right click or button to do the same thing later if we want.

Alternative solutions

• MPLD3

  • Enabling output to HTML/JS is pretty easy - https://github.com/djay/covidthailand/pull/61/files
  • It mostly works but layouts and fonts are a little off
  • There isn't out of the box crosshair plugin (but some D3 js code that comes close)

• Redo plot_area with plotly

  • or bokah or others
  • Would have to start again with laying everything out nicely but tools for doing that might be nicer
  • Could still save as png on server so users can have export?
  • Seems like pandas plot has direct support for plotly but not sure we can use that
  • e.g. js based like plotly

• mplh5canvas?

[djay]

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.

• probably best so far https://stackoverflow.com/questions/34886070/multiseries-line-chart-with-mouseover-tooltip/34887578#34887578
• https://stackoverflow.com/questions/21417298/d3js-chart-with-crosshair-as-tooltip-how-to-add-2-lines-which-intersect-at-curs
• https://stackoverflow.com/questions/32783433/d3-multiples-with-linked-focus-mouseover-tooltip-crosshair-focus-line-not-fitti
• http://jsfiddle.net/Nivaldo/79fxL/
• https://jsfiddle.net/gerardofurtado/ayta89cz/5/

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]

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]

fixed in #217