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)

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