Interactive graphics for genetic data

Karl Broman

Biostatistics & Medical Informatics, University of Wisconsin – Madison

kbroman.org github.com/kbroman @kwbroman

slides: bit.ly/Broman2015-12

Why aren’t all of our graphs interactive?

1994

Bandwidth = 1.00

code | plotframe

1984

wikipedia.org

Why? summary + details

code | data

daviddeen.com

Intercross

Genome scan for QTL

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

Why not?

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.


svg.selectAll("empty")
   .data(my_data)
   .enter()
   .append("circle")
   .attr("cx", function(d) { return d.x })
   .attr("cy", function(d) { return d.y })
   .attr("r", 3)
   .attr("fill", function(d,i) {
        if(sex[i]=="male") return "gray"
        return "white" })


svg.selectAll("empty")
   .data(my_data)
   .enter()
   .append("circle")
   .attr("cx", function(d) { return d.x })
   .attr("cy", function(d) { return d.y })
   .attr("r", 3)
   .attr("fill", function(d,i) {
        if(sex[i]=="male") return "gray"
        return "white" })


svg.selectAll("empty")
   .data(my_data)
   .enter()
   .append("circle")
   .attr("cx", function(d) { return d.x })
   .attr("cy", function(d) { return d.y })
   .attr("r", 3)
   .attr("fill", function(d,i) {
        if(sex[i]=="male") return "gray"
        return "white" })


svg.selectAll("empty")
   .data(my_data)
   .enter()
   .append("circle")
   .attr("cx", function(d) { return d.x })
   .attr("cy", function(d) { return d.y })
   .attr("r", 3)
   .attr("fill", function(d,i) {
        if(sex[i]=="male") return "gray"
        return "white" })

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.

Coffeescript is awesome!

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

height = options?.height ? 500

htmlwidgets is awesome!

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-left 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 kbroman.org/d3panels

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

htmlwidgets to drive JS-based interactive graphs from R.
RStudio’s Shiny and ggvis are also really exciting.
Write modular, reusable tools rather than scripts
R/qtlcharts, an R package for interactive graphs for QTL data

Acknowledgments

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.

Śaunak Sen		Epidemiology & Biostatistics, UC-San Francisco

Edgar Spalding Candace Moore Logan Johnson		Botany, UW-Madison

slides: bit.ly/Broman2015-12

kbroman.org

github.com/kbroman

@kwbroman

kbroman.org/qtlcharts