Collapsible tree diagram in v6

100%

Collapsible tree diagram in v6

✓ Published0🌍 Public

Last edited Jun 19, 2021

Created on Sep 13, 2020

This interactive collapsible tree diagram displays hierarchical data with clickable parent nodes that expand and collapse their child branches. Built with D3 v6, it uses `d3.hierarchy` and `d3.tree` to compute node positions, with SVG circles and text labels rendering the structure. Clicking a node triggers a smooth 750ms transition that animates nodes and diagonal link paths to their new positions, while collapsed nodes are indicated by a lightsteelblue fill and pointer cursor. The example is derived from Mike Bostock’s original collapsible tree and demonstrates node enter, update, and exit patterns with animated transitions.

AI-generated description

This is a d3.js tree diagram that incldes an interactive element as used as an example in the book D3 Tips and Tricks v6.x.

Any parent node can be clicked on to collapse the portion of the tree below it, on itself. Conversly, it can be clicked on again to regrow.

It is derived from the Mike Bostock Collapsible tree example and updated to use v6.

Kudos and thanks also go out to Soumya Ranjan for steering me in the fight direction for the diagonal solution.

mit Licensed

Similar vizzes

Loading thumbnail…

Collapsible tree diagram in v5

This interactive collapsible tree diagram displays a hierarchical dataset with parent nodes that can be clicked to collapse or expand their child branches. The visualization uses d3.tree() to compute node positions, d3.hierarchy() to structure the data, and SVG paths drawn with a custom diagonal function for the linking curves. Nodes are rendered as circles with text labels, and transitions animate with 750-millisecond duration when the tree structure changes. The example derives from Mike Bostock's collapsible tree and uses d3.v5's selection, transition, and merge APIs for smooth interactive updates.

Dd3noob

92% match

Loading thumbnail…

Collapsible tree diagram in v7

This interactive tree diagram displays hierarchical data using D3 v7’s `d3.tree` layout, rendering parent-child relationships as linked circles and text labels. Clicking any parent node collapses its descendants, with smooth 750ms transitions animating the nodes and links to the clicked node’s position; clicking again expands the subtree. The SVG uses a simple dataset of labeled levels, and the code applies `d3.hierarchy` for data structuring and the `diagonal` path generator for curved links.

Dd3noob

91% match

Loading thumbnail…

Collapsible Tree Hierarchy

This example shows an interactive collapsible tree hierarchy, allowing users to click on nodes to expand or collapse their children, and to navigate the tree by re-rooting it at a clicked node. The visualization uses D3.js v6 to compute a tidy tree layout with `d3.hierarchy` and renders it as an SVG, with animated transitions for all changes. A custom node-info div displays the name and ID of the last clicked node. The code also manages a stack to remember previous roots, enabling backward navigation through the hierarchy.

QQuinn Sebso

86% match

Loading thumbnail…

Collapsible Tree

This interactive visualization displays a hierarchical tree structure, allowing users to click on nodes to expand or collapse their child branches. The tree’s layout dynamically repositions nodes with animated transitions, adjusting the SVG canvas height to fit the visible structure. Built with React and D3 v6, it uses the `d3.tree()` layout, `d3.linkHorizontal()` for connecting links, and reads hierarchical JSON data from a remote file. Node labels are rendered alongside circular markers, with parent and leaf nodes shown in different colors.

QQuinn Sebso

86% match

Loading thumbnail…

Collapsible tree diagram in v4

A collapsible tree diagram presents a hierarchical dataset as an interactive node-link visualization. Users can click any parent node to collapse the subtree beneath it, hiding its descendants, and click again to expand it. The diagram uses smooth CSS transitions for animation as nodes and links move to their new positions. Built with the d3.v4 library, it uses `d3.hierarchy` and `d3.tree()` to compute the layout, and SVG elements for rendering. Node circles and connecting paths are styled with CSS, and the dataset is a simple JavaScript object with nested `children` arrays.

Dd3noob

86% match

Loading thumbnail…

Collapsible Tree Restructured

This example shows an interactive collapsible tree diagram built with D3.js v6 in a React framework. Clicking a node toggles its children and displays a floating info panel with the node's ID, name, and value. The visualization uses SVG rendering with animated transitions via `d3.transition` and a hierarchical layout from `d3.tree`. Node and link enter/update/exit patterns handle dynamic restructuring, with `d3.select` managing the DOM and event listeners for user interaction.

QQuinn Sebso

85% match

Loading thumbnail…

Collapsible tree diagram in v4

This collapsible tree diagram displays hierarchical data with a root node and multiple nested levels of children. Users can click any parent node to collapse its subtree onto itself, and click again to expand it. The visualization uses D3.js v4, leveraging the `d3.tree()` layout and `d3.hierarchy()` functions, with SVG rendering and animated transitions. The tree’s nodes and links are styled with white circles and gray paths, driven by the `update()` function that recalculates positions after each collapse or expansion.

SSokrates86

85% match

Loading thumbnail…

Collapsible Tree Version 2

This collapsible tree visualization shows hierarchical data from a JSON file, where nodes can be clicked to expand or collapse their children. The tree layout is computed using the `d3.tree()` layout algorithm with horizontal links drawn via `d3.linkHorizontal()`. The visualization uses D3 v6 and SVG rendering, with smooth animated transitions (250ms or 2500ms with Alt key) applied to node positions and the viewBox. Clicking a node toggles its children and also collapses any other nodes with the same name, with the tree recompiled via `d3.hierarchy()`.

Rrainyrainyguo

85% match