JavaScript-based Visualization in R
Transcript of JavaScript-based Visualization in R
Interactive Visualization
Fan Li @ Philly R User Meetup (R<-Gang)
JavaScript-based
Source Code: https://github.com/lifan0127/r-mini-talk/
Interactive Visualization
Fan Li @ Philly R User Meetup (R<-Gang)
JavaScript-based
Source Code: https://github.com/lifan0127/r-mini-talk/
Why JavaScript?JavaScript enables highly dynamic, highly interactive visualization across platforms.
http://d3js.org/
JS Visualization … in Rlibrary(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
htmlwidgets for R (http://www.htmlwidgets.org)
Building Widgets (www.buildingwidgets.com)
htmlwidgets gallery (http://hafen.github.io/htmlwidgetsgallery/)
Example - Movie Genre AnalysisTitle 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/)
Venn DiagramObjective: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/d3vennR
Credit: Chengying Wang (mathforum.org)
Distribution by Genre# Import movie250 datasetmovies <- read_csv("data/movies250.csv")
# Helper func to convert data into Venn formatsource("R/to-venn.R")vennData <- toVenn(movies)
# Create D3 venn diagramd3vennR(vennData)
Source Code: https://github.com/lifan0127/r-mini-talk/
Next … ModificationQ: 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)
Venn with Mouse Hover effect
Source Code: https://github.com/lifan0127/r-mini-talk/
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); }) … }}, …
});
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