Giter Club home page Giter Club logo

Comments (12)

jhofman avatar jhofman commented on May 18, 2024 1

got it.

can you create an issue on the gemini project?

thanks!

from datamations.

giorgi-ghviniashvili avatar giorgi-ghviniashvili commented on May 18, 2024 1

uwdata/gemini#7

from datamations.

sharlagelfand avatar sharlagelfand commented on May 18, 2024 1

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

from datamations.

giorgi-ghviniashvili avatar giorgi-ghviniashvili commented on May 18, 2024

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

from datamations.

giorgi-ghviniashvili avatar giorgi-ghviniashvili commented on May 18, 2024

@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?

image

image

from datamations.

jhofman avatar jhofman commented on May 18, 2024

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.

from datamations.

giorgi-ghviniashvili avatar giorgi-ghviniashvili commented on May 18, 2024

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

image

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

image

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.

from datamations.

sharlagelfand avatar sharlagelfand commented on May 18, 2024

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.

from datamations.

giorgi-ghviniashvili avatar giorgi-ghviniashvili commented on May 18, 2024

@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?

from datamations.

sharlagelfand avatar sharlagelfand commented on May 18, 2024

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

Screen Shot 2021-07-20 at 3 41 53 PM

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):

Screen Shot 2021-07-20 at 3 47 08 PM

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?

from datamations.

giorgi-ghviniashvili avatar giorgi-ghviniashvili commented on May 18, 2024

@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:
image

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

from datamations.

sharlagelfand avatar sharlagelfand commented on May 18, 2024

Thanks for clarifying @giorgi-ghviniashvili!

from datamations.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.