Interactive Small Multiples

100%

Interactive Small Multiples

✓ Published0🌍 Public

Last edited Jun 28, 2019

Created on Apr 5, 2017

This interactive small multiples visualization shows the number of questions asked on Ask MeFi across 20 categories from 2004 to 2012, with each chart displaying a line and area plot for a category. Moving the pointer over any plot reveals a shared vertical tracking line and dot that highlights the count for a selected year across all categories simultaneously. The example uses D3 v5 and the d3fc library, including `fc.chartCartesian`, `fc.seriesSvgArea`, `fc.annotationSvgLine`, and `fc.pointer`, with the data loaded from a tab-separated TSV file.

AI-generated description

Interactive small multiple example built using d3 and d3fc as described in this blog post.

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Interactive Small Multiples - Step 4

This interactive visualization displays a small multiples chart of AskMeFi category question counts by year, with each category in its own panel. The charts combine an area series and gridlines rendered via d3fc, while a vertical annotation line and point markers appear on hover using the `fc.pointer` API to track the cursor position. The code uses `d3.nest` to group the TSV data by category, with `fc.extentLinear` setting the scales and `fc.chartSvgCartesian` building each panel, updating the display dynamically on pointer movement.

CColinEberhardt

93% match

Loading thumbnail…

Interactive Small Multiples - Step 3

This interactive small multiples visualization displays the number of AskMeFi posts per category across years, using a series of mini line-and-area charts aligned in a grid. Each chart shares a common y-axis scale and highlights a distinct category, allowing for easy trend comparison. The code builds the charts with D3 v4 and d3fc, employing `fc.seriesSvgArea`, `fc.seriesSvgLine`, and `fc.chartSvgCartesian`, with data nested by category via `d3.nest` from a TSV file. Gridlines and axes are customized through `fc.annotationSvgGridline` and tick formatting.

CColinEberhardt

92% match

Loading thumbnail…

Interactive Small Multiples - Step 1a

This example shows how the frequency of AskMeFi questions changes from 2004 to 2012 across 20 categories, with each category rendered as a separate small multiple line chart. The visualization uses the D3fc library’s `chartSvgCartesian` function with `seriesSvgRepeat` to horizontally repeat the line series, and `seriesSvgLine` for each trend. Data is loaded via `d3.tsv` from a TSV file, then nested by category using `d3.nest()` before being passed to the chart for rendering.

CColinEberhardt

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

90% match

Loading thumbnail…

Interactive Small Multiples - Step 2

A single small multiple displays a time-series area chart for one category from the AskMeFi dataset, showing the number of posts per year from 2004 onward. The chart uses D3 and d3fc to render the area, line, and a horizontal gridline, with axes configured via `fc.chartSvgCartesian`. The code currently selects only the eighth nested category, "human relations," and draws it with tools from `fc.seriesSvgArea`, `fc.seriesSvgLine`, and `fc.annotationSvgGridline`, using linear scales and extent functions for domains.

CColinEberhardt

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

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

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

70% match