Supergroup Examples

100%

Supergroup Examples

✓ Published0🌍 Public

Last edited Mar 19, 2015

Created on Mar 16, 2015

This example demonstrates the Supergroup library for hierarchical grouping of tabular data, using patient visit records from a CSV file. It shows how supergroup compares with d3.nest’s `entries()` and `map()` methods, outputting JavaScript object structures and result summaries. The code parses the CSV with `d3.csv.parse`, applies nested groupings by physician and unit, and displays outputs like `namePath()`, `leafNodes()`, and flattened trees. Underscore.js’s `invoke` method is used for batch operations on leaf nodes.

AI-generated description

Similar vizzes

Loading thumbnail…

Mister Super Nester

Mister Super Nester demonstrates hierarchical data wrangling and visualization through an interactive console that converts nested datasets into treemap layouts. Users can paste tabular data, write JavaScript using d3.nest() and supergroup’s nested grouping methods, and see the resulting hierarchical tree rendered as an animated SVG treemap. The tool uses d3.js version 3.5.5, Lodash, and the supergroup library to process data, with a provided sample dataset of California county demographics.

SSigfried

69% match

Loading thumbnail…

D3 nest examples

A collection of interactive tutorial examples demonstrates how to use the d3.nest() function to group, roll up, and sort tabular CSV data containing task management records. The page shows progressively more complex nesting operations, from single-key grouping by status to two-level hierarchies with custom sort orders and leaf-level sorting, while also demonstrating how rollup can compute counts and sums. Each example displays the JavaScript code alongside the resulting nested data structure in text areas.

GGerHobbelt

66% match

Loading thumbnail…

Circle-Packing

This example visualizes a hierarchical dataset as a circle-packing layout, where each leaf node is a circle sized by its value and nested groups are represented by larger containing circles. It shows the structure of a module tree from a CSV file, with color indicating depth and text labels clipped to leaf circles. The code uses `d3.stratify` to build the hierarchy from flat data, `d3.pack` for layout, and `d3.scaleSequential` with the `interpolateMagma` color scheme. Hovering highlights a node and all its ancestors via `d3.selectAll` with the `node--hover` class, rendered as SVG elements in a `<g>` container.

HHugoberry

62% match

Loading thumbnail…

Fork of Fork of ICE-8 Tree graph

A hierarchical tree visualizes hospital emergency room records, grouping patients by department referral and displaying each patient’s date, gender, and age as leaf nodes. The code loads CSV data via `d3.csv`, transforms it into a nested structure, and renders an SVG using `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal` for curved links.

BBavya Vemulapalli

61% match

Loading thumbnail…

Fork of Example

This example shows a hierarchical tree visualization of hip replacement experts, organized by country, city, and institution, based on data loaded from a remote CSV file. The tree uses a collapsible layout where nodes represent each level of the hierarchy, with the root labeled "Hip Replacement" and branches extending to countries, cities, institutes, and individual experts. Built with D3 v7, it uses `d3.csv` for data loading, `d3.hierarchy` and `d3.tree` for layout, and `d3.linkHorizontal` for rendering the curved links in SVG. The code processes the data by filtering unique values for each category and sorting by rankings before constructing the nested tree structure. The visualization is animated, with a dark blue background styling applied to the page body.

Vvivaciousbharath

61% match

Loading thumbnail…

Fork of ICE8-Tree graph

This tree graph shows the hierarchical structure of hospital ER data, grouping patients by date, patient ID, gender, age, satisfaction score, name initials, race, admin flag, and wait time. It loads CSV data from a GitHub repository and uses `d3.csv` to parse it, then `d3.hierarchy` and `d3.tree` to lay out the nodes. Links are drawn with `d3.linkHorizontal`, while SVG circles and text labels render each node. The data is transformed into a multi-level nested structure before rendering, displaying the full branching relationship across all categories.

BBALAJI MANDAVA

60% match

Loading thumbnail…

Fork of Stacked-bar-example

This example fetches a CSV dataset of categorical, numeric, and ordered data from an external GitHub repository, then groups the parsed rows by the `name` column using `d3.group`. The code sets up an SVG canvas with fixed margins and dimensions but currently only logs the grouped statistics to the console; it does not yet render any bars or visual elements. The visualization relies on D3 v7’s `d3.csv` for asynchronous data loading and standard SVG manipulation via the D3 selection API.

GGabriel Ing

60% match

Loading thumbnail…

healthcare

This visualization presents a hierarchical tree of patient medical records, with each top-level node representing an individual patient and a nested branch showing additional demographic and admission details. The tree layout is computed using D3.js v7’s `d3.tree()` and `d3.hierarchy()` APIs, with horizontal links drawn via `d3.linkHorizontal()` and rendered as SVG paths. Node circles are white with steel-blue strokes, and labels display patient names; the data is embedded directly in the script, including fields like age, blood type, medical condition, and admission dates. The visualization is styled with custom CSS for nodes and links.

Ddmouli369@gmail.com

59% match