1. Interactive Visualization
Fan Li @ Philly R User Meetup (R<-Gang)
JavaScript-based
Source Code: https://github.com/lifan0127/r-mini-talk/

2. Interactive Visualization
Fan Li @ Philly R User Meetup (R<-Gang)
JavaScript-based
Source Code: https://github.com/lifan0127/r-mini-talk/

3. Why JavaScript?
JavaScript enables highly dynamic, highly interactive
visualization across platforms.
http://d3js.org/

4. JS Visualization … in R
library(d3heatmap)
d3heatmap(mtcars, scale="column", colors="Blues")
Thanks to the htmlwidgets package, developing R wrappers for JS
libraries has been greatly simplified and streamlined.
http://www.htmlwidgets.
org/showcase_d3heatmap.
html

5. htmlwidgets for R (http://www.htmlwidgets.org)

6. Building Widgets (www.buildingwidgets.com)

7. htmlwidgets gallery (http://hafen.github.
io/htmlwidgetsgallery/)

8. Example - Movie Genre Analysis
Title Director Year Genre Country Rating Votes
1 The Shawshank Redemption Frank Darabont 1994 crime, drama USA 9.2 1529570
2 The Godfather Francis Ford
Coppola
1972 crime, drama USA 9.2 1048155
3 The Godfather: Part II Francis Ford
Coppola
1974 crime, drama USA 9 708662
4 The Dark Knight Christopher
Nolan
2008 action, adventure UK, USA 8.9 1504948
5 12 Angry Men Sidney Lumet 1957 drama USA 8.9 395001
6 Schindler's List Steven Spielberg 1993 biography, drama,
history
USA 8.9 777723
7 Pulp Fiction Quentin
Tarantino
1994 crime, drama, thriller USA 8.9 1191751
8 The Good, the Bad and the Ugly Sergio Leone 1966 western West Germany,
Spain, Italy
8.9 457064
9 The Lord of the Rings: The Return of the
King
Peter Jackson 2003 action, adventure,
fantasy
New Zealand,
USA
8.9 1096516
10 Fight Club David Fincher 1999 drama Germany, USA 8.8 1204767
IMDb Top 250 movies (http://250movies.com/)

9. Venn Diagram
Objective:
Use venn diagram to visualize the
distribution of top 250 movies by
genre.
JS library: https://github.
com/benfred/venn.js
R wrapper: https://github.
com/timelyportfolio/d3vennRCredit: Chengying Wang (mathforum.org)

10. Distribution by Genre
# Import movie250 dataset
movies <- read_csv("data/movies250.csv")
# Helper func to convert data into Venn format
source("R/to-venn.R")
vennData <- toVenn(movies)
# Create D3 venn diagram
d3vennR(vennData)
Source Code: https://github.com/lifan0127/r-mini-talk/

11. Next … Modification
Q: Where is the “interactivity” you mentioned earlier?
A: Let’s create a hover effect by adding a “callback function”.
hover <- " function(){
var div = d3.select(this);
div.selectAll('path').style({'stroke-opacity': 0, 'stroke': '#09f', 'stroke-width': 0});
div.selectAll('g')
.on('mouseenter', function(d, i){
venn.sortAreas(div, d);
Shiny.onInputChange('hoveredGenre', d.sets);
d3.select(this).select('path').style({'stroke-opacity': 1, 'stroke-width': 3});
})
.on('mouseleave', function(d, i){
d3.select(this).select('path').style({'stroke-opacity': 0, 'stroke-width': 0});
})
} “
d3vennR(vennData, tasks = list(htmlwidgets::JS(hover)

12. Venn with Mouse Hover effect
Source Code: https://github.com/lifan0127/r-mini-talk/

13. What happens under the hood?
inst/htmlwidgets/d3vennR.js in the d3vennR pacakge
HTMLWidgets.widget({
…
// Render the HTMLWidget
renderValue: function(el, x, instance) {
...
x.tasks.map(function(t){
// for each tasks add it to the mermaid.tasks with el
t.call(el);
}) …
}}, …
});

14. Next … Make your own?
I have not had the need/time to create my own
htmlwidgets packages. But if any of the following
applies to you:
1. Have a favorite JS library not available yet.
2. Have made an awesome JS visualization by
yourself.
3. Want to contribute back to the R community.
Then, here is a starting point:
http://www.htmlwidgets.org/develop_intro.html

15. Fan Li (lifan0127@gmail.com)
Questions?