Change "play" button to autoplay + slider + replay button

[jhofman]

Can we modify the "play" button in the widget to be a slider that let's you scroll through the different steps in the analysis? And can we also make the animation play by default in the shiny app, with a "replay" button that allows for cycling back through the animation?

In a future version we could get really fancy about this where each notch on the slider lists the portion of the pipeline that the step corresponds to, so it was super clear which stage you're looking at. Kind of like a trimmed down version of the banner image at the top of the paper.

[giorgi-ghviniashvili]

I added autoPlay field to init function, also added slider and spec description which will display meta.description field.

init("app", {
  specUrls: [
    dataUrl + "01-ungrouped.json",
    dataUrl + "02-column-facet.json",
    dataUrl + "03-column-row-facet.json",
    dataUrl + "04-column-row-facet-color.json",
    dataUrl + "05-jitter.json",
    dataUrl + "06-summary.json",
  ],
  autoPlay: true
});

https://user-images.githubusercontent.com/6615532/118025864-58f41680-b371-11eb-8df9-fe09b9568476.mov

[sharlagelfand]

Looks awesome @giorgi-ghviniashvili!! Here's an updated video with the descriptions for each frame:

https://user-images.githubusercontent.com/15895337/118133691-1cef9e80-b3cf-11eb-803f-8eaf5433e829.mov

i think the descriptions are off by one frame - e.g. the "group by species" frame shows up once the "group by species" -> "group by species, island transition" has already started happening (instead of when the animation into "group by species" starts), and so the last description ("plot mean bill_length_mm in each group") doesn't show up. This gets into timing a bit more generally (e.g. maybe we want a longer pause on each frame) but seems like the index on the description needs to be moved back one?

[giorgi-ghviniashvili]

@sharlagelfand , thanks, fixed it.

[jhofman]

this looks great overall. noticed a small thing: in the final frame, the points in the upper right (Gentoo / Biscoe) don't align with the grid. they seem shifted to the left. same is happening in the middle column, but slightly less so.

@giorgi-ghviniashvili, can you investigate.

related to #33

[giorgi-ghviniashvili]

@jhofman that's because "vega for axis" has encoding.x.axis.values = [0.5, 1.5, 2.5] which does not work with vega. @sharlagelfand please change this array to [1, 2, 3].

[sharlagelfand]

Thanks @giorgi-ghviniashvili, fixed!

[sharlagelfand]

This seems all good, so going to close this issue!