Reusable Chart Example

100%

Reusable Chart Example

✓ Published0🌍 Public

Aapratt2003

Last edited Sep 28, 2017

Created on Sep 28, 2017

This example demonstrates small multiples of time-series charts using the reusable chart pattern from Mike Bostock's "Towards Reusable Charts" tutorial, updated to D3 v4. It renders monthly stock price data for multiple symbols as individual line and area charts, each with its own title, drawn in SVG. The chart instances share a global x-axis extent so their time axes align, while a `d3.nest` groups the data by symbol. Accessors for values, titles, and extents make the chart flexible and reusable.

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 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.

TThanaporn-sk

92% match

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

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

83% match

Loading thumbnail…

Reusable Line Chart v2

This responsive multiline chart visualizes up to four time series, with a legend that toggles the visibility of each series on click. It is built as a reusable, modular chart function, following Mike Bostock's "Towards Reusable Charts" pattern, and supports customization of chart size, margins, colors, and axis labels through a bind method. The chart renders with SVG and animation, and includes an interactive tooltip and a legend. The responsive design ensures the chart resizes with the screen, and the tooltip displays values on hover. The example uses D3 v3 and is licensed under MIT.

663anp3ca

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

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

80% match

Loading thumbnail…

d3NoobV5 Reusable Examples - MultiLine Chart

A reusable multi-line chart renders two time-series lines from a CSV dataset, plotting date against closing and opening values. The visualization demonstrates a modular chart architecture using D3 v5's SVG rendering, with scales, axes, and gridlines constructed via `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` within a pattern inspired by Mike Bostock's reusable charts. The chart draws two distinct lines from the same data columns, showing how additional series can be added to the reusable component.

JJimMaltby

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

79% match