Sports Data Viz using Plotly, Shiny and Flexdashboard

PLOTCON 2016, NYCTANYA CASHORALI

@TANYACASH21

2

BASE R (2000)

3

GGPLOT2 (2007)

4

D3.JS (2011)

5

PLOTLY (2013)

6

RCHARTS (2013)

7

GGVIS (2014)

8

JAVASCRIPT CHARTING LIBRARIES

D3.js Highcharts Dygraphs FusionCharts Sigma.js Rickshaw Canvas.js Ember charts NVD3 Chart.js

9

PLOTLY TO THE RESCUE

Pictured Above: Data Science Superhero

10

D3.JS PIE CHART

67 lines of code!

https://bl.ocks.org/mbostock/3887235

11

PIE CHART IN PLOTLY

12

BAR CHART VERSION IN PLOTLY

13

D3.JS

http://bl.ocks.org/mbostock/3884955

98 lines of code!

14

EQUIVALENT IN R WITH INTERACTIVITY

15

CHART.JS DASHBOARD

Online: http://coenraets.org/apps/olympic-dashboard/#dashboard/1Source Code: https://github.com/ccoenraets/olympic-dashboard-chartjs/blob/master/www/js/dashboard1.js

16

124 lines of just javascript!!

17

SHINYDASHBOARD + SHINY + PLOTLY

https://tcb-analytics.shinyapps.io/Plotcon2/

18

58 TOTAL LINES OF CODE

ui.R

server.R

19

FLEXDASHBOARD + SHINY + PLOTLY

• https://tcb-analytics.shinyapps.io/Plotcon/• Data From: http://www.pro-football-reference.com/years/2016/passing.htm

20

68 LINES OF R CODE

21

JAVASCRIPT EQUIVALENT

script.js = 82 lines of code index.html = ~50 lines of handwritten,

uncompiled code Total of 132 lines of code Approximately double the dev time, no

scaling of variables

Created by: www.brophyanalytics.comJavascript: https://github.com/tcash21/tcash21.github.io/blob/master/uploads/script.js

22

DEPLOY TO SHINYAPPS.IO IN 2 LINES

rsconnect::setAccountInfo(name='tcb-analytics', token=my_token', secret=my_secret')

deployApp('.', appName='Plotcon2')

• http://flowingdata.com/2016/10/07/learning-r-versus-d3-js-for-visualization/

“I guess it comes back to the original question of what you ultimately want out of your visualization. For static graphics, R is a good way to get quick results. For interactive and web-native graphics, check out d3.js.”

- Nathan Yau, FlowingData

23

USE CASES – PHYSICIAN CLINICAL INTEGRATION NETWORK

Shiny + Plotly (~100 total lines of R code)

24

USE CASES – MARKET RESEARCH COMPANY

Shiny + Plotly

~340 lines of code

25

MORE ADVANCED USE CASE – BIOTECH COMPANY

Required custom d3.js within Shiny in order to build b-directional interactive tree

26

CONSIDERATIONS

Some data visualization efforts require more customization than Plotly charts via R can provide.– In these cases we still leverage Plotly charts where possible

but will write custom d3.js or other Javascript to accomplish what we need.

Use the right tool for the job

27

BENEFITS OF USING PLOTLY IN R

Keep the analysis AND presentation layer in R as well as publish results to web

Efficiency (less coding = less time spent) Empowers data scientists to build beautiful interactive

dashboards Prototype potential solutions faster Confidence when pitching new prospects or bidding on

projects

28

THANK YOU

[Insert Subsection Picture Here]

Brophy Analyticswww.brophyanalytics.com