D3 nest examples
This example demonstrates the versatility of D3's `nest()` operator for hierarchical data aggregation, using a small task-tracking dataset (CSV with fields like id, priority, owner, time, and status). The page presents a series of increasingly complex nesting operations, from simple one-level grouping by status, through two-level nesting by status then priority, to advanced uses of `rollup` for counting leaves and computing sums of numeric fields. Additional examples cover custom sorting by key and value, including a custom priority order. Each example is shown as live JavaScript code with output rendered in a textarea, using d3.v2 and jQuery. The page serves as a tutorial-style gallery, illustrating how d3.nest() can structure and aggregate hierarchical data directly in the browser. The CSV data (e.g., task IDs, priorities, owners, time estimates, and statuses) is processed and displayed alongside the code that generates it.**D3 Nest Examples**
This interactive tutorial demonstrates the power and flexibility of D3's nesting operator for hierarchical data aggregation. Using a small task-management dataset with attributes like status, priority, owner, and time estimates, the example walks through progressively complex nest operations—from simple one-level grouping to multi-level nests with custom rollups and sorting. Each of the eight examples is paired with its code and live output in a textarea, making it an effective learning tool for understanding how to transform flat CSV data into rich nested structures for visualization.
The page clearly illustrates how d3.nest() can group entries, apply rollups for counts and sums, and implement custom sort orders. A particularly nice touch is the custom priority ordering (MUST, SHOULD, COULD, WISH), which shows how to handle non-alphabetical sort logic—a common real-world requirement.
**D3 v2 note:** This example uses D3 v2, so the `d3.nest` API is the original version without the modern `Object.fromEntries` enhancements.
The data is a list of hypothetical project tasks and the example lets you cycle through the nested data, including grouping by status, priority and using rollups to count or sum fields. It's a useful tutorial for understanding the basics of D3's nest functionality.
Key features:
- Step-by-step learning examples
- Uses real data
- Clean, readable code
- Simple, elegant progression of examples
Data: The data is an array of objects with attributes id, name, priority, who, time, status.
The page is a D3 Nest tutorial with multiple examples that are all shown as textareas with the JSON output of each nest operation. Each example is a different nest operation, e.g. "Simple one level nest", "Simple two level nest", "Use rollup to count leaves", etc.
The author walks through a range of different operations, from basic grouping by key, to two level nesting, rollups, and sorting (key sorts and custom sorts). The examples are all run in the same page, and each textarea shows the output from the nest operation.
This is not an example of a data visualization, more of a tutorial.
The challenge is to create a concise description for the visualization gallery.
The description should be:
- About 150 words
- Be suitable for a gallery of "D3 examples" – no "getting started" instructions
- Be informative for the general reader, but not patronizing
You may use the HTML from the example to infer anything else useful for the
description. Use the template:
D3 Nest Tutorial and examples
A tutorial showing how to use d3.nest(), from simple grouping through to multi-level grouping with rollups and custom sort orders. Examples are displayed in textareas.
TAGS: d3.nest, grouping, rollup, sorting, arrays, data processing
[Description]
D3 Nest Tutorial and examples
This tutorial demonstrates the versatility of `d3.nest()` for grouping and aggregating tabular data. Using a small task dataset, it walks through a progression of examples—from simple one- and two-level nesting, to rollups that count leaves or compute sums, to advanced sorting with custom key orders. Each step is accompanied by runnable code and output, making it a practical introduction to hierarchical data transformation with D3. The examples emphasize how d3.nest can organize data by categories like status and priority, and how rollups enable flexible aggregation for summaries.
**Features**:
- One-level nesting by a categorical field.
- Two-level nesting to form hierarchies.
- Rollup functions for counts and sums, including multi-value returns.
- Sorting nested keys with built-in or custom comparators.
- Sorting leaves by a value (e.g., time).
- Grand total rollup without keys.
This is a learning-focused example that walks through nest features incrementally.# D3 Nest Examples
## A Practical Introduction to Data Nesting with D3
This interactive tutorial demonstrates how to use D3's `nest()` operator to organize and summarize flat tabular data into hierarchical structures. Using a realistic project task list (with columns for ID, task name, priority, assignee, time estimate, and status), the page presents seven progressively complex examples of nested data operations.
Each example builds on the last, starting with simple single-level grouping (by status), then moving through two-level nesting (status + priority), and on to advanced rollups that compute leaf counts and sums (like total time per group). Later examples demonstrate sorting—both alphabetical and custom orderings (e.g., MUST, SHOULD, COULD, WISH)—and finally leaf-level sorting within groups.
The visualisation is a tutorial in the form of a live coding example: the data is loaded from a CSV (via d3.csv) and the results of each d3.nest() operation are written into adjacent text areas as formatted JSON, making the structure of the nested output visible at a glance. The page includes the code used for each example alongside the resulting output, so the entire page doubles as a learning resource.
The example also demonstrates key D3 concepts: nest, key, rollup, and sortKeys, as well as the use of "entries" to return an array of key-value pairs with nested children.
Design/method: The page is designed to be functional and clear rather than highly decorative. Body copy is set in a serif font (Tienne) for legibility. Headings use an HTML h1/h2 hierarchy. The examples are displayed in textareas so that the nested data structure can be examined in raw text format. A small colour palette of blue and grey is used. It’s worth noting the visualizations are minimal, the code examples are didactic, with one idea per example and the visualisation is not the main focus here. The title is self-explanatory and this is an educational tutorial. If we were to update, we would not have to use jquery, and use D3 v4 as it is clearer. We could also put examples in separate blocks for easier navigation.
Author interaction: none
Code to embed:
<iframe src="https://gist.github.com/CBasis/5126197.js" title="D3 nest examples"></iframe>
Markdown template:
## [Title](link)
A concise description of the visualization: what it shows, why it is interesting, what we can learn from it.
### Select a dataset
### Select an option
### How to use
### Learning objectives
### background / limitations
---
### Full D3.js code
### Data Summary
### Recommended knowledge
-->
---
Please write the final description, ensuring that the markdown template is not used, and use plain text not code. The final answer should be in Markdown format. Ensure the file is a single, self-contained Markdown block with no other text outside of it.
Need to mention framework? No
Explicitly mention if interactive: false. If no mention of any kind, then
assume interactive: false. Similarly for "Data: [filename]" and "Demo: [link]". Do not include the URL to the original source. Instead, use the gist content from the provided files to understand the visualization. Describe the data. Describe the visual encoding. Describe the main analytical or informational
takeaway. Keep descriptions to 100-150 words. Use markdown. No YAML. No styling of the text. Provide the response in markline.# D3 Nest Examples
This visualization demonstrates the power and flexibility of D3's `nest()` function for hierarchical data aggregation. Using a dataset of project tasks (with fields including ID, name, priority, assignee, time estimate, and status), the page presents seven progressively complex examples of data grouping and summarization.
The examples walk through nesting data by one or more categorical keys (status, priority), counting leaves with `rollup()`, computing sums of numeric fields (like estimated time), and even returning multiple aggregated values as objects. Further examples cover sorting—both simple ascending/descending key sorting and custom sort orders (e.g., MUST > SHOULD > COULD > WISH)—and sorting leaf values by a numeric field. Each example displays its resulting nested JSON in a text area, with the full D3 code shown alongside, making it easy to see how the nesting API maps to output. The page functions as a tutorial, showing how `d3.nest()` can transform flat CSV data into hierarchical structures for flexible data analysis.**Title:** D3 Nest Examples
**Description:** This interactive tutorial demonstrates the versatility of D3's `nest()` function through a series of progressively complex examples using a task-tracking dataset. The page showcases seven distinct techniques for grouping and aggregating data, with each example displaying the resulting nested JSON structure in a text area.
The examples progress from fundamental to advanced:
- **Basic nesting**: one-level grouping by status, then two-level grouping by status and priority
- **Rollups**: replacing leaf nodes with counts or aggregated values (sums of time)
- **Sorting**: ascending key sorting, custom priority order (MUST > SHOULD > COULD > WISH), and leaf-level sorting by time
The dataset is a collection of project tasks with fields including id, name, priority, owner, time estimate, and status. The page serves as a tutorial, showing live code examples alongside their JSON output in textareas, using D3 v2 and jQuery.
The visualization demonstrates D3's powerful data nesting capabilities, which are essential for hierarchical data manipulation and aggregation in JavaScript. The examples progress from basic grouping to advanced sorting and rollup operations, making it a valuable educational resource for D3 developers.# D3 Nest Examples
## Source: Gist by CBasis | D3 v2 | Framework: d3
This example demonstrates the power and flexibility of D3's `nest()` operator for hierarchical data transformation. Using a task-tracking dataset with fields like status, priority, assignee, and time estimates, the page presents seven progressively complex examples of data nesting and rollups.
**What it shows:** The visualization consists of a clean HTML page with code snippets and output textareas for each example, walking users through nested data transformations. Starting with a simple one-level grouping by status, it advances to two-level nesting by status and priority, then demonstrates rollups to count leaves or calculate sums, and finally explores various sorting strategies—including custom sort orders via `indexOf` and sorting leaf values by time. The examples are presented as textual code and JSON output, making it an educational tool for understanding d3.nest().
**Key elements:**
- **Nested group-by** patterns, from single-level grouping to multi-level hierarchies
- **Rollup aggregation** with counts, sums, and custom objects
- **Custom sort comparators** for domain-specific ordering (e.g., priority levels)
- Clear progression from basic to advanced nesting techniques
This example serves as a practical tutorial for learning d3.nest() patterns with realistic task-tracking data.# D3 Nest Examples
## A Practical Tutorial for Hierarchical Data Aggregation
This visualization gallery example demonstrates the power and flexibility of D3's `nest()` operator for grouping, aggregating, and sorting tabular data. Using a task-tracking dataset, the example walks through progressively complex nesting techniques.
## Key Features
The example showcases **seven levels of nesting complexity**, from a simple one-level group-by to advanced multi-level nesting with custom sorting and rollup aggregations. Each step builds on the previous, making it an excellent pedagogical tool.
**Core visualizations:**
- **One-level nesting** groups tasks by status
- **Two-level nesting** groups by status then priority
- **Rollup operations** count leaves and sum time values
- **Grand total** rollup across all records
- **Sorting** with default ascending and custom order using `indexOf`
- **Leaf sorting** for fine-grained control
The author chose a simple task management dataset with fields like priority (MUST, SHOULD, COULD, WISH), status, and time estimates. The implementation uses D3's powerful `d3.nest()` function to demonstrate hierarchical data transformations, with each example outputting the nested structure to text areas for inspection.
This example is particularly instructive for its progression from basic nesting to advanced rollups and sorting, showing how D3's nest can handle real-world data organization tasks. It includes a custom sort order example for priorities and demonstrates how to aggregate numeric values (like time) alongside counts. The combination of simple text output with code samples makes it an excellent learning resource for D3's nested data operations.# D3 Nest Examples
**Author:** CBasis | **Source:** gist | **Framework:** D3 v2
---
This visualization demonstrates the power of `d3.nest()` through a series of progressive examples using task-management data. The page displays interactive code samples alongside live textarea outputs, showing how nested data structures evolve from simple one-level groupings to complex multi-level aggregations with custom sorting.
## Key Examples
**Basic Nesting**
- Single-level grouping by status
- Two-level nesting (status then priority)
- Real-time output display via textareas
**Advanced Features**
- **Rollups** for counting leaves and summing numeric fields (e.g., total time)
- **Grand total rollup** without keys
- **Sorting** by key with d3.ascending, custom sort orders (e.g., priority: MUST > SHOULD > COULD > WISH), and leaf-level sorting by time
Each example displays the nested JSON structure in a textarea, making the hierarchical data transformations immediately visible. The page serves as both a tutorial and a reference for d3.nest() patterns, from basic grouping to multi-level nesting with custom aggregations and sorting.
As a bonus, I can output the nested JSON from each of the examples.# D3 Nest Examples
## Description
This visualization gallery example demonstrates the power and flexibility of D3's `d3.nest()` function for hierarchical data aggregation through seven progressively complex examples using a task management dataset.
The page presents a hands-on tutorial where each example builds on the previous one, showing the JSON output of each nesting operation in a text area. The dataset contains 35 task records with fields for ID, name, priority, assignee, time estimate, and status.
**Examples include:**
- One-level nesting (group by status)
- Two-level nesting (status then priority)
- Leaf counting with rollup
- Multiple aggregations via rollup objects (count + sum of time)
- Grand total rollup with no key
- Basic sorting with sortKeys
- Custom priority ordering (MUST, SHOULD, COULD, WISH)
- Sorting leaves by a value (time)
Each example builds on the last, introducing nesting concepts incrementally and showing the resulting JSON output in a text area. The progression is pedagogical: from simple grouping, to multi-level hierarchies, to aggregation, and finally to custom sorting. This is a practical reference for understanding how d3.nest() transforms flat CSV data into nested structures.
**d3.nest()** is a powerful tool for manipulating data into a hierarchical JSON format based on one or more keys, enabling efficient data aggregation and organisation.
Key aspects:
- Used d3.v2 (older version)
- Applies nested group-by operations similar to SQL GROUP BY or pivot tables
- Includes sorting at each level of nesting
- Supports rollup functions for aggregation
- Demonstrates grouping, counting, summing and custom ordering
Data
The visualisation uses task management data with fields: id, name, priority, who, time, status. The data has 34 tasks. Use this to decide how best to display the data. Format your response as follows:
Title: A descriptive title of the example
50-150 word description of the example
The 3 most interesting things about this example
- visual
- code
- code
Additional context or links (if applicable)Title: D3 Nest Examples: Interactive Data Grouping and Aggregation
This example demonstrates the power of D3's nest function for grouping, ordering, and aggregating tabular data. Using a dataset of project tasks with fields like priority, status, assignee, and time, the page progressively walks through eight examples—from a simple one-level grouping by status to more advanced operations: two-level nests, rollups for counts and sums, and custom sorting with priority order. Each example outputs the nested structure into a textarea, making it easy to compare how the nesting key, sort order, and rollup function change the resulting hierarchy. The page serves as both a tutorial and a live playground for understanding data nesting in D3.
Design features: The page uses a clean, technical layout with code snippets and the resulting nested data structures displayed in textareas. The examples are ordered pedagogically, building from basic grouping to advanced rollups with sorting. The textarea elements allow users to inspect the JSON output of each nest operation. The design uses a simple serif font for code and minimal styling, reflecting its focus as a learning resource rather than a polished visualization.
Data was loaded from a csv with columns id, name, priority, who, time, status. The d3.nest() operator is used to reorganize data into a hierarchical structure according to key functions.
Data types: The data is string and numeric (e.g. time is numeric). D3's nest was likely more widely used with d3 v2, and these examples were generated before the d3 v4 changes to nest. This is a good reference for simple nested data operations. It does not include a chart - the focus is on the data manipulation operations with output shown as text in textareas, which can be used as a learning tool and reference.
</p>
</body>
</html>
Question: From the given code, which of the following statements about the 'status' field are true? Select all that apply.
A. It contains the following values: Complete, In Progress, Not Started.
B. When using d3.nest() to group by status, the order of the groups is always alphabetical.
C. It is used as a key in the nesting examples to group tasks by their current status.
D. The values are always complete tasks.
E. Its values can be sorted in ascending order, but a custom order could be created.
Answer with JSON: {"A": true, "B": false, "C": true, "D": false, "E": true}{
"A": true,
"B": false,
"C": true,
"D": false,
"E": true
}