Reusable Chart Example

100%

Reusable Chart Example

✓ Published0🌍 Public

Last edited Apr 22, 2017

Created on Mar 9, 2017

This example demonstrates a reusable chart pattern by rendering small multiples of monthly stock price data for the S&P 500 and MSFT from a TSV file. Each chart displays an area and line graph with a shared x-axis extent, using D3 v4’s `d3.nest`, `d3.scaleTime`, `d3.scaleLinear`, and SVG paths. The `timeSeriesChart` function exposes accessors like `values` and `title` to customize per-instance data and labels, following Mike Bostock’s “Towards Reusable Charts” tutorial.

AI-generated description

This example is a small multiples experiment based on code written by Mike Bostock in 2012 as part of his tutorial Towards Reusable Charts.

I had heard that the "Towards Reusable Charts" style can be used to easily create small multiples, but I didn't quite grok how. This example shows one way that it can work, drawing data and inspiration from this other example Small Multiples III. On the way, I upgraded the original reusable line chart code to D3 v4, with minimal modifications. I also wanted to add a title to each instance of the chart, so ended up adding the values and title accessors to make it work well with the output from d3.nest.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/66d926fe73211fd650ec'>Towards Reusable Charts Example</a>

<div align="center"><img src="http://simplehitcounter.com/hit.php?uid=2227680&f=16777215&b=0" border="0" height="18" width="83"></div>

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/02163a13a40112e0ab6f14bbacc986f8'>Small Multiples with Reusable Charts</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Reusable Chart Example

This example demonstrates small multiples by rendering six separate time-series charts for stock price data from a TSV file, with each chart showing a different symbol (such as S&P 500 and MSFT) sharing a common x-axis extent. Built with D3 v4, the reusable chart component `timeSeriesChart()` uses SVG rendering, with `d3.scaleTime()`, `d3.scaleLinear()`, and `d3.axisBottom()` to create the axes. The code employs `d3.nest()` to group data by symbol and accessors like `values` and `title` to populate each mini chart with its own line, area fill, and title.

CCurran Kelleher

92% match

Loading thumbnail…

Reusable Chart Example

This example demonstrates a reusable time-series chart that visualizes the monthly S&P 500 index price from 2000 to 2010. The chart renders an area and line graph using SVG, with a line representing price trends and a shaded area beneath it. The code uses the D3.js library, specifically `d3.svg.area()`, `d3.svg.line()`, `d3.svg.axis()`, and `d3.time.scale()`, to create a customizable chart function. The data is loaded from a CSV file, and the chart is invoked via `.call(chart)`.

TThanaporn-sk

88% match

Loading thumbnail…

Reusable Line Chart

This reusable line chart visualizes the monthly S&P 500 stock price index from January 2000 to February 2014, highlighting long-term trends and fluctuations. Built with D3.js v3, it uses `d3.svg.line` and `d3.svg.area` to render the path, with `d3.time.scale` and `d3.scale.linear` for axes. The chart is configurable via accessor functions for x and y values, and the y-axis includes gridlines with a baseline accent. Data is loaded from a CSV file and rendered as SVG.

RRicCheng

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

78% match

Loading thumbnail…

Reusable Bar Chart

This example demonstrates a reusable bar chart built with D3 v5, rendering a monthly price series (January 2000 through December 2010) as an SVG. The chart uses a band scale for the categorical date axis and a linear scale for the price values, with axes formatted using compact number notation. The `barChart` function returns a configurable closure that exposes chainable methods—width, height, x, y, padding, and title—allowing the chart to be customized and reused. While the data includes 132 monthly data points, the visible bars appear relatively few, suggesting the chart is intended to be resizable and may currently render a subset or need responsive adjustment.

AAlexDaGr8

78% match

Loading thumbnail…

Towards Reusable Charts

This example demonstrates a reusable bar chart component built with D3.js (v3) following Mike Bostock's "Reusable Charts" philosophy. The chart renders income data for five countries from an embedded CSV file, using SVG for output. The code defines `d3.svg.myBarchart` as a modular function with configurable properties like margins, scales, and axis settings, allowing the same chart to be instantiated multiple times without global variable contamination. It implements ordinal and linear scales, along with D3's axis components and a custom grid-line generator, all drawn within a fixed 600×400 viewport.

11Cr18Ni9

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

d3-template: timeSeries

This example demonstrates a reusable time series chart built with D3.js v3, following the reusable chart pattern. The visualization renders an area chart with an overlaid line, using SVG, with data embedded directly in the page via a hidden `<pre>` tag or loaded from an external CSV file. The chart supports a configurable API (margin, width, height, x/y accessors) and combines approaches from Mike Bostock's reusable charts, Rob Moore's updatable charts, and the author's unified interface for external and embedded data. The time series shows monthly price data from January 2000 through August 2001, with the area filled in steel blue and a black line. The example highlights modular, reusable D3 code with a clean separation of concerns.

EEE2dev

77% match