Collapsible Tree

100%

Collapsible Tree

✓ Published0🌍 Public

AAdlopez2016

Last edited Nov 2, 2016

Created on Nov 2, 2016

This collapsible tree visualization displays hierarchical data from a JSON file, showing parent-child relationships with nodes that expand and collapse when clicked. The tree layout positions nodes horizontally by depth, with curved diagonal links connecting them. The visualization uses D3.js v3 with the `d3.layout.tree` for layout computation and `d3.svg.diagonal` for drawing curved paths. Nodes are rendered as SVG circles with text labels, and click interactions toggle children visibility using the `_children` property to store collapsed nodes. The animation uses D3 transitions with a 750ms duration to smoothly move nodes and links between positions, with nodes initially appearing collapsed at the root level.

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/renecnielsen/'>renecnielsen</a>'s block: <a href='http://bl.ocks.org/renecnielsen/9904888'>Collapsible Tree</a>

mit Licensed

Similar vizzes

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

91% match

Loading thumbnail…

Collapsible

This visualization presents a hierarchical tree structure with nodes representing data entries such as names, types, and versions, connected by links indicating synchronous or asynchronous relationships. The tree starts with a root node and expands through multiple nested child nodes, with each node styled as a colored rectangle and accompanied by tooltips. Built with D3.js (v3) and jQuery, the code uses the `d3.layout.tree` API to compute layouts, while SVG rendering and animations handle node interactions and zooming. The tree’s dimensions adjust dynamically based on its depth and width, and node colors vary by type.

Yyaswanth292999

90% match

Loading thumbnail…

Collapsible Tree Example

A collapsible tree diagram displays hierarchical data as a set of linked nodes, where each node’s children can be expanded or hidden by clicking, though the example code does not yet implement click interactions. The flat CSV data, containing parent-child relationships, is converted into a tree structure using a name-to-node map. The visualization is rendered as an SVG using D3.js version 3.5, with `d3.layout.tree` computing the layout, `d3.svg.diagonal` drawing curved links, and nodes represented by circles and text labels.

Dd3noob

89% match

Loading thumbnail…

Collapsible Tree Example

This example shows a static hierarchical tree diagram with nodes and links loaded from an external JSON file. The visualization uses the D3.js v3 library, specifically the `d3.layout.tree` for computing node positions and `d3.svg.diagonal` for drawing curved connecting paths between parent and child nodes. Nodes are rendered as SVG circles with text labels, and the layout is normalized to a fixed depth of 180 pixels per level. The data source is a JSON array containing a top-level node with two children, one of which has its own descendants, demonstrating basic tree structure rendering without interactivity.

CCoola85

89% match

Loading thumbnail…

Collapsible Tree

This interactive collapsible tree visualizes hierarchical data from a Santander bank dataset, rendered as an animated SVG using D3.js. It adapts the classic Reingold–Tilford tree layout: nodes are circles, links are curved paths, and clicking a node expands or collapses its children with smooth transitions. The dataset, stored in a JSON structure, groups items under category names like "analytics" and "physics," with leaf nodes sized by a numeric value. The visualization supports progressive disclosure, letting viewers explore the hierarchy by toggling branches while maintaining a clear left-to-right layout.

AAdlopez2016

89% match

Loading thumbnail…

Collapsible Tree Version 4

Using D3.js v3, this collapsible tree visualization presents hierarchical data from a JSON file with an animated, interactive layout. Users can click nodes to expand or collapse subtrees, with smooth transitions applied via `d3.svg.diagonal` paths and CSS styling. The tree is rendered as an SVG, while `d3.behavior.zoom` and drag-and-drop interactions enable panning and repositioning of nodes within the 900×900 pixel viewport.

Rrainyrainyguo

89% match

Loading thumbnail…

Collapsible Tree Example

This collapsible tree diagram displays hierarchical data from a CSV file, with nodes positioned by depth and connected by curved links. The visualization loads flat data from `treedata.csv` and converts it into a tree structure using a name-to-parent mapping. Rendered with SVG, it employs the `d3.layout.tree` and `d3.svg.diagonal` APIs from d3.v3 to compute node positions and draw paths. Each node appears as a white circle with a steelblue stroke, labeled with its name, while the layout normalizes node depths to 180 pixels per level.

663anp3ca

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