Why aren’t all of our graphs interactive?

Karl Broman

Biostatistics & Medical Informatics, University of Wisconsin – Madison

www.biostat.wisc.edu/~kbroman

github.com/kbroman kbroman.wordpress.com @kwbroman

Example: density estimate

Bandwidth = 1.00

code | plotframe

Example: scatterplot

code | plotframe

Outliers can be easily identified, with the right interactive plot. In R, you can use identify(), but who remembers how to do it? Usually, I’ll say, “Hmm...I want to figure out which point has weight 1 > 30 and weight 2 < 25.”

Opportunities

Exploration

Tuning parameters
Identifying outliers
One fancy plot vs 1000 static plots

Reports for collaborators

Living documents!
Allow deeper exploration of the results
Cut down on simple questions?

Big Data

Don’t just rely on summary statistics
Greatly compressed information, but with access to the details
Zoom into dense figures
More exploration, more connections

Teaching

Cool things to look at and play with
Animated illustrations of key concepts
Demonstrate data exploration
Enable intro students to explore data

Reproducible reports

Sweave
Asciidoc [Example | Source | Glossary]
Markdown + knitr → R markdown (esp. in RStudio)

Attie project

~500 B6 x BTBR intercross mice, all knocked out for leptin

Genotypes at 2057 SNPs (Affymetrix arrays)
Gene expression in six tissues (Agilent arrays)

adipose
gastrocnemius muscle
hypothalamus
pancreatic islets
kidney
liver

Numerous clinical phenotypes

(e.g., body weight, insulin and glucose levels)

Collaboration with Alan Attie and colleagues

Many box plots

Many box plots, modernized

Many box plots, interactive

code | data

Barriers

We never learned how
It’s a hassle
No consistent platform
Journal articles are static

(and what else matters?)

Most statisticians are still creating terrible static plots

(even worse, obnoxious tables)

Barriers

We never learned how
It’s a hassle
No consistent platform
Journal articles are static

(and what else matters?)

Most statisticians are still creating terrible static plots

(even worse, obnoxious tables)

Options

XLisp-Stat
locator() and identify()
ggobi and cranvas
gWidgets
rpanel
Mondrian
Acinonyx (aka iPlots eXtreme)
RStudio’s manipulate() and Shiny
gridSVG
RGL
ggplot3?
googleVis
D3.js

http://bl.ocks.org/1136236

A lot to learn

The hardest part about learning D3 is that there are a whole pile of things that you need to understand simultaneously, and some of them are rather dull.

You need to learn the D3 library and also to code in JavaScript or CoffeeScript (a nicer language that is translated to JavaScript). And the way D3 works is by manipulating elements in an HTML file, particularly elements in an SVG object. (SVG stands for “scaleable vector graphics;” it’s an html-like way to specify an image.)

So you need to know HTML and SVG, and then also CSS (“cascading style sheets”), for controlling the style (e.g. color) of different HTML or SVG elements.

Particularly painful is that the different browsers behave somewhat differently, and you need to take that into account if you want your visualizations to be useable in any browser.

But it’s getting simpler

clickme package for R
healthvis for R
Vega (more high-level)
DexCharts (reuseable charts for D3)

All times, considered individually

Here we consider a phenotype measured over time, and perform QTL analysis with each time point individually, to seek genetic loci that affect the response. The data concern a set of 162 recombinant inbred lines.

The top-left plot is a “heat map” of the LOD scores for each time point at each genomic position. LOD scores are also colored to indicate the sign of the QTL effect, with red indicating that BB lines have larger phenotype values and blue indicating that AA lines have larger phenotype values. We consider only those (position, time) pairs with LOD > 1.

When you hover over a point in the top-left plot, the LOD curves for the corresponding time are shown below, and the phenotype averages and estimated QTL effect (across time) for the corresponding genomic position are shown to the right.

Click on a point to show pointwise confidence bands on the QTL effect (± 2 SE). (We require a mouse click, as otherwise the graph was painfully slow to refresh.)

code | data | separate view

Summary

For high-dimensional data, good visualizations are critical
Interactive graphics require effort, but they

Facilitate exploration
Are great collaborative tools
Enable summaries with access to the details

Visualizations must be tailored to the data and questions/goals
D3 (aka d3.js) is rather low level, but it

Is totally flexible (like R’s static graphics)
Provides hours of enjoyment
Can provide other hours of frustration

Acknowledgments: Data

Alan Attie Mark Keller		Biochemistry, UW–Madison
Brian Yandell		Statistics and Horticulture, UW–Madison
Christina Kendziorski Aimee Teo Broman		Biostatistics & Medical Informatics, UW–Madison
Eric Schadt		Pacific Biosciences of California
Danielle Greenawalt Amit Kulkarni		Merck & Co., Inc.

Edgar Spalding Candace Moore Logan Johnson		Botany, UW-Madison

Acknowledgments: Code

D3 and stack.js by Mike Bostock

D3 tutorials by Scott Murray

CoffeeScript by Jeremy Ashkenas

Eloquent JavaScript by Marijn Haverbeke

CoffeeScript book by Trevor Burnham

d3-tip by Justin Palmer