ICE-8 Tree - Nghia Dang

100%

ICE-8 Tree - Nghia Dang

✓ Published0🌍 Public

Last edited Mar 30, 2022

Created on Mar 30, 2022

A radial hierarchy displays fictional family trees, mapping birth years to distance from a central "God" root and using angular position for siblings. The visualization marks each decade with labeled concentric circles, while node colors vary by depth. Built with D3.js, it uses `d3.layout.tree` with radial projections and `d3.svg.diagonal.radial` for curved links, rendering as SVG. Data comes from a local JSON file, and the layout stretches years onto a 360-degree circular space.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE -8 Family tree

A family tree visualization uses a radial dendrogram to display four generations of a family, with each node positioned by birth year and connected by curved links. Decade rings provide a temporal scale, and node labels are oriented outward or inward depending on their angular position. The visualization is built with D3.js, using `d3.layout.tree` for layout, `d3.svg.diagonal.radial` for the connecting paths, and `d3.json` to load the family data from `data.json`. The underlying SVG is rendered via the `d3.select().append()` API, with styling controlled by an external stylesheet.

Ssaidhiraj16

86% match

Loading thumbnail…

ICE-8: Family Tree

This visualization presents a family tree as a dendrogram, using circles sized by a numeric value and colored by a categorical level to represent individuals. The SVG rendering uses D3 v6's hierarchy and tree layout APIs to position nodes and draw curved links between parents and children. Node colors and link strokes are mapped directly from the data's "level" and "type" properties, with text labels positioned relative to leaf or internal node status.

CChaitanya Galla

83% match

Loading thumbnail…

ICE8_family_tree

This interactive family tree visualization displays hierarchical relationships using a branching node-and-link layout, with each person represented as a circle and their descendants connected by curved paths. The tree expands smoothly when new nodes are introduced, with transitions animating nodes to their final positions. Built with D3.js version 3.5, it uses `d3.layout.tree`, `d3.svg.diagonal`, and CSS-styled SVG elements, with node colors and names coming from the embedded JavaScript dataset.

NNitheeshSama

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

83% match

Loading thumbnail…

ICE 8 Family Tree

This visualization displays a hierarchical family tree using a horizontal dendrogram layout. The tree shows a root ancestor with three children, each branching into multiple generations with colored labels. The code uses D3 v5's `tree` layout and `hierarchy` function to compute node positions, with `linkHorizontal` for connecting paths. SVG elements are rendered within a React application, and the visualization includes zoom functionality via D3's `zoom` behavior. Node names and colors come from a local JSON file, with font size varying by tree depth.

KK V VINITHA

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

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

82% match

Loading thumbnail…

ICE8_Family Tree

This family tree uses D3.js v5 to visualize a hierarchical dataset as an SVG diagram. It renders circles for each person, colored cyan for root nodes, red for second-level nodes, and pink for leaves, with blue cubic Bézier curves linking parents to children. The layout is computed using the `d3.stratify()` and `d3.tree()` APIs, with node positions derived from the `tree` layout on an 850x300 canvas. Names are displayed as text labels offset from each circle. The data is a static array of parent-child relationships, manually encoded in the source.

RRahulSai05

82% match