FanPost

Extra graphs week 10 vs LSU 2021

As always this is an addendum to balloons All the Graphs from Alabama vs. LSU post.

On drive 11 the Play.type was recorded as a sack, but the Play.text says "Bryce Young sacked by Cameron Lewis for a loss of 12 yards to the Alab 42 Bryce Young fumbled, forced by Cameron Lewis, recovered by LSU Jaquelin Roy , return for 0 yards". So that is something I need to alter in my dataframe since the fumble is more important in terms of the play chart style graphs.

Alabama:

Alabama-2021-wk10-LSU-01-success-drive-bar

Alabama, 2021, wk10, Success rate by drive table vs LSU

Drive Total Successful Unsuccessful Success rate Scoring drive
1 7 3 4 0.4285714 FALSE
2 3 0 3 0.0000000 FALSE
3 5 1 4 0.2000000 FALSE
4 9 4 5 0.4444444 FALSE
5 12 9 3 0.7500000 TRUE
6 5 3 2 0.6000000 TRUE
7 2 1 1 0.5000000 TRUE
8 3 0 3 0.0000000 FALSE
9 3 0 3 0.0000000 FALSE
10 3 1 2 0.3333333 FALSE
11 8 5 3 0.6250000 FALSE
12 3 0 3 0.0000000 FALSE



Alabama-2021-wk10-LSU-02-drive-fac

Alabama-2021-wk10-LSU-03-drive

Alabama-2021-wk10-LSU-04-all4-downs-fac

Alabama-2021-wk10-LSU-05-all4-downs-fac-noscale

Alabama, 2021, wk10, Success by down table vs LSU

Down Total Successful Unsuccessful TD/1st
1 27 11 16 5
2 22 12 10 9
3 13 4 9 4
4 1 0 1 0



Alabama-2021-wk10-LSU-06-yards-success-gained

Alabama-2021-wk10-LSU-07-drive-extra-yards-gained

Alabama-2021-wk10-LSU-08-drive-yards-to-success

Alabama-2021-wk10-LSU-09-fac-yards-to-success

Alabama-2021-wk10-LSU-e1-drive-yards-to-goal-fac

Alabama-2021-wk10-LSU-e5-drive-success-play

Alabama-2021-wk10-LSU-e6-success-drive-bar-down

Alabama-2021-wk10-LSU-e7-success-drive-bar-down2

Alabama-2021-wk10-LSU-e8-success-drive-down-bar-yards-to-goal-fac

LSU:

LSU-2021-wk10-Alabama-01-success-drive-bar

LSU, 2021, wk10, Success rate by drive table vs Alabama

Drive Total Successful Unsuccessful Success rate Scoring drive
1 8 4 4 0.5000000 TRUE
2 3 0 3 0.0000000 FALSE
3 3 0 3 0.0000000 FALSE
4 6 2 4 0.3333333 FALSE
5 3 1 2 0.3333333 FALSE
6 2 0 2 0.0000000 FALSE
7 3 1 2 0.3333333 FALSE
8 3 0 3 0.0000000 FALSE
9 14 7 7 0.5000000 TRUE
10 3 0 3 0.0000000 FALSE
11 14 6 8 0.4285714 FALSE
12 4 0 4 0.0000000 FALSE
13 6 2 4 0.3333333 FALSE



LSU-2021-wk10-Alabama-02-drive-fac

LSU-2021-wk10-Alabama-03-drive

LSU-2021-wk10-Alabama-04-all4-downs-fac

LSU-2021-wk10-Alabama-05-all4-downs-fac-noscale

LSU, 2021, wk10, Success by down table vs Alabama

Down Total Successful Unsuccessful TD/1st
1 26 8 18 4
2 21 5 16 2
3 18 5 13 5
4 7 5 2 5



LSU-2021-wk10-Alabama-06-yards-success-gained

LSU-2021-wk10-Alabama-07-drive-extra-yards-gained

LSU-2021-wk10-Alabama-08-drive-yards-to-success

LSU-2021-wk10-Alabama-09-fac-yards-to-success

