Skip to main content
SimilarExport ZIP
100%

Fork of ICE-8 (Tree)

✓ Published1🌍 Public
LLokesh
Last edited Nov 9, 2025
Created on Nov 9, 2025
Forked from ICE-8

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.

AI-generated description
MIT Licensed

Similar vizzes

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
92% match
Loading thumbnail…

Fork of ICE8 - Family Tree

This visualization displays a family tree as an interactive, collapsible hierarchy. Using the D3.js library (v3), it renders nodes as colored rectangles representing family members, connected by curved links, with tooltips and zoom/pan support. The tree layout is computed via `d3.layout.tree`, and the data is loaded from a JSON file containing nested family relationships. SVG elements and a zoom behavior enable animation and navigation, with node colors indicating generational types.

Bbhargavarathod
92% 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
91% match
Loading thumbnail…

Fork of ICE 8 Family Tree

This visualization shows a family tree rendered as a horizontal dendrogram, with each individual displayed as a colored label connected by black links. The tree's structure is derived from a hierarchical JSON data file, and the node fill colors are specified within the data itself, distinguishing generations. Built with React and D3 v5, the code uses `tree()` and `hierarchy()` to compute the layout, `linkHorizontal()` to generate the connecting paths, and a `zoom()` interaction for panning and scaling. Text elements are styled with a Playfair Display font and a white text-shadow on an SVG canvas.

Mmanvithareddykarra
91% match
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
91% match
Loading thumbnail…

Fork of ICE-8 Family Tree

This fork of ICE-8 creates a family tree visualization using D3.js v5 and SVG rendering. The dendrogram layout uses a hierarchical data structure of family members, with circle size encoding a numeric value attribute and colored links and circles reflecting per-node category levels. Computed via d3.tree(), the tree positions nodes in a horizontal layout, while curved cubic bezier paths connect parents to children through custom link generation. Node styling applies both static CSS classes and dynamic inline style attributes for strokes and fills.

Bbhargavarathod
91% match
Loading thumbnail…

Fork of Fork of ICE-8 Family Tree

A family tree visualization renders hierarchical relationships as an interactive node-link diagram, with each family member displayed in a color-coded box with text for name, node type, and relation. Built with D3 v3, the layout uses `d3.layout.tree` to position nodes, and SVG rectangles and `foreignObject` elements render the node content, while links are drawn as paths with arrow markers. Clicking a node toggles its children’s visibility, and transitions animate nodes to new positions over 600 milliseconds. Data comes from a JSON structure containing nested family members, with tooltips providing additional details on hover.

AAnanyaSamala
91% match
Loading thumbnail…

Fork of Fork of ICE-8 Family Tree

A family tree visualization renders hierarchical relationships as an interactive node-link diagram, with each family member displayed in a color-coded box with text for name, node type, and relation. Built with D3 v3, the layout uses `d3.layout.tree` to position nodes, and SVG rectangles and `foreignObject` elements render the node content, while links are drawn as paths with arrow markers. Clicking a node toggles its children’s visibility, and transitions animate nodes to new positions over 600 milliseconds. Data comes from a JSON structure containing nested family members, with tooltips providing additional details on hover.

AAnanyaSamala
91% match