Small Multiples II

100%

Small Multiples II

✓ Published0🌍 Public

Last edited May 27, 2016

Created on Mar 11, 2014

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`.

AI-generated description

A variant of the small multiples example which, instead of resetting the domain of the y-axis every time it is used, creates a scope for each small multiple using selection.each.

gpl-3.0 Licensed

Similar vizzes

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

91% match

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

86% 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

83% match

Loading thumbnail…

Local Variables

Small multiples of stock price time series compare the S&P 500 and Microsoft from 2000 to 2010. Using D3 4.0’s `d3.local()` variable, each chart defines its own y-scale and area and line generators, scoped per SVG element. The x-scale is shared globally. Data loads from `stocks.tsv` via `d3.tsv`, and `d3.nest()` groups records by symbol for rendering.

Mmbostock

82% match

Loading thumbnail…

smallmultiplesStep2

This example shows stock price trends for multiple companies as small multiples, with each symbol rendered as an individual sparkline in its own panel. The visualization uses D3 v3 to load CSV data, nest it by company, and draw both line and area paths. The animation is driven by a `d3.timer` that reveals the data progressively. The code uses `d3.svg.line`, `d3.svg.area`, and `d3.time.scale` to map dates and prices, with each panel scaled independently to its own maximum price.

AAminaSGitHub

81% match

Loading thumbnail…

Reusable Chart Example

This example demonstrates small multiples by rendering six separate time-series charts for stock price data from a TSV file, with each chart showing a different symbol (such as S&P 500 and MSFT) sharing a common x-axis extent. Built with D3 v4, the reusable chart component `timeSeriesChart()` uses SVG rendering, with `d3.scaleTime()`, `d3.scaleLinear()`, and `d3.axisBottom()` to create the axes. The code employs `d3.nest()` to group data by symbol and accessors like `values` and `title` to populate each mini chart with its own line, area fill, and title.

CCurran Kelleher

80% match

Loading thumbnail…

TP3_DataViz_SmallMulti

This example shows monthly stock price trends for Microsoft, Amazon, and IBM from 2000 to 2010 using small multiples, with one SVG chart per symbol. Each chart displays a pink area path and a black line, with the y-axis scaled independently based on each symbol’s maximum price. The code uses d3.csv to load data, d3.nest to group by symbol, and d3.area and d3.line with d3.scaleTime and d3.scaleLinear. The color of each area is selected from a hardcoded array, demonstrating per-chart styling.

EElisaDnr

79% match

Loading thumbnail…

Small multiples

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.

CColinEberhardt

77% match