ICE 8

100%

✓ Published0🌍 Public

Last edited Apr 12, 2023

Created on Apr 12, 2023

This interactive family tree visualization displays a hierarchical dataset showing Marco, his children Martin and Jhon, and their descendants. Users can click any node to collapse or expand its subtree, with smooth 750-millisecond transitions animating the layout changes. The visualization uses the D3.js library, specifically the `d3.layout.tree` for computing the tree structure, `d3.svg.diagonal` for drawing curved links between nodes, and SVG elements with CSS styling for rendering. Node positions are normalized by depth, and circles indicate expandable nodes when filled with lightsteelblue.

AI-generated description

MIT Licensed

Similar vizzes

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

89% match

Loading thumbnail…

ICE 8 Family Tree Simple

This interactive family tree visualization displays hierarchical relationships using a node-link diagram with expandable and collapsible branches. The D3.js v3 layout algorithm arranges nodes vertically by depth, with color-coded node types and labeled links showing connection directions. Users can click nodes to toggle child visibility, with smooth 750ms animated transitions. The visualization supports pan and zoom through D3's zoom behavior, while tooltips provide additional node information. The tree structure comes from a JSON data file loaded via d3.json, with SVG rendering for all graphical elements including custom arrow markers and drop shadows.

Ddivyageethanjali

89% match

Loading thumbnail…

ICE-8

This interactive family tree visualizes three generations of a family, with names displayed in a hierarchical layout branching from a single root ancestor. The SVG rendering uses D3.js v3’s `d3.layout.tree` to position nodes and `d3.svg.diagonal` for curved links. Users can click any node to collapse or expand its children, with smooth `transition` animations adjusting node positions and link paths. The data is hardcoded as a JSON array in the script, and styling includes violet backgrounds, cyan circles, and green strokes.

DDineshK2602

88% match

Loading thumbnail…

ICE-8 Family Tree

This interactive family tree visualizes a multi-generational genealogy dataset. The graph displays hierarchical relationships between individuals, with each node representing a person and connecting lines showing parent-child links. Users can click on nodes to expand or collapse their subtree, dynamically revealing or hiding descendants. The visualization uses the D3.js layout tree algorithm to position nodes and SVG paths for connections, with CSS-driven animations smoothly transitioning nodes between states. The code leverages D3's select, transition, and append APIs to manage the animated updates triggered by user interactions.

HHarshinireddyy19

88% match

Loading thumbnail…

ICE 8 - Family Tree

This interactive family tree visualization displays a hierarchical structure of familial relationships using an animated, collapsible tree layout. The diagram shows three generations, with color-coded nodes distinguishing different family members and levels. Built with React and D3.js (version 3.5.17), the visualization leverages `d3.layout.tree()` for automatic tree positioning and `d3.svg.diagonal()` for curved connecting links. The SVG-based rendering supports click-to-expand/collapse interactions with smooth transitions, while CSS styling applies distinct node colors and an orange background theme.

NNiharika-Guthikonda

88% match

Loading thumbnail…

ICE8 - Family Tree

This interactive family tree visualizes a multi-generational hierarchy using collapsible nodes and animated layout transitions. It shows relationships between individuals like ViplavaKumari, Rambabu, and their descendants, with color-coded node types indicating different generations or branches. Built with D3.js v3, the visualization uses a tree layout to position nodes, SVG rectangles with external HTML foreign objects for labels, and CSS-based tooltips. Clicking a node collapses or expands its subtree, while panning and zooming is enabled through `d3.behavior.zoom`. The tree loads hierarchical data from a JSON file and arranges nodes with animated transitions.

Kkartik900

88% match

Loading thumbnail…

ICE - 8 : Family Tree

An interactive family tree visualization renders hierarchical data from a JSON file, with nodes colored by generation and connected by links. The D3.js v3 layout algorithm positions the tree, while SVG rectangles and foreignObject elements display node names and text. Users can click nodes to expand or collapse branches, with animations and zooming supported. The visualization adapts its canvas size dynamically based on the tree's depth and width.

NNITIN0601

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

88% match