d3Edge_v5ProReusable_BarChart-Ch4.3
A reusable bar chart built with D3.js v5 demonstrates the Pro D3 pattern for modular, testable chart construction. The example shows two bars charting datasets with axes and hover interactions that print data values and indices to the console while changing bar color. It uses d3.scaleBand and d3.scaleLinear for scales, d3.axisBottom and d3.axisLeft for axes, and a d3.dispatch 'customHover' event to handle mouseover behavior, following Mike Bostock's reusable chart principles.
AI-generated descriptionSimple Bar Chart example:
A vanilla HTML implementation of a Delivering the D3Edge examples - in v5. Build using the ProD3.js pattern and Rob Moores updateable pattern.
It is derived from Mike Bostock's Towards Reusable Charts (https://bost.ocks.org/mike/chart/) as the source of the foundational principles. But uses 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 the charts.
Addtional help from and aknowledgement to:
- Mastering D3.js by Castillo Pablo Navarro. https://www.packtpub.com/web-development/mastering-d3js
- Data Visualization with D3.js Cookbook by Nick Qi Zhu https://www.packtpub.com/product/data-visualization-with-d3-js-cookbook/9781782162162
- Developing A D3.js Edge - Constructing reusable D3 components and charts by Chris Viau Andrew Thornton Ger Hobbelt,Roland Dunn https://www.wileyindia.com/developing-a-d3-js-edge-constructing-reusable-d3-components-and-charts.html.
Comments
Sign in to join the discussion.