Small multiples

100%

Small multiples

✓ Published0🌍 Public

Last edited Aug 9, 2018

Created on Mar 8, 2017

This example shows monthly sales trends across five years as a grid of small multiples, with each chart displaying an area, line, and point series plus an average annotation. It is built with d3fc components, including `seriesSvgArea`, `seriesSvgLine`, `seriesSvgPoint`, `seriesSvgMulti`, and `chartSvgCartesian`, all rendered via a data-join on nested data from `d3.nest`. The charts are laid out using flexbox, and CSS media queries reduce chart height on narrower screens, while y-axes are hidden for repeated charts via opacity styling.

AI-generated description

This is a re-implementation of this neat small mutliple example using d3fc components.

Some notable things ...

The area, line and point series renderers remove some of the basic SVG rendering logic.
The cartesian chart component is being rendered via a data-join to create the small multiples. Because the chart uses a mixture of SVG and DOM, we can hide the y axis for repeated charts using CSS.
The responsive behaviour where the chart height is reduced for narrower screens uses a simple media query. This is made possible because the chart components uses the underlying d3fc element API which handles redrawing svg / canvas elements when their size changes.

mit Licensed

Similar vizzes

Loading thumbnail…

Small Multiples

This visualization shows monthly stock prices for multiple symbols as a grid of small multiples, with each chart displaying a time-series line and area fill for a single stock. The x-axis spans the common date range across all symbols, while the y-axis is independently scaled per chart to accommodate local price ranges. Built with D3 v3, the code loads CSV data via `d3.csv`, nests entries by symbol using `d3.nest`, and renders SVG paths using `d3.svg.area` and `d3.svg.line`.

Mmbostock

81% match

Loading thumbnail…

Small Multiples III

This example displays small multiples of stock price trends for indices like the S&P 500 and MSFT, using a shared time scale across all panels. Each multiple receives its own linear y-scale, computed independently from the maximum price of its data series, allowing direct visual comparison of relative shape without a common price range. The visualization is rendered as SVG using D3 v3, with lines and filled areas generated via `d3.svg.line` and `d3.svg.area`. Data is loaded from a tab-separated file and grouped by stock symbol using `d3.nest`.

Mmbostock

78% match

Loading thumbnail…

Small Multiples II

Small multiples display time-series price data for the S&P 500 and MSFT from a TSV file, each chart drawing a gray line and light-gray area chart with its own independent y-axis scale. The D3 v4 code creates a scope per symbol using `selection.each` and the `multiple` function, applying a linear scale for price and a time scale for dates. Each SVG contains an area path and a line path appended via `d3.area` and `d3.line`, with the data nested by symbol using `d3.nest`.

Mmbostock

77% match

Loading thumbnail…

Interactive Small Multiples - Step 3.5

A grid of small multiples charts shows the frequency of AskMeFi questions across Yahoo Answers-style categories by year, with each category rendered as its own area chart. The visualization uses D3 v4 and d3fc, specifically `fc.seriesSvgArea`, `fc.seriesSvgLine`, and `fc.chartSvgCartesian`, to compose each mini-chart. A fixed tooltip point, drawn via `fc.seriesSvgPoint`, is placed in every panel, and data comes from the TSV file `askmefi_category_year.tsv`. The layout arranges the small multiples side-by-side, with axes and gridlines customized for readability.

CColinEberhardt

76% match

Loading thumbnail…

Example of Small Multiples with Mouseover Tooltip (fixed)

Small multiples of line charts display monthly request counts for six categories. Each chart has its own x- and y-axes and a shared mouseover tooltip that highlights the nearest data point, showing its value. The visualization uses d3.v4 with SVG rendering, parsing the CSV data with d3.csv, scaling axes with d3.scaleTime and d3.scaleLinear, and building the tooltip with an overlay rect and mousemove handler.

PPhilippe Rivière

76% match

Loading thumbnail…

Small_Multiple

Small multiples show a single time series per stock symbol from the provided stocks.csv data, with each chart displaying the price trend and its colored area fill. Each panel uses its own y-domain scaled to that symbol’s maximum price, while the x-axis uses a shared time scale across all charts. The visualization is rendered as SVG using d3.v4, with d3.nest grouping data by symbol, d3.area and d3.line generating the shapes, and d3.scaleOrdinal assigning distinct colors per stock.

BBarbierJeremy

76% match

Loading thumbnail…

multiple lines

This example visualizes monthly net income trends across three years (2015–2017) as multiple overlaid line series. The SVG chart uses a linear x-scale for months (January through August) and a linear y-scale for totalNet values, with each year’s data drawn as a separate line. The visualization is rendered with D3 v4, using axes and scales to map the temporal and quantitative dimensions, and the design includes a subtle box shadow and labeled axis styling. The data is loaded from an external JSON file, and the chart is generated with animation support, making it easy to compare yearly patterns side by side.

663anp3ca

75% match

Loading thumbnail…

Local Variables

This example shows monthly price trends for several stock market indices, displayed as small multiples of overlapping line charts with shaded areas and right-side axes. Each symbol’s chart is independently scaled, with its own linear y-axis and shared time scale. The code uses d3.local() to store per-element scales, area generators, line generators, and axis components on the SVG group nodes, while d3.nest() groups the tab-separated data by symbol. d3.axisRight renders the ticks, and d3.area and d3.line define the visual marks.

GGerardoFurtado

74% match