Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

MasteringD3-Resusable-ProD3js-2.4

Public visualization

Viewing a saved revision (read-only)

3ba02945f67340539062af2377380c89

MasteringD3-Resusable-ProD3js-2.4

0 stars1🌍 Public
JJimMaltby
Last edited Dec 3, 2021
Created on Nov 30, 2021

This example demonstrates a reusable bar code chart that visualizes the distribution of data events across the 24 hours of a day. The radial layout, configured through a custom `radialLayout` function, groups data items into hourly segments, displaying the count for each hour as an arc. Built on the principles from Mike Bostock's "Towards Reusable Charts" and the ProD3.js pattern, the code uses D3 v5's SVG rendering, a dispatcher for custom events, and the `d3` API to construct the chart within a container group, offering a modular and maintainable approach.

AI-generated description

Exploration of bar code chart example, from Chapter 2 of Mastering D3.

It is derived from Mike Bostock's Towards Reusable Charts (https://bost.ocks.org/mike/chart/) as the source of the foundational principles.

Using the ProD3 pattern (Pro D3.js Use D3.js to Create Maintainable, Modular, and Testable Charts by Marcos Iglesias https://www.apress.com/gp/book/9781484252024) as the basis for charts pattern.