Fork of D3.js collapsible tree with boxes

100%

Fork of D3.js collapsible tree with boxes

✓ Published0🌍 Public

Last edited Apr 1, 2022

Created on Apr 1, 2022

Forked from D3.js collapsible tree with boxes

This fork of the D3.js collapsible tree visualizes hierarchical data as a set of connected boxes, with each node displaying its name, type, version, and link details. The tree supports interactive collapse and expansion of nodes, with smooth animated transitions between states. The visualization is built using D3 v3’s `d3.layout.tree` for layout calculations, along with SVG rendering for the node rectangles, links, and arrow markers. It also incorporates jQuery and a custom zoom behavior via `d3.behavior.zoom`, plus CSS classes for styling the selected links and tooltips. Data is loaded from the embedded `data-example.json` file.

AI-generated description

This is a description using Markdown.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This interactive tree visualization displays hierarchical data as collapsible boxes linked by labeled, arrowed connections. Built with D3.js v3 and jQuery, it uses `d3.layout.tree` with `transition` animations to expand and collapse nodes on click. The SVG layout supports zooming and panning via `d3.behavior.zoom`, tooltips, and colored node types from JSON data. The example loads data from `data2.json`, demonstrating dynamic sizing and a dark theme with styled rectangles and arrows.

Aape-ape-ape

95% match

Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This interactive visualization displays a hierarchical tree structure using collapsible rectangular nodes, with each node color-coded by type and labeled with names, versions, and codes. The tree layout is computed with `d3.layout.tree`, and nodes and links are rendered as SVG elements with smooth animated transitions on collapse and expand. The implementation uses D3.js v3 and jQuery, loading hierarchical JSON data, and includes zoom and drag capabilities via `d3.behavior.zoom`. Node colors vary by data type, and tooltips provide additional details on hover.

HHEMANG THANKI

95% match

Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This interactive example shows a collapsible hierarchical tree rendered as labeled, color-coded boxes connected by links. Node types are distinguished by color, and clicking a node collapses or expands its children with animated transitions. The visualization is built with D3.js v3, using `d3.layout.tree` for layout and SVG for rendering. It incorporates zoom and drag behavior via `d3.behavior.zoom` and includes custom tooltips and arrow markers. Data is loaded from a JSON file specifying nodes, links, and metadata.

AAndrey Matukhno

94% match

Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This fork of the D3.js library presents a collapsible tree diagram where each node is a box displaying labels, versions, and link directions. The hierarchy, loaded from a JSON file, is rendered as an SVG with animated expand and collapse transitions on click. The implementation uses `d3.layout.tree`, `d3.behavior.zoom` for pan and zoom, and custom arrow definitions to connect the boxes. Tooltips reveal additional node details, and colored rectangles distinguish the node types.

NNguyễn Thành Công

94% match

Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This fork of a D3.js v3 collapsible tree renders hierarchical JSON data using rectangular nodes colored by type. Clicking a node expands or collapses its children with a smooth animation, while links display directions and tooltips appear on hover. The visualization supports zooming and dragging via `d3.behavior.zoom`. Node layout and depth are computed with `d3.layout.tree`, and the SVG output dynamically resizes based on tree breadth and depth, with custom styling defined in CSS classes.

CCharan

94% match

Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This interactive tree visualization displays hierarchical data with expandable and collapsible nodes. Each node appears as a colored box with text labels, while links connect parent and child nodes with directional arrows. The example uses D3.js v3 and jQuery to load JSON data and render the tree as an SVG. The implementation relies on the `d3.layout.cluster` API for tree layout and includes interactive features such as zooming and dragging via `d3.behavior.zoom`. Node colors correspond to the `type` field in the data, distinguishing four categories.

SSEDKI91

94% 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

93% match

Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This interactive visualization displays a hierarchical tree with collapsible nodes, where each node is rendered as a colored box representing different data types. The tree supports zooming and panning through mouse interactions, with tooltips appearing when hovering over nodes. Built with D3.js v3 and jQuery, it uses the `d3.layout.tree` algorithm to position nodes and SVG for rendering, with animated transitions on node expansion and collapse. The example loads hierarchical JSON data containing nested objects with properties such as node name, type, and version, and color-codes nodes based on their type values.

Jjpl-web

93% match