Add custom aggregation animations

[jhofman]

Right now mean shows points collapsing. Here are suggestions for how other aggregation operations can be animated: https://idl.cs.washington.edu/files/2019-AnimatedAggregates-EuroVis.pdf

[giorgi-ghviniashvili]

@jhofman Have read the papers.

Just forked this repo and created a demo of designs folder.

These examples of transitions are great. With this kind of transitions, it really makes more sense than just linear interpolation from point A to B.

I don't think that gemini or any other library will support this kind of custom transitions. We need to code these ourselves, as these guys did.

[giorgi-ghviniashvili]

Take a look at this one as well: demo

[jhofman]

@giorgi-ghviniashvili: these are great. you commented that gemini won't support these. do you think we can do them with d3 on top of vegalite plots, or do the plots themselves have to be entirely done in d3?

@dggoldst, take a look at these two demos for different ways to visualize different types of aggregation functions used to summarize data:

https://giorgi-ghviniashvili.github.io/aggregate-animation-data/designs/apps
https://giorgi-ghviniashvili.github.io/aggregate-animation-data/designs/

[giorgi-ghviniashvili]

These demos are done with d3 because it is more flexible (low level access of transitions, scales, drawing part) than vega.

But after a bit playing with vega, I think we can do the same with vega, but we will need multiple vega specs: a single one for each simple step.

For example, for arithmetic mean, we have multiple steps and each step introduces new elements or instructions: an area or lines, circle transforms. All these will need new vega specs. With gemini sync we can only instruct animation sequence of elements that need to be transformed.

To sum up, I am not sure how smooth the animation will be with gemini and vega and how easy it will be to generate all the specs, but think that it is possible.

[giorgi-ghviniashvili]

After playing with Sharla's specs and drawing grid, I think it is easy to customize each frame as we want: hide axes, change domain, scale, axis types..

[jhofman]

But after a bit playing with vega, I think we can do the same with vega, but we will need multiple vega specs: a single one for each simple step.

For example, for arithmetic mean, we have multiple steps and each step introduces new elements or instructions: an area or lines, circle transforms. All these will need new vega specs. With gemini sync we can only instruct animation sequence of elements that need to be transformed.

To sum up, I am not sure how smooth the animation will be with gemini and vega and how easy it will be to generate all the specs, but think that it is possible.

Got it. So seems like going with gemini and vega wouldn't make it impossible to implement these transitions down the line if we wanted to later, but it might be a lot of work.

Do you think it's worth trying this approach for just one aggregation operation like count or median to see how it goes?

[giorgi-ghviniashvili]

Got it. So seems like going with gemini and vega wouldn't make it impossible to implement these transitions down the line if we wanted to later, but it might be a lot of work.

Yes it is not impossible, but lots of work. Agree.

Do you think it's worth trying this approach for just one aggregation operation like count or median to see how it goes?

Yes, I think it worths trying.

[jhofman]

Snoozing this, but when we do get to it, we'll try Gemini2 as per #69.

[jhofman]

@sharlagelfand will explore doing a custom animation for mean, which requires parsing the summarize function a bit more closely, then @giorgi-ghviniashvili can prototype it.

[sharlagelfand]

I've updated the summary function parsing so that if the summary function is mean or median, the first spec produced by prep_spec_summarize will contain meta.custom_animation = "mean" (or median).

fyi @chisingh this is something that should be added on the python side as well, to ensure consistency between the specs

[jhofman]

@giorgi-ghviniashvili will implement custom versions of the first mean and median animations listed here: https://giorgi-ghviniashvili.github.io/aggregate-animation-data/designs/

[giorgi-ghviniashvili]

@jhofman median animation is there 🔥

median-animation.mov

P.S. there is a difference between count and median: median needs to have some initial y values to be sorted by, while count does not need that and can be calculated from grid spec. I added an intermediate frame with randomized data after grid.

