Fork of ICE-8 Family Tree

100%

Fork of ICE-8 Family Tree

✓ Published0🌍 Public

Last edited Apr 5, 2022

Created on Apr 5, 2022

This visualization displays a family tree with three generations of descendants, each generation distinguished by a unique color (white, orange, cyan, or light green) applied to circular nodes. The tree uses D3’s `d3.stratify()` to convert flat parent-child data into a hierarchy and `d3.tree()` to compute node positions. SVG path links animate over 1.45 seconds between nodes, while circles and labels fade in via `transition()`. The rendering uses `d3.v6` with an SVG-based layout, featuring a purple background and green connecting edges.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE 8 - Family Tree

This family tree visualization displays a hierarchical genealogy of nine individuals, with nodes color-coded by generation depth (red for the root, blue for children, green for grandchildren). The code uses `d3.stratify()` to transform the flat parent-child data structure, then `d3.tree()` computes node positions. SVG circles represent nodes, cubic Bézier paths connect parent-child relationships, and text labels identify each person. The coloring function `marker(d.depth)` distinguishes generations, with hardcoded sample data stored as objects with `child` and `parent` properties.

DDINESH SAI BOPPANA

92% 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

91% match

Loading thumbnail…

Fork of ICE - 8 Family Tree

A family tree displays ten people connected from a single ancestor across multiple generations, with each person represented as a colored circle and labeled with their name. The nodes and connecting paths animate into place, and circle colors vary by tree depth using `d3.scaleOrdinal`. Built with D3 v6, the code uses `d3.stratify()` to convert flat parent-child data into a hierarchy, then `d3.tree()` to compute node positions. The SVG is rendered with transitions on path elements and circles, applying a hardcoded dataset of family relationships.

Nnavyasrimeka9@gmail.com

91% match

Loading thumbnail…

Fork of Family ICE 8 11580431

This example shows an animated family tree for nine individuals, with orange circular nodes labeled by name and connected by lime-green paths. The visualization uses D3 v6’s `d3.stratify()` to build a hierarchy from flat parent–child data and `d3.tree()` to compute node positions. SVG circles and text are appended and animated via `transition()`, with paths drawing between nodes over one second and nodes expanding over 1.5 seconds on a pink background.

Vviswak12

91% match

Loading thumbnail…

Fork of ICE - 8 Family Tree

This example presents a family tree as an animated SVG diagram, using a custom dataset of parent-child relationships. It shows ten named individuals connected through hierarchical links, with pink circular nodes and lime-green animated edges. The visualization is built with D3 v6, using the `d3.stratify()` utility to convert the flat data array into a tree structure and `d3.tree()` to compute node positions. Links are drawn as SVG paths that animate from the parent’s position to the child’s location over 1000 milliseconds, matching the `transition()` API for a dynamic reveal effect.

RRaja Srinivas Nelluri

91% match

Loading thumbnail…

Fork of ICE - 8 Tree

This example presents a family tree as an animated node-link diagram, encoding each person as a circle node with a text label and connecting parent-child relationships as straight black links. The visualization uses d3.stratify to convert the flat data array into a hierarchy and d3.tree() to compute layout positions within an SVG. On rendering, links and circles transition their attributes (such as `d` and `r`) over durations, while node labels fade in with a staggered delay based on depth, creating a sequential reveal effect. The code directly selects the body element, appends an SVG, and applies custom styling for teal circle fills on a light blue background.

Ppreethamkesa

91% match

Loading thumbnail…

Family Tree - ICE-8

This visualization presents a family tree as an animated SVG diagram, with each generation color-coded (green, white, pink, orange) and labeled with member names. Using d3.stratify and d3.tree, the code converts parent-child links into a hierarchical layout, then renders connections and nodes with circles and text. Paths between nodes animate via transition, and node radii grow slightly as they appear, all rendered with d3.v6 within an orange-styled HTML page.

Ssuchitra2602

91% match

Loading thumbnail…

Fork of Family Tree for ICE-8

This example shows a family tree where each person is a labeled circle, with parent-child connections drawn as straight black lines. The root node sits at the top, followed by a generation of blood group categories and then a deeper layer of named individuals. The circles animate their radius, growing to their final size, while the links also animate into place over a short transition. The visualization uses D3.js v6, specifically `d3.stratify()` to build the hierarchy from flat data and `d3.tree()` to compute the layout. SVG elements render the circles, paths, and text labels, with color-coded fills based on the node’s depth.

Nnikhitha693

91% match