Small Multiples

Small multiples repeat one chart for each value of a key: a grid of equally sized panels, each drawing the same chart from its own rows. Because every panel uses the same encoding, readers compare them at a glance. Any chart type can be split this way, from a BarChart or LinePlot to a Pie, Treemap, Matrix, or Geomap.

<BarChart config={{
  data, groupBy: "product", x: "year", y: "sales",
  facet: "region"   // one panel per region
}} />

facet takes a data key or a (d, i) => value accessor. Each distinct value gets its own panel, titled with that value. Rows without a value aren’t drawn. Set facet to false to go back to a single chart.

What the panels share

The panels make up one chart, not several:

• One set of chrome. The title, subtitle, total, legend, colorScale, timeline, and zoom, back, search, and table-view controls appear once, around the whole grid.
• One color for each series. A series has the same color in every panel, and a colorScale spans the values every panel draws.
• Interactions across panels. Hovering a mark highlights its series in every panel. Clicking a legend entry hides or solos that series everywhere, and drilling into a group drills every panel. Tooltips describe the mark under the pointer, and a Plot’s shared tooltip and crosshair follow the panel the pointer is over.
• One timeline. Every panel shows the same period. The grid stays the same as the timeline moves or legend entries are toggled, so a panel with no rows in the current period stays in place, showing only its title.

Zooming magnifies the whole grid as one picture.

Layout

The grid sizes itself. D3plus tries every column count and keeps the one that draws the panels largest for the chart’s shape: close to square for round or grid-shaped charts (Pie, Donut, Sunburst, Radar, PolarArea, RadialBar, Chord, Pack, Rings, Network, Matrix, RadialMatrix, and Waffle), wider for a Bullet, a ParallelCoordinates, or a Calendar (shaped like a year of weeks), and a little wider than tall for everything else. Most charts need no layout options at all.

facetConfig adjusts the grid when you want something else:

Option	Default	Description
columns, rows	automatic	Optional. Pins the grid’s shape; setting either one fixes it and the other follows from the panel count.
padding	20	Space between panels, in pixels.
sort	"ascending"	Panel order: "ascending", "descending", "data" (order of first appearance), a (a, b) => number comparator over facet values, or an array of values (values it leaves out go last).
title	the facet value	A (value, rows) => string function for each panel’s title, or false to hide panel titles. Dates are formatted for their interval.
titleConfig	12px, semibold, centered	TextBox config for panel titles: fontSize, fontWeight, fontColor, textAnchor, padding, and so on. By default the color contrasts with the chart’s background.

facetConfig: {
  columns: 4,   // optional: pin the grid to 4 columns
  sort: ["Asia", "Europe", "Americas"],
  title: (region, rows) => `${region} (${rows.length})`,
  titleConfig: {fontSize: 14, textAnchor: "start"},
}

Shared and independent scales

In the Plot family (BarChart, LinePlot, AreaPlot, StackedArea, Streamgraph, Scatter, SlopeChart, BubbleChart, BoxWhisker, BumpChart, Beeswarm, Candlestick, Dumbbell, FanChart, Hexbin, Histogram, Lollipop, Marimekko, Pyramid, Ridgeline, Violin, Waterfall, and Plot itself), every panel uses the same x and y scales by default. Each axis spans every panel’s values, including stacks, bubble sizes, and whiskers, so equal heights mean equal values in any panel, a Histogram bins every panel with the same edges, and a Hexbin bins each panel’s observations on its own, coloring every panel’s bins on one shared colorScale.

Because the scales match, axes are labeled only along the grid’s edges. The left column labels the y axis and the bottom panels label the x axis, and those panels get extra room for their labels so every plot area is the same size. Set axes: "all" to label every panel, or pass an object to set each axis on its own: {x: "all", y: "outer"} labels every panel’s x axis but only the left column’s y axis. BumpChart labels every panel by default, since each panel ranks its own series. Marimekko labels its categories on every panel and its 0–100% share axis only along the outer edge, even with independent scales.

facetConfig: {scales: "independent"}   // each panel fits its own rows
facetConfig: {axes: "all"}             // shared scales, labels on every panel
facetConfig: {axes: {x: "all"}}        // x labels on every panel, y along the edge

With scales: "independent", each panel fits its own data and labels its own axes. Use it when panels differ so much in size that a shared scale would flatten the small ones.

A few charts without x/y axes share scales too. By default a Bullet reads each row against the same domain in every panel, a Calendar gives every panel the same date range (so a day sits in the same cell in each), and a ParallelCoordinates shares each dimension’s domain and labels its axes on every panel. Funnel, PolarArea, and RadialBar default to "independent" instead, since each panel reads best sized to its own values; set scales: "shared" to size every Funnel against the widest stage in any panel, or to give every PolarArea or RadialBar the same value domain.

Charts without axes

A data-driven chart such as a Pie, Treemap, or Pack is drawn in each panel exactly as it would be drawn on its own, fitted to the panel. A Treemap’s areas or a Pack’s circles are sized within their own panel. A Geomap fits each panel’s map to its own rectangle and draws its ocean and tiles in every panel.

Examples

See the small multiples examples: a BarChart, a LinePlot with custom panel padding, independent scales, Donuts in a custom order, Treemaps with a timeline and custom titles, and Matrices sharing a colorScale.

These chart pages have a small multiples example of their own: Bullet, Calendar, Candlestick, Dumbbell, FanChart, Funnel, Icicle, Lollipop, Marimekko, ParallelCoordinates, PolarArea, RadialBar, Ridgeline, Violin, Waffle, and Waterfall.