ICE 8 - Family Tree

100%

ICE 8 - Family Tree

✓ Published0🌍 Public

Last edited Jul 10, 2022

Created on Jul 10, 2022

This example shows a family tree for the University of North Texas, mapping academic programs (Computer Science, Information Systems, Analytics, MBA) to individual students. The tree uses color-coded nodes to distinguish generations, with black for the root, green for depth 1, and blue for depth 2. It renders as an SVG using the d3.stratify and d3.tree APIs, with cubic Bézier curve paths connecting parent and child nodes, and text labels offset slightly to the right of each circle.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE8_Tree

This interactive visualization displays a hierarchical family tree of academic data, showing the relationships between students, courses, names, and their associated attributes. The tree uses color-coded generation levels to distinguish between different depths, with animated SVG paths drawing connections between nodes, and circles representing each entity. Built with D3.js v6, the code uses `d3.stratify()` to structure the data and `d3.tree()` for layout, with transitions animating both the link paths and node radii over time.

RRevanthReddyG

87% match

Loading thumbnail…

ICE8_FamilyTree

This example shows a hierarchical student data tree with nodes for a Student, Course, Name, Course variants, Grades, and First/Last Name, each color-coded by generation depth. It uses d3.stratify to structure the flat data array, d3.tree to compute node positions, and SVG circles and text to render the nodes. The code animates the links with a transition that moves each path from its source to target position over 1.5 seconds, while node circles also transition their radius.

SSai Bhavana Akkineni

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

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

85% match

Loading thumbnail…

ICE 8: My Family Tree

This example displays a family tree as a set of colored, animated circles linked by straight lines. The data is a small list of parent-child relationships. Using D3.js v6, the code applies a `d3.stratify()` layout to build a hierarchy, then renders it with a `d3.tree()` layout. Each generation is assigned a distinct color via a custom function, and circles and connecting paths are drawn to an SVG. A transition smoothly animates the initial state of the branches and nodes.

SSnapika

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

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

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

85% match