Skip to main content
SimilarExport ZIP
100%

Fork of Tree

✓ Published0🌍 Public
Ssrinathkarumuru@my.unt.edu
Last edited Nov 3, 2025
Created on Nov 2, 2025
Forked from Tree

A vertical family tree visualizes four generations of Game of Thrones houses, with color-coded nodes by depth and labeled leaf descendants. It uses the D3 v7 tree layout with `d3.hierarchy` and `d3.tree()` to compute positions, rendering SVG paths via `d3.linkVertical` for parent-child edges. Circular nodes and bold text labels are appended as SVG groups, with a `scaleOrdinal` mapping depth to thematic colors. The static example emphasizes clear hierarchical spacing through a fixed 1200px canvas width.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of family tree

A fork of a family tree visualizes generational relationships with colored nodes and animated connection paths against a black background. The D3.js v6 code uses the `d3.stratify()` and `d3.tree()` APIs to structure and position the hierarchical data, while SVG circles and text labels represent individuals. Node colors shift by generation depth, and yellow paths animate their drawing over 1.5 seconds, with circles growing into place. The example demonstrates a custom fork of D3's tree layout, using `select`, `append`, and `transition` methods for rendering.

Vvegurusaiprathyusha
85% match
Loading thumbnail…

Fork of Family Tree

This fork of a family tree visualizes a hierarchical dataset using a static tree layout, with generations distinguished by node colors. Nodes animate in size, and connecting paths grow between parent and child elements. The visualization uses d3.stratify to construct the hierarchy and d3.tree for layout, rendering the result as an SVG with animated transitions. Each node is a circle with a bold label, and the dataset is hardcoded as a list of parent-child pairs.

SSaiSree0122
85% match
Loading thumbnail…

Fork of Family Tree

This fork of a family tree visualization uses D3 v6 to display hierarchical relationships among a set of characters. The D3 `stratify()` API constructs the tree structure from parent-child links, while `d3.tree()` calculates the layout. Nodes are rendered as colored SVG circles, with colors indicating generation depth, and are animated via D3's `transition()` API. The connections between nodes are drawn as lime-green paths. The embedded text labels are placed directly on each circle using SVG text elements.

Yyaswanthsen
85% 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
84% 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
84% 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
84% match
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
84% match
Loading thumbnail…

Fork of Tree

A multi-generation family tree loads from a GitHub Gist CSV and renders as a vertical dendrogram in SVG. D3’s `d3.stratify` builds the hierarchy from child–parent pairs, while `d3.tree` computes the layout. Each node is a circle color-coded by depth (generation), connected by curved `d3.linkVertical` paths. Hovering over a node shows a tooltip with the person’s name and parent via mouse events on the SVG groups.

Aanjanipriyajillela@gmail.com
84% match