Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Tree Map

Public visualization

Viewing a saved revision (read-only)

6bf22016f9f54bfbb4a9a89a7baee65a

Tree Map

0 stars0🌍 Public
SsreepavanKothapalli
Last edited Apr 13, 2023
Created on Apr 13, 2023
Forked from ICE - 8: Tree Map

This example presents an interactive family tree diagram rendered with SVG and animated transitions. The visualization uses D3.js’s `d3.layout.tree` to compute hierarchical node positions and `d3.svg.diagonal` to draw curved links between generations. Nodes appear as red circles with blue outlines, labeled with names, and users can click any node to collapse or expand its children. The tree’s layout normalizes horizontal spacing by depth, while entering and exiting elements animate smoothly via `transition` methods over a 750-millisecond duration. The data is a hardcoded array representing three generations of a family lineage.

AI-generated description

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

See also React Starter.