adolfobarreiros

@adolfobarreiros·3 public vizzes

D3.js collapsibleRRR tree with boxes

This visualization displays a hierarchical tree structure using interactive, collapsible nodes rendered as colored boxes. It shows parent-child relationships with labeled links, where node types are differentiated by color (blue, green, yellow, purple). Users can click nodes to expand or collapse subtrees, with smooth animations. The implementation uses D3.js v3 (specifically `d3.layout.tree`), jQuery, and SVG for rendering, featuring zoom and drag capabilities. Node data comes from a JSON file, with tooltips providing additional information about each node’s name, type, and link direction.

Apr 25, 2019

Loading thumbnail…

D3.js collapsible tree with boxes

This interactive D3.js v3 visualization displays a hierarchical tree as a series of collapsible boxes, with each node representing a named entity and its associated link information. The tree layout is computed using `d3.layout.tree()`, and nodes are rendered as SVG rectangles with text, colored by a `type` property from the JSON data. Users can click nodes to collapse or expand branches, with smooth animations. The visualization also supports zooming and dragging via `d3.behavior.zoom()`, and includes tooltip boxes for additional details.

Apr 24, 2019

Loading thumbnail…

D3.js collapsible tree with boxes

This interactive tree visualization displays hierarchical data with collapsible nodes. The tree is drawn with rectangular boxes using SVG elements for nodes, links, and arrows. Built with D3.js v3, the visualization uses the `d3.layout.tree` algorithm to position nodes and supports zooming and dragging. The code includes a breadth-first traversal function to color-code nodes by type and dynamically calculate the canvas size, with all styling defined in a dedicated CSS file.

Apr 24, 2019