Interactive graphics for teaching

Karl Broman

Biostatistics & Medical Informatics, University of Wisconsin – Madison

kbroman.org github.com/kbroman @kwbroman

slides: bit.ly/Bro2014-11b

Inbred mice

Product of many generations of matings between siblings
Effectively homozygous everywhere
Valuable for biomedical research generally, by eliminating genetic variation
Valuable for genetics research, as they allow construction of large experimental crosses

Inbred mice

Human vs mouse

daviddeen.com

Intercross

Genome scan for QTL

Genome-scale phenotypes

Issues

time

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

Summary

Bulleted lists

easy to create
not very exciting or memorable

Illustrations and graphs

more interesting; more memorable
can convey complex ideas

Simple animations

add interest
help guide students’ focus

Interactive graphics

creation requires specialized skills
fun to play with
enable data exploration
exploring → learning

The blackboard is still an important option

Resources

D3 by Mike Bostock

CoffeeScript by Jeremy Ashkenas

D3 tutorials (and book) by Scott Murray

Eloquent JavaScript by Marijn Haverbeke

CoffeeScript book by Trevor Burnham

slides: bit.ly/Bro2014-11b

kbroman.org

github.com/kbroman

@kwbroman