Bleeding Edge - crosstalk

If you want to get a preview of the exciting changes for htmlwidgets, be sure to check out htmlwidgets issue 86. Thanks to Joe Cheng from RStudio for taking the lead on this.

This Week’s Widget - 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 of Nadieh 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 from devtools::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 with data.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