Week 11| dimple as htmlwidget

htmlwidgets News This Week

Just do this Github search, and you’ll likely see all the newest and latest. I would like to highlight the very thorough work by

Thomas Siegmund on D3TableFilter

It is well-documented and full of nice Shiny examples, so I encourage you to check it out.

This Week’s Widget - rcdimple | rCharts dimple

I fell in love with dimple the moment I saw it (not long after its May 21, 2013 initial commit). So, way, way back on June 19, 2013 I added dimple to rCharts in this commit. Since then, my love for dimple is as strong as the day of first sight. I think some folks know, but Ramnath Vaidyanathan has big plans for an htmlwidgets version of rCharts called rCharts2. I just couldn’t wait any longer to make this little rcdimple part public.

For those who might not like my implementation of dimple, please see this other version dimpler and also let me know what part you don’t like about rcdimple.

Getting Started

rcdimple has not achieved CRAN status yet, so for now we will install with devtools::install_github as shown in the code below. Lots and lots of demos are in the package.

devtools::install_github("timelyportfolio/rcdimple")
library(rcdimple)
demo(dimple)

Vignette Examples

Every package needs a vignette, so I will make this the first rcdimple vignette.

Introduction to rcdimple

rcdimple is an htmlwidget that leverages the upcoming common methods and conventions of rCharts2 to make interactive plotting easy and consistent. Many of these ideas evolve from lessons learned with the rCharts package from Ramnath Vaidyanathan who also authored much of the htmlwidgets package. Also, you might notice some bits and pieces of goodness from lattice, ggplot2, and base graphics. For a nearly complete set of examples from the dimple examples, do demo(dimple).

Examples with r-graph-catalog

As a quick introduction to rcdimple, let’s use rcdimple to make some of the plots from r-graph-catalog by Joanna Zhao and Jennifer Bryan which recreates most of the plots in “Creating More Effective Graphs” by Naomi Robbins. Yes, this is a reproduction of a reproduction, but it should be insightful. We’ll concentrate on those graphs tagged as “good graphs”, and if successful lines of code to create these interactive versions will be <= lines of code to make the ggplot2 versions.

# try to do some examples with rcdimple
#   use
#    http://shinyapps.stat.ubc.ca/r-graph-catalog/
#    https://github.com/jennybc/r-graph-catalog

#devtools::install_github("timelyportfolio/rcdimple")

library(rcdimple)
library(pipeR)  #could use magrittr if you like that better
####figure1.2####
my_data <- data.frame(
  variable = c("A", "B", "C", "D", "E"),
  value = c(23, 22, 19.5, 18.5, 17))

my_data %>>%
  dimple( variable ~ value, type = "bubble" ) %>>%
  xAxis( type = "addMeasureAxis", hidden = TRUE, ticks = 1, title = ""  ) %>>%
  yAxis(
    type = "addCategoryAxis"
    , orderRule = rev(as.character( my_data$variable ) )
    , showGridlines = T
  ) %>>%
  default_colors( gray.colors(2) ) %>>%
  add_title( "Fig 1.2 Similar Pie Wedges: Dot Plot")

####figure2.2####
my_data <- data.frame(
  variable = factor(paste("Item", 1:10), levels = paste("Item", 1:10)),
  value = c(7.0, 12.0, 8.0, 13.0, 7.5, 12.5, 8.5, 13.5, 6.5, 11.5)/100)

my_data %>>%
  dimple( variable ~ value, type = "bubble" ) %>>%
  xAxis( type = "addMeasureAxis", title = "" ) %>>%
  yAxis(
    type = "addCategoryAxis"
    , title = ""
    , orderRule = levels(my_data$variable)
    , showGridlines = T
  ) %>>%
  default_colors( gray.colors(2) ) %>>%
  add_title( "Fig 2.2 Structured Data Set: Dot Plot" )

####figure2.4####
my_data <- data.frame(
  variable = c("A", "B", "C", "D"),
  value = c(0.2, 0.2, 0.2, 0.4))

my_data %>>%
  dimple( x = "variable", y = "value", type = "bar"  ) %>>%
  xAxis( orderRule = "variable" ) %>>%
  default_colors( gray.colors(4)[2:3] ) %>>%
  add_title( html =
   "<div style='text-align:center;width:100%'>
      <b style = 'font-size:130%;'>Fig 2.4 Three Dimensinal Pie Data:<br/>
        Two Dimensional Bar Chart
      </b>
    </div>"
  )

####figure2.12####
my_data <- data.frame(
  year = factor(77:86),
  us = c(1320, 1280, 1350, 1400, 1470, 1420, 1440, 1580, 1520, 1610),
  japan = c(405, 405, 480, 500, 490, 495, 480, 480, 500, 530),
  germany = c(220, 225, 290, 320, 300, 280, 260, 240, 220, 225),
  other = c(1280, 1195, 1310, 1390, 1270, 1200, 1100, 1100, 1040, 1080))

