Skip to main content
SimilarExport ZIP
100%

V5 Reusable Examples - Nested data, Chart series - Example 3.1

✓ Published1🌍 Public
JJimMaltby
Last edited Nov 9, 2021
Created on Nov 9, 2021

A nested bar chart displays monthly sales totals for three fruit categories, with each month’s sales aggregated and grouped by fruit type. The visualization uses a single x-axis for months and y-axis for sales values, rendering red-bordered bars per category. Built with D3 v5, it applies a reusable chart pattern based on Mike Bostock’s principles and Marcos Iglesias’ ProD3 structure. The code uses `d3.scaleBand` for x positioning, `d3.scaleLinear` for y scaling, and `d3.axisBottom`/`d3.axisLeft` for axes, with data loaded from a CSV file containing Month, Sales, and Fruit columns.

AI-generated description

An exploration of nesting data. 3 - rollup bar 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:

Addtional help from and aknowledgement to:

MIT Licensed

Similar vizzes

Loading thumbnail…

V5 Reusable Examples - Nested data, Chart series - Example 3.2

This example demonstrates nested data aggregation by displaying a bar chart of average sales per fruit across twelve months, with each fruit’s total sales represented as a single bar. The chart uses d3.rollup to group the CSV data by fruit and calculate the sum of sales values. The visualization is built with d3.scaleBand and d3.scaleLinear for positioning, while d3.axisBottom and d3.axisLeft render the axes. The reusable chart pattern follows the ProD3 structure, with the SVG rendered using d3-selection and append methods.

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
90% 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
90% 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
90% 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
89% 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
89% 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
88% match
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
86% match