ICE-8 2q network

100%

ICE-8 2q network

✓ Published0🌍 Public

Last edited Nov 9, 2025

Created on Nov 9, 2025

Forked from Tree

This example shows a vertical family tree for ICE-8 Section 2A, using a parent-child data array to display three generations of descendants from a single ancestor. The visualization uses d3.stratify to convert the flat data into a hierarchy and d3.tree with vertical links to lay out the nodes. It renders as an SVG with blue circular nodes and concise text labels positioned above each person, with the root individual, John, at the top and all descendants branching downward.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8 - STEP 2 (A) - Family Tree

This example shows a four-generation family tree, using a vertical tree layout to display relationships from great-grandparents down to the third generation. The visualization encodes each generation with a distinct color for its circular nodes, and labels each member by name. The code builds the hierarchy with `d3.stratify`, then lays it out with `d3.tree()` and draws the edges using `d3.linkVertical()`. Node relations are defined in a hardcoded data array, and the SVG output includes all text and circles.

Ssakethgoud333@gmail.com

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

88% match

Loading thumbnail…

ICE - 8 Tree

A family tree visualization uses D3.js and SVG to show an eight-generation hierarchy of named individuals. The tree is built with `d3.stratify` from flat parent-child data and laid out by `d3.tree`. Animated transitions expand the link paths and circle nodes, while node fill colors encode generation depth via a custom `setGeneration` function. Text labels identify each person.

BBaswa Sathvika Reddy

87% match

Loading thumbnail…

ICE - 8 Family Tree

The ICE – 8 Family Tree is a static hierarchical visualization of familial relationships, rendered as an SVG tree with red nodes connected by lime-green paths. It displays a branching structure from a root ancestor down through multiple generations, with each person’s name labeled in blue text inside their node. The code uses d3.stratify() to convert flat parent-child data into a tree hierarchy and d3.tree() to compute layout positions. Paths between nodes animate via d3 transitions, while circles representing individuals transition to their final radius, creating a lively reveal of the family structure.

Ppavan0828

87% match

Loading thumbnail…

ICE 8 - Family Tree

This example shows a family tree using a hierarchical node-link diagram, with each person represented as a colored circle and connected by curved paths. The node color encodes generation depth: red for the root, blue for children, and green for grandchildren. The visualization uses d3.stratify() and d3.tree() to compute the layout from a flat array of parent-child pairs, then renders the result as SVG with cubic Bézier links and text labels next to each node.

DDaniel Mata

87% match

Loading thumbnail…

ICE 8 example of family Tree

This visualization displays a family tree using a hierarchical layout, with pink circles representing individuals and black lines showing parent-child connections. It begins by flattening the data into an SVG canvas, then uses `d3.stratify()` to transform the flat list into a hierarchy and `d3.tree()` to compute node positions. The animation is achieved through D3 transitions that draw the connecting paths over one second and fade in the circles. Text labels appear sequentially, with a delay based on each node’s depth, revealing the tree’s structure dynamically.

DDeekshithVemula

87% match

Loading thumbnail…

ICE - 8 Family Tree

This visualization presents a family tree as a hierarchical node-link diagram, using blue circles with bold black labels to represent ten individuals and their parent-child relationships. The data is structured as a flat list of names with parent references, which d3.stratify converts into a hierarchy. d3.tree computes the layout, while SVG paths with lime strokes connect nodes, animating their growth over one second via transitions. Nodes and text labels also animate into place, with a full-screen SVG canvas rendering the final result.

SSushmareddy-gudipally

87% match

Loading thumbnail…

ICE 8 Family Tree d3.js

This example builds a family tree visualization using D3.js v5 and SVG. It maps a flat list of parent-child name pairs through `d3.stratify()` and `d3.tree()` into a hierarchical layout, drawing curved link paths between generations. Each person appears as a colored circle, with fill color determined by tree depth via a switch on `d.height`, and a text label beside each node. The tree spans 860 by 310 pixels, with light blue, salmon, and green shades distinguishing lineage levels.

SSrilekha24

86% match