V5 Reusable Examples - Nested data, Chart (line) series DDM - Example 5.4
This example demonstrates a nested multi-line chart with two drop-down menus to filter fruit type and year. It uses D3.js v5 in a vanilla HTML implementation, following the ProD3 reusable chart pattern. The chart displays monthly sales data for strawberries, grapes, and blueberries across multiple years, with lines colored by fruit type using d3.scaleOrdinal. Animation and SVG rendering show smooth transitions when filtering the nested dataset.
AI-generated descriptionAn exploration of nesting data. Nested multi-line chart with Drop Down Menu to filter data.
Using the tutorial and series of charts described here:
https://amber.rbind.io/2017/05/02/nesting/
D3.js version: v5.
D3 pattern used:
A vanilla HTML implementation.
Reusable structure:
- 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
Comments
Sign in to join the discussion.