Tests

Data Visualization with D3

This example visualizes a family genealogy using D3.js and Canvas rendering. It displays individual records with birth and death dates, places, and gender classifications, organized into generations through a custom kinship code system. The visualization uses DOM elements for individual containers and a Canvas overlay to draw connecting lines between relatives. Data comes from a static JavaScript dataset, with helper functions in `indiv.js` determining gender, direct ancestry, and generation levels based on coded identifiers.

Mmesclics

Fork of Family tree

This radial family tree visualization uses a hierarchical layout to display four generations of a family, with each person’s radial position determined by their birth year. Concentric decade rings and labels from 1930 to 2020 provide a temporal context. The code uses `d3.layout.tree` with a radial diagonal projection, `d3.svg.diagonal.radial`, and maps birth years to radii via a custom `yearToY` function. Node colors vary by depth using `d3.scale.category10`, and the SVG rendering includes interactive styling for links and nodes.

AAlex Velez

Family tree using d3.js

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.

Vvarun-030

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

Family Tree

This example shows a family tree visualization with nodes colored by generation and animated SVG paths connecting parents to children. The tree layout uses d3.stratify() and d3.tree() to compute node positions from the hierarchical data. Circles and text labels are rendered as SVG elements, with d3 transitions animating the connecting paths and node sizing. Generation colors are assigned via a custom switch function, and the SVG fills the browser viewport.

AAshrith Kudidhi

Tree

This example presents a three-generation family tree as a static SVG visualization using D3.js v6. It shows a root "Grandparents" node branching into two parent nodes, each with two child nodes. The layout is computed with `d3.stratify()` and `d3.tree()`, while `d3.linkVertical()` draws the connecting paths. Node shapes and colors encode generation depth: squares represent the root, circles represent parents, and triangles represent children. A legend explains the mapping, and each node includes a tooltip via a `<title>` element.

RRamdas Dheeraj

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

Family tree

Eeravellisaimeghana