Shiny App with d3 data visualization Mike Seman

My Background – Mike Seman Went to Colorado School of Mines, PhD in Chemical Engineering 2007. Like to mountain bike and drink beer. Came to North Carolina in 2010 to work at CREE in the growth of GaN/InGaN quantum wells for high brightness LEDs

Why d3 I wanted to understand more rCharts – issues with sizing, control tooltip. Learn js. I didn’t want to be dependent on r wrappers of other libraries to bring charts into my shiny app Keeping up with the competition. Civic tech is rapidly growing, other companies have great visuals.

What is Shiny? R package that allows you to quickly build a user interface to explore data. Allows R users to publish their charts and graphs on-line. (Let me show you my boat) Consists of 2 R files – ui.R and server.R Rstusio has made it easy for you to incorporate widgets and charts (ui side) and run algorithms on your data (server.R)

Simple Shiny App Great tutorials and info: ui.R and server.R Make a folder and can just use runApp() from console in Rstudio IDE Great tutorials and info: http://shiny.rstudio.com/

Shiny – ui.R Defines layout and widgets

Shiny – ui.R selectInput is an R function that makes the HTML of a select box in your application R Code for this select box. HTML for this select box.

Shiny – server.R Define the plot, use R to perform operations on the data based on inputs from the ui side. One thing to understand is it’s “reactive” How and when the code gets executed

Shiny – server.R I like to use “reactiveValues” and use observeEvent to control the reactivity of the app..

d3 – data driven documents What is it: Javascript Library that allows you to tie data to HTML elements How does it work: Has functions for manipulating HTML, makes it easy to select elements and update their attributes Where does it get crazy: “Enter, Update, Exit”, applying transitions, mapping scales. Simple div elements become SVG elements.

d3 - Example Define div with CSS data Use d3 to manipulate divs https://bl.ocks.org/mbostock/7322386 https://bost.ocks.org/mike/bar/ Use d3 to manipulate divs

Diving in: d3 and Shiny Step 1: Have server.R send some JSON data to ui.R rjson convert’s R’s dataframes to JSON format Have observeEvent to send data when clicked Use this to send data from server to client in Shiny Reference: https://ryouready.wordpress.com/2013/11/20/sending-data-from-client-to-server-and-back-using-shiny/

Diving in: d3 and Shiny Step 2: Set-up ui.R to use custom d3 js script Bring in stylesheet and d3 library Define a div to hold barchart Script to create chart, actually needed to be last here because we are modifying div above

Diving in: d3 and Shiny Step 3: modify your favorite d3 example (1 of 2) Comment out data from example Shiny data from server.R Had to add this to get to work with json data from R

Diving in: d3 and Shiny Step 3: modify your favorite d3 example (2 of 2) Mike Bostock’s examples modify “body” But you want to position chart with a defined div UI.R: put chart in your app in a div

Another good example Shiny Inputs, call to Spotify API, d3 chart: http://myinspirationinformation.com/visualisation/d3-js/integrating-d3-js-into-r-shiny/ server.R accessing API Shiny functions for input d3 chart

Shiny App with d3

Future Directions What advanced data science could we bring to my data set. In a contest we could use d3 to visualize the outcome of some advanced machine learning algorithm. (Don’t have to use my data)