Skip to main content
SimilarExport ZIP
100%

Pedigree Tree

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Jun 21, 2012

Pedigree Tree shows family lineage as a horizontal dendrogram where parent nodes branch upward into their ancestors, with each person labeled by name, lifespan, and location. The layout uses d3.layout.tree with a custom separation function that spaces parent sets twice as far apart as individual parents. Leaf nodes extend with elbow paths beyond the main diagram to accommodate their labels. The SVG rendering loads hierarchical JSON data and displays it using D3 v3’s tree layout, with crisp-edged link paths and multiple text elements per node.

AI-generated description

A variation on the elbow dendrogram, though using the tree layout. A couple notes: a custom separation function is used so that the distance between sets of parents is half the distance between parents themselves; the tree layout draws the leaf nodes at the right extreme of the layout, so a large right margin is used to inset the leaf nodes; the leaf nodes also have a custom path (d.target.children is null).

In response to a Stack Overflow question.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

d3.tree - A Family Tree

This example visualizes a family tree as a static hierarchical diagram, showing genealogical relationships with names, birth and death years, and locations. The graph uses the d3.tree layout to position nodes, while d3.hierarchy structures the JSON data and provides descendant and link methods. Links are drawn as elbow paths with a custom function, and each node displays three text elements for the relative information. The visualization is rendered in SVG with a clean, readable design, demonstrating how d3.v4 handles tree layouts and nested data.

663anp3ca
82% match
Loading thumbnail…

Tree chart

This interactive SVG tree chart displays a family lineage, using a hierarchical node-and-link diagram to show generational relationships from a single ancestor. The chart is generated with the D3.js library version 3.5.17, employing its layout tree and diagonal projection APIs to position nodes. Clicking on a node triggers an animated expansion or collapse of its children, with a 750-millisecond transition. Node circles are cyan with dark borders, and connecting links are coral, all set against a teal background. The data is hardcoded as a JavaScript array of family member names and parent-child links.

CChathurya
81% match
Loading thumbnail…

another Tree

A family genealogy rendered as a horizontal dendrogram uses d3.tree layout and d3.hierarchy to position nodes by depth. Links are drawn with d3.linkHorizontal paths, while text labels display each person's name from the JSON data. The SVG view is interactive, supporting pan and zoom through d3.zoom, and node text shadows improve readability over the teal stroke connections.

AAdam Sisk
80% match
Loading thumbnail…

Family Tree

This family tree visualization displays a hierarchical dataset of family members across several generations, with nodes colored by generation and connected by animated green links. Built with D3.js v6, the code uses the `d3.stratify()` utility to structure the parent-child data and `d3.tree()` to compute the layout. Nodes are rendered as SVG circles with a 1.5-second path-drawing transition, while text labels identify each person. Generation colors are assigned via a custom `setGenerations()` switch function, ranging from orange for the root to teal for deeper levels.

GGARIDIDEEKSHITHREDDY
80% match
Loading thumbnail…

Family tree

A family tree visualization maps a ten-person genealogy dataset with D3.js v6, using ancestor relationships to position nodes across four generations. Distinct colors (blue, lawngreen, magenta, white) encode each generation’s depth. The rendering uses SVG elements with animated transitions: paths draw over two seconds to form connections between parents and children, while circles grow to size 40 and labels appear with bold black text. The code leverages d3.stratify and d3.tree to compute hierarchical layout and link data.

Eeravellisaimeghana
79% match
Loading thumbnail…

Family tree

A family tree visualization maps a ten-person genealogy dataset with D3.js v6, using ancestor relationships to position nodes across four generations. Distinct colors (blue, lawngreen, magenta, white) encode each generation’s depth. The rendering uses SVG elements with animated transitions: paths draw over two seconds to form connections between parents and children, while circles grow to size 40 and labels appear with bold black text. The code leverages d3.stratify and d3.tree to compute hierarchical layout and link data.

Eeravellisaimeghana
79% match
Loading thumbnail…

D3.js

A family tree (genealogy) diagram renders hierarchical data from a JSON file (genealogy5.json) as an SVG. The visualization displays individuals as nodes connected by curved paths, with text labels indicating names and branch designations. The code uses D3.js v5's tree layout (`d3.layout.tree`) and diagonal path generator (`d3.svg.diagonal`) to position and draw the connections. Data transformation with `d3.nest()` restructures the flat JSON into a nested hierarchy before rendering nodes and links.

Aayd0122344
79% match
Loading thumbnail…

Family Tree

A family tree visualization displays hierarchical parent-child relationships across four generations, with nodes colored by depth and labeled with character names. Each connection animates from a horizontal line into a diagonal link as the tree expands. The implementation uses D3 v6’s `d3.stratify()` to build the hierarchy from flat data and `d3.tree()` to compute layout positions, while SVG circles, text, and paths are rendered with transitions on `attr` for smooth node growth and link drawing.

LLG0498
79% match