Family tree

100%

✓ Published5🌍 Public

Last edited Jul 3, 2020

Created on Jul 2, 2020

A radial family tree plots descendants around a central root, with each node’s radial position mapping birth year. Concentric decade rings and labels provide temporal context, while curved links connect parents to children. The visualization is built with D3.js, using `d3.layout.tree` for hierarchical layout and `d3.svg.diagonal.radial` for curved edge paths. Node colors vary by depth, and the SVG rendering uses a custom year-to-radius scale derived from birth dates in the JSON data.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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

89% match

Loading thumbnail…

Family Tree

This interactive family tree visualizes genealogical connections using a parent-child hierarchy. Built with D3.js v3, it renders the structure as an SVG diagram with rectangular nodes and labeled links, supporting zoom and drag interactions. The data from `family-data.json` is loaded via `d3.json()`, and the layout is computed using `d3.layout.tree()`. Node colors vary by type, and each node includes a link label with directional information.

RRadhakrishna246

85% match

Loading thumbnail…

Family tree - trial

This family tree visualization displays a hierarchical genealogy with names and birth years, using a horizontal tree layout where each node represents a family member and links show parent-child relationships. The example builds an interactive SVG graphic using D3 v5 APIs including `d3.tree`, `d3.hierarchy`, `d3.linkHorizontal`, and `d3.zoom`. It loads family data from an external JSON file, with text labels whose font size decreases at deeper levels. The visualization supports panning and zooming through the zoom behavior, while ancestor nodes are centered and descendants are left-aligned.

AAce

84% match

Loading thumbnail…

Family Tree

This family tree visualization displays a hierarchy of family members as circles connected by lines, with each person’s name placed inside its corresponding node. The layout, generated from a dataset of parent–child pairs, uses D3.js v6 with the `stratify()` method to build the hierarchy and the `tree()` layout algorithm to position nodes. The SVG renderer draws each circle with a fill color from the data (defaulting to yellow) and connects parent and child nodes with straight-line paths. Text labels are added to each circle using D3’s selection and `.text()` method, with a bold 20px font size.

Rreddyakshitha

84% match

Loading thumbnail…

Family Tree

This interactive family tree displays hierarchical relationships across multiple generations, with each node labeled by name and colored according to its position in the lineage. The visualization uses D3 v5’s `tree` layout to compute node positions and `linkHorizontal` to draw curved connecting paths, while the `zoom` function enables panning and scaling of the SVG canvas. The included JSON data file provides the family structure, and the code explicitly assigns font sizes based on tree depth and text colors from the data attributes.

Ppavankalyan1507

84% match

Loading thumbnail…

Family Tree

This visualization displays a family tree using D3.js, with each node representing a family member and colored by generation level. The root, "cherry," branches to two children, which then expand into three generations of descendants. The code uses `d3.stratify()` to build the tree structure from the flat data and `d3.tree()` to calculate the node positions. SVG paths are animated to draw connections between nodes, while circles represent members with labels, all rendered on a grey background using SVG elements.

Cchandrakalavanukuri

83% match

Loading thumbnail…

Family Tree

This radial tree visualization displays a hierarchical world geography dataset, grouping countries by continent and region. The code uses D3 v5’s `tree` layout with a radial point size, then draws curved links via `linkRadial` and places labels using `radialPoint`. Interaction includes D3’s `zoom` behavior for panning and scaling. Styling applies a custom Playfair Display font and teal strokes. The data comes from a static JSON file, rendered as SVG text and paths.

Ssameerarastu

83% match

Loading thumbnail…

Family Tree

A family tree visualization renders hierarchical relationships as an SVG diagram. Colored circles mark each person, with blue, yellow, and orange indicating their depth in the tree, while curved paths connect parents to children. The example uses D3 v5, but notably relies on the missing `d3.stratify` and `d3.tree` APIs, which are not part of the standard D3 library. The code manually positions nodes and links using the x and y coordinates from those undefined functions, with hard-coded data listing individuals and their parents.

DDINESH SAI BOPPANA

83% match