Interactive Charts: htmlwidgets

This presentation

• Presentation: http://patilv.com/INRUG-InteractiveCharts
• Single page version of this presentation: http://patilv.com/INRUG-InteractiveCharts/allinone.html
• Created using R markdown and R-Studio
• GitHub repository for source : https://github.com/patilv/INRUG-InteractiveCharts

htmlwidgets, rCharts

• htmlwidgets: Ramnath Vaidyanathan, Kenton Russell, and RStudio

• rCharts (a transition to 2.0 using htmlwidgets is underway): Ramnath Vaidyanathan

• Provide the ability, from within R, to create, customize and publish interactive JavaScript (JS) visualizations
• JS is a computer programming language that can create interactivity using web browsers

• There are many pre-written JS libraries that make the process of creating visualizations easier.

install.packages("htmlwidgets")

Challenge in learning

• Different JS libraries developed independently - consistency in calls can at times be a challenge
• Customization for specific needs may require writing JS code

Learning approach

• Follow examples, questions, and issues presented in different venues
• Stick to few JS libraries which provide many choices of charts and become very familiar with them. Don’t forget that few have restrictions for commercial use.

Few Resources

• htmlwidgets
  • htmlwidgets’ site
  • Timelyportfolio’s challenge - A widget a week
  • Ryan Hafen’s gallery of htmlwidgets developed by different people
  • Search GitHub for htmlwidgets
• rCharts (A reboot to an htmlwidgets version is on the way)
  • rCharts’ website and its gallery of submissions from different people.
  • rCharts on GitHub and the issues posted there and on

A sampling of the several htmlwidget packages

Interactive tables	DT, formattable,datacomb, rpivotTable, rhandsontable, D3TableFilter, sortableR
Heatmaps	d3heatmap
Dimple	rcdimple
Tau Charts	taucharts
Metrics Graphics	metricsgraphics
Bokeh	rbokeh

Few more sample packages

streamgraph	streamgraph
Scatterplot matrices	pairsD3, scatterMatrixD3
Pan and Zoom graphs	svgPanZoom
Parallel Coordinate Charts	parcoords
Sequences Sunburst	sunburstR

Example 1: Interactive table

library(htmlwidgets)
suppressPackageStartupMessages(library(dplyr))
library(DT)# if (!require("DT")) install.packages('DT')
dt=datatable(iris, options=list(pageLength = 5))
saveWidget(dt,file = "dt.html",selfcontained = TRUE)

Example 2: Heatmap

head(mtcars)

	mpg	cyl	disp	hp	drat	wt	qsec	vs	am	gear	carb
Mazda RX4	21.0	6	160	110	3.90	2.620	16.46	0	1	4	4
Mazda RX4 Wag	21.0	6	160	110	3.90	2.875	17.02	0	1	4	4
Datsun 710	22.8	4	108	93	3.85	2.320	18.61	1	1	4	1
Hornet 4 Drive	21.4	6	258	110	3.08	3.215	19.44	1	0	3	1
Hornet Sportabout	18.7	8	360	175	3.15	3.440	17.02	0	0	3	2
Valiant	18.1	6	225	105	2.76	3.460	20.22	1	0	3	1

Example 2 continued: Heatmap

library(d3heatmap)#if (!require("d3heatmap")) devtools::install_github("rstudio/d3heatmap")
myheatmap=d3heatmap(mtcars,scale="column")
saveWidget(myheatmap,file = "myheatmap.html",selfcontained = TRUE)

Example 2 continued: Heatmap

Example 3: rcdimple: Many graph types available

See examples of different types here.

suppressPackageStartupMessages(library(rcdimple)) # demo(dimple) for tons of examples#if (!require("rcdimple")) devtools::install_github("timelyportfolio/rcdimple")
myirisplot=iris%>% dimple(x = "Sepal.Length",
  y = "Sepal.Width",
  groups = "Species",
  type = "bubble",width=600,height=380)%>% yAxis( overrideMin = 2)%>%
  add_legend()
saveWidget(myirisplot,file = "myirisplot.html",selfcontained = TRUE)

Example 3 continued

Example 4 grouped bar

gearam=mtcars%>%group_by(gear,am)%>%summarise(count=length(gear))
gearam$am<-ifelse(gearam$am==0,yes= "Auto",no= "Manual")
gearam

gear	am	count
3	Auto	15
4	Auto	4
4	Manual	8
5	Manual	5

Example 4 grouped bar: rcdimple: Many graph types available

mydimplebarplot=gearam%>%dimple(
    x = c("gear","am"), y = "count",
    groups = "am", type = "bar",width=600,height=390)%>%
   add_legend()
saveWidget(mydimplebarplot,file = "mydimplebarplot.html",selfcontained = TRUE)

Example 4 continued

Example 5: taucharts: Many graph types

library(taucharts)#if (!require("taucharts")) devtools::install_github("hrbrmstr/taucharts")
tauirisplot=iris %>% tauchart(height=500,width=800)%>% 
  tau_point(x="Sepal.Length",y="Sepal.Width",color="Species")%>%
  tau_tooltip(c("Sepal.Length", "Sepal.Width", "Species"))%>% 
  tau_guide_y(auto_scale=FALSE)%>% 
  tau_guide_x(auto_scale=FALSE)%>%tau_legend()
