Interactive Graphics

Michael Sachs

8 March 2018

What are they?

Interactive graphics

gapminder

Why use them?

Compared to static figures/tables

Illustrate concepts

loess

loess

Reduced cognitive burden

\(\rightarrow\) enhances viewer’s understanding + insight

Static gapminder is hard to absorb

Information density/access

Explore data

tour

tour

Enhance standard graphs

Inf 1.7 1.2 0.9 0.7 0.3 0.2 -0.1 -0.5 -1.8 -1.7 -1.1 -1 -0.9 -0.9 -0.8 -0.7 -0.7 -0.6 -0.6 -0.5 -0.5 -0.5 -0.4 -0.3 -0.3 -0.2 -0.2 -0.2 -0.2 -0.1 -0.1 -0.1 0 0 0 0 0 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.2 0.2 0.2 0.2 0.2 0.2 0.2 0.2 0.3 0.3 0.3 0.3 0.3 0.3 0.3 0.3 0.3 0.4 0.4 0.4 0.4 0.4 0.5 0.5 0.6 0.6 0.6 0.7 0.7 0.7 0.7 0.7 0.7 0.8 0.8 0.8 0.9 0.9 0.9 0.9 0.9 1 1 1.1 1.1 1.2 1.2 1.3 1.3 1.4 1.4 1.5 1.5 1.5 1.5 1.6 1.7 1.7 1.7 1.7 1.7 1.7 1.8 1.8 2.4 0.00 0.10 0.25 0.50 0.75 0.90 1.00 0.00 0.10 0.25 0.50 0.75 0.90 1.00 False positive fraction True positive fraction

Static version

Where do we view them?

Web browser

Servers and browsers

A static web page

Servers and browsers (2)

A static web page

Servers and browsers (3)

A static web page

Servers and browsers

A dynamic web page

SVG

“Scalable Vector Graphics”

A standardized markup format for describing shapes:

svg

svg

How do we make them?

Rendering

<symbol id="gridSVG.pch19" viewBox="-5 -5 10 10" overflow="visible">
          <circle cx="0" cy="0" r="3.75"/>
</symbol>

Modify rendered elements

d3.select("gridSVG.pch19")
  .move(Math.random());

Data Driven Documents

d3js.org

A number of toolkits have spun off based on d3.js

Manage data in R, send it to a toolkit to do the work

Shiny

shiny.rstudio.com

Let R do all the work, display in it a browser

My approach

0 100 200 300 400 500 0 10 20 30 40 50 mpg hp

Examples (1)

library(plotROC)

p1 <- ggplot(test, aes(d = D, m = M1)) + geom_roc()
cat(export_interactive_roc(p1, 
                        prefix = "b", omit.js = TRUE))
Inf 1.7 1.2 0.9 0.7 0.3 0.2 -0.1 -0.5 -1.8 -1.8 -1.7 -1.1 -0.9 -0.9 -0.7 -0.7 -0.7 -0.6 -0.6 -0.6 -0.5 -0.5 -0.4 -0.4 -0.4 -0.4 -0.4 -0.4 -0.3 -0.3 -0.2 -0.2 -0.2 -0.2 -0.1 -0.1 -0.1 -0.1 0 0 0 0 0 0.1 0.1 0.1 0.2 0.2 0.2 0.2 0.2 0.2 0.3 0.3 0.3 0.3 0.3 0.3 0.3 0.4 0.4 0.4 0.5 0.5 0.5 0.6 0.6 0.7 0.7 0.7 0.8 0.8 0.8 0.9 0.9 0.9 0.9 0.9 0.9 0.9 1 1 1 1.1 1.1 1.1 1.2 1.2 1.2 1.2 1.3 1.3 1.3 1.3 1.4 1.5 1.5 1.5 1.5 1.6 1.7 1.7 1.7 1.7 1.9 1.9 1.9 2.1 2.4 0.00 0.10 0.25 0.50 0.75 0.90 1.00 0.00 0.10 0.25 0.50 0.75 0.90 1.00 False positive fraction True positive fraction

Examples (2)

library(gginteractive)

spans <- seq(.3, 1.5, by = .1)
p4 <- ggplot(mtcars, aes(x = wt, y = mpg)) +
  geom_point(size = 2) +
  lapply(spans, function(x) geom_smooth(method = "loess", span = x, se = FALSE))

controls <- 0:length(spans)
names(controls) <- c("none", spans)
p4 %>% mesh_geom("smooth", attr = "opacity",
                 control = radio(controls))
10 15 20 25 30 35 2 3 4 5 wt mpg
none 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1 1.1 1.2 1.3 1.4 1.5

Examples (3)

p2 <- ggplot(gapminder, aes(x = gdpPercap, y = lifeExp, color = continent, size = pop)) +
         geom_point()  + scale_x_log10() 

p2 <- p2 %>% mesh_alpha(geom = "point", variable = "year", on = radio0)
p2
40 60 80 1e+03 1e+04 1e+05 gdpPercap lifeExp continent Africa Americas Asia Europe Oceania pop 2.50e+08 5.00e+08 7.50e+08 1.00e+09 1.25e+09
1952 1957 1962 1967 1972 1977 1982 1987 1992 1997 2002 2007 Any

Examples (4)

132 129 129 123 121 115 112 110 106 103 96 85 80 75 66 64 62 59 52 46 42 41 40 36 35 32 31 30 28 25 22 21 21 21 19 18 17 15 14 14 13 12 11 10 10 9 8 8 8 8 8 8 7 5 5 4 4 4 3 3 3 3 3 3 3 3 90 90 90 87 86 83 81 80 80 77 75 71 67 61 59 54 53 49 47 43 41 40 36 31 29 27 27 27 25 23 23 22 22 21 17 16 13 13 12 12 12 12 11 10 10 9 8 8 4 4 3 3 3 3 2 2 2 2 2 2 2 2 2 1 1 1 0.00 0.25 0.50 0.75 1.00 0 250 500 750 1000 time survival factor(sex) a a 1 2

Conclusion

Summary

What

Where

Why

Interesting applications:

How

Advice

For making your own interactive figures:

How do you plan to share?

What is the end product?

There are many tools out there, find the right one that fits your needs