Use gemini to animate all frames exported from R

[jhofman]

Commit json and/or html to generate visualizations in sandbox/[subdir]

[giorgi-ghviniashvili]

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

[giorgi-ghviniashvili]

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

sharla-specs.mov

[giorgi-ghviniashvili]

@jhofman @sharlagelfand

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

modified-sharlas-specs.mov

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

Works better, doesn't it?

[giorgi-ghviniashvili]

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

[jhofman]

this looks great @giorgi-ghviniashvili!

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

[giorgi-ghviniashvili]

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

[jhofman]

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

[jhofman]

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

[giorgi-ghviniashvili]

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

[jhofman]

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

[giorgi-ghviniashvili]

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

[jhofman]

a straight line for now seems good, although the tail effect is kind of neat :)

…

On Thu, Apr 15, 2021 at 12:17 PM Giorgi Ghviniashvili < ***@***.***> wrote: @jhofman <https://github.com/jhofman> the line should be like a tail effect like this <https://giorgi-ghviniashvili.github.io/mario-force-canvas/> 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. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#21 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAATNS5GFTYBN4VLR5WNBDTTI4GQHANCNFSM42ZPG6HQ> .

[giorgi-ghviniashvili]

@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).

Screen.Recording.2021-04-16.at.11.36.58.mov

[giorgi-ghviniashvili]

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

Screen.Recording.2021-04-16.at.13.05.52.mov

[giorgi-ghviniashvili]

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

Screen.Recording.2021-04-16.at.13.05.52.mov

[giorgi-ghviniashvili]

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

[jhofman]

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

[giorgi-ghviniashvili]

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

plot-degree-workplace.mov

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

[giorgi-ghviniashvili]

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.

[giorgi-ghviniashvili]

I also upgraded vega-lite version to latest v5.

[giorgi-ghviniashvili]

Here is the html file.

[sharlagelfand]

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

[giorgi-ghviniashvili]

I don't think there is an issue with continuing with vega v4. I just wanted it to be the latest.

…

On Mon, Apr 19, 2021 at 6:06 PM Sharla Gelfand ***@***.***> wrote: @giorgi-ghviniashvili <https://github.com/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. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#21 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABSPD3BB3EX6JE675P5GFU3TJQ2EVANCNFSM42ZPG6HQ> .

-- *Giorgi Ghviniashvili* Data Visualization Engineer ghviniashvili.com

[sharlagelfand]

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

[jhofman]

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

[giorgi-ghviniashvili]

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

[jhofman]

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.

[jhofman]

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