Use gemini to animate all frames exported from R about datamations HOT 28 CLOSED

@sharlagelfand I am directly accessing the json files from raw.githubusercontent.com, so once you update them, they will just work. Here is demo.

from datamations.

@jhofman @sharlagelfand

I modified Sharla's specs and this is what I got:

• added width and height
• added scale.domain for some padding around grid
• hid axes

Works better, doesn't it?

from datamations.

Here is the html file with modified specs as constant variables.

Should be possible to view this live using raw.githack.com: https://rawcdn.githack.com/jhofman/datamations/gio/d3/sandbox/vega-gemini/gemini-sharla-specs.html

from datamations.

@jhofman I fixed "drop in" effect. The reason of it was that id fields were missing in last two specs. I just added them. @sharlagelfand please always make sure to include ids. If no ids are provided, it just deletes old points and then draws, but with ids, it just updates (translates).

from datamations.

from datamations.

@jhofman here are the json specs for vega and gemini.

from datamations.

@jhofman Specs generated by Sharla. 01-initial, 02-intermediate, 03-final.

from datamations.

Here is the html file with modified specs as constant variables.

from datamations.

this looks great @giorgi-ghviniashvili!

next step is the transition between the grouped dot plot and the scatter plot. does that seem feasible?

from datamations.

@jhofman yes, it is feasible, I will just need a vega specification for scatter plot. We already have scatter plot with vega, but circles are stacked on each other. I think Sharla should calculate X values in such a way that they are spread out and not colliding.

from datamations.

@giorgi-ghviniashvili, in the meantime can you work on getting a transition to work between the last infogrid plot that doesn't have an axis and the first scatter plot which does. seems like a naive version of this breaks in gemini because the axis object is null in the initial frame.

maybe the style or domainOpacity/tickOpacity/labelOpacity attributes listed here can be used?

from datamations.

@jhofman see demo.

• width = container and height = container, did not really worked for animations, so just used constants.
• refactored files to json files into a folder. (I know I could just load from Sharla's branch, but I needed to make adjustments myself).

Check it.

from datamations.

@giorgi-ghviniashvili very nice.

it looks like the points just "drop in" from the top between 03-final and 04-jitter-coords. can you instead make it so that the points in the grid in 03-final move to their positions in the 04-jitter-coords along some continuous path (like a line?)

is that feasible w/ gemini?

from datamations.

@jhofman the line should be like a tail effect like this one? Tick Tail effect to see it. Or it should be a straight line from source to target?

I will take a look at line generating with vega.

About the "drop in", yes I will take a look and see how to achieve this.

from datamations.

from datamations.

@jhofman Instead of customising gemini specs ourselves, we should use gemini's recommendations, which generates gemini specs itself and produces better animations, with no errors!

from datamations.

@jhofman Instead of customising gemini specs ourselves, we should use gemini's recommendations, which generates gemini specs itself and produces better animations, with no errors!

from datamations.

@jhofman I don't understand why should we draw 100 lines, it will be a mess. But let's keep this for our live session.

from datamations.

@giorgi-ghviniashvili, as per #20, next step is to animate the four group version of the plot here.

from datamations.

@jhofman I just plugged in the specs that @sharlagelfand provided, and it looks like this:

Using gemini recommendations. I have not changed anything in specs, only setting width and height, because container option does not work for animation.

from datamations.

About the console error, it is thrown on mouse move on chart area, so I fixed it with pointer-events: none.

Also @sharlagelfand please use https://vega.github.io/schema/vega-lite/v5.json instead of v4.json.

from datamations.

I also upgraded vega-lite version to latest v5.

from datamations.

Here is the html file.

from datamations.

@giorgi-ghviniashvili unfortunately vegawidget doesn't support vega-lite 5 yet. there's an issue in the repo to develop it, and I'll drop in there and ask about progress, but for now is it a major issue to continue using v4?

I also noticed from the animation above (which looks great!) that there must be an issue with some of the IDs I exported - between the 3rd and 4th frame the points should just change positions, not colours - I'll look into that and provide updated specs.

from datamations.

Updated coordinates are here @giorgi-ghviniashvili - only 4-6 have been updated so that the ID tracks consistently with the data. thanks!

from datamations.

This looks great overall, and very encouraging that it "just worked" to drop in the new specs.

Curious if anyone has opinions on the group by operation being shown in two parts (degree first, then degree + workplace). I kind of like it, but understand it could be confusing to people. Perhaps it's not a problem if there are enough words or labels in the animation (as in the version we used in our experiments / paper).

@dggoldst, curious if you have thoughts. (see here).

from datamations.

Looks like we're now faced with an instance of #25 here for the group-by step, because as is it's impossible to know what the second grouping variable is until you get to the final frame.

let's brainstorm more at next meeting.

from datamations.

think we're good on this one as well, specific problems now have their own issues.

from datamations.