my_data %>>%
  dimple( other~year, type = "bar" ) %>>%
  xAxis( title = "Year" ) %>>%
  yAxis( outputFormat = ",.0f", title = "Millions of Gallons" ) %>>%
  default_colors( gray.colors(4)[2:3] ) %>>%
  add_title( "Fig 2.12 Energy Data: All Other OECD" )

####figure2.14####
library(curl)
library(reshape2)
my_data_wide <- read.delim(
  curl(paste0(
    "https://raw.githubusercontent.com/jennybc/"
    ,"r-graph-catalog/master/figures/"
    ,"fig02-14_playfair-s-balance-of-trade-data/"
    ,"fig02-14_playfair-s-balance-of-trade-data.tsv"
  ))
)

# convert my_data into long format
my_data_long <- melt(
  my_data_wide
  , id.vars = "year"
  , measure.vars = c("exports", "imports")
  , variable.name = "type"
  , value.name = "pounds"
)

my_data_long$year <- paste0(my_data_long$year,"-01-01")

my_data_long %>>%
  dimple( pounds ~ year, groups = "type", type = "line", width = 768 ) %>>%
  xAxis(
    type = "addTimeAxis"
    , inputFormat = "%Y-%m-%d"
    , tickFormat = "%Y"
    , timePeriod = htmlwidgets::JS('d3.time.years')
    , timeInterval = 20
    , title = "Year"
    , showGridlines = TRUE
    , fontFamily = "monospace"
    , fontSize = "100%"
  ) %>>%
  yAxis(
    ticks = 4
    ,title = "Millions of Pounds"
    , fontFamily = "monospace"
    , fontSize = "100%"    
  ) %>>%
  set_bounds( x = "10%", y = "10%", width = "80%", height = "75%") %>>%
  default_colors( list("black") ) %>>%
  add_title("Fig 2.14 Playfair's Balance-of-Trade Data") %>>%
(~d2_14)

Now, you might notice no labels and arrows. While it is possible, I’ll separate it out since it is not nearly as clean and easy as it should be. Hopefully, this will get easier and easier.

d2_14$x$options$tasks <- list(htmlwidgets::JS('
  function(){
    //this.widgetDimple should hold our chart
    var chart = this.widgetDimple[0];
    chart.svg.append("line")
      .attr("x1",chart.axes[0]._scale(new Date("1720-01-01")))
      .attr("x2",chart.axes[0]._scale(new Date("1730-01-01")))
      .attr("y1",chart.axes[1]._scale(1.05))
      .attr("y2",chart.axes[1]._scale(1))
      .style("stroke","black")
    chart.svg.append("text")
      .attr("x", chart.axes[0]._scale(new Date("1720-01-01")) )
      .attr("y", chart.axes[1]._scale(1.1) )
      .attr("text-anchor", "middle")
      .text("Imports to England")
    chart.svg.append("line")
      .attr("x1",chart.axes[0]._scale(new Date("1750-01-01")))
      .attr("x2",chart.axes[0]._scale(new Date("1760-01-01")))
      .attr("y1",chart.axes[1]._scale(.65))
      .attr("y2",chart.axes[1]._scale(.4))
      .style("stroke","black")
    chart.svg.append("text")
      .attr("x", chart.axes[0]._scale(new Date("1760-01-01")) )
      .attr("y", chart.axes[1]._scale(0.35) )
      .attr("dy", "0.6em")
      .attr("text-anchor", "middle")
      .text("Exports to England")
  }
'))
d2_14

htmlwidgets are composeable, so we can make fig2.15 fairly easily with some help from htmltools.

####fig2.15####
library(htmltools)
library(dplyr)

tagList(
  tags$div(
    d2_14
    ,dimple(
      imports_minus_exports ~ year
      , data = my_data_long %>>%
        group_by( year ) %>>%
        mutate( imports_minus_exports = diff( pounds ))
      , type = "line"
      , height = "250px"
      , width = 768
    ) %>>%
      xAxis(
        type = "addTimeAxis"
        , inputFormat = "%Y-%m-%d"
        , tickFormat = "%Y"
        , timePeriod = htmlwidgets::JS('d3.time.years')
        , timeInterval = 20
        , title = "Year"
        , showGridlines = TRUE
        , fontFamily = "monospace"
        , fontSize = "100%"
      ) %>>%
      yAxis(
        ticks = 4
        ,title = "Millions of Pounds"
        , fontFamily = "monospace"
        , fontSize = "100%"    
      ) %>>%
      set_bounds( x = "10%", y = "5%", width = "80%", height = "60%") %>>%
      default_colors( list("black") )
  )
)

Thanks

Thanks so much for all the work by

  • John Kiernander & PMSI-Analytics for dimple
  • Joanna Zhao and Jennifer Bryan for r-graph-catalog
  • Naomi Robbins for Creating More Effective Graphs that inspired r-graph-catalog
  • Ramnath Vaidyanathan and RStudio for htmlwidgets
  • all the contributors to R