Interactive graphics for high-dimensional genetic data

Interactive graphics for
high-dimensional genetic data

Karl Broman

Biostatistics & Medical Informatics, University of Wisconsin – Madison

www.biostat.wisc.edu/~kbroman
github.com/kbroman
@kwbroman

Inbred mice

Intercross

eQTL 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, UW – Madison

Many box plots

Many box plots, modernized

Many box plots, interactive

code | data

Opportunities

Exploration

Tuning parameters
Identifying outliers
One fancy plot vs 1000 static plots

Reports/supplements

Living documents!
Allow deeper exploration of the results

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

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)

Trade-offs

Easy or flexible?

D3

http://mbostock.github.io/d3/talk/20111018/collision.html

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.

Correlation matrix

Interactive LOD curves

code | data

Interactive eQTL plot

code | data

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

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