Interactive graphics for genetic data

Karl Broman

Biostatistics & Medical Informatics, University of Wisconsin – Madison

kbroman.org
github.com/kbroman
@kwbroman

slides: bit.ly/auck2016

correlation matrix + scatter plots

2

3

daviddeen.com

4

Intercross

5

Genome scan for QTL

6

Genome scan for QTL

6

Genome-scale phenotypes

7

 

8

 

9

summary + details

10

people are busy

11

reports to collaborators

12

teaching

13

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

14


<!doctype html>
<html> <head>
<title>Example html</title>
<style>body { font-family: sans-serif; }</style>
</head>

<body>
<h2>Example html</h2>

<p>Learn more at
<a href="http://w3schools.com/html">w3schools</a>.
</p>

</body>
</html>

15


<svg height="100" width="200">

<circle cx="45" cy="45" r="40"
 stroke="black" stroke-width="3"
 fill="slateblue" opacity="0.5"/>

<rect x="50" y="50" width="100" height="40"
 stroke="black" stroke-width="2"
 fill="Orchid" opacity="0.5"/>

</svg>

16


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" })

17


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" })

17


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" })

17


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" })

17

JSFiddle is awesome!

18

Coffeescript is awesome!

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

height = options?.height ? 500

19

Coffeescript is awesome!

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

height = options?.height ? 500

19

htmlwidgets is awesome!

20

 

Easy or flexible?

21

 

Why not Shiny, Plotly, rbokeh, or Vega?

22

Interactive eQTL plot

23

R/qtlcharts   kbroman.org/qtlcharts

24

R/qtlcharts   kbroman.org/d3panels

25

Lessons

26

Summary

27

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

28

slides:   bit.ly/auck2016  

kbroman.org

github.com/kbroman

@kwbroman

kbroman.org/qtlcharts

29