Rectangle tree with links

100%

Rectangle tree with links

✓ Published1🌍 Public

Last edited Aug 5, 2021

Created on Aug 5, 2021

This example displays a hierarchical dataset as an interactive rectangle tree, where each node is represented by a labeled box and connected by curved links. Clicking a node expands or collapses its children, with smooth 250ms transitions animating the layout and updating the view. Built with D3 v6, it uses `d3.tree` and `d3.linkHorizontal` for the graph structure, while SVG elements and a zoom behavior handle rendering and navigation. The data comes from the flare-2 JSON file, with node size and spacing defined by the layout.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Rectangle tree

This example shows a collapsible rectangle tree visualization of the Flare software package hierarchy, where nodes are rendered as small rectangles with labels and colored strokes indicating whether they have children. Clicking a node expands or collapses its subtree with smooth animated transitions. The code uses the D3.js v6 library with `d3.tree()`, `d3.linkHorizontal()`, and `d3.zoom()`, rendering SVG elements with data from the `flare-2.json` file.

PPiotr Paszek

89% match

Loading thumbnail…

Fork of Rectangle tree - demo

This interactive visualization displays a hierarchical tree of the Flare data set, rendered as an indented list of rectangles. Users can click nodes to expand or collapse their children, with smooth animations updating the layout. The implementation uses d3.hierarchy, d3.tree, and d3.linkHorizontal to compute positions and link paths, with d3.transition handling the animated updates, all rendered as SVG elements.

PPiotr Paszek

87% match

Loading thumbnail…

Tree with rectangular links

This interactive visualization displays a hierarchical tree structure of the Flare data set, using rectangular links with horizontal and vertical segments to connect parent and child nodes. Built with d3.js (v6), the visualization uses the d3.tree() layout algorithm to position nodes in a radial arrangement, where each node is represented by a rectangle and text label. The tree can be expanded or collapsed by clicking on nodes, with smooth transitions (250ms duration) animating the repositioning of nodes and links via d3.transition() and tweening. The layout dynamically adjusts its viewBox to fit the current tree extent, and nodes with children are highlighted with red strokes, while leaf nodes use green.

PPiotr Paszek

87% match

Loading thumbnail…

Fork of Tree with rectangular links

This example shows a collapsible tree layout of the Flare dataset, with rectangular right-angle links connecting nodes instead of the typical curved or diagonal paths. The tree uses D3 v6’s `d3.tree` and `d3.hierarchy` for layout, with enter, update, and exit transitions animating node reveals and collapses. Nodes are drawn as white rects sized to label length, with stroke colors distinguishing parent from leaf nodes, and the whole SVG supports zooming via `d3.zoom`. The custom `diagonal` function renders links as horizontal and vertical line segments, and clicking toggles child visibility.

PPiotr Paszek

84% match

Loading thumbnail…

D3.js collapsibleRRR tree with refined boxes/links

This example shows a collapsible tree visualization built with D3.js v3, displaying hierarchical data as colored rectangular nodes connected by labeled links. The code uses `d3.layout.tree` to position nodes, and implements interactive collapsing/expanding on click with smooth transitions. Rendering is done via SVG, with node colors mapped from data types, tooltips, and zoom/drag behavior provided through `d3.behavior.zoom`. The data is loaded from a JSON file containing nested node objects with name, type, and link direction attributes.

BBart Mburu

82% match

Loading thumbnail…

Tree Example

This tree diagram shows a hierarchical dataset with collapsible nodes, where clicking a parent node hides or reveals its children with animated transitions. The visualization uses D3.js v3’s `d3.layout.tree` to compute node positions and `d3.svg.diagonal` for curved links, rendered as SVG elements. Node and link styling are defined via CSS classes, and the `update` function handles enter, update, and exit transitions with a 750ms duration. The static sample data includes a top-level node with two second-level branches, demonstrating the interactive expand/collapse behavior.

663anp3ca

81% match

Loading thumbnail…

Tree

This interactive tree diagram visualizes a hierarchical dataset, displaying nodes as colored boxes connected by labeled links with directional arrows. The layout renders synchronously in SVG and supports zooming and dragging via `d3.behavior.zoom`. Node colors map to `type` fields, and tooltips appear on hover, while link direction (SYNC or ASYN) is shown through arrow markers. Data loads from JSON using `d3.json`, and the layout uses `d3.layout.tree` with a `breadthFirstTraversal` to adjust SVG dimensions dynamically.

Uusamazaibabbasi

80% match

Loading thumbnail…

Hierarchical List

This example visualizes a hierarchical dataset as an animated, collapsible tree, showing parent-child relationships across multiple levels of the Flare library’s structure. It uses D3.js v5 with SVG rendering, employing the `d3.hierarchy()` layout to compute node positions and `d3.tree()` to arrange them. The visualization draws curved link paths (`d3.linkHorizontal()`) and circular node markers, with text labels for each element. A smooth transition animates the tree’s expansion and collapse when a node is clicked, using `transition.duration()` and `transition.attr()` to update positions. The data is embedded as a JavaScript object in the code, with leaf nodes carrying a `size` attribute.

EEE2dev

80% match