Sports Data Viz using Plotly, Shiny and Flexdashboard
-
Upload
tanya-cashorali -
Category
Technology
-
view
177 -
download
2
Transcript of Sports Data Viz using Plotly, Shiny and Flexdashboard
![Page 1: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/1.jpg)
PLOTCON 2016, NYCTANYA CASHORALI
@TANYACASH21
![Page 2: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/2.jpg)
2
BASE R (2000)
![Page 3: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/3.jpg)
3
GGPLOT2 (2007)
![Page 4: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/4.jpg)
4
D3.JS (2011)
![Page 5: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/5.jpg)
5
PLOTLY (2013)
![Page 6: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/6.jpg)
6
RCHARTS (2013)
![Page 7: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/7.jpg)
7
GGVIS (2014)
![Page 8: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/8.jpg)
8
JAVASCRIPT CHARTING LIBRARIES
D3.js Highcharts Dygraphs FusionCharts Sigma.js Rickshaw Canvas.js Ember charts NVD3 Chart.js
![Page 9: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/9.jpg)
9
PLOTLY TO THE RESCUE
Pictured Above: Data Science Superhero
![Page 10: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/10.jpg)
10
D3.JS PIE CHART
67 lines of code!
https://bl.ocks.org/mbostock/3887235
![Page 11: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/11.jpg)
11
PIE CHART IN PLOTLY
![Page 12: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/12.jpg)
12
BAR CHART VERSION IN PLOTLY
![Page 13: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/13.jpg)
13
D3.JS
http://bl.ocks.org/mbostock/3884955
98 lines of code!
![Page 14: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/14.jpg)
14
EQUIVALENT IN R WITH INTERACTIVITY
![Page 15: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/15.jpg)
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
![Page 16: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/16.jpg)
16
124 lines of just javascript!!
![Page 17: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/17.jpg)
17
SHINYDASHBOARD + SHINY + PLOTLY
https://tcb-analytics.shinyapps.io/Plotcon2/
![Page 18: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/18.jpg)
18
58 TOTAL LINES OF CODE
ui.R
server.R
![Page 19: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/19.jpg)
19
FLEXDASHBOARD + SHINY + PLOTLY
• https://tcb-analytics.shinyapps.io/Plotcon/• Data From: http://www.pro-football-reference.com/years/2016/passing.htm
![Page 20: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/20.jpg)
20
68 LINES OF R CODE
![Page 21: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/21.jpg)
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
![Page 22: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/22.jpg)
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
![Page 23: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/23.jpg)
23
USE CASES – PHYSICIAN CLINICAL INTEGRATION NETWORK
Shiny + Plotly (~100 total lines of R code)
![Page 24: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/24.jpg)
24
USE CASES – MARKET RESEARCH COMPANY
Shiny + Plotly
~340 lines of code
![Page 25: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/25.jpg)
25
MORE ADVANCED USE CASE – BIOTECH COMPANY
Required custom d3.js within Shiny in order to build b-directional interactive tree
![Page 26: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/26.jpg)
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
![Page 27: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/27.jpg)
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
![Page 28: Sports Data Viz using Plotly, Shiny and Flexdashboard](https://reader035.fdocuments.net/reader035/viewer/2022062218/58ee580c1a28abb8708b45b3/html5/thumbnails/28.jpg)
28
THANK YOU
[Insert Subsection Picture Here]
Brophy Analyticswww.brophyanalytics.com