LSU-2021-wk10-Alabama-e1-drive-yards-to-goal-fac

LSU-2021-wk10-Alabama-e5-drive-success-play

LSU-2021-wk10-Alabama-e6-success-drive-bar-down

LSU-2021-wk10-Alabama-e7-success-drive-bar-down2

LSU-2021-wk10-Alabama-e8-success-drive-down-bar-yards-to-goal-fac

Technical question

Hey balloons. I hate to keep bothering you with these questions, but I haven't played with CSS/javascript in over 10 years I think. I have been looking at your code to see if I can understand how to embed my Plotly.js graphs here instead of using png files since Plotly.js is built on top of d3.js and it looks like you still have your D3 code up. I don't actually need to write any Plotly code since there is a function that converts my ggplot2 graphs into Plotly graphs. The converted to Plotly output is (I had to hand layout the json data since I can't recall the command that gives it nicely formatted right now so hopefully it is semireadable and I killed a few deciaml places here and there):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<style>body{background-color:white;}</style>
<script src="lib/htmlwidgets-1.5.4/htmlwidgets.js"></script>
<script src="lib/plotly-binding-4.10.0/plotly.js"></script>
<script src="lib/typedarray-0.1/typedarray.min.js"></script>
<script src="lib/jquery-3.5.1/jquery.min.js"></script>
<link href="lib/crosstalk-1.1.1/css/crosstalk.css" rel="stylesheet" />
<script src="lib/crosstalk-1.1.1/js/crosstalk.min.js"></script>
<link href="lib/plotly-htmlwidgets-css-2.5.1/plotly-htmlwidgets.css" rel="stylesheet" />
<script src="lib/plotly-main-2.5.1/plotly-latest.min.js"></script>
  <title>plotly</title>
</head>
<body>
<div id="htmlwidget_container">
  <div id="htmlwidget-bcb180075b84c0c32285" style="width:100%;height:400px;" class="plotly html-widget"></div>
</div>
<script type="application/json" data-for="htmlwidget-bcb180075b84c0c32285">
{"x":{
 "data":[{
  "orientation":"v",
  "width":[0.9,0.9,0.9,0.9,0.899999999999999,0.899999999999999,0.899999999999999,0.899999999999999,0.899999999999999],
  "base":[0,0,0,0,0,0,0,0,0],
  "x":[1,2,3,4,8,9,10,11,12],
  "y":[0.428571428571429,0,0.2,0.444444444444444,0,0,0.333333333333333,0.625,0],
  "text":[
   "O.drive.number:  1<br />Success.rate: 0.4285714<br />Score.drive: FALSE",
   "O.drive.number:  2<br />Success.rate: 0.0000000<br />Score.drive: FALSE",
   "O.drive.number:  3<br />Success.rate: 0.2000000<br />Score.drive: FALSE",
   "O.drive.number:  4<br />Success.rate: 0.4444444<br />Score.drive: FALSE",
   "O.drive.number:  8<br />Success.rate: 0.0000000<br />Score.drive: FALSE",
   "O.drive.number:  9<br />Success.rate: 0.0000000<br />Score.drive: FALSE",
   "O.drive.number: 10<br />Success.rate: 0.3333333<br />Score.drive: FALSE",
   "O.drive.number: 11<br />Success.rate: 0.6250000<br />Score.drive: FALSE",
   "O.drive.number: 12<br />Success.rate: 0.0000000<br />Score.drive: FALSE"],
  "type":"bar",
  "textposition":"none",
  "marker":{
   "autocolorscale":false,
   "color":"rgba(130,138,143,1)",
   "line":{"width":1.88976377952756,"color":"transparent"}
  },
  "name":"FALSE",
  "legendgroup":"FALSE",
  "showlegend":true,
  "xaxis":"x",
  "yaxis":"y",
  "hoverinfo":"text",
  "frame":null
 },
 {
  "orientation":"v",
  "width":[0.9,0.9,0.9],
  "base":[0,0,0],
  "x":[5,6,7],
  "y":[0.75,0.6,0.5],
  "text":[
   "O.drive.number:  5<br />Success.rate: 0.7500000<br />Score.drive:  TRUE",
   "O.drive.number:  6<br />Success.rate: 0.6000000<br />Score.drive:  TRUE",
   "O.drive.number:  7<br />Success.rate: 0.5000000<br />Score.drive:  TRUE"],
  "type":"bar",
  "textposition":"none",
  "marker":{
   "autocolorscale":false,
   "color":"rgba(158,27,50,1)",
   "line":{"width":1.88976377952756,"color":"transparent"}
  },
  "name":"TRUE",
  "legendgroup":"TRUE",
  "showlegend":true,
  "xaxis":"x",
  "yaxis":"y",
  "hoverinfo":"text",
  "frame":null
 },
 {
  "visible":false,
  "showlegend":false,
  "xaxis":"x",
  "yaxis":"y",
  "hoverinfo":"text",
  "frame":null
 },
 {
  "x":[1,2,3,4,5,6,7,8,9,10,11,12],
  "y":[0.428571428571429,0,0.2,0.444444444444444,0.75,0.6,0.5,0,0,0.333333333333333,0.625,0],
  "text":[7,3,5,9,12,5,2,3,3,3,8,3],
  "hovertext":[
   "O.drive.number:  1<br />Success.rate: 0.4285714<br />Total:  7",
   "O.drive.number:  2<br />Success.rate: 0.0000000<br />Total:  3",
   "O.drive.number:  3<br />Success.rate: 0.2000000<br />Total:  5",
   "O.drive.number:  4<br />Success.rate: 0.4444444<br />Total:  9",
   "O.drive.number:  5<br />Success.rate: 0.7500000<br />Total: 12",
   "O.drive.number:  6<br />Success.rate: 0.6000000<br />Total:  5",
   "O.drive.number:  7<br />Success.rate: 0.5000000<br />Total:  2",
   "O.drive.number:  8<br />Success.rate: 0.0000000<br />Total:  3",
   "O.drive.number:  9<br />Success.rate: 0.0000000<br />Total:  3",
   "O.drive.number: 10<br />Success.rate: 0.3333333<br />Total:  3",
   "O.drive.number: 11<br />Success.rate: 0.6250000<br />Total:  8",
   "O.drive.number: 12<br />Success.rate: 0.0000000<br />Total:  3"],
  "textfont":{"size":14.6645669291339,"color":"rgba(0,0,0,1)"},
  "type":"scatter",
  "mode":"text",
  "hoveron":"points",
  "showlegend":false,
  "xaxis":"x",
  "yaxis":"y",
  "hoverinfo":"text",
  "frame":null
 }],
 "layout":{
  "margin":{"t":49.2984745689469,"r":7.30593607305936,"b":45.7185658931478,"l":43.1050228310502},
  "plot_bgcolor":"rgba(229,229,229,1)",
  "paper_bgcolor":"rgba(255,255,255,1)",
  "font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187},
  "title":{
   "text":"Alabama[20]: Success rate by Drive with TD drive indicated and number of plays per drive",
   "font":{"color":"rgba(0,0,0,1)","family":"","size":17.5342465753425},
   "x":0,
   "xref":"paper"
  },
  "xaxis":{
   "domain":[0,1],
   "automargin":true,
   "type":"linear",
   "autorange":false,
   "range":[-0.0449999999999999,13.045],
   "tickmode":"array",
   "ticktext":["0","1","2","3","4","5","6","7","8","9","10","11","12"],
   "tickvals":[0,1,2,3,4,5,6,7,8,9,10,11,12],
   "categoryorder":"array",
   "categoryarray":["0","1","2","3","4","5","6","7","8","9","10","11","12"],
   "nticks":null,
   "ticks":"outside",
   "tickcolor":"rgba(51,51,51,1)",
   "ticklen":3.65296803652968,
   "tickwidth":0.66417600664176,
   "showticklabels":true,
   "tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.689497716895},
   "tickangle":-0,
   "showline":false,
   "linecolor":null,
   "linewidth":0,
   "showgrid":true,
   "gridcolor":"rgba(204,204,204,1)",
   "gridwidth":0.66417600664176,
   "zeroline":false,
   "anchor":"y",
   "title":{
    "text":"Drive number",
	"font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187}
   },
   "hoverformat":".2f"
  },
  "yaxis":{
   "domain":[0,1],
   "automargin":true,
   "type":"linear",
   "autorange":false,
   "range":[-0.05,1.05],
   "tickmode":"array",
   "ticktext":["0.0","0.1","0.2","0.3","0.4","0.5","0.6","0.7","0.8","0.9","1.0"],
   "tickvals":[0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1],
   "categoryorder":"array",
   "categoryarray":["0.0","0.1","0.2","0.3","0.4","0.5","0.6","0.7","0.8","0.9","1.0"],
   "nticks":null,
   "ticks":"outside",
   "tickcolor":"rgba(51,51,51,1)",
   "ticklen":3.65296803652968,
   "tickwidth":0.66417600664176,
   "showticklabels":true,
   "tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.689497716895},
   "tickangle":-0,
   "showline":false,
   "linecolor":null,
   "linewidth":0,
   "showgrid":true,
   "gridcolor":"rgba(204,204,204,1)",
   "gridwidth":0.66417600664176,
   "zeroline":false,
   "anchor":"x",
   "title":{
    "text":"Success rate",
	"font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187}
   },
   "hoverformat":".2f"
  },
  "shapes":[{
   "type":"rect",
   "fillcolor":null,
   "line":{"color":null,"width":0,"linetype":[]},
   "yref":"paper",
   "xref":"paper",
   "x0":0,
   "x1":1,
   "y0":0,
   "y1":1
  }],
  "showlegend":true,
  "legend":{
   "bgcolor":"rgba(255,255,255,1)",
   "bordercolor":"transparent",
   "borderwidth":1.88976377952756,
   "font":{"color":"rgba(0,0,0,1)","family":"","size":11.689497716895},
   "title":{
    "text":"TD",
	"font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187}
   }
  },
  "hovermode":"closest",
  "barmode":"relative"
 },
 "config":{
  "doubleClick":"reset",
  "modeBarButtonsToAdd":["hoverclosest","hovercompare"],
  "showSendToCloud":false
 },
 "source":"A",
 "attrs":{
  "1258a7d2fd1":{"x":{},"y":{},"fill":{},"type":"bar"},
  "125871ea6c3b":{"y":{}},
  "12585c2d1f92":{"x":{},"y":{},"label":{}}
 },
 "cur_data":"1258a7d2fd1",
 "visdat":{
  "1258a7d2fd1":["function (y) ","x"],
  "125871ea6c3b":["function (y) ","x"],
  "12585c2d1f92":["function (y) ","x"]
 },
 "highlight":{
  "on":"plotly_click",
  "persistent":false,
  "dynamic":false,
  "selectize":false,
  "opacityDim":0.2,
  "selected":{"opacity":1},
  "debounce":0
 },
 "shinyEvents":[
  "plotly_hover",
  "plotly_click",
  "plotly_selected",
  "plotly_relayout",
  "plotly_brushed",
  "plotly_brushing",
  "plotly_clickannotation",
  "plotly_doubleclick",
  "plotly_deselect",
  "plotly_afterplot",
  "plotly_sunburstclick"
 ],
 "base_url":"https://plot.ly"
},
"evals":[],
"jsHooks":[]}
</script>
<script type="application/htmlwidget-sizing" data-for="htmlwidget-bcb180075b84c0c32285">{
"viewer":{"width":"100%","height":400,"padding":0,"fill":true},
"browser":{"width":"100%","height":400,"padding":0,"fill":true}}
</script>
</body>
</html>

Obviously if it will take too much time to answer I fully understand.

PS (balloons) I think I forgot to respond to a comment you made a while ago. I have been reading Few and Tufte is definitely in my infinite queue of infinite queues of things to read. Are you familiar with the Wilkinson's Grammar of Graphics or more specificly Wickham's Layered Grammar of Graphics?

FanPosts are just that; posts created by the fans. They are in no way indicative of the opinions of SBN and the authors of Roll Bama Roll.