ICE-8

100%

✓ Published0🌍 Public

Last edited Nov 2, 2025

Created on Nov 2, 2025

This example visualizes the multi-generational Smith family tree, showing 47 members across 4 generations as an interactive network. It uses D3.js v7 with a force-directed layout via `d3.forceSimulation`, rendering nodes and links as SVG elements. The data is embedded directly in the page as a flat array of parent-child relationships. Hovering over a node triggers a tooltip that displays member details, with `d3.mouse` positioning and CSS transitions controlling the tooltip’s appearance.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

85% match

Loading thumbnail…

Network Visualization (ICE-8)

This example visualizes a family tree as an interactive network graph in SVG, using colored nodes to distinguish grandparents, parents, and children. Force-directed layout via `d3.forceSimulation` with link, charge, and center forces positions the nodes, while links represent familial relationships. Nodes are draggable, and a legend maps roles to colors. The code uses D3 v7, applies drag behavior, and renders labels directly on each node.

Ssowjanya

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)

This example shows an interactive family tree visualization built with D3.js (v3) and SVG. It renders hierarchical data from a JSON file as colored, rounded rectangles connected by links, with each node color-coded by generation type. The tree layout uses d3.layout.tree, and users can click nodes to expand or collapse branches. The visualization includes zoom and drag behavior via d3.behavior.zoom, along with tooltips and drop-shadow filters for visual polish.

AAnjan Shrestha

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

84% match

Loading thumbnail…

ICE_8_Family_Tree

This interactive family tree visualization displays genealogical relationships using an animated, collapsible node-link diagram. Built with D3 v3 and SVG, it loads hierarchical JSON data from `family-data.json` and renders colored rectangular nodes representing family members, with links labeled by relationship direction. The visualization includes zoom and drag capabilities via `d3.behavior.zoom`, tooltips on hover, and smooth transitions when expanding or collapsing nodes through click interactions. The code uses `d3.layout.tree` for layout calculations and custom collision detection to prevent node overlap.

SShivaKarpe

84% match