Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Interactive Visualization
Fan Li @ Philly R User Meetup (R<-Gang)
JavaScript-based
Source Code: https://github.com/lifan01...
Interactive Visualization
Fan Li @ Philly R User Meetup (R<-Gang)
JavaScript-based
Source Code: https://github.com/lifan01...
Why JavaScript?
JavaScript enables highly dynamic, highly interactive
visualization across platforms.
http://d3js.org/
JS Visualization … in R
library(d3heatmap)
d3heatmap(mtcars, scale="column", colors="Blues")
Thanks to the htmlwidgets pac...
htmlwidgets for R (http://www.htmlwidgets.org)
Building Widgets (www.buildingwidgets.com)
htmlwidgets gallery (http://hafen.github.
io/htmlwidgetsgallery/)
Example - Movie Genre Analysis
Title Director Year Genre Country Rating Votes
1 The Shawshank Redemption Frank Darabont 19...
Venn Diagram
Objective:
Use venn diagram to visualize the
distribution of top 250 movies by
genre.
JS library: https://git...
Distribution by Genre
# Import movie250 dataset
movies <- read_csv("data/movies250.csv")
# Helper func to convert data int...
Next … Modification
Q: Where is the “interactivity” you mentioned earlier?
A: Let’s create a hover effect by adding a “cal...
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 HTMLW...
Next … Make your own?
I have not had the need/time to create my own
htmlwidgets packages. But if any of the following
appl...
Fan Li (lifan0127@gmail.com)
Questions?
Upcoming SlideShare
Loading in …5
×

JavaScript-based Visualization in R

470 views

Published on

  • Be the first to comment

  • Be the first to like this

JavaScript-based Visualization in R

  1. 1. Interactive Visualization Fan Li @ Philly R User Meetup (R<-Gang) JavaScript-based Source Code: https://github.com/lifan0127/r-mini-talk/
  2. 2. Interactive Visualization Fan Li @ Philly R User Meetup (R<-Gang) JavaScript-based Source Code: https://github.com/lifan0127/r-mini-talk/
  3. 3. Why JavaScript? JavaScript enables highly dynamic, highly interactive visualization across platforms. http://d3js.org/
  4. 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. 5. htmlwidgets for R (http://www.htmlwidgets.org)
  6. 6. Building Widgets (www.buildingwidgets.com)
  7. 7. htmlwidgets gallery (http://hafen.github. io/htmlwidgetsgallery/)
  8. 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. 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. 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. 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. 12. Venn with Mouse Hover effect Source Code: https://github.com/lifan0127/r-mini-talk/
  13. 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. 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. 15. Fan Li (lifan0127@gmail.com) Questions?

×