1. Shiny App with d3 data visualization
Mike Seman

2. 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

3. 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.

4. 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)

5. 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:

6. Shiny – ui.R
Defines layout and widgets

7. 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.

8. 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

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

10. 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.

11. d3 - Example Define div with CSS data Use d3 to manipulate divs
Use d3 to manipulate divs

12. 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:

13. 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

14. 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

15. 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

16. Another good example Shiny Inputs, call to Spotify API, d3 chart:
server.R accessing API
Shiny functions for input
d3 chart

17. Shiny App with d3

18. 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)