Shish's Ice 8- Marvel Family Tree

100%

Shish's Ice 8- Marvel Family Tree

✓ Published1🌍 Public

Last edited Nov 10, 2025

Created on Nov 10, 2025

This visualization presents a four-generation family tree for the Stark family, with nodes colored by generation depth from blue to red. The graphic uses a vertical, top-down layout to show the hierarchical relationships between Eddard Stark and his descendants. Built with D3 v7, the code leverages the `d3.tree()` layout algorithm applied to hierarchical data via `d3.hierarchy()`, and renders edges using `d3.linkVertical()`. The SVG output uses circles for nodes and text labels for names, drawn through the `join()` operator.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8.3 Family Tree - 11545863

A stylized family tree depicts a genealogy for the Targaryen lineage, using a hierarchical tree layout. The visualization renders an SVG composed of colored circular nodes and connecting curved paths, with each node’s radius and stroke color encoding values from the data. Built with React and D3.js v5, the code uses `d3.tree()` and `d3.hierarchy()` to compute the layout while iterating through descendant nodes to draw links and circles, with styling applied via inline attributes and a linked stylesheet.

SShashi42

80% match

Loading thumbnail…

ICE-8 Family Tree

This interactive family tree visualizes three generations of ancestral relationships using a hierarchical layout. The SVG-based chart renders named individuals as colored circles, with light blue, light gray, dark gray, and teal encoding generation depth. D3’s `d3.stratify()` converts the flat parent-child data into a hierarchy, which `d3.tree()` lays out on an 800×300 grid. Animated paths draw connections between nodes over 1.5 seconds, while circles fade in with a 700-millisecond transition. The code uses D3 v6’s selection, transition, and scale-free drawing APIs to produce the final graphic.

SSheshidharreddy

78% match

Loading thumbnail…

Fork of Fork of ICE-8: Family Tree

This visualization presents a family tree using a D3 hierarchical layout, rendered as an animated SVG diagram. The code constructs the tree structure with `d3.stratify` and `d3.tree`, then draws links and rectangular node boxes with smooth transitions. Text labels fade in sequentially based on node depth, while the dataset explicitly lists parent-child relationships ranging from "John" to multiple descendants. Using d3.v6 within a plain HTML/JavaScript setup, the example demonstrates basic tree layout, path animations, and staged text rendering without external styling frameworks.

SSheshidharreddy

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

76% match

Loading thumbnail…

ice 8- family tree

This visualization displays a family tree of cartoon characters, rendered as a horizontal dendrogram with nodes labeled and colored according to data from a JSON file. The tree uses D3 v5’s `tree` layout and `hierarchy` to compute positions, while `linkHorizontal` draws the connecting paths and `zoom` enables interactive panning. Text elements are styled with depth-based font sizes and fill colors, with the root labeled “Cartoons” branching into two main groups.

Sshabbab01

76% match

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

76% match

Loading thumbnail…

ICE 8 Family Tree

This interactive family tree visualization displays the ICE 8 lineage, using a hierarchical layout to organize three generations of relationships. Each node is labeled with a family member's name and colored according to their generational level. The implementation uses D3 v5’s `tree` layout, `linkHorizontal` path generator, and `hierarchy` function to structure the data from a nested JSON file, with SVG rendering. Pan and zoom capabilities are added via D3’s `zoom` event, while text styling and custom fonts are applied through CSS.

NNaimisha-M

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

76% match