Create a radar chart. — radar

A radar chart (also called a spider or web chart) compares several quantitative variables at once by placing each one on its own spoke radiating from a common center. Each series (a row of the data) is drawn as a closed, translucent polygon joining its values on every spoke, so series can be compared by their overall shape and footprint. Concentric grid rings mark the scale. The look and feel is inspired by the radar chart of the Chart.js JavaScript library, reimplemented here in plain D3.

The chart is interactive: the polygons grow out from the center on first render, hovering a point shows a tooltip with its value while the other series fade, hovering a polygon focuses that series, and clicking a legend entry toggles the corresponding series on or off.

Usage

radar_chart(
  data,
  group,
  axes = NULL,
  axisLabels = NULL,
  maxValue = NULL,
  scaleEachAxis = FALSE,
  levels = 5,
  gridShape = c("polygon", "circle"),
  colors = NULL,
  fillOpacity = 0.2,
  lineWidth = 2,
  pointRadius = 3,
  showTicks = TRUE,
  valueFormat = ",",
  gridCol = "#dddddd",
  hover = TRUE,
  animate = TRUE,
  legend = TRUE,
  legendFontSize = 12,
  labelFontSize = 12,
  tickFontSize = 10,
  title = NULL,
  titleFontSize = 16,
  font = "Verdana, Geneva, Tahoma, sans-serif",
  bgcol = "white",
  axisCol = "black",
  width = NULL,
  height = NULL
)

Arguments

data: The data frame containing the variables to consider, in wide format (one row per series).
group: The name of the column holding the series labels. Its values must be unique (one row per series).
axes: Optional. A character vector of at least three numeric column names, each drawn as a spoke of the radar. Defaults to NULL, which uses every numeric column except group.
axisLabels: Optional. A character vector, the same length as axes, of labels displayed at the end of each spoke. Defaults to the column names.
maxValue: Optional. The value of the outer ring. With a shared scale, a single positive number; with scaleEachAxis = TRUE, either a single number or one number per axis. Defaults to NULL, which rounds the data maximum up to a "nice" value. Values above maxValue are drawn on the outer ring.
scaleEachAxis: Whether every axis gets its own scale running from 0 to that axis' (nice) maximum. Useful when the axes are measured in different units. The ring tick labels are then hidden and each axis label shows its maximum instead. Defaults to FALSE (one scale shared by all axes).
levels: The number of concentric grid rings. Defaults to 5.
gridShape: Shape of the grid rings, either "polygon" (default) or "circle".
colors: Optional. A vector of colors, one per series (recycled if shorter). Defaults to NULL, which uses a soft palette in the spirit of Chart.js.
fillOpacity: Opacity of the polygon fills, between 0 and 1. Defaults to 0.2.
lineWidth: Width of the polygon outlines in pixels. Defaults to 2.
pointRadius: Radius of the point markers in pixels. Defaults to 3. Use 0 to hide the markers.
showTicks: Whether to print the value of each grid ring along the top spoke (shared scale only). Defaults to TRUE.
valueFormat: A d3-format specifier used to display values in the ticks and the tooltip, e.g. ".1f" or ".0%". Defaults to "," (thousands separator, insignificant zeros trimmed).
gridCol: Color of the grid rings and spokes. Defaults to "#dddddd".
hover: Whether to show a tooltip and highlight the hovered series. Defaults to TRUE.
animate: Whether the polygons grow out from the center on first render. Defaults to TRUE.
legend: Whether to display a clickable legend of the series. Defaults to TRUE.
legendFontSize: Font size of the legend text. Defaults to 12.
labelFontSize: Font size of the axis labels. Defaults to 12.
tickFontSize: Font size of the grid ring tick labels. Defaults to 10.
title: Optional. Title of the chart.
titleFontSize: Font size of the chart title. Defaults to 16.
font: The font family used for all text. Defaults to "Verdana, Geneva, Tahoma, sans-serif".
bgcol: Background color of the SVG. Defaults to "white".
axisCol: Color of the axis labels, tick labels, legend text and title. Defaults to "black".
width: Optional. The width of the SVG output.
height: Optional. The height of the SVG output.

Value

An SVG radar chart.

Examples

# Skill ratings of three football players (shared 0-100 scale)
players <- data.frame(
  player    = c("Ana", "Ben", "Chloe"),
  speed     = c(88, 72, 65),
  power     = c(60, 91, 70),
  passing   = c(79, 58, 93),
  dribbling = c(92, 64, 81),
  defending = c(45, 83, 74),
  stamina   = c(70, 77, 88)
)

radar_chart(
  data     = players,
  group    = "player",
  axes     = c("speed", "power", "passing", "dribbling",
               "defending", "stamina"),
  maxValue = 100,
  title    = "Player skill ratings"
)


# Variables measured in different units: give every axis its own scale
cyl_means <- aggregate(cbind(mpg, hp, wt, qsec, disp) ~ cyl, data = mtcars,
                  FUN = mean)
cyl_means$cyl <- paste(cyl_means$cyl, "cylinders")

radar_chart(
  data          = cyl_means,
  group         = "cyl",
  axisLabels    = c("Miles/gallon", "Horsepower", "Weight (1000 lbs)",
                    "1/4 mile time (s)", "Displacement (cu.in.)"),
  scaleEachAxis = TRUE,
  levels        = 4,
  gridShape     = "circle",
  valueFormat   = ".1f",
  title         = "mtcars averages by number of cylinders"
)