ICE-8 Hasini 2A Tree

100%

ICE-8 Hasini 2A Tree

✓ Published0🌍 Public

Last edited Nov 2, 2025

Created on Nov 2, 2025

Forked from Tree

This example visualizes a character hierarchy from the TV series Stranger Things as a vertical tree chart. The root node branches into four main groups—The Party, Teens, Adults, and Creatures—which then split into individual character leaves. Using d3.stratify() to convert flat parent-child data into a hierarchy, the layout is computed with d3.tree() and rendered as SVG paths via d3.linkVertical(). Node shapes vary by depth: a diamond for the root, squares for groups, and circles for characters, with colors assigned through a d3.scaleOrdinal.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE

This interactive D3.js visualization presents a named character hierarchy as an animated tree, with nodes color-coded by generation depth and lime-colored connecting paths. The chart uses a custom tree layout built through `d3.stratify` to structure parent-child relationships from a flat data array, then renders SVG circles and text labels for each character. Rendering relies on D3 v6 transitions to animate node and path drawing over time, with the layout sized at 900 by 350 pixels and offset within the viewport. The data is hardcoded, and the visualization focuses on showing hierarchical connections through a simple, color-coded branching structure.

Yyaswanthsen

83% match

Loading thumbnail…

ICE 8 - Family Tree

This visualization displays a family tree as a tidy tree layout using D3.js v5. The code defines hierarchical data with parent-child relationships and renders it as an SVG, with circular nodes colored by depth (green for the root, red for the second level, and blue for deeper nodes). Curved paths connect parent and child nodes using cubic Bézier commands. Each node is labeled with the person’s name. The example uses D3’s `stratify`, `tree`, and `links` APIs to compute the layout and structure.

Ssaidhiraj16

81% match

Loading thumbnail…

ICE8-Tree

A hierarchical tree visualization displays a student data structure with parent-child relationships, including courses, names, and grades. Each generation is color-coded by depth level. The D3.js code uses the `d3.stratify()` utility to organize the data hierarchy and `d3.tree()` to compute node positions. Paths animate via chained `.transition().duration()` calls, while circles and text labels are rendered as SVG elements with staggered entrance animations.

SSatyaVineeth

81% match

Loading thumbnail…

Tree for ICE-8

A hierarchical tree visualization maps a taxonomy of digital devices and their associated activities, such as smartphones leading to communication, and laptops branching into entertainment with subcategories like Danceshows and Cricket. The layout is generated with D3.js v6’s `d3.stratify()` and `d3.tree()`, while `d3.linkVertical()` draws the connecting paths. Each node is rendered as an SVG rectangle labeled with its feature name, and the fill color—assigned by the `setGeneration` function—varies by tree depth, from purple at the root to yellow for the deepest leaf nodes. The data is defined inline as a JavaScript array of parent-child pairs.

Ssreeramyamini@gmail.com

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

81% match

Loading thumbnail…

ICE-8: Family Tree

This example visualizes a family tree using a hierarchical layout, displaying relationships between individuals such as Sai, Raju, Swathi, and their descendants. The tree is rendered as an SVG with orange rectangular nodes connected by purple animated links, which draw from source to target over one second. The code constructs the hierarchy with `d3.stratify()` and positions nodes using `d3.tree()`, then applies transitions to text and paths for a dynamic reveal. Data is hardcoded as an array of child-parent pairs, with styling defined via CSS for circles, text, and paths.

MManasaPatange

80% match

Loading thumbnail…

ICE 8 Tree Diagram

This example presents a hierarchical tree diagram of streaming platforms, genres, and titles using D3.js v7. It visualizes the parent-child relationships among Netflix, Hulu, and their respective categories and shows, with node colors representing depth levels. The code uses the `d3.stratify` and `d3.tree` APIs to structure and layout the data, and constructs curved links with `d3.linkHorizontal`. The SVG rendering applies a static layout with colored circles and labels, based on a hardcoded dataset of streaming services and their content.

Nnishanththouta16@gmail.com

80% match

Loading thumbnail…

ICE 8 example for Tree graphic

This example displays a static tree diagram of hierarchical name data, with nodes rendered as circles and connections as straight lines. The graphic shows a root node ("Venky") branching to children and further descendants, while text labels identify each node. The code uses D3 v6’s `d3.stratify` to structure the data and `d3.tree` to compute node positions within a 600x300 size. SVG elements are created and animated using D3 transitions, with circles appearing before the paths draw.

Vvidhyanamini

80% match