### get knitr just the way we like it knitr::opts_chunk$set( message = FALSE , warning = FALSE , error = FALSE , tidy = FALSE , cache = FALSE #, results = 'asis' , fig.width = 8 , fig.height = 4 )
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)
.
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
.
````r
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") )
)
)
```
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.