[giorgi-ghviniashvili]

@jhofman mean animation is there 🔥

mean-animation.mov

[jhofman]

the mean animation looks great!

two small tweaks:

1. plot the actual values on the y axis right after the grid
2. make a smooth transition from the vertically stacked y values to the diagonal sorted y values

median is also really cool.

tweaks:

1. should read "plot median" instead of "plot count"
2. once the median is calculated, have the original points disappear first, then zoom the axis range (to mirror what we used to have with non-custom animation)

[jhofman]

after that, min and max would be the next obvious custom animations to implement.

[willdebras]

I added count, min, max, median, and mean example specs.

I believe these count specs are what youa re expecting, i.e. data.values gives a key value pair of n and a count, but let me know if I am off base.

Quantile is a bit tricky and will need some updates to prep_specs_summarize.R. datamations_sanddance() actually breaks with quantile passed as a summary function. across has a hard time applying quantile without a given probs parameter (e.g. 0.1).

It breaks on this call.
https://github.com/microsoft/datamations/blob/main/R/prep_specs_summarize.R#L477

While I have code in place to pass the custom animation meta specs, I need to make amends to the mappings passed to this function for the data to even generate for quantile. I'll work on this tomorrow so we can get this running for quantile.

[giorgi-ghviniashvili]

@willdebras scale.domain must be [0, 3], for 0.5 and 2.5 it has alignment issues.. This is true for all jsons.

Title should not be an array: [], either string or should not be present at all.

Please do not include color as encoding if field is null:

For min, max and median, I think we don't need last spec because custom-animation already does that , plots min, max and median zoomed in as last step.

Other than that, they look good. Please let me know when these are fixed and I will re-test.

[willdebras]

Sounds good.

Updates here.

• Domain scale goes from 0-3 now.
• Title is no longer present in tooltip and encoding specs. Array was misgenerated in the specs generation function if a character length 0 value is passed to it. These should be removed entirely now.
• No color created when no color mapping is passed

For the min, max, and median I still have the data states for the summary function in the end (i.e. the final spec). Should I just remove these entirely then? It will take some additional handling to not generate the summarize specs (i.e. the final summary function specs) for only specific summary functions. I can bake this in this week as well as the quantile updates.

[giorgi-ghviniashvili]

@jhofman custom animations with facets are now possible. Did an example for mean:

facet-mean.mov

But there is a issue when next spec is with error bars.. Will further debug and find out how to solve it.

@willdebras yes, please just remove summarized specs for now and let's test. (comment it out, we may need it later)

[jhofman]

Looks like between 14 seconds and 19 seconds in there's a shift of all points to the left.

Next steps will be to get the error bars and zoom steps working.

[jhofman]

@giorgi-ghviniashvili made some good progress on this, the shifting to the left is fixed but there are still some details to work out in the final frames of the custom animation.