saveWidget(tauirisplot,file = "tauirisplot.html",selfcontained = TRUE)

Example 5 continued

Example 6: taucharts: Many graph types

gearam$gear=as.factor(gearam$gear)
gearbartauplot=tauchart(gearam)%>%tau_bar("gear","count","am")%>%
  tau_tooltip(c("gear", "am", "count"))%>% tau_legend()
saveWidget(gearbartauplot,file = "gearbartauplot.html",selfcontained = TRUE)

Example 6 continued

Example 7: metricsgraphics: Many graph types available

Scatter and line plots (time-series data), grids/facets of graphs, and connected graphs

#if (!require("metricsgraphics")) devtools::install_github("hrbrmstr/metricsgraphics")
library(metricsgraphics)
irismetricsplot=iris %>% mjs_plot(x=Sepal.Length,y=Sepal.Width) %>%
  mjs_point(color_accessor=Species, color_type="category")%>%
    mjs_labs(x="Sepal.Length", y="Sepal.Width")%>% 
    mjs_axis_y(min_y=2)
saveWidget(irismetricsplot,file = "irismetricsplot.html",selfcontained = TRUE)

Example 7 continued

Example 8: rbokeh: Many graph types available

http://hafen.github.io/rbokeh/: Bar missing

library(rbokeh)#if (!require("rbokeh")) devtools::install_github("bokeh/rbokeh")
bokehirisplot=figure() %>%
  ly_points(Sepal.Length, Sepal.Width, data = iris,
    color = Species,
    hover = list(Sepal.Length, Sepal.Width))
saveWidget(bokehirisplot,file = "bokehirisplot.html",selfcontained = TRUE)

Example 8 continued

Example 9: Scatter plot matrix pairsD3

#if (!require("pairsD3")) devtools::install_github("garthtarr/pairsD3")
library(pairsD3)
pairsd3plot=pairsD3(iris[,1:4],group=iris[,5])#%>%savePairs(file = 'iris.html')
saveWidget(pairsd3plot,file = "pairsd3plot.html",selfcontained = TRUE)

Example 9 continued

Example 10: Scatter plot matrix scatterMatrixD3

#if (!require("scatterMatrixD3")) devtools::install_github("jcizel/scatterMatrixD3")
library(scatterMatrixD3)
scattermatplot=scatterMatrix(
   data = iris
)
saveWidget(scattermatplot,file = "scattermatplot.html",selfcontained = TRUE)

Example 10 continued

Example 11 streamgraph

#if (!require("streamgraph")) devtools::install_github("hrbrmstr/streamgraph")
library(streamgraph)
library(babynames)
head(babynames,3)
maryplot=babynames %>%
  filter(grepl("^Mar", name)) %>%
  group_by(year, name) %>%
  tally(wt=n) %>%
  streamgraph("name", "n", "year")
saveWidget(maryplot,file = "maryplot.html",selfcontained = TRUE)

Example 11 continued

Example 12 svgPanZoom

#if (!require("svgPanZoom")) devtools::install_github("timelyportfolio/svgPanZoom")
library(svgPanZoom)
library(ggplot2)
mynewggplot=svgPanZoom(
  ggplot(iris,aes(Sepal.Length,Sepal.Width,color=Species))+geom_point()
)

saveWidget(mynewggplot,file = "mynewggplot.html",selfcontained = TRUE)

Example 12 continued

Example 13 parcoords

#if (!require("parcoords")) devtools::install_github("timelyportfolio/parcoords")
library(parcoords)
mymtcarsplot=parcoords(mtcars,brushMode = "1D-axes-multi")
saveWidget(mymtcarsplot,file = "mymtcarsplot.html",selfcontained = TRUE)

Example 13 continued

Example 14 sunburstr

#if (!require("sunburstR")) devtools::install_github("timelyportfolio/sunburstR")
library(sunburstR)
school=read.csv("school.csv")
school

School	Department	Specialization	Students
A&S	Philosophy	Ethics	30
A&S	Philosophy	Sustainability	40
A&S	Biology	Botany	20
A&S	Biology	Zoology	35
A&S	Chemistry	Organic	29
A&S	Chemistry	Inorganic	45
Business	Accounting		75
Business	BusAdm	Finance	28
Business	BusAdm	Marketing	75
## Example	14 continued

school$combo=paste(school$School,school$Department,school$Specialization,sep="-")
school$combo=gsub("-$","",school$combo)
head(school,1)

School	Department	Specialization	Students	combo
A&S	Philosophy	Ethics	30	A&S-Philosophy-Ethics

myburst=sunburst(school[,c(5,4)])
saveWidget(myburst,file = "myburst.html",selfcontained = TRUE)

Example 14 continued

More packages

• leaflet: Mapping
• Network data and Graph Diagrams
  • mermaid and grViz: DiagrammeR
  • Vivagraph: vivagRaph
  • d3Network: networkD3
  • Circle plot: edgebundleR
  • sigma: sigma,
  • hive: d3hiveR
• ggvis
• googleVis
• Server based interactivity - shiny