All examples By author By category About

timelyportfolio

football game with d3 sunburst from R sunburstR

assembled with blockbuilder.org and htmwidgets

Football Visualization

I had an idea (sure I'm not the only one) to visualize football or sports in general as sequences using d3.js, so I tweeted and got a whopping two likes. Not a lot of motivation, but away I went using last weekend's Alabama vs. Texas A&M game.

Sunburst

With some very slight data work in R on the drive-chart HTML table and the sunburstR htmlwidget, I was able to easily create a prototype. There is a whole lot of potential improvement here starting with colors and explanation. Feel free to contribute. Thanks to Kerry Rodden one more time for his sequences sunburst.

# sunburst of drive chart
#  from rolltide.com

library(htmltools)
library(xml2)
library(rvest)
library(pipeR)
library(dplyr)
library(lubridate)
library(sunburstR)
library(d3r)

# Alabama vs Texas A&M
url <- "http://rolltide.com/boxscore.aspx?id=4471&path=football"

# make simple converter for minutes:seconds to seconds
#  based off http://stackoverflow.com/questions/29067375/r-convert-hoursminutesseconds
minsec_to_sec <- function(tim){
  res <- lubridate::ms(tim)       # format to 'hours:minutes:seconds'
  lubridate::minute(res)*60 + lubridate::second(res)
}

url %>>%
  read_html() %>%
  html_node("section#all-drives table") %>>%
  html_table(fill=TRUE, header=FALSE) %>>%
  {
    cnm <- .[2,]
    tbl <- .[-(1:2),]
    colnames(tbl) <- cnm
    tbl
  } %>>%
  {.[,c(2,3,9,11)]} %>>%
  mutate(
    Qtr = gsub(x=Qtr.,pattern="[a-z,A-Z]",replacement=""),
    result = `How Lost`,
    size = minsec_to_sec(TOP)
  ) %>>%
  select(Team, Qtr, result, size) %>>%
  d3r::d3_nest(value_cols="size") %>>%
  {
    sunburst(
      jsondata = .,
      count=TRUE,
      percent=TRUE,
      sortFunction=htmlwidgets::JS(
"
  function(a,b){debugger;return d3.ascending(a,b)}
"      
      )
    )
  }

Treemap

I did not originally plan to do a treemap, but R makes it so easy that I could not resist. See treemap of football.

Flamegraph

to be done... See Brendan Gregg's post on flamegraphs. Please help if you are interested.