Viewing a saved revision (read-only)
b9b57cea19ab4458935c6d0f61cef2f8
V5 Reusable Examples - Nested data, Chart (line) series DDM - Example 5.2.1
This example shows a multi-line chart of monthly fruit sales, with a drop-down menu to filter the data by fruit type. It uses nested data structures from a CSV file listing sales figures for strawberries, grapes, and blueberries across 2015 and 2016. The visualization is built with D3 v5, employing reusable chart patterns based on Mike Bostock’s principles and the ProD3 methodology. It renders as an SVG with animated transitions, using D3 scales, axes, and ordinal color mapping.
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