Animation

Rggobi

Shiny

d3.js

ggvis

Animint

• Created by Toby Hocking (McGill University)

• Development through Google Summer of Code

Goal:

Features

New Aesthetics

• clickSelects : changes the selected element in a plot
  
  
• showSelected : shows only data corresponding to the selected element
  
  
  
• time: animate the plot according to this variable
  
  
• duration: smooth transitions of these variables

Code Comparison

animint

geom_point(aes(x=fertility.rate, y=life.expectancy, 
               clickSelects=country, showSelected=year, 
               colour=region, size=population),
           data=WorldBank)

d3

svg.selectAll("circle")
  .data(one_year)
  .enter().append("circle")
  .attr("cx", function(d){ return x_scale(d.fertility_rate); })
  .attr("cy", function(d){ return y_scale(d.life_expectancy); })
  .attr("r", function(d){ return size_scale(d.population); }
  .style("fill", function(d){ return color_scale(d.region); })

Linked Plots with Animint

library(animint)
data(WorldBank)

ts <- ggplot() + make_tallrect(WorldBank, "year")+
           geom_line(aes(year, life.expectancy, group=country,
                         colour=region, clickSelects=country),
                     data=WorldBank, size=4, alpha=3/5),
scatter <- ggplot() + make_text(WorldBank, 5, 80, "year") + 
   geom_point(aes(life.expectancy, fertility.rate, 
                  clickSelects=country, showSelected=year, 
                  colour=region, size=population, key=country), 
              # key aesthetic for animated transitions!
              data=WorldBank)+
   geom_text(aes(life.expectancy, fertility.rate,
                  label=country, showSelected=country,
                  showSelected2=year, key=country), 
              #also use key here!
              data=WorldBank), 
viz <- list(ts = ts, scatter = scatter, 
            time = list(variable="year",ms=3000), 
            duration = list(year=1000))
gg2animint(viz, open.browser=FALSE)

Animated plot

Creating an animint plot

USpolygons <- map_data("state")

map <- ggplot() + 
  geom_polygon(aes(x=long, y=lat, group=group, clickSelects=state),
               data=USpolygons, fill="black", colour="grey") +
  geom_segment(aes(x=startLong, y=startLat, xend=endLong, yend=endLat,
                   showSelected=year),
               colour="#55B1F7", data=UStornadoes) + 
  theme(axis.line=element_blank(), axis.text=element_blank(), 
        axis.ticks=element_blank(), axis.title=element_blank()) + 
  theme_animint(width=970, height=400) # plot dimensions
map

Creating an animint plot

ts <- ggplot() + 
  geom_bar(aes(year, count, clickSelects=year, showSelected=state),
           data=UStornadoCounts, stat="identity", position="identity") + 
  ylab("Number of Tornadoes") + 
  xlab("Year") + 
  theme_animint(width=500, height=400) # plot dimensions
ts

Creating an animint plot

tornado.bar <- list(map = map, ts = ts) 

gg2animint(tornado.bar, out.dir = "tornado-bar", open.browser=FALSE)

Plot Output

Adding dynamic plot labels

UStornadoCounts <-
  ddply(UStornadoes, .(state, year), summarize, count=length(state))
# Count the number of tornadoes in each state, each year

map <- map + make_text(UStornadoCounts, x=-100, y=50, 
                       label.var="year", format="Tornadoes in %d")

ts <- ts + make_text(UStornadoes, x=1980, y=200, 
                     label.var="state")

tornado.bar <- list(map = map, ts = ts) 
gg2animint(tornado.bar, out.dir = "tornado-bar2", open.browser=F)

Plot Output

Animating with animint

time <- list(variable="year", ms=1500) 
  # new part of the list passed to gg2animint().

tornado.anim <- list(map=map, ts=ts, time=time) 
# pass the time object in as another object in the main list. 

gg2animint(tornado.anim, out.dir = "tornado-anim", open.browser=FALSE)

Plot Output

ggplot2 Features

Supported

• Most geoms (except dotplot, rug, smooth, boxplot, bin2d)
  These can be made with other geoms that do work, plus summary functions
• Color, alpha, linetype, axis scales, area, size
  Shape is not supported
• Some theme elements (removing axes, ticks, etc.)
  Other theme elements can be set using custom css files

Future work

• Shiny bindings to integrate animint into Shiny applets
• Custom selection bindings:
  Set selected element aesthetics (color, alpha, size, fill, linetype) separately
• Improve data handling so that large data does not take prohibitively long to load
• Zoom/update axes in response to data subsetting
• Resize plots interactively
• Multiple selection
• Interactive legends
• Mouseover aesthetic to allow for more mouseover control