Small multiples

100%

Small multiples

✓ Published0🌍 Public

Last edited Jan 12, 2017

Created on Jan 10, 2017

Small multiples compare financial characteristics across four bank clusters using horizontal bar charts. Each cluster receives its own panel, with bars colored on a blue sequential scale encoding the proportion value, ranging from zero to 85 percent. The visualization loads tab-separated data via `d3.tsv`, nests the data by group using `d3.nest`, and renders each small multiple as an SVG element. A `d3.tip` tooltip reveals exact values on hover, while the y-axis is hidden to emphasize relative comparisons between clusters.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

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

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

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

74% match

Loading thumbnail…

Small multiple bar charts with tooltips

Small multiple bar charts show two text-analysis measures, Analytic and Continental, across four categories: self mentions, words per sentence, STTR, and directives. Each chart uses horizontal bars to display percentages, with a color scale from red to blue mapping value magnitude. The visualization, built with D3 v3, loads data from a TSV file and nests it by country. Hovering over a bar triggers a tooltip via the `d3.tip` library, revealing the exact country, year, and percentage value.

MMNoichl

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

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

73% match