Skip to main content
100%

D3.js collapsible tree with boxes

✓ Published0🌍 Public
SSubhas Ramdass
Last edited Jan 13, 2025
Created on Jan 11, 2025

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.

AI-generated description

This is a description using Markdown.

MIT Licensed

Similar vizzes