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

Fan Li (lifan0127@gmail.com)

Questions?