Fork of D3 Starter-2

100%

Fork of D3 Starter-2

✓ Published0🌍 Public

Last edited Apr 8, 2026

Created on Apr 7, 2026

This example displays a family tree as a static node-link diagram, using a sample dataset with a grandparent, two parents, and five children. Node color encodes generation depth: red for the root, green for its children, and blue for leaves. Rendered as an SVG, the visualization applies `d3.tree()` layout and `d3.hierarchy()` to structure the data, then draws vertical links with `d3.linkVertical()` and labels each node. The implementation uses D3.js v7 and defines custom CSS for link and node styling.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of D3 Starter

This example shows a family tree as a hierarchical node-link diagram, with color-coded nodes that distinguish generations: red for the root, blue for grandparents, green for parents, and orange for children. Using D3.js v7, it builds the hierarchy with `d3.stratify()` and lays it out with `d3.tree()`, then renders the structure as an SVG. The code draws black links as lines and labels each node with text, positioning all elements based on the computed tree coordinates.

Rrevanthdasari10@gmail.com

95% match

Loading thumbnail…

Fork of D3 Starter

This example visualizes a family tree as a static node-link diagram, using color-coded circles to show generational depth from root (red) to children (orange). The hierarchical data is defined as an array of node-parent pairs, then converted into a tree structure using the `d3.stratify()` API and laid out with `d3.tree()`. Links are drawn as lines, with nodes and labels rendered as SVG circles and text elements, all positioned using the computed layout coordinates.

Rrevanthdasari10@gmail.com

94% match

Loading thumbnail…

Fork of HTML Starter

This example shows a three-generation family tree with colored nodes representing grandparents, parents, and children, connected by curved links. The code converts flat family data into a hierarchy using `d3.stratify`, then lays it out with `d3.tree()`. Nodes are rendered as SVG circles with name and generation labels, while links use `d3.linkVertical()` to draw the connections. A `d3.scaleOrdinal()` maps generations to distinct colors.

Ssuddala2001@gmail.com

91% match

Loading thumbnail…

Fork of React & D3 Starter

This example presents a three-generation family tree as a static dendrogram, with each generation distinguished by a unique node shape and color. It uses D3’s hierarchy and tree layout algorithms to position nodes, while SVG paths draw the connecting links. The code leverages D3 v7 APIs such as `d3.select`, `d3.hierarchy`, `d3.tree`, `linkVertical`, and the `join` operator to build the visualization. A legend clarifies the shape-to-generation mapping, and the SVG is rendered directly in an HTML file with hardcoded family data.

Ssharathchandrareddymuthyam

90% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example displays a three-generation family tree using a static hierarchical layout, with color-coded nodes indicating depth. It uses D3 v7’s `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal` to position and connect nodes, rendering an SVG with circles and labels. The tree is drawn from a hard-coded JavaScript object, with edge paths and node groups appended via joins. Node fill colors are mapped by depth using `d3.scaleOrdinal`, producing a simple, beginner-friendly illustration of a tree diagram.

Ssaisanthoshravula@my.unt.edu

89% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

Ssaisanthoshravula@my.unt.edu

89% match

Loading thumbnail…

Fork of D3 Starter

This example shows a hierarchical tree visualization of programming languages and their subcategories, with nodes colored by generation depth. The visualization uses D3 v7 and renders SVG elements, including vertical links drawn with `d3.linkVertical()` and nodes positioned via `d3.tree()`. The flat parent-child data is converted into a hierarchy using `d3.stratify()`. The root node appears in red, middle-level nodes in blue, and leaf nodes in green, with each node labeled by its name.

AAbhiram-Janagama

89% match

Loading thumbnail…

Fork of Family Tree

A family tree for three generations is depicted, where each node is a colored circle representing a family member, and the connecting lines show parent-child relationships. The visualization uses a static dataset of ten family members and renders the hierarchy with D3 v6, employing the `d3.stratify()` function to build the hierarchy from link data and `d3.tree()` to calculate node positions. The SVG output animates the growth of the connecting paths and the appearance of the circles, with node colors (`#ff00ff`, `#00ff00`, `#ffa500`) distinguishing generations.

Ttejaswikalluri05

88% match