d3radarR

Charles Allen at TennisVisuals blogging at tennisvis.blogspot.com has been doing some really incredible visualization work for tennis. When I saw his reusable iteration ofNadieh Bremer’s redesigned radar chart I instantly wanted it in R. This week I offer an early and rough htmlwidget implementation in d3radarR. I only wish I could more fully support all of the options and accessors included with the radar chart. Next year, once I wrap up a widget a week, I hope to revisit this. As always, any feedback and polite requests motivate and inspire me.

Installation

This is not on CRAN, so to install we will need some help fromdevtools::install_github.

devtools::install_github("timelyportfolio/d3radarR")

Examples

Recreating the included examples is usually a good place to start. Let’s recreate the phone data radar chart.

# devtools::install_github("timelyportfolio/d3radarR")

library(d3radarR)

# use data from demo
#   https://github.com/TennisVisuals/updating-radar-chart/blob/master/radarDemo.js
json_data = jsonlite::fromJSON(
'
  [  
    {  
      "key":"Nokia Smartphone",
      "values":[  
        {  "axis":"Battery Life", "value":0.26 }, {  "axis":"Brand", "value":0.10 },
        {  "axis":"Contract Cost", "value":0.30 }, {  "axis":"Design And Quality", "value":0.14 },
        {  "axis":"Have Internet Connectivity", "value":0.22 }, {  "axis":"Large Screen", "value":0.04 },
        {  "axis":"Price Of Device", "value":0.41 }, {  "axis":"To Be A Smartphone", "value":0.30 }
        ]
    },
    {  
      "key":"Samsung",
      "values":[  
        {  "axis":"Battery Life", "value":0.27 }, {  "axis":"Brand", "value":0.16 },
        {  "axis":"Contract Cost", "value":0.35 }, {  "axis":"Design And Quality", "value":0.13 },
        {  "axis":"Have Internet Connectivity", "value":0.20 }, {  "axis":"Large Screen", "value":0.13 },
        {  "axis":"Price Of Device", "value":0.35 }, {  "axis":"To Be A Smartphone", "value":0.38 }
        ]
    },
    {  
      "key":"iPhone",
      "values":[  
        {  "axis":"Battery Life", "value":0.22 }, {  "axis":"Brand", "value":0.28 },
        {  "axis":"Contract Cost", "value":0.29 }, {  "axis":"Design And Quality", "value":0.17 },
        {  "axis":"Have Internet Connectivity", "value":0.22 }, {  "axis":"Large Screen", "value":0.02 },
        {  "axis":"Price Of Device", "value":0.21 }, {  "axis":"To Be A Smartphone", "value":0.50 }
        ]
    }
  ]
',
  simplifyDataFrame = FALSE
)

d3radar(json_data)

You might notice the data format is not very R-like. One of the most immediate needs for this implementation would be a data transformer for R. I unfortunately ran out of time this week, so we might need to learn a little dplyr and purrr to work withdata.frames. Let’s look at a mtcars as a radar.

# devtools::install_github("timelyportfolio/d3radarR")

# use example from ?stars
library(d3radarR)
library(scales)
library(dplyr)
library(purrr)

# this is ugly
#  should probably include some conversion helpers
mtcars %>%
  add_rownames( var = "key" ) %>%
  mutate_each(funs(rescale), -key) %>%
  #limit to 8 rows for manageability
  head(8) %>%
  by_row(
    function(row){
      list(
        key = row[["key"]],
        values = lapply(
          names(row)[-match("key",names(row))],
          function(nm){
            list(
              "axis" = nm,
              "value" = row[[nm]]
            )
          }
        )
      )
    }
  ) %>%
  {
    d3radar( .$.out )
  }

I hear that a certain team that I might like might be playing an important game soon. Let’s looks at a radar chart using ESPN efficiency ratings. Here is where colors would be really helpful, but I just didn’t have the time.

# devtools::install_github("timelyportfolio/d3radarR")

library(d3radarR)

# source : http://espn.go.com/college-football/statistics/teamratings/_/tab/efficiency
espn_efficiency <- list(
  list(
    key = "Alabama",
    values = list(
      list(axis = "offense", value = 70.9/100),
      list(axis = "defense", value = 92.9/100),
      list(axis = "specialtms", value = 58.3/100)
    )
  ),
  list(
    key = "Oklahoma",
    values = list(
      list(axis = "offense", value = 83.3/100),
      list(axis = "defense", value = 83.1/100),
      list(axis = "specialtms", value =42.6/100)
    )
  ),
  list(
    key = "Clemson",
    values = list(
      list(axis = "offense", value = 81.3/100),
      list(axis = "defense", value = 87.1/100),
      list(axis = "specialtms", value = 32.4/100)
    )
  ),
  list(
    key = "Michigan State",
    values = list(
      list(axis = "offense", value = 70.5/100),
      list(axis = "defense", value = 73.2/100),
      list(axis = "specialtms", value = 39.0/100)
    )
  )  
)

d3radar( espn_efficiency )

Thanks

Thanks Charles Allen at TennisVisuals for his great work and in particular his responsiveness to my pestering on his updating radar chart.

As always, thanks to

• Ramnath Vaidyanathan and RStudio for htmlwidgets
• all the contributors to R and JavaScript