Create a mosaic (Marimekko) chart. — mosaic

A mosaic chart, also called a Marimekko or Mekko chart, shows how two categorical variables relate to each other and to the whole. Each column stands for one category of x, and its width is that category's share of the grand total. Each column is then split into stacked segments, one per category of fill, normalised to 100% of the column. So the area of every cell is proportional to its count (or summed value), and you can read both marginal and conditional shares in a single picture. The look follows the mosaic example from the Vega-Lite gallery: white gaps between cells, percentage axes, column labels across the top and in-cell labels wherever they fit.

Hovering a cell highlights it and shows a tooltip with its count, the share of its column in the total and its share within the column. Hovering a legend entry highlights every cell of that fill category, and hovering a column label highlights the whole column.

Column and segment order follow the factor levels of x and fill. Character columns are ordered alphabetically and numeric columns in increasing order.

Usage

mosaic_chart(
  data,
  x,
  fill,
  value = NULL,
  colors = NULL,
  gap = 2,
  labelType = c("percent", "count", "both", "none"),
  valueFormat = ",.0f",
  labelFontSize = 11,
  labelCol = NULL,
  columnFontSize = 12,
  hover = TRUE,
  animate = TRUE,
  legend = TRUE,
  legendTitle = NULL,
  legendFontSize = 11,
  xtitle = NULL,
  ytitle = NULL,
  axisTitleFontSize = 12,
  xFontSize = 10,
  yFontSize = 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.
x: The name of the categorical column that defines the columns. The width of each column is its share of the total.
fill: The name of the categorical column that splits each column into stacked segments, normalised to 100% within the column.
value: Optional. The name of a numeric (non-negative) column that is summed for each x/fill combination. Defaults to NULL, which counts rows instead.
colors: Optional. A vector of colors, one per fill category, recycled if needed. Defaults to NULL, which uses D3's Tableau 10 palette.
gap: Width in pixels of the white gaps between columns and between segments. Defaults to 2.
labelType: What to print inside each cell when there is room for it: "percent" (the share within the column, the default), "count" (the count or summed value), "both", or "none".
valueFormat: A d3-format specifier used to display counts or values in the labels and the tooltip (e.g. ",.0f", ".3~s"). Defaults to ",.0f".
labelFontSize: Font size of the in-cell labels. Defaults to 11.
labelCol: Optional. Color of the in-cell labels. Defaults to NULL, which picks white or near-black automatically for contrast with each cell's fill.
columnFontSize: Font size of the column (x category) labels drawn above the chart. Labels that do not fit their column are shortened or hidden. Defaults to 12.
hover: Whether to highlight the hovered cell and show a tooltip. Defaults to TRUE.
animate: Whether the columns grow into place with a short staggered animation on first render. Defaults to TRUE.
legend: Whether to display a legend of the fill categories. Defaults to TRUE.
legendTitle: Optional. Title of the legend. Defaults to NULL, which uses the name of the fill column. Use "" to hide it.
legendFontSize: Font size of the legend text. Defaults to 11.
xtitle: Optional. Title of the x-axis (bottom).
ytitle: Optional. Title of the y-axis (left).
axisTitleFontSize: Font size of the axis titles. Defaults to 12.
xFontSize: Font size of the x-axis tick labels. Defaults to 10.
yFontSize: Font size of the y-axis 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. It is also the color of the gaps between cells. Defaults to "white".
axisCol: Color of the axes, the axis labels, the column labels, the legend text and the title. Defaults to "black".
width: Optional. The width of the SVG output.
height: Optional. The height of the SVG output.

Value

An SVG mosaic chart.

Examples

# Survival on the Titanic by passenger class (pre-aggregated counts)
titanic <- as.data.frame(Titanic)

mosaic_chart(
  data   = titanic,
  x      = "Class",
  fill   = "Survived",
  value  = "Freq",
  colors = c("#e45756", "#4c78a8"),
  xtitle = "Share of passengers and crew",
  ytitle = "Share within class",
  title  = "Who survived the Titanic?"
)


# Counting rows: gears by number of cylinders. Factor levels set the order
# of both the columns and the stacked segments.
cars <- mtcars
cars$cyl  <- factor(cars$cyl,  levels = c(8, 6, 4),
                    labels = c("8 cyl", "6 cyl", "4 cyl"))
cars$gear <- factor(cars$gear, levels = c(3, 4, 5),
                    labels = c("3 gears", "4 gears", "5 gears"))

mosaic_chart(
  data        = cars,
  x           = "cyl",
  fill        = "gear",
  labelType   = "both",
  legendTitle = "Gears",
  title       = "Motor Trend cars: gears by cylinders"
)


# Hair and eye color of statistics students (counts are summed over Sex)
hair_eye <- as.data.frame(HairEyeColor)
hair_eye$Eye <- factor(hair_eye$Eye,
                       levels = c("Brown", "Hazel", "Green", "Blue"))

mosaic_chart(
  data   = hair_eye,
  x      = "Hair",
  fill   = "Eye",
  value  = "Freq",
  colors = c("#8c564b", "#bcbd22", "#2ca02c", "#1f77b4"),
  gap    = 3,
  xtitle = "Hair color",
  title  = "Hair and eye color of 592 students"
)