Interactive Small Multiples

100%

Interactive Small Multiples - Step 5

✓ Published0🌍 Public

Last edited Apr 6, 2017

Created on Apr 6, 2017

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.

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>

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

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

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

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

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

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

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

72% match