Skip to main content
SimilarExport ZIP
100%

Towards Reusable Charts

✓ Published0🌍 Public
11Cr18Ni9
Last edited Feb 9, 2017
Created on Feb 8, 2017

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.

AI-generated description

Built with blockbuilder.org

An example follow Mike Bostock's Reusable Charts pholosophy.

mit Licensed

Similar vizzes

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
82% match
Loading thumbnail…

Reusable Bar Chart

This reusable bar chart, built with D3 v3, visualizes CO2 emissions, education levels, and employment-to-population ratios across 24 countries, using an animated, multi-series dataset. It is implemented as a configurable D3 plugin via d3.svg.barchart, rendering to SVG with smooth transitions. The chart supports customization of margins, dimensions, scales, padding, animation duration, tick formatting, and accessor functions for the x- and y-values, as well as optional domain setters. A subtle animation introduces bars, which rise with a transition, and axes animate into place, including rotated x-axis labels. Hovering reveals values. This example was forked from Doug Dowson's reusable chart pattern.

AAdlopez2016
82% match
Loading thumbnail…

Reusable Bar Chart

This reusable bar chart, built with D3 v3, visualizes CO2 emissions, education levels, and employment-to-population ratios across 24 countries, using an animated, multi-series dataset. It is implemented as a configurable D3 plugin via d3.svg.barchart, rendering to SVG with smooth transitions. The chart supports customization of margins, dimensions, scales, padding, animation duration, tick formatting, and accessor functions for the x- and y-values, as well as optional domain setters. A subtle animation introduces bars, which rise with a transition, and axes animate into place, including rotated x-axis labels. Hovering reveals values. This example was forked from Doug Dowson's reusable chart pattern.

AAdlopez2016
82% match
Loading thumbnail…

Reusable Bar Chart

This reusable bar chart, built with D3 v3, visualizes CO2 emissions, education levels, and employment-to-population ratios across 24 countries, using an animated, multi-series dataset. It is implemented as a configurable D3 plugin via d3.svg.barchart, rendering to SVG with smooth transitions. The chart supports customization of margins, dimensions, scales, padding, animation duration, tick formatting, and accessor functions for the x- and y-values, as well as optional domain setters. A subtle animation introduces bars, which rise with a transition, and axes animate into place, including rotated x-axis labels. Hovering reveals values. This example was forked from Doug Dowson's reusable chart pattern.

AAdlopez2016
82% match
Loading thumbnail…

Reusable Chart component for D3 - using prototypes and factories

This example demonstrates a reusable bar-chart component built with D3.js, using a factory method and prototype-based class to create configurable chart instances. The code defines a `BarChart.instanceOf` factory that returns chart objects with chainable accessor methods for width, height, bar padding, and fill color. When the `render` method is called on a selection, it binds to each data array, computes bar dimensions from the data extent, and appends SVG rectangles via `d3.select` and `selection.append`. The chart reads data directly from bound arrays, scaling bar widths proportionally to the maximum value, and applies the configured fill color. The implementation emphasizes encapsulation and reuse through JavaScript prototypes and closures, without relying on external data sources.

DDougManuel
81% match
Loading thumbnail…

MasteringD3-Resusable-ProD3js-2.4.1

This example demonstrates a reusable, modular bar code chart built with D3.js v5, following the Pro D3.js pattern for maintainable and testable charts. It renders multiple SVG charts, each displaying hourly data distributions as radial arcs with a circular layout, using `d3.range`, `d3.map`, and angle calculations to group data by hour. The code initializes layout properties, scales, and container groups, and includes animation-ready structures, though no explicit transitions are triggered. The visualization is derived from Mike Bostock’s "Towards Reusable Charts" principles and applies a radial bar code style to show temporal patterns.

JJimMaltby
81% match
Loading thumbnail…

MasteringD3-Resusable-ProD3js-2.4.3

This example demonstrates reusable, modular bar charts built with D3.js v5, following the Pro D3.js pattern and principles from Mike Bostock’s “Towards Reusable Charts.” It displays multiple charts horizontally across the page, each representing a different dataset with radial bar layouts. The code uses D3’s `d3.map`, `d3.range`, and layout functions to process hourly time-series data, while SVG groups and arc drawing handle the visual output. The visualization expands on iterative updates by cycling through datasets on an interval, showing how chart components can be dynamically refreshed.

JJimMaltby
80% match
Loading thumbnail…

MasteringD3-Resusable-ProD3js-2.3B1

This example presents a reusable bar code chart built from the principles in Mike Bostock’s “Towards Reusable Charts” and the Pro D3.js pattern. It visualizes time-series data by rendering vertical line marks for each daily mention value, using d3.scaleTime to map dates to x-coordinates. The code demonstrates a modular chart factory pattern with separate functions for building scales, SVG containers, and drawing the bars, and it relies on d3.select and data joins to append the lines. Animated transitions are also included in the chart’s rendering process.

JJimMaltby
80% match