GSoC 2026
R project for statistical computing — Project Ideas

Animated interactive ggplots

View Original

NotificationsYou must be signed in to change notification settings - Fork 0

Animated interactive ggplots

49 revisions

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

showSelected=variablemeans that only the subset of the data that corresponds to the selected value ofvariablewill be shown. - clickSelects=variablemeans that clicking a plot element will change the currently selected value ofvariable.

Toby Dylan Hocking initiated the project in 2013. Contributors during previous GSOC projects are 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), Jocelyn Chen (2023), Siddesh Deodhar (2024), Suhaani Agarwal (2025), Biplab Sutradhar (2025).

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

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) orgridSVGbut using these to create such a visualization requires knowledge of Javascript (animint2 designers write only R/ggplot2 code). - The svgmapspackage 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 onshiny’s reactivity model for most of its interactive capabilities (animint2 does not need a shiny server). Likevegawidget/vegaliteit usesVegabut does not support the interactive clickSelects/showSelected keywords (animint2 does). - plotlysupports client-side interactions without a shiny server, but does not support the interactive clickSelects/showSelected keywords (animint2 does). Theplotly performance pagedoes not mention chunking (animint2 supports dividing input data into smaller TSV files, so the user only has to download data that is clicked on), although that could be implemented with a shiny server (animint2 does not require any special server, so can be deployed to any static webserver like GitHub Pages). - loonprovides 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, andDC(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). - altairis a python package which provides similar functionality as animint2, but its compiler lacks chunking (dividing input data into smaller TSV files, so the user only has to download data that is clicked on). JupyterChart widget can be used with altair for a similar effect, as long as server with Python kernel is available (animint2 does not require any special server, so can be deployed to any static webserver like GitHub Pages). - Nebulaexamplesis a JavaScript framework, with more complex interactive grammar than clickSelects/showSelected. - G2examplesdo not show multiple linked views, but do show interaction in one plot. - 5 shiny apps hosted for freeon shinyapps.io, whereas unlimited number of animints hosted for free on GitHub Pages (max 1GB data for each).

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

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

draw holes in a polygon, usinggeom_polygon(aes(subgroup))

. - Move getCommonChunk() to C++for big constant factor speedups at data viz compile time. - 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. - Compute stats/positions in JavaScript, after applying showSelected. Currently stats/positions are not used, and there is an issue for removing them from the documentation to avoid confusion. Some stats like sum or mean could be interesting to implement with multiple selection variables, like howgeom_label_aligned

adjusts label positions after showSelected variables are applied.

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

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

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.

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

Please get in touch with EVALUATING MENTOR Toby Dylan Hocking toby.hocking@r-project.org and Yufan Fei yufanfei8@gmail.com after completing at least one of the tests below.

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 The GitHub deployment steps. 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 packageinto an Animint. Do not doone of the examples that has already been ported. Post a link to your result on thePorts of animation examplespage 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 ageom_path

, and another ggplot with ageom_line

that shows objective or gradient value versus iteration, and ageom_tallrect

in the background for selecting the iteration number. - Make a list of ggplots. For the grad.desc() example the plot list should be something like animint(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 thePorts of animation examplespage. - Hard: write a testthat unit testbased 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 Vimeo that shows you executing your test from the R command line. Make sure toinstall.packages("chromote")

  • use tests_init()

to start the remote-controlled web browser. - use animint2HTML()

to get the HTML rendered by the animint.js code.- parse the result to verify that the data are rendered to SVG. (look at other test-renderer-* files for examples)

  • show two windows,
  • a remote-controlled browser window rendering the data viz,
  • and the R script/terminal that executes the test code.

IMPORTANT: please avoid using AI code generation tools (Copilot, ChatGPT, etc) for this project. Please read contributor guidelines for this project. If your test results seem to be AI-generated, then you will probably not be selected as a contributor for this project.

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

Command Palette

Search for a command to run...