Fork of FZ_ICE8_Q2_FamilyTree

100%

Fork of FZ_ICE8_Q2_FamilyTree

✓ Published1🌍 Public

Last edited Nov 9, 2025

Created on Nov 9, 2025

This example displays a four-generation family tree as a horizontal node-link diagram. It uses a hierarchical data structure with d3.hierarchy and the d3.tree layout to compute node positions, while d3.linkHorizontal generates the curved connector paths. Each generation is distinguished by shape and color—circles for the great grandparent, squares for grandparents, diamonds for parents, and triangles for children—with name labels positioned to the right of each node. The visualization is rendered as SVG using D3 v7.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE 8 Family Tree

This example presents a family tree as a zoomable, horizontal node-link diagram. It visualizes hierarchical relationships across multiple generations, with each individual represented as a labeled node and colored links connecting parents to children. The visualization uses D3 v5's `tree` layout and `linkHorizontal` generator to position nodes and draw curved paths, while labels display each family member's name with distinct colors. The SVG scene supports pan and zoom through D3's `zoom` behavior, and the code loads data from a JSON file, using the `hierarchy` function to structure the nested family data.

Bbhanuteja1807@gmail.com

89% match

Loading thumbnail…

Fork of ICE-8 Family_TREES

This D3.js v7 example visualizes a multi-generation family tree as a compact, vertical dendrogram. Nodes are colored by generation (depth) using `d3.scaleOrdinal`, with curved links drawn via `d3.linkVertical`. The hierarchy is built from a CSV file loaded through `d3.csv` and `d3.autoType`, then processed with `d3.stratify`. Hovering over a node reveals the person’s name and parent through a custom tooltip. The layout uses `d3.tree` with custom separation, rendered as an SVG within a 900x600 viewBox.

Sskmriyaz0786@gmail.com

88% match

Loading thumbnail…

Fork of ICE-8 (Tree)

This example displays a family tree as a horizontal dendrogram, with nodes colored by generation using a custom ordinal color scale. The visualization is built with D3 v7, using the `d3.hierarchy` and `d3.tree` layout algorithms, and rendered as SVG with `d3.linkHorizontal` for the curved links. The static data is defined inline as a JSON-like object, and the chart is presented on a dark background with labeled parent, aunt, cousin, sibling, and self nodes.

LLokesh

87% match

Loading thumbnail…

Fork of Family Tree ICE-8

This example shows a family tree rendered as a hierarchical node-link diagram using D3.js v5 and SVG. The code uses `d3.hierarchy` and `d3.tree` to compute node positions from nested data, with `d3.select` creating SVG groups, circles, and text labels. Curved link paths are drawn with a cubic Bézier command, while each node’s circle radius encodes a numeric value, and stroke and fill colors come from the data’s `type` and `level` fields. The data is embedded directly in the script as a JavaScript object.

Ffouzanuddin

87% match

Loading thumbnail…

Fork of ICE-8 Family Tree

This example renders a hierarchical family tree as an SVG using D3.js v5’s `d3.tree()` layout and `d3.hierarchy()`. Node circles are sized by a `value` property and colored by both a `level` fill and a `type` stroke, while curved link paths between parents and children are stroked with each child’s level color. The data is a hardcoded JavaScript object with nested `children` arrays, and the visualization highlights the branching structure of names and relationships across three generations.

Eeravellisaimeghana

86% match

Loading thumbnail…

Family Tree ICE-8

This example renders a family tree as an indented hierarchical diagram using D3.js v5. It visualizes three generations of relatives, with each node represented by a circle whose radius encodes a numeric value and whose fill and stroke colors are set from data properties. Curved link paths connect parent to child nodes using a custom cubic Bézier command. The layout is computed with `d3.tree()` and `d3.hierarchy()`, while SVG elements are bound to the dataset directly in the source code.

AAmanullah007

86% match

Loading thumbnail…

Fork of ICE8 - Family Tree

This example displays a family tree as an animated, zoomable node-link diagram, using color-coded rectangles to represent different generations and branches. Built with D3.js v3, it reads hierarchical family data from a JSON file and renders it as an SVG using `d3.layout.tree`. Nodes open and close on click with a smooth transition, while links are drawn with arrow markers and tooltips show additional details. The layout adjusts dynamically to prevent node collisions.

TTejucmandava

86% match

Loading thumbnail…

Fork of Fork of ICE 8 Family Tree

This example displays a family tree as a horizontal dendrogram, with each node colored according to its branch. The visualization uses D3 v5’s `tree` layout and `hierarchy` to compute node positions, while `linkHorizontal` generates the curved links between parent and child nodes. Interactive pan and zoom are enabled via D3’s `zoom` behavior, and SVG `text` elements render labels with sizes scaled by depth. The data is loaded as JSON and parsed with `d3.json`, with node colors applied directly from the dataset’s `color` property.

PPrathyusha0304

86% match