Add data point information on hover?

[jhofman]

@giorgi-ghviniashvili is it possible to add tooltip hover over to the points on plots in vegalite / gemini?

if so this could be really useful, both for debugging (for instance to know what the summarized values are in the final frame when checking if the axes are right) and for causal users who want to see more about that datapoint.

[giorgi-ghviniashvili]

@jhofman we had weird issues on hover with gemini, but will try to make it work. Vega supports tooltips.

[giorgi-ghviniashvili]

@jhofman I set tooltip: true to the spec, it works in vega, but has issues in gemini, maybe better to ask gemini guys about this error?

[jhofman]

got it.

can you create an issue on the gemini project?

thanks!

[giorgi-ghviniashvili]

https://github.com/uwdata/gemini/issues/7

[jhofman]

This will require work on #49 for a solution that works during animations. But until then let's see if there's a way to hack this just for static frames (and not the full animation) with vegalite.

The imagined use case is that someone's in the shiny app, then select a key frame, and want to see more about a particular point so they hover over it.

[giorgi-ghviniashvili]

@jhofman , tooltip works well , we just need to set mark.tooltip = true. It will just display tooltip correctly:

The problem is that after gemini animation, it starts printing this error:

But tooltip keeps working, correctly showing content in it. So in other words, it just prints this error on mouse move, but printing this error to the console does not break anything.

To suppress this error printing I set pointer-events: none; to remove any cursor events.

I debug the error, but could not find what's wrong. It is a vega-view error and happens at this line.

So I am just removing pointer-events: none; from css styles and let the error be printed!

@sharlagelfand to enable tooltip, you will need to set tooltip: true in mark object.

[sharlagelfand]

Thanks @giorgi-ghviniashvili!

Some initial thoughts on this, we probably don't want to display "datamations_x" and "datamations_y" in the tooltips, but rather the actual column names (in the jitter / summarize views), and maybe just the grouping variables in the infogrids? We can control what's in the tooltip and can change the title of variables, or derive a new variable, etc.

Here's what I'm thinking:

Initial infogrid (no groups): no tooltip, or tooltip just saying something like "One point" Grouped infogrids: Grouping info (e.g. Degree: Masters) Jitter: Value and grouping info (e.g. Salary: 81.9, Degree: Masters) Summarized: Value and grouping info (e.g. Mean salary: 90.2, Degree: Masters)

Maybe the grouping info isn't necessary in the jitter / summarized views? But I'll play around and see how it looks.

[giorgi-ghviniashvili]

@sharlagelfand yes, I see that it is possible to customize tooltip and because it is customized in encoding, maybe you can include that info in specs and it will just display how you configure. Or do you need me to do some logic on this?

[sharlagelfand]

@giorgi-ghviniashvili I think it can be handled on my end! I'm going to test it out

[sharlagelfand]

I have a pretty good start on this, here's how things are looking in the group by degree / compute mean salary case:

So the first frame doesn't have a tooltip (I can add if we think of something!) and the rest do.

I was running into some issues with tooltips on the errorbar. If I look at the frame alone (e.g. as a "pure" vega lite spec, before passed to the JS code), the tooltip shows up (and in the vega lite editor):

But it doesn't show up once passed through the JS code - @giorgi-ghviniashvili are the errorbars "hacked" too, which might explain why the tooltip doesn't work for them? Here are some example specs.

Maybe showing a tooltip on the errorbar is overkill and we don't need to worry about this anyways - @jhofman thoughts?

[giorgi-ghviniashvili]

@sharlagelfand that's because there are two div stacked and top div for main viz has priority in terms of pointer events and only first div's events are captured. Background div pointer-events is enabled but not captured because top one covers it.

If we delete top layer, then it is working:

That's downside of hacking things, I can't make this work.

[sharlagelfand]

Thanks for clarifying @giorgi-ghviniashvili!