Skip to main content
SimilarExport ZIP
100%

ICE-8 Family Tree v2

✓ Published1🌍 Public
DDan Waters
Last edited Apr 5, 2022
Created on Apr 5, 2022

This visualization presents a family tree for the ICE-8 project, displaying a hierarchical chart of family members from Marion down to her descendants. The tree is constructed from tabular data of parent-child relationships using `d3.stratify()`, which converts the flat list into a hierarchy, and is then visualized with a custom `Tree` function that relies on D3 v7's `d3.tree` layout algorithm. The chart renders nodes with radius 5 and links styled as curves via `d3.linkHorizontal()`. Hover text reveals each node’s full ancestry path, while the links point to GitHub source locations, though these URLs are placeholders not actually resolving to real pages.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE8 Family Tree

This chart displays a third-generation family tree from a GitHub-hosted CSV dataset. D3 v7’s `d3.stratify` converts the flat data into a hierarchy, while `d3.tree` calculates the layout for the SVG rendering. Node circles are color-coded by generation depth using `d3.scaleOrdinal`, with parents connected to children via `d3.linkVertical` curves. A tooltip appears on mouse movement to show additional details for each family member.

Ddiwashhumagain@my.unt.edu
90% match
Loading thumbnail…

ICE-8 Tree

This interactive family tree visualizes a simple genealogical dataset with two named individuals. Built with D3 v7, it renders the hierarchy as an SVG with expandable and collapsible nodes, using animated transitions to reorganize the layout when branches are toggled. The code employs `d3.stratify()`, `d3.tree()`, and `d3.hierarchy()` to structure and position data, while `d3.select()` and `.transition()` handle the dynamic updates to nodes and links in response to clicks.

DDan Waters
89% match
Loading thumbnail…

ICE-8 Family Tree

A family tree visualization displays multiple generations of relatives, with nodes colored by generation depth and animated links forming parent-child connections. The example uses D3 v6 with the `d3.stratify()` and `d3.tree()` layout APIs to structure hierarchical data, rendering SVG circles and text labels. Node and link transitions animate over 1.5 seconds, while distinct fill colors—from light blue to dark teal—differentiate each generation level. The data is defined inline as an array of parent-child relationships.

Ssreesushmav
89% match
Loading thumbnail…

ICE 8 Family Tree

This interactive family tree visualization displays the ICE 8 lineage, using a hierarchical layout to organize three generations of relationships. Each node is labeled with a family member's name and colored according to their generational level. The implementation uses D3 v5’s `tree` layout, `linkHorizontal` path generator, and `hierarchy` function to structure the data from a nested JSON file, with SVG rendering. Pan and zoom capabilities are added via D3’s `zoom` event, while text styling and custom fonts are applied through CSS.

NNaimisha-M
88% match
Loading thumbnail…

ICE8 Family Tree

A family tree visualization maps ten individuals across four generations, using colored circular nodes to distinguish each depth level and labeled text for names. The hierarchical data is structured with `d3.stratify` and laid out with `d3.tree`, producing curved bezier paths via SVG path elements. Node colors switch through a depth-based palette, while the light green background and manual `translate` offset frame the 900-by-900 pixel SVG canvas rendered with D3 v5.

JJerlineJJ
88% match
Loading thumbnail…

ICE-8 Family Tree

This interactive family tree visualizes three generations of ancestral relationships using a hierarchical layout. The SVG-based chart renders named individuals as colored circles, with light blue, light gray, dark gray, and teal encoding generation depth. D3’s `d3.stratify()` converts the flat parent-child data into a hierarchy, which `d3.tree()` lays out on an 800×300 grid. Animated paths draw connections between nodes over 1.5 seconds, while circles fade in with a 700-millisecond transition. The code uses D3 v6’s selection, transition, and scale-free drawing APIs to produce the final graphic.

SSheshidharreddy
88% match
Loading thumbnail…

ICE8 Family Tree

This interactive visualization displays a multi-generational family tree, using colored circular nodes to represent each family member and curved paths to show parent-child connections. The chart is built with D3.js v5, employing the `d3.stratify()` and `d3.tree()` layout functions to structure the data and position nodes. Node colors vary by depth, with red for the root, blue for the first generation, green for the second, and yellow for the third. The tree is rendered as an SVG, with labels placed next to each node to identify individuals.

BBVNPK001
87% match
Loading thumbnail…

ICE-8 family tree

The ICE-8 family tree is an animated hierarchical node-link diagram built with D3.js v6, using SVG elements and transitions. It displays a mock royal family lineage where nodes are colored by generation level, ranging from red for the root to lightblue, lightgreen, and white for subsequent depths. The layout is computed using `d3.stratify()` and `d3.tree()`, with links drawn as animated paths that grow from parent to child positions. Node labels appear directly inside each circle, and the visualization uses custom styling with blue strokes and a light yellow background.

Ssandeep-gollamudi
87% match