Small Multiples with separate y-scales

100%

Small Multiples with separate y-scales

✓ Published0🌍 Public

Last edited Oct 7, 2016

Created on Oct 7, 2016

This small-multiple chart displays the monthly volume of Twitter posts for several distinct topics, such as education and climate change. Each panel shows the trend for its topic on its own independent y-scale, allowing for direct comparison of temporal patterns regardless of differences in overall magnitude. The visualization is built with D3 v3, rendering to SVG. It uses `d3.nest` to group the data and creates a separate `d3.scale.linear` for each panel’s y-axis, while a shared `d3.time.scale` maps the dates across the x-axis.

AI-generated description

A variant of Mike Bostock's small multiples example which, instead of resetting the domain of the y-scale every time it is used, creates a separate y-scale for each multiple.

This a version tailored for a project for UN Global Pulse.

forked from <a href='http://bl.ocks.org/renecnielsen/'>renecnielsen</a>'s block: <a href='http://bl.ocks.org/renecnielsen/9533702'>Small Multiples with separate y-scales</a>

mit Licensed

Similar vizzes

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

73% match

Loading thumbnail…

Small multiples

This example demonstrates small multiples by rendering five separate line charts, one for each month, showing sales trends across the years 2011 to 2015. Each chart displays an area, line, and point series created with d3fc series components, alongside an average annotation line. The charts are generated using the d3fc chartSvgCartesian component, which is applied to each group of data via a data-join. The y-axis is hidden on all but the first chart using CSS, and the chart height adapts to screen width through a media query.

KKuerzibe

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

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

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

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

71% match

Loading thumbnail…

A7-Small Multiples

This visualization displays Broadway show attendance trends as small multiples, with each panel representing a distinct month of data. Each chart plots attendance over time as a colored line within its own axes grid. The code uses D3 v7 methods like `d3.group` to partition the data by month, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` to generate the paths. Show names appear omitted, and labels are manually positioned with SVG `text` elements.

Jjrcuster@dons.usfca.edu

70% match

Loading thumbnail…

Interactive Small Multiples - Step 1

A single line chart displays one category’s count over time, selected from a larger dataset of AskMeFi question categories by year. The chart uses D3 and d3fc, with a Cartesian SVG renderer, linear scales for year and count, and an extent-based domain. The visualization is the first step toward a small-multiple layout, plotting only the seventh nested series.

CColinEberhardt

70% match