Viewing a saved revision (read-only)
bc8c5d34e895408895615d0a99c7926e
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.
AI-generated descriptionExploration of layouts example, from Chapter 2 of Mastering D3.
Expanded to show each chart across the page horizonatlly
Exapnded to: - apply closeInterval() to intervaled change. - iterate through the data, adding each new dataset with each interval (funky use of looping/ filtering/ mapping etc.)
- to finish adjust udpate to accept different dataset format
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.