Skip to main content
SimilarExport ZIP
100%

V5 Reusable Examples - Nested data, Chart (line) series DDM - Example 5.4

✓ Published1🌍 Public
JJimMaltby
Last edited Dec 22, 2021
Created on Nov 24, 2021

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 description

An 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:

Addtional help from and aknowledgement to:

MIT Licensed

Similar vizzes

Loading thumbnail…

V5 Reusable Examples - Nested data, Chart (line) series DDM - Example 5.4

This example uses a nested data structure to power a multi-line chart with two drop-down menus, allowing users to filter the displayed sales trends by fruit type and year. The D3.js v5 code visualizes monthly sales figures loaded from a CSV file, rendering the data as separate lines for each year within a selected fruit category. The chart applies a reusable charting pattern based on the ProD3 methodology, using SVG for drawing the axes and line paths, and includes animated transitions when the user changes the filter selections.

JJimMaltby
97% match
Loading thumbnail…

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.

JJimMaltby
96% match
Loading thumbnail…

V5 Reusable Examples - Nested data, Chart (line) series DDM - Example 5.1

This example demonstrates a nested multi-line chart that visualizes monthly fruit sales across two years, with a drop-down menu filtering the displayed data. The chart uses D3.js v5 to load CSV data, nest it by fruit type and year, and render separate line series with an ordinal color scale. The visualization implements a reusable chart pattern based on Mike Bostock's principles, using SVG for rendering and d3.scaleTime, d3.scaleLinear, and d3.axisBottom for scales and axes.

JJimMaltby
96% match
Loading thumbnail…

V5 Reusable Examples - Nested data, Chart (line) series DDM - Example 5.3

A nested multi-line chart presents monthly sales data for three fruits across four years, with a drop-down menu filtering the display by fruit type. The visualization uses D3.js v5’s `d3.nest()` to organize the CSV data hierarchically, then renders separate lines per year via `d3.line` and `d3.area` generators. Axis scales are built with `d3.scaleTime()` and `d3.scaleLinear()`, while `d3.axisBottom` and `d3.axisLeft` draw the ticks. Animated transitions update the chart when the menu selection changes, applying color mapping through `d3.scaleOrdinal()` for fruit categories. The reusable chart structure follows the ProD3 pattern within a vanilla HTML implementation.

JJimMaltby
95% match
Loading thumbnail…

V5 Reusable Examples - Nested data, Chart (line) series DDM - Example 5.2

This example demonstrates a reusable multi-line chart with a Drop Down Menu to filter fruit sales data by year. It uses D3.js v5 to render an SVG chart with axes and animated line series, nested data structures, and a menu that updates the visualization. The code follows a modular, reusable chart pattern inspired by Mike Bostock's guidelines and the ProD3.js approach, employing D3's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` APIs to manage scales, axes, and color encoding.

JJimMaltby
95% match
Loading thumbnail…

V5 Reusable Examples - Nested data, Chart (line) series - Example 4.1

This example demonstrates how nesting data structures can be used to create a multi-series line chart, plotting monthly sales across three fruit types (strawberry, grape, blueberry) over two years. It uses D3.js v5 with an SVG rendering approach. The chart is built using the ProD3 reusable chart pattern, derived from Mike Bostock’s Towards Reusable Charts, with scales and axes constructed via d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, and d3.axisBottom and d3.axisLeft. Data is loaded from a CSV file via d3.csv.

JJimMaltby
92% match
Loading thumbnail…

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.

JJimMaltby
91% match
Loading thumbnail…

V5 Reusable Examples - Nested data, Chart (line) series - Example 2

This example demonstrates how to create a reusable line chart with data nested by fruit type, rendering multiple series in a single SVG. It shows how to bind nested data to D3 selections and compute axis scales using nested max/min values via functions like `d3.max` with accessor callbacks. The chart uses D3 v5’s `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleTime`, with a modular structure based on the Pro D3 pattern for maintainable, testable visualizations. Data comes from a CSV file with monthly sales figures per fruit.

JJimMaltby
90% match