a — VizHub

100%

a

✓ Published2🌍 Public

Last edited Oct 31, 2021

Created on Oct 31, 2021

A horizontal dendrogram visualizes a nested hierarchy of numeric names, with nodes positioned by depth and connected by curved links. The visualization uses D3 v5's `tree` layout, `hierarchy`, and `linkHorizontal` generators to compute positions and draw SVG paths. Text labels scale in font size based on node depth, and the entire graph supports pan-and-zoom interaction via D3's `zoom` behavior. Data comes from a local JSON file, and the SVG rendering applies a mint-green stroke to all links.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

a Tree

A hierarchical family tree rendered as a horizontal node-link diagram. The visualization displays ancestor and descendant relationships using curved paths and text labels, with zoom and pan interaction enabled. The code uses D3 v5's `hierarchy`, `tree`, and `linkHorizontal` to compute the layout, `json` to load data from `family.json`, and `zoom` with event transforms for navigation. Nodes are drawn as SVG text elements positioned by the tree layout, while links are rendered as horizontal paths.

AAdam Sisk

85% match

Loading thumbnail…

A

This interactive tree visualization displays hierarchical data from a JSON file using D3.js v5 and React. The visualization presents nodes as colored circles—green for parent nodes and red for leaf nodes—connected by animated horizontal links. Users can click on circles to collapse or expand subtrees, with smooth transitions updating the layout. The implementation uses d3.hierarchy, d3.tree, and d3.linkHorizontal for position calculations, while SVG elements and CSS transitions handle the rendering and animation effects.

Aamorenos25

82% match

Loading thumbnail…

Tree

This hierarchical tree visualization displays cartoon character relationships with color-coded labels, where node text size decreases with depth. Using D3 v5’s `tree()` layout and `linkHorizontal()` generator, it renders an SVG with curved links and zoomable panes via `zoom()`. The data comes from nested JSON, binding each node’s `id` and `color` from `d.data.data` to text elements. Font sizing scales by depth, while text shadows and the `event.transform` handler enhance readability and interaction.

Ssumitradevipolina

79% match

Loading thumbnail…

another Tree

A family genealogy rendered as a horizontal dendrogram uses d3.tree layout and d3.hierarchy to position nodes by depth. Links are drawn with d3.linkHorizontal paths, while text labels display each person's name from the JSON data. The SVG view is interactive, supporting pan and zoom through d3.zoom, and node text shadows improve readability over the teal stroke connections.

AAdam Sisk

79% match

Loading thumbnail…

Vertical Tree

A vertical tree diagram displays hierarchical data with a root node at the top and child nodes branching downward. The visualization uses SVG rendering to draw curved link paths between parent and child nodes, with node positions calculated by the d3.tree layout. The implementation loads data from a JSON file using d3.json, processes it through d3.hierarchy, and draws the connection paths using the d3.linkVertical path generator. The data represents a geographic hierarchy, from continents down to individual countries.

CCurran Kelleher

79% match

Loading thumbnail…

Wiki

This tree diagram visualizes hierarchical data as a horizontally-oriented dendrogram. The visualization uses a radial, indented layout with circular node markers, curved link paths, and text labels for each entity. It colors nodes on a white-to-purple linear scale based on a group value, and includes a square legend. The implementation relies on D3 v5.5 API functions: `select`, `json`, `tree`, `hierarchy`, `linkHorizontal`, and `zoom`. Data is loaded from a JSON file, and the SVG element is resized to the full browser viewport. A tooltip, though defined, does not appear to be applied in this example.

Cchrismack666

79% match

Loading thumbnail…

Tree

This visualization displays a hierarchical tree derived from a JSON data file, showing the structure of a model named "HOBS" with its contained classes, attributes, and relationships. The tree layout is generated using D3's `tree` and `hierarchy` functions, with links drawn via the `linkVertical` path generator. The interactive viewport supports zooming through D3's `zoom` event handler, with an `event.transform` applied to the SVG group. Each node renders as a text label positioned by its calculated coordinates, using the Playfair Display font.

MMTR

79% match

Loading thumbnail…

Simple horizontal tree diagram using v6

A simple horizontal tree diagram displays a small hierarchy of named nodes connected by curved links, with internal and leaf nodes distinguished by text alignment. Built with d3.js v6, it uses the `d3.tree()` layout and `d3.hierarchy()` to compute node positions from static, inline JSON data. SVG rendering places each node as a group containing a circle and label, while the links are drawn as cubic Bézier paths via the `d` attribute. The styling includes white node circles with steelblue strokes and gray links.

Dd3noob

78% match