Viewing a saved revision (read-only)
236edfb7d2b14211aef68a6751a19174
V5 Reusable Examples - Nested data, Chart (line) series - Example 2 (unnested)
This example demonstrates a simple line chart using unnested data, plotting monthly sales figures for three fruit categories (strawberry, grape, blueberry) as a single red line. The chart uses the D3.js v5 library with a reusable chart structure based on the ProD3 pattern, incorporating d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.line to generate the SVG path. The visualization includes labeled axes and a title, with data loaded from a CSV file containing Month, Sales, and Fruit columns.
AI-generated descriptionAn exploration of nesting data. 1 - simple line chart.
Using the tutorial and series of charts described here:
https://amber.rbind.io/2017/05/02/nesting/
d3.js ver: 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