Collapsible Tree

100%

Collapsible Tree

✓ Published0🌍 Public

AAdlopez2016

Last edited Nov 2, 2016

Created on Nov 2, 2016

This interactive collapsible tree visualizes a hierarchical dataset of Santander-related names and municipalities using D3 v3. It is an implementation of the Reingold–Tilford algorithm, rendering nodes and links as SVG elements with smooth animated transitions. Users can click on any node to expand or collapse its children, dynamically updating the tree layout with a tidy, left-to-right orientation. Node labels are displayed alongside circular markers, with collapsed nodes indicated by filled circles and expanded or leaf nodes by hollow circles. The hierarchy derives from a custom flare.json file, which mixes abstract data categories (e.g., analytics, animate, data, display, flex, physics) with geographic entries (Rural and Urbano) for Santander municipalities. The tree supports interactive exploration, letting users reveal or hide branches to explore the dataset's structure. The visualization is implemented with D3 v3 and rendered using SVG with smooth animations for node transitions.

AI-generated description

An interactive version of a Reingold–Tilford tree. Click on the nodes to expand or collapse.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4339083'>Collapsible Tree</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/3800cd1104e341bb40015a1dc3f8bbfb'>Collapsible Tree</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Collapsible Tree

The visualization shows a collapsible tree layout of the Santander dataset, with an interactive focus on hierarchy exploration. Built with D3 v3, the tree uses SVG and animated transitions to expand and collapse child nodes when clicked. The data is loaded from a local JSON file and maps municipal information from the Santander region, organized into urban and rural categories. The tree layout is positioned with margins and uses diagonal links, while nodes are rendered as white circles with steelblue strokes. Initially, all nodes are collapsed to their top-level categories; clicking a node toggles its children, animating the tree’s expansion and contraction with a 750ms duration. The root is centered vertically, with each depth level offset horizontally, and the visualization is scaled to fit an 800px tall frame.

AAdlopez2016

95% match

Loading thumbnail…

Collapsible Tree

This interactive collapsible tree visualizes hierarchical data from a Santander bank dataset, rendered as an animated SVG using D3.js. It adapts the classic Reingold–Tilford tree layout: nodes are circles, links are curved paths, and clicking a node expands or collapses its children with smooth transitions. The dataset, stored in a JSON structure, groups items under category names like "analytics" and "physics," with leaf nodes sized by a numeric value. The visualization supports progressive disclosure, letting viewers explore the hierarchy by toggling branches while maintaining a clear left-to-right layout.

AAdlopez2016

94% match

Loading thumbnail…

Collapsible Tree

This interactive collapsible tree visualizes a hierarchical dataset representing Colombian municipalities grouped under categories like "analytics," "animate," and "data." Built with D3 v3 and rendered as SVG with animated transitions, the layout follows the Reingold–Tilford algorithm to position nodes. Clicking any node toggles its children, collapsing or expanding the subtree with smooth animations. Nodes are white circles with steelblue borders, connected by gray curved links, and labeled with 10px sans-serif text. The root node is "Santander," and each leaf displays a size value, likely representing a metric like population or data volume. The visualization supports interactive exploration of hierarchical structures and is licensed under GPL-3.0.

AAdlopez2016

92% match

Loading thumbnail…

Santander educacion Colapsible2

This interactive collapsible tree visualizes educational data for Santander, Colombia, using a Reingold–Tilford layout. The dataset groups municipalities by sector—Rural and Urban—and further by school type (Oficial or Particular), with circle size proportional to student counts. Built with D3 v3, it renders as an animated SVG where clicking a node expands or collapses its subtree. The layout uses the classic tidy tree algorithm, with node labels and colored circles for visual encoding. The visualization is licensed under GPL-3.0.

AAdlopez2016

88% match

Loading thumbnail…

Collapsible Tree

This collapsible tree visualization displays hierarchical data from a JSON file, showing parent-child relationships with nodes that expand and collapse when clicked. The tree layout positions nodes horizontally by depth, with curved diagonal links connecting them. The visualization uses D3.js v3 with the `d3.layout.tree` for layout computation and `d3.svg.diagonal` for drawing curved paths. Nodes are rendered as SVG circles with text labels, and click interactions toggle children visibility using the `_children` property to store collapsed nodes. The animation uses D3 transitions with a 750ms duration to smoothly move nodes and links between positions, with nodes initially appearing collapsed at the root level.

AAdlopez2016

82% match

Loading thumbnail…

Collapsible Tree

This interactive tree diagram visualizes the hierarchical structure of the Flare dataset, using a Reingold–Tilford layout to position nodes. Each circle represents a data category, with parent-child relationships shown as curved links. Clicking any node smoothly expands or collapses its children, animating the transition. The visualization is rendered in SVG and uses the d3.v3 library, with white node circles, steelblue borders, and gray links against a clean background.

AAdlopez2016

81% match

Loading thumbnail…

Collapsible Tree

This interactive tree diagram visualizes hierarchical data from the flare library using a Reingold–Tilford layout. Nodes represent categories and leaves represent individual modules, with circle marks sized by a numeric value and colored by depth. Clicking a node expands or collapses its children with a smooth animated transition, implemented in D3 v3 with SVG rendering. The layout updates the tree’s horizontal positioning to reflect the current set of visible nodes, keeping the visualization tidy and readable.

663anp3ca

81% match

Loading thumbnail…

Collapsible Tree

This interactive collapsible tree visualizes the hierarchical structure of the Flare dataset, displaying nodes as circles connected by curved links. Users can click any node to expand or collapse its subtree, with smooth 750-millisecond transitions animating nodes and links between positions. The visualization uses D3 v3's `d3.layout.tree` to compute positions, `d3.svg.diagonal` for link paths, and SVG transitions to update the scene. Node colors change from white to lightsteelblue when children are hidden, and the root collapses all branches initially. Text labels position dynamically based on whether a node has visible or hidden children.

Mmbostock

78% match