2 July 2015

The Problem

ROC Curves in Medicine

ROC Curves - Briefly

A Solution

CI Example 0.00 0.10 0.25 0.50 0.75 0.90 1.00 0.00 0.10 0.25 0.50 0.75 0.90 1.00 False positive fraction True positive fraction

The Code

library(plotROC)

roc.ci <- calculate_roc(ex.data$M1, ex.data$D, 
                        ci = TRUE, alpha = 0.05)
ci.rocplot <- ggroc(roc.ci, label = "CI Example", ci = TRUE)

cat(
  export_interactive_roc(ci.rocplot, 
                         prefix = "aci", 
                         omit.d3 = TRUE)
)

plot_journal_roc(ci.rocplot)

Multiple ROC Curves

0.00 0.10 0.25 0.50 0.75 0.90 1.00 0.00 0.10 0.25 0.50 0.75 0.90 1.00 1 - Specificity Sensitivity A B C

The Process

Steps to Interactive Graphics

  1. Raw data

    ##           mpg  hp
## Mazda RX4  21 110
  2. Statistical transformation/analysis: {x: .5, y: .5}
  3. Rendering

  4. Modify rendered elements in browser

ggplot2 to svg

ggplot(mtcars, aes(mpg, hp)) + geom_point(size = 5)
grid::grid.force()
pts <- grid::grid.ls(print = FALSE)$name %>%
  grep("geom_point.points", ., value = TRUE)
gridSVG::grid.garnish(pts, cyl = paste(mtcars$cyl), group = FALSE)
gridSVG::grid.export(NULL, prefix = "mt1")$svg
100 200 300 10 15 20 25 30 35 mpg hp

Not a .png! Generates svg code interpreted by the browser

Manipulate the svg with d3.js

  • d3.js concepts:
    • Select visual elements
    • Get/modify attributes
    • smooth transitions
    • … in response to events/data
var points = d3.selectAll("[id^='mt1geom_point.points.279.1.']")
points.on("click", function(){
  // do something 
  alert("cyl: " + d3.select(this).attr("cyl"));
})

Click a point on the previous page to display the number of cylinders

Changing attributes, transitions

0 100 200 300 400 500 0 10 20 30 40 50 mpg hp

Other Useful Applications

Kaplan-Meier Curves

132 129 129 123 121 115 112 110 106 103 96 85 80 75 66 64 62 59 52 46 42 41 40 36 35 32 31 30 28 25 22 21 21 21 19 18 17 15 14 14 13 12 11 10 10 9 8 8 8 8 8 8 7 5 5 4 4 4 3 3 3 3 3 3 3 3 90 90 90 87 86 83 81 80 80 77 75 71 67 61 59 54 53 49 47 43 41 40 36 31 29 27 27 27 25 23 23 22 22 21 17 16 13 13 12 12 12 12 11 10 10 9 8 8 4 4 3 3 3 3 2 2 2 2 2 2 2 2 2 1 1 1 0.00 0.25 0.50 0.75 1.00 0 250 500 750 1000 time y factor(sex) a a 1 2

Transitioning a Line

0.00 0.25 0.50 0.75 1.00 0 250 500 750 1000 time y
Overall
Male
Female

Lessons Learned

Tips

  • Bind data to svg elements with grid.garnish(key = value)

    • extract with

      .attr("key")
  • Create hidden graph elements in R (alpha = 0),

    • show them interactively

      .attr("opacity", 1)
  • Height and width attrs of panel.background.rect useful for creating d3 scales
  • Use fig.keep='none', results = 'asis' in knitr

Other Approaches

htmlwidgets, ggvis, qtlcharts, animint, rCharts, plotly ggplot2+gridSVG shiny
User only writes R Standalone document Stuck with libs visual identity No recalculations in R Look of R/ggplot2 Standalone document No recalculations in R Some JS needed User only writes R Can do R computations Needs shiny server transitions?

Summary

  • Use statistical and rendering power of R then create SVG for use in browser
    • Visual consistency across print and web media
  • Use svg modification power of d3.js to provide interactivity
    • Requires writing a bit of JS
    • Good way to learn d3

Path forward

  • Create R packages to accomplish specific task, e.g. plotROC, (plotKM?)
  • Abstract some of these ideas to make something more broadly useful

Acknowledgements