Interactive graphics for high-dimensional genetic data

applied statistician

Intercross

Genome scan for QTL

Genome-scale phenotypes

Why? reports to collaborators

I write a lot of reports to collaborators, describing my analysis results and conclusions. It's hard to anticipate all possible questions that a collaborator might have. (“What gene is that?”) And you can only show so many pictures.

Including interactive graphs in a report allows my collaborators to answer a lot of their own questions on their own and to more fully explore their own data. And a single interactive graph can take the place of thousands of static ones.

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 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

Why? teaching

code | data

D3 is awesome!

You just need to learn html, css, svg, and javascript.

And don’t forget .enter()

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

I’m using D3, a javascript library for data visualization. (D3 stands for “data-driven documents.”)

This is one of the images that convinced me that I wanted to learn D3. There are lots of additional examples at the D3 gallery.

There’s a ton to learn, and it’s rather forbidding (and much of it is dull).

My most common mistake is to forget to include .enter(). No error is given, but nothing shows up in the plot.

JSFiddle is awesome!

Coffeescript is awesome!

blob.attr("x", (d) -> d.x)

height = options?.height ? 500

(I think maybe I’ve seen the Lego Movie too many times.)

I’m using CoffeeScript rather than javascript. It gets translated to javascript, and it’s a much nicer language.

Particularly nice are the light-weight anonymous functions. You’ll be writing a lot of anonymous functions in D3.

Also, there’s a simple syntax for handling null values, for things like options.

You can use jsfiddle with CoffeeScript (see the next slide).

Coffeescript is awesome!

blob.attr("x", (d) -> d.x)

height = options?.height ? 500

Interactive eQTL plot

Here’s my most fancy plot. But when I showed this to my collaborator, his first question was, “Where’s my favorite gene?” I needed to add a search box. Moral: These tools are not just for playing around; they need to address the scientific questions.

The top-left image shows inferred eQTL (sites in genome where genotype is associated with the expression of some gene). The y-axis corresponds to the genomic location of probes on a gene expression array. The x-axis corresponds to marker positions. Dots indicate that the genotypes at a particular marker are associated with the expression of a particular probe.

Hover over a point in the top-right to see all eQTL for a given probe. Click on a point to see the LOD curves across the genome for that probe: the association between that probe’s expression and genotype at each position in the genome.

Click on a marker in the lower LOD curve plot to see the corresponding phenotype-vs-genotype plot in the top-right.

code

R/qtlcharts kbroman.org/qtlcharts

R/qtlcharts panels

Issues

How can you write unit tests for graphing functions?
Scaling up to larger data sets

How best to store data on the back end?
Having more features than pixels
Handling > 10k features (or event handlers)

Have my desires overreached my abilities?

Summary

Interactive graphics require effort, but they

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

Visualizations must be tailored to the data and questions
D3 is rather low level, but it

Is totally flexible
Provides hours of enjoyment
Can provide other hours of frustration

Write modular, reusable tools rather than scripts
R/qtlcharts, an R package for interactive graphs for QTL data

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		Mount Sinai
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

slides: bit.ly/BioVis2014