Skip to content

Animated interactive ggplots

Jump to bottom Edit New page
Lewen Sun edited this page Apr 8, 2025 · 29 revisions

Background

animint2 is an R package for making interactive animated data visualizations on the web, using ggplot syntax and two new keywords:

  • showSelected=variable means that only the subset of the data that corresponds to the selected value of variable will be shown.
  • clickSelects=variable means that clicking a plot element will change the currently selected value of variable.

Toby Dylan Hocking initiated the project in 2013, and Susan VanderPlas (2013), Carson Sievert (2014), Tony Tsai (2015), Kevin Ferris (2015), Faizan Khan (2016-2017), Vivek Kumar (2018), Himanshu Singh (2020), Yufan Fei (2022-2023), and Jocelyn Chen (2023) have provided important contributions during previous GSOC projects.

The animint2 manual is the definitive reference on how to design data visualizations using animint2.

Related work

Standard R graphics are based on the pen and paper model, which makes animations and interactivity difficult to accomplish. Some existing packages that provide interactivity and/or animation are

  • Non-interactive animations can be accomplished with animation/gganim/gganimate/plotteus (animint2 provides interactions other than moving forward/back in time).
  • Some interactions with non-animated linked plots can be done with the qtbase, qtpaint, and cranvas packages (no longer maintained, animint2 provides animation and showSelected).
  • Linked plots in the web are possible using SVGAnnotation (no longer maintained) or gridSVG but using these to create such a visualization requires knowledge of Javascript (animint2 designers write only R/ggplot2 code).
  • The svgmaps package defines interactivity (hrefs, tooltips) in R code using igeoms, and exports SVG plots using gridSVG, but does not support showing/hiding data subsets (animint2 does).
  • The ggvis (dormant/archived) package defines a grammar of interactive graphics that relies on shiny’s reactivity model for most of its interactive capabilities (animint2 does not need a shiny server). Like vegawidget/vegalite in R and Vega-Altair in Python, it uses Vega but does not support the interactive clickSelects/showSelected keywords (animint2 does).
  • Interlinked plots are supported by Holiviz, but “not all interactivity will work” when sharing on the web (local python required).
  • plotly and ggiraph support
    • some client-only interactions (without a shiny server, like animint2),
    • usage with a shiny server (calculate something based on what data points the user selected, animint2 does not support this),
    • different APIs for interaction (not as simple/powerful as the clickSelects/showSelected keywords supported by animint2). For example plotly uses highlight/filter events which are compatible with other htmlwidgets (animint2 is not compatible with htmlwidgets).
    • customization via writing JavaScript/CSS (animint2 R ggplot API does not require writing JavaScript/CSS).
    • mostly interacting with a single plot (animint2 emphasizes interactions between multiple different plots linked together via selection variables = common column names/values across data sets). Although there are some documented uses of plotly with multiple linked plots (for example see Client-side linking chapter of plotly book).
  • loon provides interactive graphics using the tcltk R package, and is great for exploratory graphics, but does not support the interactive clickSelects/showSelected keywords (animint2 does).
  • RIGHT (archived), htmlwidgets, and DC (JavaScript not R) implement interactive plots for some specific plot types (animint2 uses the multi-layered grammar of graphics so is not limited to pre-defined plot types).
  • Tableau, PowerBI, and Superset have interactive visualizations/dashboards with pre-defined chart types (not multi-layer). In contrast animint2 has multiple layers, each with specific interactions.

For even more related work see The animint JCGS paper by Sievert et al (2018), the Graphics and Web technologies task views on CRAN, and Visualization design resources from the UBC InfoVis Group.

GSOC coding project: new animint2 features + gallery

The goal of this GSOC project is to implement new features for animint2 in order to

  • layout ggplots in a HTML table, using rowspan and colspan so that, for example, one plot can be rendered to the left of two plots stacked on top of each other.
  • port the gallery from the NAU rcdata server (~50 data viz with links to R source code), to the new GitHub Pages gallery. This builds on previous work by Nhi Truong in GSOC’24, see related issues/PRs:
  • automatic generation of interaction prompts. It would be great to have a little question mark (?) icon next to each plot, when clicked, we show bullet points that list what interactions are possible with this plot. One bullet point per clickSelects. For example, “Click point to select country” or “Click rect to select year.” use driver.js to make a guided tour of possible interactions.
  • animint(video=”http://…”) shows link to video which shows typical interactions. create video for each viz in gallery, then redo each viz, adding video link to each one. issue#151

An ideal contributor project will also plan to write some tests and documentation (vignette, web page, blog example 1, blog example 2).

  • tests and bugfix for geom_abline which does not render correctly in some situations, for example Kernel space features plot on Ch12-SVM in Animint2 Manual.
  • Previously Faizan implemented updating of axes/legends after changing the currently displayed data subset. Currently the computations are done in the compiler but there are some limitations, so it would be preferable to move the computations to the renderer. See issue, move scale range calculation to renderer.
  • fixing any of the other issues.

Any other ideas for improving Animint are welcome, as long as they can fit in the 3-month coding time frame.

Expected impact

Animint2 already provides useRs with some unique features for interactive data visualization. At the end of GSOC, the animint2 package will be easier to maintain, and have even more features, tests, documentation, and gallery examples.

Frequently Asked Questions

Does a contributor need to know both JavaScript and R?

YES. If you don’t know JavaScript then I suggest you read some tutorials, e.g. Mozilla JavaScript basics, W3Schools, mbostock’s D3 examples.

Mentors

Please get in touch with EVALUATING MENTOR Toby Dylan Hocking <[email protected]> and Yufan Fei <[email protected]> after completing at least one of the tests below.

Tests

Do one or several — doing more hard tests makes you more likely to be selected.

  • Easy: do one of the exercises listed in one of the chapters of the animint2 Manual, and upload your visualization to the web using animint2pages. Include a link to your rendered data viz along with your R source code. Even better: use animint2 to visualize some data from your domain of expertise. Show an example of an error that you see when animint2 is loaded/attached at the same time as standard ggplot2.
  • Medium: translate an example of the animation package into an Animint. Do not do one of the examples that has already been ported. Post a link to your result on the Ports of animation examples page on the Animint wiki.
    • look at source code of one of the animation package functions e.g. grad.desc() for a demonstration of the gradient descent algorithm. Translate the for loops and plot() calls into code that generates data.frames. In the grad.desc() example, there should be one data.frame for the contour lines, one for the arrows, and one for the values of the objective/gradient at each iteration.
    • Use the data.frames to make some ggplots. In the grad.desc() example, there should be one ggplot with a geom_contour and a geom_path, and another ggplot with a geom_line that shows objective or gradient value versus iteration, and a geom_tallrect in the background for selecting the iteration number.
    • Make a list of ggplots and pass that to animint2dir. For the grad.desc() example the plot list should be something like list(contour=ggplot(), objective=ggplot(), time=list(variable=”iteration”, ms=2000)).
  • Medium-hard: first read about how to create a new gallery, then create one that organizes all of the data viz from the Ports of animation examples page.
  • Hard: write a testthat unit test based on one of your Animint visualizations. Fork animint and add a renderer test (using animint2HTML) to tests/testthat/test-renderer-YOUR-TEST.R, then send us a Pull Request. Upload a screencast to youtube that shows you executing your test from the R command line (make sure to show two windows, a remote-controlled browser window rendering the data viz, and the R script/terminal that executes the test code).

Solutions of tests

Contributors, please post a link to your test results here.

Please do not edit this footer. Instead click Edit in the top right.

Add a custom sidebar
Clone this wiki locally