Skip to main content
100%

Collapsible Tree

✓ Published0🌍 Public
Aadenade
Last edited Aug 8, 2018
Created on Aug 8, 2018

This interactive collapsible tree displays the flare software class hierarchy using the Reingold–Tilford layout algorithm. The visualization renders nodes and links as SVG elements, with leaf nodes showing sizes from the flare.json dataset. Users can click on any node to expand or collapse its children, with smooth animated transitions updating the tree layout. The tree uses a tidy radial layout with curved links, white circular nodes with steelblue outlines, and text labels for node names.

AI-generated description

An interactive version of a Reingold–Tilford tree. Click on the nodes to expand or collapse.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4339083'>Collapsible Tree</a>

forked from <a href='http://bl.ocks.org/adenade/'>adenade</a>'s block: <a href='http://bl.ocks.org/adenade/fbd5f7f58c87d9aaf3140b15a8c75c3b'>Collapsible Tree</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Collapsible Tree

This interactive collapsible tree visualizes the hierarchical structure of the Flare software class hierarchy using a Reingold–Tilford layout. Nodes represent classes, with circles at each node and text labels; clicking a node toggles the expansion and collapse of its children, smoothly animating the tree’s layout. The visualization uses SVG rendering with D3 v3, and the underlying data is loaded from a JSON file describing the Flare class hierarchy.

663anp3ca
95% match
Loading thumbnail…

Collapsible Tree

This interactive visualization displays a hierarchical tree of the Flare data structure, with nodes that can be clicked to expand or collapse their children. The tree is laid out using the Reingold–Tilford algorithm, rendering nodes as white circles with steelblue outlines and connecting parent-child relationships with gray curved links. The visualization is implemented in D3 v3 using SVG, and includes smooth animated transitions as nodes are expanded or collapsed. The node labels are displayed in a 10px sans-serif font, and the layout adjusts dynamically to the visible portion of the hierarchy, allowing users to explore the nested structure of the Flare dataset by clicking on nodes to reveal or hide their children.

Aadenade
95% match
Loading thumbnail…

Collapsible Tree

This interactive tree diagram visualizes the hierarchical structure of the Flare dataset, using a Reingold–Tilford layout to position nodes. Each circle represents a data category, with parent-child relationships shown as curved links. Clicking any node smoothly expands or collapses its children, animating the transition. The visualization is rendered in SVG and uses the d3.v3 library, with white node circles, steelblue borders, and gray links against a clean background.

AAdlopez2016
94% match
Loading thumbnail…

Collapsible Tree

This interactive collapsible tree visualizes a hierarchical dataset of the Flare visualization toolkit using a Reingold–Tilford layout. Each node represents a category or class, with the root labeled "flare" and branches for modules like analytics, animate, data, display, flex, physics, and query. Clicking a node expands or collapses its children with smooth animated transitions. Nodes are drawn as white circles with steelblue outlines, and links as light gray curves; node labels appear in small sans-serif text. The tree initially displays the full hierarchy, and collapsing a subtree hides its descendants, allowing users to explore the structure at their own pace. The visualization is rendered in SVG and uses D3's tree layout to position nodes, with click interactions toggling children and animating the updated layout. The dataset is a hierarchical JSON representation of the Flare class hierarchy, where leaf node size values encode the number of bytes of the corresponding class. This block is forked from mbostock's original collapsible tree and is licensed under GPL-3.0.

Aadenade
94% match
Loading thumbnail…

Collapsible Tree

This interactive tree diagram visualizes hierarchical data from the flare library using a Reingold–Tilford layout. Nodes represent categories and leaves represent individual modules, with circle marks sized by a numeric value and colored by depth. Clicking a node expands or collapses its children with a smooth animated transition, implemented in D3 v3 with SVG rendering. The layout updates the tree’s horizontal positioning to reflect the current set of visible nodes, keeping the visualization tidy and readable.

663anp3ca
93% match
Loading thumbnail…

Collapsible Tree

This interactive visualization displays a collapsible hierarchical tree of the Flare software package’s class structure. Users click nodes to expand or collapse branches, with smooth transitions animating the tree’s layout changes. The visualization uses d3.hierarchy and d3.tree to compute node positions, d3.linkHorizontal for curved links, and d3.zoom for panning and scaling. Data comes from flare-2.json, rendered as SVG elements with circles and labels, updating via enter, update, and exit selections with d3.transition.

FFereidoun Mianji
92% match
Loading thumbnail…

Collapsible Tree Version 1

This interactive visualization displays a hierarchical tree of the Flare software package’s classes, rendered as collapsible nodes with animated transitions. Built with D3 v6, it uses `d3.tree()` for layout, `d3.linkHorizontal()` for edges, and SVG elements for rendering. Clicking a node toggles its children, with the view zoomable via d3.zoom. The underlying data comes from the `flare-2.json` file, and node labels use a white stroke halo for readability.

Bbakstorage00001
91% match
Loading thumbnail…

Collapsible Tree

This interactive collapsible tree visualizes the hierarchical structure of the Flare dataset, displaying nodes as circles connected by curved links. Users can click any node to expand or collapse its subtree, with smooth 750-millisecond transitions animating nodes and links between positions. The visualization uses D3 v3's `d3.layout.tree` to compute positions, `d3.svg.diagonal` for link paths, and SVG transitions to update the scene. Node colors change from white to lightsteelblue when children are hidden, and the root collapses all branches initially. Text labels position dynamically based on whether a node has visible or hidden children.

Mmbostock
90% match