Skip to main content
SimilarExport ZIP
100%

Fork of tree test

✓ Published0🌍 Public
NNaveed945
Last edited Jul 10, 2022
Created on Jul 10, 2022
Forked from Hello VizHub

This interactive visualization displays a hierarchical tree of animal classifications, from "Animals" down to species like "Tiger" and "Snake." It uses the D3.js library with the `d3.layout.tree` and `d3.svg.diagonal` APIs to position nodes and draw links. Users can click on nodes to expand or collapse their children, with animated transitions handled by D3's `.transition().duration()`. SVG circles represent nodes, styled with a yellow fill and black stroke, while orange paths depict the connecting links.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Tree

This example shows a branching tree diagram classifying animals from a single root into vertebrates and invertebrates, with further subdivisions down to individual groups like mammals, birds, and insects. Each node displays its name, while link strokes are grey and node circles use colored strokes and fills. The visualization is built with D3.js version 3.5.17, using the tree layout and SVG rendering, with clickable nodes that allow users to expand or collapse branches. The data is hardcoded as a nested JavaScript object, and the tree layout automatically positions nodes based on their hierarchy.

Tthymdi
88% match
Loading thumbnail…

Fork of Tree Example: ICE-8

This interactive tree diagram visualizes a biological classification hierarchy, showing how animals are grouped into vertebrates and invertebrates, with further subdivisions down to individual species. The visualization uses a collapsible tree layout where nodes can be clicked to expand or collapse their children. Built with D3.js v3 and React, the code employs `d3.layout.tree` for the hierarchical layout, `d3.svg.diagonal` for the orange curved links, and SVG circles and text for nodes. Colors distinguish different taxonomic levels, with yellow nodes, green type indicators, and black leaf nodes.

NNaveed945
87% match
Loading thumbnail…

Fork of Tree Example

This interactive tree diagram visualizes a hierarchical family tree using D3.js. Users can click on nodes to collapse or expand branches, with smooth animated transitions between states. The visualization uses D3’s tree layout and diagonal path generator to render SVG links, while node positions animate via `transition()` calls. Data is structured as a nested JSON array, and the code employs `d3.layout.tree`, `d3.svg.diagonal`, and event handlers for node toggling.

TTejucmandava
87% match
Loading thumbnail…

Fork of Fork of Fork of Family Tree of plants

This visualization presents an interactive hierarchical tree of the animal kingdom, showing the classification from "Animals" down through vertebrates and invertebrates to specific groups like Mammals, Birds, Fish, and Amphibians. Built with D3.js v3, it renders nodes as colored rectangles connected by animated SVG links, with each node color-coded by its hierarchical level (type1 through type4). The layout uses `d3.layout.tree` with zoom and drag behaviors, and includes tooltips and click interactions to expand or collapse subtrees. Data comes from a JSON file structured with nested children arrays.

NNikhilchiguru-8
87% match
Loading thumbnail…

Fork of Tree Example

This example shows an interactive hierarchical tree diagram built with D3.js, where users can click nodes to expand or collapse their children. The visualization renders a family tree with named individuals such as Roshan, Nimmat, and Salim, using SVG circles and text labels connected by curved diagonal paths. The code uses `d3.layout.tree` to compute the layout, `d3.svg.diagonal` for the links, and transitions on node and link elements to animate position changes smoothly over 750 milliseconds. Data is embedded directly as a JavaScript object array, and each node’s color shifts to lightsteelblue when collapsed.

Ffkukcha
86% match
Loading thumbnail…

Fork of Tree Example

This interactive tree diagram displays hierarchical data with expandable and collapsible nodes. Clicking a node toggles its children, animating the layout transitions. The example is built with React and D3.js, using the `d3.layout.tree` API and `d3.svg.diagonal` projections to draw curved links. The SVG rendering includes a 750ms transition animation for nodes and links as the tree structure changes. Custom data defines family relationships, with nodes styled as white circles with steelblue strokes.

BBaylife5
86% match
Loading thumbnail…

Fork of Tree Example

This example shows an interactive tree diagram with expandable and collapsible nodes. The visualization displays hierarchical data, including named nodes like "Swarna Kumari" and "Lakshmi," with clickable circles that toggle child visibility. Built with React and D3.js v3, it uses `d3.layout.tree` to compute positions and `d3.svg.diagonal` for curved links. SVG elements render nodes and text, while transitions animate node and link movement over 750 milliseconds when collapsing or expanding branches.

TTejucmandava
85% match
Loading thumbnail…

Fork of Family Tree

A fork of a family tree example demonstrates a hierarchical animal classification using a tree layout with animated SVG circles and links. The visualization shows categories like Herbivorous, Carnivorous, and Omnivorous branching into specific animals, with circle colors indicating generation depth. Built with D3.js v6, the code uses `d3.stratify()` to convert flat data into a hierarchy, `d3.tree()` to compute positions, and `transition()` to animate link paths and circle radii over durations. Node labels appear as bold white text, and all elements are centered within the viewport.

KKeerthipriyaBankuru
85% match