also, there's an interesting thing that happens when we have overlapping values on the quantile (or median) custom animations---it becomes difficult to see the overlap and then it sort of visually looks like you're cutting the data at a different point than is specified in the quantile function. (it's actually doing the right thing, it just looks funky.)

i wonder if doing something more like mean where things are diagonal so that all points can be seen would be useful? then we could move the sliding bar up from the bottom to the appropriate percentile?

let's work on this the week after next.

[giorgi-ghviniashvili]

Updates on faceted custom animations:

mean:

mean_facets.mov

Max:

facet_max.mov

Min:

facet_min.mov

Median and quantile: for some reason, gemini.recommendForSeq can not recommend the gemini animation specs and does not work. Might need to investigate further and/or file a ticket on gemini's github.

Count: @willdebras please provide faceted view for count. And also in general, please add facets + custom_animation specs to sandbox to be able to test.

[giorgi-ghviniashvili]

@willdebras can you push R generated custom-animations-median-facet.json to custom_animations branch? I would like to test median spec. Manually generated spec does not work, don't know why

[giorgi-ghviniashvili]

Update: made faceted custom animations work with median and quantile. (I needed to make some tricks!)

median-facets.mov

In summary, I think we are good with custom animations, let's invest some time to test all custom animations using R generated specs and then merge it 🤞🤞

[willdebras]

Awesome!!

R generated specs here for custom animations if you still need them:
https://github.com/microsoft/datamations/blob/custom_animations/sandbox/custom_animations/custom-animations-median-faceted-R.json

Sounds good on testing then merge!

[jhofman]

this looks terrific.

now that we have colors to denote groups, it's a bit jarring to see the green and yellow come in on the median step in this video.

let's simplify things and just keep the group colors and forget the gray/green/yellow. so in this case, female points stay all orange, male points stay red, and NA stay blue.

probably a good idea to propagate this to other custom animations. if it's possible to keep the colors on the bars for mean, then great. but if complicated we can skip it.

[giorgi-ghviniashvili]

@willdebras I tested all the specs and they work great, except the custom-animations-binary-R.json which has mean animation. The problem is that we have mean animation directly after the grid, can custom animation spec be after jittered spec?

[willdebras]

So right now it is usually in the set of specs directly after the jitter spec, right?

https://github.com/microsoft/datamations/blob/custom_animations/sandbox/custom_animations/custom-animations-median-faceted-R.json#L3544

The jitter spec is generated in the group_by state. Currently the custom animation is always getting applied in the first summarize spec. This binary file doesn't produce any jittered specs because the binary variables I believe are always depicted in a grid. Do we need to add a jitter spec anywhere?

[giorgi-ghviniashvili]

Ah yes, you are right. So to make mean work after grid spec, we need to sort it first and then translate. Will try to fix that on my side.

[giorgi-ghviniashvili]

@willdebras all custom animations (except count) should always be after a spec where each datapoint has y value. That's needed because first step is to animate points to slash shape (/):

--- then draw bars with mean lines and then collapse.

In case of binary variables, we only have grid, we don't have y values for each datapoints. Instead a player has a batting average in the year.

I think that we need to show jittered spec after grid and before custom_animation or need to think of a different animation, especially the "slash shape step".

I tried to stack the circles to get the transform like that, but because we have so many points, they overlap and not really clear what's going on.

[jhofman]

i agree, i don't think custom animations for binary variables make sense, at least not for mean.

@giorgi-ghviniashvili can you work on the color issues above for next meeting?

[giorgi-ghviniashvili]

@jhofman fixed color issue:

mean-color.mov

median-colors.mov

max-colors.mov

[willdebras]

@giorgi-ghviniashvili The binary specs have been updated to remove custom animations meta spec. All binary specs now exclude this meta spec:

https://github.com/microsoft/datamations/blob/custom_animations/sandbox/custom_animations/custom-animations-binary-R.json

[jhofman]

the mean animation looks great.

the median animation has a jump after the medians are calculated from 7 to 8 seconds. maybe this is just a problem w/ the spec?

the max animation looks good until the very end when some ghost points appear below the correct points.

[giorgi-ghviniashvili]

@jhofman median fixed:

median-fixed-2.mov

median-updated.mov

About the max animation, the issue is with the faceted spec, which is not R generated. Here is max using r generated without facets:

max-fixed.mov

[jhofman]

these look good w/ the removal of the ghosted final points, which @giorgi-ghviniashvili seems to have fixed locally but not pushed. so we're almost all set.

one small point would be to remove a delay in median-updated.mov above, between 19 and about 22.5 seconds, when the "median" gets added to the y axis label. maybe it's just an extra spec in there?

if it's easy to fix, great. if not we can backlog it.

[giorgi-ghviniashvili]

@jhofman Looks better, doesn't it?

removed-delay.mov

[jhofman]

just under the 1 year mark! :)

[jhofman]

@willdebras can you merge the doc updates for custom animations?