Create a zoomable sunburst chart. — sunburst

A sunburst chart displays hierarchical data as concentric rings. The centre represents the whole, each ring is one level of the hierarchy, and every sector's angle is proportional to its value. The look and feel is inspired by the sunburst series of Apache ECharts, reimplemented here in plain D3.

The chart is interactive: hovering a sector highlights it together with its ancestors and shows a tooltip with its full path, value and shares; clicking a sector zooms into it (its children then fill the whole circle with a smooth arc transition) and clicking the centre zooms back out one level.

Usage

sunburst_chart(
  data,
  levels,
  value = NULL,
  colors = NULL,
  valueFormat = ",.0f",
  innerRadius = 0.22,
  cornerRadius = 0,
  padAngle = 0,
  strokeCol = "white",
  strokeWidth = 1,
  showLabels = TRUE,
  labelRotate = c("radial", "tangential"),
  labelFontSize = 11,
  labelCol = NULL,
  rootLabel = "Total",
  centerFontSize = 13,
  zoom = TRUE,
  hover = TRUE,
  animate = TRUE,
  duration = 750,
  title = NULL,
  titleFontSize = 16,
  font = "Verdana, Geneva, Tahoma, sans-serif",
  bgcol = "white",
  textCol = "black",
  width = NULL,
  height = NULL
)

Arguments

data: The data frame containing the variables to consider.
levels: A character vector of column names that define the hierarchy, from the outermost category (inner ring) to the most detailed one (outer ring), e.g. c("continent", "country"). A missing value (NA or "") at some level ends that row's path early, which makes ragged hierarchies possible. Rows that share the same path are summed.
value: Optional. The name of a numeric (non-negative) column that determines the size of each sector. Defaults to NULL, in which case each row counts as 1 (sector sizes are row counts).
colors: Optional. A vector of colors, one per first-level category (recycled if needed). Deeper levels use progressively lighter shades of their branch color. Defaults to NULL, which uses a built-in 10-color palette.
valueFormat: A d3-format specifier used to display values in the centre and the tooltip (e.g. ",.0f", "$,.2s", ".3~s"). Defaults to ",.0f".
innerRadius: Radius of the centre circle as a fraction of the chart's radius, between 0 and 0.9. The centre shows the current root and its value, and is clicked to zoom out. Defaults to 0.22.
cornerRadius: Corner radius of the sectors in pixels. Defaults to 0.
padAngle: Angular padding between sectors in radians (e.g. 0.005). Defaults to 0.
strokeCol: Color of the sector borders. Defaults to "white".
strokeWidth: Width of the sector borders in pixels. Defaults to 1.
showLabels: Whether to display the sector labels. Labels are truncated or hidden automatically when a sector is too small. Defaults to TRUE.
labelRotate: Orientation of the sector labels: "radial" (default, along the radius) or "tangential" (along the arc).
labelFontSize: Font size of the sector labels. Defaults to 11.
labelCol: Optional. Color of the sector labels. Defaults to NULL, which picks white or near-black automatically for contrast with each sector's fill.
rootLabel: Label shown in the centre (and used as the root name) when the chart is not zoomed. Defaults to "Total".
centerFontSize: Maximum font size of the centre label. Defaults to 13.
zoom: Whether clicking a sector zooms into it and clicking the centre zooms out. Defaults to TRUE.
hover: Whether to highlight the hovered sector (and its ancestors) and show a tooltip. Defaults to TRUE.
animate: Whether the sectors sweep in with an entrance animation. Defaults to TRUE.
duration: Duration of the zoom transition in milliseconds. Defaults to 750.
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".
textCol: Color of the title and the centre label. Defaults to "black".
width: Optional. The width of the SVG output.
height: Optional. The height of the SVG output.

Value

An SVG sunburst chart.

Examples

# World population in 2007 by continent and country
library(gapminder)

pop_2007 <- gapminder[gapminder$year == 2007, ]

sunburst_chart(
  data        = pop_2007,
  levels      = c("continent", "country"),
  value       = "pop",
  valueFormat = ".3~s",
  rootLabel   = "World",
  title       = "World population in 2007"
)


# A three-level hierarchy: a toy company's headcount
staff <- data.frame(
  division = c(rep("Engineering", 6), rep("Sales", 4), rep("Operations", 4)),
  team     = c("Platform", "Platform", "Data", "Data", "Mobile", "Mobile",
               "EMEA", "EMEA", "Americas", "APAC",
               "Finance", "Finance", "HR", "Legal"),
  role     = c("Backend", "SRE", "Engineers", "Analysts", "iOS", "Android",
               "Account execs", "Sales engineers", "Account execs",
               "Account execs", "Accounting", "FP&A", "Recruiting", NA),
  people   = c(42, 12, 18, 9, 11, 13, 25, 8, 31, 14, 10, 6, 9, 5)
)

sunburst_chart(
  data        = staff,
  levels      = c("division", "team", "role"),
  value       = "people",
  rootLabel   = "Company",
  labelRotate = "tangential",
  padAngle    = 0.006,
  cornerRadius = 3,
  title       = "Headcount by division, team and role"
)


# Without a value column, sectors are sized by row counts
library(ggplot2) # for the mpg dataset

sunburst_chart(
  data      = mpg,
  levels    = c("class", "manufacturer"),
  rootLabel = "Cars",
  title     = "Number of car models by class and manufacturer"
)