Interactive Small Multiples

100%

Interactive Small Multiples - Step 3.5

✓ Published0🌍 Public

Last edited Apr 6, 2017

Created on Apr 5, 2017

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/ColinEberhardt/'>ColinEberhardt</a>'s block: <a href='http://bl.ocks.org/ColinEberhardt/9b8b198a81e749c5ab8b1e06b455db61'>Interactive Small Multiples - Step 1</a>

forked from <a href='http://bl.ocks.org/ColinEberhardt/'>ColinEberhardt</a>'s block: <a href='http://bl.ocks.org/ColinEberhardt/21cd8d6533df723694796948a14b4da1'>Interactive Small Multiples - Step 2</a>

forked from <a href='http://bl.ocks.org/ColinEberhardt/'>ColinEberhardt</a>'s block: <a href='http://bl.ocks.org/ColinEberhardt/5f0c84f0ae23f87e8c9a4c81d1aabd65'>Interactive Small Multiples - Step 3</a>

forked from <a href='http://bl.ocks.org/ColinEberhardt/'>ColinEberhardt</a>'s block: <a href='http://bl.ocks.org/ColinEberhardt/f70c7de43bb91fb7fc7d5bbc3e46a134'>Interactive Small Multiples - Step 4</a>

mit Licensed

Similar vizzes

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

94% match

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 5

This interactive small multiples chart visualizes AskMeFi question counts by category from 2004 to 2012 using d3 and d3fc. Each category appears as its own mini chart with an area plot, gridlines, and a horizontal line annotation. Moving the pointer over any chart reveals the corresponding year and value across all categories via trackball points and labels. The implementation uses d3.nest, d3.scaleLinear, and d3fc’s seriesSvgArea, annotationSvgLine, pointer, and chartSvgCartesian to render and coordinate the synchronized interaction.

KKuerzibe

91% match

Loading thumbnail…

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.

CColinEberhardt

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

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

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

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

76% match