Skip to main content
100%

Family Tree -> ICE-8

✓ Published0🌍 Public
AArruSkywalker
Last edited Jul 9, 2022
Created on Jul 9, 2022

This family tree visualization maps multiple generations of a family, using colored circles to represent individuals and animated lime-green lines to show parent-child connections. The data is structured as a list of child-parent pairs, which is processed through the D3 `stratify()` utility to build the hierarchical tree structure, and then laid out using `d3.tree()`. Each node is rendered as an SVG circle with a color assigned by depth—red for the root, cyan, pink, and green for subsequent generations—and includes the individual's name as text. The visualization uses D3's `.transition().duration()` method to animate both the drawing of the links and the appearance of the circles.

AI-generated description

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

MIT Licensed

Similar vizzes