area small multiples
This example visualizes changes in sports participation over time using a small-multiples layout of area charts. Each sport—such as Volleyball, Fishing, and Boxing—gets its own small SVG plot showing the percentage of respondents (0–100%) from 2004 to 2017. The charts share a common y-axis scale and color encoding, with a stacked area chart at the top? No, actually each small multiple shows a single sport's area, colored distinctly. The view uses D3 v4 to transform long-format CSV data into wide format, stack it, and render individual area paths. Shared x- and y-axes are repeated along the grid, with tick labels for 2004, 2010, and 2017, and percentages 0, 25, 50, 75, 100. The grid layout is responsive, using CSS Grid to arrange the small multiples and their axes. This design lets viewers compare trends across sports in one compact view, with each facet encoding a sport's percentage over time.
# Area Small Multiples
## Overview
This visualization presents a grid of small multiple area charts, each displaying the percentage of respondents for a specific sport over time. The data comes from a "Makeover Monday" dataset tracking sports participation from 2004 to 2017.
## Design & Layout
The visualization uses a **grid-based small multiples** approach where each sport gets its own mini area chart. The layout is built with CSS Grid, with a dedicated column of y-axes on the left and a row of shared x-axes at the bottom, creating a clean, aligned faceted view.
Each small multiple is a **100×100 pixel SVG area chart** with a unique color from a categorical palette (yellow, purple, pink, etc.). The Y-axis consistently represents percentage (0-100%), while the X-axis spans the years 2004–2017. A shared axis system is cleverly implemented by repeating the scales in the margins, making it easy to compare across the grid of small multiples.
The data comes from a Makeover Monday survey dataset tracking the percentage of respondents who selected each sport as their favorite. The chart uses a wide-format transformation of the data and a stacked area representation, with each sport displayed in its own small multiple. Notably, most sports show flat, near-zero trends, with occasional spikes to 1% or 2%, while "No opinion" varies between 0 and 1%. The visualization is built with D3 v4, using SVG rendering and a grid-based layout to organize the small multiples and their shared axes.# Area Small Multiples
## Overview
This visualization presents small multiples of area charts showing the percentage of survey respondents selecting various sports as their favorite over time (2004-2017). The grid layout displays each sport's trend as an individual mini chart, colored with a categorical palette.
## Design
The visualization uses a trellis display of small area charts, one per sport category, arranged in a responsive grid. Each small multiple shares the same scales, with the x-axis showing years (2004–2017) and the y-axis fixed from 0–100%. Rather than repeating axis labels on every panel, shared axes are provided on the left and bottom edges of the grid, creating a clean, compact layout.
The charts are generated using D3.js v4 with SVG rendering. Each sport's percentage values are plotted as an area path, with distinct colors from a categorical scale. The design supports quick scanning and comparison across multiple categories simultaneously.
The grid is responsive via CSS Grid. The visualization uses data from Makeover Monday, displaying the percentage of people participating in various sports over time. The small multiples format makes it easy to compare trends across sports. The axes are shared to facilitate cross-panel comparison.
This is the author's original description. It serves as a starting point. Write a polished, concise description for the gallery in 4 to 5 sentences, explaining what the chart is, the data and the design.
Do not say: "This chart shows" or "This visualization shows", instead describe the visualization. Keep the description to one short paragraph. No lists.
Do not mention the word "simply". Avoid the use of the word "simply".
Use active, vivid language. Write in 3rd person.A grid of small-multiple area charts breaks down the shifting popularity of niche sports in the United States from 2004 to 2017. Each mini plot isolates one sport—like Volleyball, Rodeo, or Gymnastics—as its own colored area, with a shared y-axis encoding the percentage of respondents and a common x-axis for time. The individual areas make it easy to scan across sports and spot which activities gained, lost, or maintained participation levels over the years. A shared grid with aligned axes allows for direct visual comparison between categories, while the qualitative color palette distinguishes each sport without implying rank.