Search Collapsible Tree

100%

Search Collapsible Tree

✓ Published0🌍 Public

Last edited Nov 26, 2016

Created on Nov 26, 2016

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.

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>

mit Licensed

Similar vizzes

Loading thumbnail…

Search Collapsible Tree

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.

663anp3ca

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

91% 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

76% match

Loading thumbnail…

Collapsible Tree Version 2

This collapsible tree visualization shows hierarchical data from a JSON file, where nodes can be clicked to expand or collapse their children. The tree layout is computed using the `d3.tree()` layout algorithm with horizontal links drawn via `d3.linkHorizontal()`. The visualization uses D3 v6 and SVG rendering, with smooth animated transitions (250ms or 2500ms with Alt key) applied to node positions and the viewBox. Clicking a node toggles its children and also collapses any other nodes with the same name, with the tree recompiled via `d3.hierarchy()`.

Rrainyrainyguo

75% 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

75% match

Loading thumbnail…

Simple Collapsible Tree

This interactive visualization displays a hierarchical tree that expands and collapses when nodes are clicked. The tree uses a horizontal layout with circular nodes and text labels, and collapsible branches animate smoothly via transitions. The code employs D3 v3’s `d3.layout.tree` for positioning and `d3.svg.diagonal` for link paths, with sample data from a manual tree structure containing "Top Level" and dummy child nodes. SVG elements provide the rendering, and animations use `transition().duration()` to update node positions on interaction.

Rrainyrainyguo

75% match

Loading thumbnail…

Collapsible Tree Example

This interactive visualization displays a collapsible tree diagram using d3.layout.tree, with nodes rendered as SVG symbols (circles, crosses, or diamonds) and links colored by a level property from the embedded JSON data. The code loads d3 v3 from a CDN and uses d3.svg.diagonal for curved edges, along with d3.svg.symbol to vary node shapes based on value thresholds. The tree includes hardcoded family hierarchy data, with fixed node depths and margin-based layout, though no collapse/expand behavior is implemented in the shown script.

GGaneshPenumarthi

75% match

Loading thumbnail…

Collapsible Tree Final Version 2

This interactive collapsible tree visualization displays a hierarchical structure of computer science topics using SVG and animation. Users can click on circular nodes to expand or collapse their children, while clicking on text labels opens a Wikipedia page for that topic. The tree uses D3 v4’s zoom behavior, transitions with `duration`, and a custom depth-based layout algorithm. Node positions are calculated using depth counts and a scale factor, with data sourced from the `newData2.js` file. The visualization includes white text outlines and color-coded nodes to indicate expandable branches.

Rrainyrainyguo

75% match