microsoft / datamations

https://microsoft.github.io/datamations/
Other
67 stars 14 forks source link

Multiple axis in fake faceted views #39

Closed giorgi-ghviniashvili closed 3 years ago

giorgi-ghviniashvili commented 3 years ago

I got an idea to render two vega specs, one for axis and not touched by Gemini and second for fake faceted with animated by Gemini.

giorgi-ghviniashvili commented 3 years ago

@jhofman Started working on this, but finding it hard to exactly match points:

Upper ones are real ones, below ones are faked.

image

Will need a bit more work on this.

jhofman commented 3 years ago

@giorgi-ghviniashvili looks like a pretty good start, in fact i'm not sure what looks "off" other than the lower-left panel where the blue points are outside of the axes?

giorgi-ghviniashvili commented 3 years ago

Points are duplicated, one point is from real faceted view, the other one is faked (a bit below). These two needs to match exactly and have only one circle, like this:

image

giorgi-ghviniashvili commented 3 years ago

@jhofman made it work:

Two vega graphs are overlaid.

Inner axes is drawn using "vega spec for axis".

Outer axes done with fake faceted spec. Notice that because we are using fake faceted view we can have facet axis on the right, which would not be possible with real faceted view because it is not supported yet.

image

Will do animation now.

sharlagelfand commented 3 years ago

@giorgi-ghviniashvili this looks great! If I want to pass a title for the y-axis in the jitter/summary frames, does it make sense to just pass that through in the y encoding title?

giorgi-ghviniashvili commented 3 years ago

@sharlagelfand , yes I think it will work. Please also remove axis: null from spec you want additional axis, and add title to it.

sharlagelfand commented 3 years ago

Just to keep track of here, previously the axis appeared as soon as the points moved from infogrid -> jitter

https://user-images.githubusercontent.com/15895337/117502278-4763d680-af4d-11eb-9a72-bcf449f45cd0.mov

But now it looks like they only appear when moving jitter -> summary

https://user-images.githubusercontent.com/15895337/117502298-4f237b00-af4d-11eb-8f00-16d1ef34ed8e.mov

Probably better to keep them on for longer (the first case)

jhofman commented 3 years ago

@giorgi-ghviniashvili as discussed yesterday, can you check and confirm that the bounding boxes of the real and fake axes line up?

giorgi-ghviniashvili commented 3 years ago

@jhofman yes, currently they line up correctly (tested various frames).

giorgi-ghviniashvili commented 3 years ago

As per @jhofman 's comment that points don't line up correctly:

image

@sharlagelfand could you please do this:

image

Avoid using decimals, and have 1, 2, 3 in axis.values. Adjust padding using scale.domain (and always include scale.domain).

We will get this:

image

image

sharlagelfand commented 3 years ago

Thanks @giorgi-ghviniashvili!

I have a question about the Y domain in the jitter and summary frames - I've set the Y domain to be the range of the data as we discussed so that the summary points are in the same range as the jitter points. It all looks good in the animation but when you actually click on the last summary frame, you can see it has a different Y domain:

https://user-images.githubusercontent.com/15895337/118813453-22d8fa00-b87d-11eb-86d7-512f27b3ff9d.mov

Do you know why the domain looks like this? The actual frame itself in the vega lite editor doesn't look like that:

visualization(3)

In the specs here you can see that the Y domain is the same for the jitter and the summary frame - is there something going on with that final frame that changes its axis? Thanks!

giorgi-ghviniashvili commented 3 years ago

@sharlagelfand good catch, fixed it. Please update shiny app with this commit.

sharlagelfand commented 3 years ago

Looks good, thanks @giorgi-ghviniashvili!