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
1. I wanted to understand more rCharts – issues
with sizing, control tooltip. Learn js.
2. I didn’t want to be dependent on r wrappers of
other libraries to bring charts into my shiny app
3. 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
▸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
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)