Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

ICE8 - Interactive Tree Graph

Public visualization

Viewing a saved revision (read-only)

5368c78b0f234fd48a20af7e7c48f78a

ICE8 - Interactive Tree Graph

0 stars1🌍 Public
Aanushaanumula
Last edited Jul 10, 2022
Created on Jul 10, 2022
Forked from HTML Starter

This interactive tree graph displays an animal hierarchy, from a root "Animals" node branching into Herbivores, Omnivores, and Carnivores, with further subcategories like Lions and Tigers. Clicking any node collapses or expands its children, animating the reorganization with smooth transitions. Built with the React framework and rendered using SVG, the visualization leverages D3.js version 3.5 APIs like `d3.layout.tree` for positioning, `d3.svg.diagonal` for link paths, and node transitions via the `.transition().duration()` method. Circles and text labels are styled through CSS classes, with alternating fill colors indicating expandable nodes.

AI-generated description

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

See also React Starter.