Fork of Collapsible Tree Version 1

100%

Fork of Collapsible Tree Version 1

✓ Published0🌍 Public

Last edited Oct 24, 2021

Created on Oct 24, 2021

This interactive collapsible tree visualizes a hierarchical dataset about Placemaking Design Learning, with nodes representing categories and subcategories. Users can click any node to expand or collapse its children, with smooth animated transitions. The visualization uses D3 v6’s `d3.tree` layout, `d3.linkHorizontal` for curved links, and SVG elements. It features zoom and pan via `d3.zoom`, and all node and link updates are animated using `transition` with configurable durations.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Collapsible Tree Version 1

This interactive collapsible tree visualization displays hierarchical data from the flare-2.json dataset. Users can click on nodes with children to expand or collapse branches, with smooth animations transitioning nodes and links to their new positions. The visualization uses D3.js v6, specifically leveraging `d3.hierarchy`, `d3.tree`, `d3.linkHorizontal`, and the `transition` API to animate the layout changes. Animated zooming and panning through `d3.zoom` enhances navigation of the complex hierarchical structure.

PPiotr Paszek

90% match

Loading thumbnail…

Fork of Collapsible Tree Version 1

This interactive collapsible tree visualization displays the hierarchical structure of either the "flare" dataset or a dispute flow, with nodes that expand and collapse on click. Built with D3 v6, the example renders as an SVG with animated transitions between layout states, using the `d3.tree()` layout and `d3.linkHorizontal()` for curved links. The tree loads JSON data via `d3.json()` and supports zooming through a custom `d3.zoom()` handler. Nodes are color-coded by whether they have children, and text labels use a stroke outline for readability.

YYuji

89% match

Loading thumbnail…

Fork of Collapsible Tree Version 1

This example shows an interactive collapsible tree visualization of the Flare dataset, where nodes can be clicked to expand or collapse their children. Built with D3 v6, it uses a hierarchical layout (`d3.tree`) and horizontal links drawn with `d3.linkHorizontal`. The SVG rendering includes smooth transitions between states, and the view supports zooming via `d3.zoom`. Node positions update with animated transitions, and the data is loaded from a JSON file using `d3.json`.

EEswarHariKumar

89% match

Loading thumbnail…

Collapsible Tree Version 1

This interactive collapsible tree visualizes a hierarchical dataset of software modules, showing parent-child relationships that expand and collapse when nodes are clicked. The tree uses d3.tree for layout, d3.linkHorizontal for curved connecting paths, and d3.zoom for panning and scaling. Nodes and links transition smoothly over 250 milliseconds via d3 transitions, with node colors distinguishing leaf nodes from branches. Data comes from the flare-2.json file, which contains nested name and value properties.

Rrainyrainyguo

88% match

Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This interactive visualization presents a hierarchical tree of nodes as boxes, rendered with SVG and animation. Users can click nodes to collapse or expand branches, with links and arrows indicating relationships, styles, and direction (SYNC or ASYN) between parent and child elements. The chart uses D3.js v6’s `d3.tree` layout, `d3.zoom` for pan and zoom, and transitions for smooth updates. JSON data defines node types, labels, versions, and link metadata, which also drive color-coding of boxes and tooltip text on hover.

JJunaid Ahmed Jameel

87% match

Loading thumbnail…

Fork of Collapsible Tree Version 1

This interactive collapsible tree visualization displays a hierarchical dataset of the Flare visualization library codebase, with nodes representing packages and functions. Built with D3 v6, it renders as an SVG with animated transitions that reposition nodes and links when a node is clicked to expand or collapse its children, using a horizontal diagonal link layout. The implementation relies on `d3.tree()` for layout, `d3.linkHorizontal()` for edges, `d3.select()` for SVG manipulation, and `d3.transition()` for smooth 250ms animations. The tree data comes from the `flare-2.json` file, and nodes with names shorter than seven characters are initially collapsed.

Ssorabh.vijay@gendigital.com

87% match

Loading thumbnail…

Fork of Collapsible Tree Version 1

This visualization shows a collapsible tree of the Flare software package hierarchy, where nodes with children can be clicked to expand or collapse their subtrees with animated transitions. Built with D3 v6, it uses `d3.tree()` and `d3.linkHorizontal()` to compute and draw the layout as SVG paths and circles. Zooming is enabled via `d3.zoom()`, and clicking toggles child visibility while the viewBox animates to fit the visible nodes. Data comes from the flare-2.json file, which encodes the package structure.

Ffkukcha

87% match

Loading thumbnail…

Fork of Collapsible Tree Version 1

This interactive visualization shows a hierarchical tree of product data from a flare-2.json file, with nodes representing different levels labeled as "LVL__" and colored blue. Users can click nodes to expand or collapse their children, with animated transitions smoothly repositioning the tree. The tree layout uses d3.cluster() with horizontal links drawn via d3.linkHorizontal(), while d3.zoom() enables panning and zooming across the large 3000-pixel-tall SVG canvas. Each node includes a rectangle with text labels and transitions between states using .transition() and .attrTween() for smooth animation.

SSEDKI91

86% match