Skip to main content
SimilarExport ZIP
100%

Search Collapsible Tree

✓ Published0🌍 Public
663anp3ca
Last edited Oct 31, 2018
Created on Oct 31, 2018

This searchable collapsible tree extends the classic D3.js hierarchical layout with an interactive Select2 search box. The visualization displays the Flare dataset as a tree of circles and links, where users can type a leaf node's name into the search field. The tree then smoothly expands to reveal the path to that node, highlighting the route in red while dimming unrelated branches. Built with SVG and animated transitions, the redrawn nodes and links respond fluidly to the search query, making it easy to locate and focus on specific leaf nodes within the hierarchy.

AI-generated description

##Overview This is an extension of Collapsible Tree using Select2 to search the tree's leaf nodes.

##Usage Type the name of a leaf node in the box at the top. This should expand the tree to the depth of that node and highlight the path in red.

forked from <a href='http://bl.ocks.org/jjzieve/'>jjzieve</a>'s block: <a href='http://bl.ocks.org/jjzieve/a743242f46321491a950'>Search Collapsible Tree</a>

forked from <a href='http://bl.ocks.org/FrissAnalytics/'>FrissAnalytics</a>'s block: <a href='http://bl.ocks.org/FrissAnalytics/238ab4decbead9e5efda0ece5293e08a'>Search Collapsible Tree</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Search Collapsible Tree

This interactive visualization extends the D3.js collapsible tree layout with a Select2 search box, allowing users to locate and expand paths to leaf nodes in a hierarchical dataset. Typing a node name highlights the route to that node in red, dynamically toggling collapsed branches as needed. The tree uses an SVG rendering with animated transitions, while the search functionality relies on a recursive tree-traversal function and Select2’s event handling.

FFrissAnalytics
94% match
Loading thumbnail…

CollapsibleTree Search

An interactive collapsible tree visualization displays the hierarchical flare dataset, with nodes expanding and collapsing on click. A search box built with Select2 filters node names, highlighting matches and their ancestors in red while collapsing unrelated subtrees. The tree layout and diagonal link rendering come from d3.layout.tree and d3.svg.diagonal, with animated transitions and SVG rendering.

GGerardoFurtado
94% 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
81% match
Loading thumbnail…

Collapsible Tree

This interactive visualization displays a collapsible hierarchical tree of the Flare software package’s class structure. Users click nodes to expand or collapse branches, with smooth transitions animating the tree’s layout changes. The visualization uses d3.hierarchy and d3.tree to compute node positions, d3.linkHorizontal for curved links, and d3.zoom for panning and scaling. Data comes from flare-2.json, rendered as SVG elements with circles and labels, updating via enter, update, and exit selections with d3.transition.

FFereidoun Mianji
80% 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
79% match
Loading thumbnail…

Collapsible Tree Version 1

This interactive collapsible tree visualizes the hierarchical structure of the Flare dataset. Users can click on any node to expand or collapse its children, revealing the nested organization of the data. The visualization uses D3.js v6 to compute the tree layout and renders nodes and links as SVG elements. Transitions between states are animated, and the view automatically adjusts to fit the visible portion of the tree. The hierarchical data is loaded from an external JSON file, and the layout dynamically recalculates as the tree structure changes.

Wwillymarinheiro
79% match
Loading thumbnail…

Fork of Collapsible Tree Version 1

This interactive collapsible tree visualization displays a hierarchical dataset of the Flare visualization library codebase, with nodes representing packages and functions. Built with D3 v6, it renders as an SVG with animated transitions that reposition nodes and links when a node is clicked to expand or collapse its children, using a horizontal diagonal link layout. The implementation relies on `d3.tree()` for layout, `d3.linkHorizontal()` for edges, `d3.select()` for SVG manipulation, and `d3.transition()` for smooth 250ms animations. The tree data comes from the `flare-2.json` file, and nodes with names shorter than seven characters are initially collapsed.

Ssorabh.vijay@gendigital.com
79% 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
79% match