Skip to main content
SimilarExport ZIP
100%

SAVE OF Collapsible Tree Hierarchy - Real Data

✓ Published1🌍 Public
QQuinn Sebso
Last edited May 10, 2024
Created on May 9, 2024

This visualization presents a collapsible tree hierarchy of MeSH (Medical Subject Headings) data, organized into a hierarchical structure based on the "MN" field and labeled with descriptive names. Users can click nodes to expand or collapse branches and navigate the hierarchy. Built with React and D3.js v6, the visualization uses SVG and animations to render nodes with dynamic radii and text labels. The data is loaded from a remote JSON file, and custom JavaScript functions categorize entries by their descriptions to sort the tree’s root children.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Collapsible Tree Hierarchy - Real Data

This interactive tree visualization displays the hierarchical structure of MeSH (Medical Subject Headings) data, with nodes representing terms and branches showing parent-child relationships. Users can click nodes to collapse or expand subtrees and navigate through the hierarchy. Built with React and d3.v6, the visualization uses SVG rendering with smooth 250ms transitions, `root.descendants()`, and `tree(root)` for layout computation. Node circles scale based on child count, and click events trigger nested navigation through a node stack while a tooltip shows the selected term's name and key.

QQuinn Sebso
94% match
Loading thumbnail…

Collapsible Tree Hierarchy - Real Data

This interactive collapsible tree visualizes a hierarchical structure of medical terms derived from MeSH data. The visualization displays the tree as an SVG graphic, with nodes representing medical concepts and connections illustrating their relationships. Users can click on nodes to expand or collapse subtrees, while a dedicated info panel shows the term’s name, key, and description. Built with D3.js v6, the tree uses animated transitions via `transition()` and `attrTween` to smoothly reposition nodes and links. The code implements a custom `convertToHierarchy` function to transform flat JSON data into a nested tree structure.

QQuinn Sebso
90% match
Loading thumbnail…

Fork of SAVE SPOT Medical Data Tree - Category (retry)

This interactive tree visualization explores the Medical Subject Headings (MeSH) hierarchy, using a force-directed layout to display the relationships between medical categories and their sub-terms. Built with D3.js v6 and React, the tree is rendered as SVG elements, with animated transitions when nodes are clicked to expand or collapse child categories. The code processes flat MeSH data into a hierarchical structure, categorizing entries based on regex patterns matching their descriptions. Users can navigate through the tree by clicking nodes, which triggers smooth animations and displays node-specific information in a floating div.

QQuinn Sebso
87% match
Loading thumbnail…

SAVE SPOT Medical Data Tree - Category

This visualization displays a hierarchical tree of medical data from the MeSH (Medical Subject Headings) dataset, organized into categories based on regular expression pattern matching of node descriptions. The interactive SVG tree, rendered with D3.js v6, allows users to click nodes to expand or collapse branches, dynamically updating the layout with smooth transitions while displaying node information in a separate panel. The code uses D3’s tree layout and transition APIs to reposition nodes and links, with node radius scaling based on the number of children.

QQuinn Sebso
86% match
Loading thumbnail…

Collapsible Tree Hierarchy Reformatted - Real Data

This interactive collapsible tree visualization displays hierarchical data as an SVG with animated transitions between expanded and collapsed states. Users click nodes to re-root the tree and reveal child nodes, while a dynamic info panel shows the selected node’s ID and name. Built with d3.v6 and React, it uses the `transition()` API for smooth resizing and layout updates, with node positions computed via `root.descendants()` and `root.links()`. The rendering relies on SVG elements, including circles and text, styled with CSS. The dataset originates from a real source, as indicated in the example’s metadata.

QQuinn Sebso
85% match
Loading thumbnail…

Collapsible Tree Hierarchy - Real Data - Structured

This example presents a collapsible tree hierarchy using real data, rendered as an SVG. The visualization displays nodes that can be clicked to expand or collapse their children, revealing the structured relationships in the data. Built with React and D3 v6, it uses `d3.hierarchy` to process the data and `d3.tree` for layout, with custom JavaScript handling node clicks and updating the tree structure dynamically through `updateTree`.

QQuinn Sebso
85% match
Loading thumbnail…

Collapsible Tree Hierarchy - Real Data

A collapsible tree hierarchy displays real hierarchical data, with nodes that expand and collapse on click. It also enables navigation by re-rooting the tree view to the clicked node, while a stack tracks the path back to previous roots. The visualization uses d3.v6’s tree layout and transitions, rendering SVG circles and text labels with animated updates. A node-info div shows details for the selected item, and the canvas height dynamically adjusts to fit the visible hierarchy.

QQuinn Sebso
85% match
Loading thumbnail…

Collapsible Tree

This interactive visualization displays a hierarchical tree structure, allowing users to click on nodes to expand or collapse their child branches. The tree’s layout dynamically repositions nodes with animated transitions, adjusting the SVG canvas height to fit the visible structure. Built with React and D3 v6, it uses the `d3.tree()` layout, `d3.linkHorizontal()` for connecting links, and reads hierarchical JSON data from a remote file. Node labels are rendered alongside circular markers, with parent and leaf nodes shown in different colors.

QQuinn Sebso
84% match