Skip to main content
SimilarExport ZIP
100%

D3.js bidirectional collapsible horizontal tree with rectangles

✓ Published0🌍 Public
Rravikumark
Last edited Mar 28, 2022
Created on Mar 14, 2022

This example presents a bidirectional, collapsible horizontal tree layout using D3.js v3 and SVG rendering. It visualizes hierarchical data from a JSON file, with nodes displayed as rectangles that expand or collapse on click. The tree supports nodes positioned on both left and right sides of the root, with links and arrows drawn between them. Animated transitions adjust node positions when branches are toggled, while mouse interactions trigger the collapse and expansion behavior.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

D3.js collapsible tree with boxes

This example shows an interactive collapsible tree diagram rendered as SVG boxes, with nodes representing a hierarchical data structure from a JSON file. Each node displays a name, type, code, and version, with links labeled by direction (SYNC or ASYN). The visualization uses D3.js v3 layout and zoom behaviors, with click interactions to expand and collapse child nodes. Rectangles, curved links, and tooltips are styled through CSS, and animated transitions smoothly update the layout.

Ssrinivasjavvadi
88% match
Loading thumbnail…

D3.js collapsible tree with boxes

This example shows a collapsible tree layout where each node is rendered as a labeled box, with hierarchical relationships indicated by curved links and directional arrows. The visualization uses D3.js v3’s `d3.layout.tree` to compute node positions and supports interactive collapsing/expanding of branches, along with zoom and drag navigation. Node colors correspond to a `type` field in the accompanying JSON data, and tooltips appear on hover to reveal additional metadata. The SVG output animates layout transitions using D3’s built-in transition system.

DDamien Dotta
88% match
Loading thumbnail…

D3.js collapsibleRRR tree with boxes

This example presents a collapsible hierarchical tree visualization using D3.js v3, where each node is rendered as a colored rectangle with text and tooltip support. The tree layout (d3.layout.tree) organizes nodes by depth, with curved SVG paths (d3.svg.diagonal) representing links between parent and child nodes. Users can collapse or expand branches by clicking on nodes, which triggers animated transitions (transition.duration) to update the layout. The visualization reads hierarchical JSON data containing node properties like type, code, and version, and uses jQuery alongside D3 for DOM manipulation and zoom/pan interactions.

Kkaran1904
88% match
Loading thumbnail…

D3.js collapsible tree with boxes

This example shows a collapsible tree diagram where each node is rendered as a labeled box, with child nodes expandable or collapsible by clicking. It visualizes hierarchical JSON data representing nodes with types, versions, and link directions. The tree uses D3.js v3 layout and SVG rendering, with zoom and drag support via `d3.behavior.zoom`. Nodes are color-coded by type, and the layout dynamically recalculates height and width based on the tree’s depth and breadth. Animated transitions smooth node repositioning during updates.

Ttkhurana
87% match
Loading thumbnail…

D3.js collapsible tree with boxes

This interactive visualization presents a hierarchical tree as a series of collapsible boxes, using a JSON data structure to define nodes with properties like type, version, and link direction. The layout, built with `d3.layout.tree`, positions nodes vertically, while SVG rectangles and text display the node labels. Users can click nodes to expand or collapse the hierarchy, with animated transitions and colored boxes indicating different node types. The implementation uses the `d3.behavior.zoom` feature for panning and zooming, and SVG definitions for arrows and drop shadows, all rendered within an SVG container managed by D3.js v3.

SSubhas Ramdass
87% match
Loading thumbnail…

D3.js collapsible tree with boxes

This example visualizes a hierarchical tree structure using D3.js, where each node is rendered as a colored rectangle containing text and interactive tooltips. The visualization displays a collapsible tree that users can expand and collapse by clicking on nodes, with SVG graphics and smooth animations for transitions. The code uses D3.js v3’s `d3.layout.tree` and `d3.behavior.zoom` to manage layout and pan/zoom interactions, along with jQuery for event handling. Node colors correspond to different `type` values in the JSON data, and links between nodes are styled with arrows, with tooltips appearing on hover.

AAndreDelgo
87% match
Loading thumbnail…

D3.js collapsible tree with boxes

This example shows a collapsible tree diagram where each node is a colored box representing a hierarchical data structure, with labels, types, and version information. Users can expand and collapse branches by clicking nodes, and the layout animates smoothly as the tree changes. Built with D3.js v3 and jQuery, it uses the d3.layout.tree layout, SVG rendering, and d3.behavior.zoom for panning and zooming. Node colors correspond to the “type” field in the JSON data, and tooltips appear on hover to show additional details.

RRafael Ortet
86% match
Loading thumbnail…

D3.js collapsible tree with boxes

This example shows a hierarchical tree diagram where each node is a box containing text, with links drawn between parent and child nodes. Clicking a node collapses or expands its children with a smooth animated transition. The tree uses D3 v3’s layout and zoom behavior, with SVG for rendering. Node colors correspond to a `type` field from the JSON data, and tooltips appear on hover, while link arrows indicate sync or async direction.

Ssrinivasjavvadi
86% match