Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Family tree using d3.js

Public visualization

Family tree using d3.js

0 stars2🌍 Public
Vvarun-030
Last edited Apr 3, 2022
Created on Apr 3, 2022

This example shows a family tree with three generations, using colored circles to represent individuals and curved paths for parent-child relationships. The layout is generated from a flat array of child-parent pairs using `d3.stratify()` and `d3.tree()`, with nodes positioned according to the tree's computed x and y coordinates. Circles are colored via a custom `getColor` function based on node depth, and labels are added as SVG `<text>` elements. The visualization uses D3 v5 and renders entirely as SVG, with a fixed 960×600 viewport.

AI-generated description

Making a basic emoji using D3.js & SVG(Scalable Vector Graphics)

Comments

Sign in to join the discussion.

MIT Licensed