Damien Dotta

@ddotta·2 public vizzes

D3.js collapsible tree with boxes

This example shows a collapsible tree diagram where each node is a box displaying metadata such as type, code, and version. The visualization uses a hierarchical JSON dataset, with nodes color-coded by type and links labeled with their direction (SYNC or ASYN). The implementation uses d3.v3’s `d3.layout.tree` to compute the layout and SVG for rendering, with CSS transitions providing smooth expand and collapse animations. Custom tooltips appear on hover, and zooming is handled via `d3.behavior.zoom`.

Oct 15, 2019

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.

Oct 15, 2019