Skip to main content
SimilarExport ZIP
100%

VizHub Mind Map

✓ Published1🌍 Public
CCurran Kelleher
Last edited Apr 7, 2025
Created on Apr 4, 2025

This visualization renders a hierarchical mind map of VizHub’s core features using a D3.js tree layout with horizontal links. Nodes are color-coded by depth, with clickable circles that toggle a dark outline to highlight selection. The code employs `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal` to position and draw the graph, while SVG groups and text labels display each feature name. Data is embedded in a static JavaScript object, and the background color is set to a light green.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

This visualization parses an XML mind map and displays its nodes as an interactive, force-directed graph. Purple circles represent unique nodes, while red-orange circles indicate cloned or shared references, with arrows illustrating parent-child relationships. The layout emerges from a physics simulation combining charge, link, and collision forces, all computed with `d3.forceSimulation`, `d3.forceManyBody`, `d3.forceLink`, and related force APIs. Users can click and drag nodes to explore the structure, and the scene supports zooming via a nested SVG group. The underlying data comes from `data.xml`, rendered as an SVG canvas.

LLCherryholmes
80% match
Loading thumbnail…

Hello VizHub

This example shows an interactive dendrogram layout of a hierarchical data structure, rendered as SVG circles connected by curved paths. Users can click nodes to inspect them, press Shift-click to add random "florps" children, or Cmd-click to delete entire subtrees, triggering re-renders that change link and node colors. The code relies on d3.hierarchy, d3.cluster, d3.zoom, and the d3 v5 event handling, with data defined as a plain JavaScript object and layout computed at 500x900 pixels.

MMatt Morris
77% match
Loading thumbnail…

Hello VizHub

A hierarchical tree visualization displays the geographic structure of the World, Asia, and its subregions down to individual countries. The example renders a horizontal dendrogram using D3 v5, with the `d3.hierarchy` and `d3.tree` layouts computing node positions, while `d3.linkHorizontal` generates curved SVG paths for the links. Data is loaded from a local `data.json` file, and the SVG canvas is sized to the full viewport dimensions.

TTran Ly Tan
76% match
Loading thumbnail…

Hello VizHub

A hierarchical tree visualization displays the geographic structure of the World, Asia, and its subregions down to individual countries. The example renders a horizontal dendrogram using D3 v5, with the `d3.hierarchy` and `d3.tree` layouts computing node positions, while `d3.linkHorizontal` generates curved SVG paths for the links. Data is loaded from a local `data.json` file, and the SVG canvas is sized to the full viewport dimensions.

TTran Ly Tan
76% match
Loading thumbnail…

Hello VizHub

A hierarchical tree visualization displays the geographic structure of the World, Asia, and its subregions down to individual countries. The example renders a horizontal dendrogram using D3 v5, with the `d3.hierarchy` and `d3.tree` layouts computing node positions, while `d3.linkHorizontal` generates curved SVG paths for the links. Data is loaded from a local `data.json` file, and the SVG canvas is sized to the full viewport dimensions.

TTran Ly Tan
76% match
Loading thumbnail…

Tree Visualization

This tree visualization displays hierarchical data as a node-link diagram with circular nodes and connecting links, rendered as an SVG on a 600x600 canvas. The code uses D3 v5, loaded via UNPKG, to select the SVG container and draw the structure, while CSS styles the node circles with a steelblue stroke and the links in light gray. The visualization demonstrates importing D3 functions and local ES6 modules through VizHub, though the specific dataset is not visible in the provided files.

VVenkat-Sumith-Thota
76% match
Loading thumbnail…

Hello VizHub

An interactive collapsible tree visualization displays the Flare dataset hierarchy, with nodes and links rendered as SVG elements. The graph supports dynamic restructuring through user interactions: shift-clicking appends new child nodes, while alt-clicking triggers name editing. The layout recalculates node positions with smooth transitions using D3 v5's hierarchy layout and transition APIs, including `root.descendants()`, `root.links()`, and `linkHorizontal()`. Node colors shift based on collapsed states, and the `update` function handles enter, update, and exit selections for both nodes and paths.

MMatt Morris
75% match
Loading thumbnail…

VizHub Force Directed Forks Tree

This example shows the fork hierarchy of VizHub projects as an interactive force-directed tree, with nodes representing individual visualizations and links tracing their forking relationships. The visualization uses a d3.forceSimulation with a custom leftRight force to organize child forks horizontally, alongside link and charge forces. It renders to a Canvas 2D context, drawing nodes as small circles and links as lines. The code builds the hierarchy with d3.stratify from JSON metadata fetched from the VizHub API, and supports dragging nodes to adjust the simulation.

CCurran Kelleher
75% match