Skip to main content
SimilarExport ZIP
100%

Fork of Fork of ICE 8: Tree and Network

✓ Published0🌍 Public
AArv1228
Last edited Apr 1, 2022
Created on Apr 1, 2022

This visualization displays a hierarchical tree of family relationships using D3’s stratify and tree layout functions, with nodes represented as blue-styled circles and red connecting paths. The SVG animation runs on page load, transitioning link paths from a collapsed state to their full positions, expanding circles with a duration of 800 milliseconds, and revealing text labels sequentially based on node depth using D3 transitions with custom durations. The data is hardcoded as an array of child-parent pairs, with some empty and incomplete entries, and the rendering uses D3 v6 within a React environment, outputting to SVG with generated circles, paths, and text elements.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE 8: Tree and Network

This visualization displays a hierarchical tree of related names using a static dataset defined inline. It renders nodes as blue-stroked circles and red connecting paths, with text labels appearing sequentially based on each node’s depth. The code uses `d3.stratify()` and `d3.tree()` to compute layout, then draws SVG elements with `d3.select()`. Animations are applied via chained `transition().duration()` calls on paths, circles, and text, creating a staggered reveal effect. The visualization is built with D3 v6 and rendered entirely in an HTML page without external data sources.

AArv1228
94% 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
92% match
Loading thumbnail…

Fork of ICE-8: Family Tree

This example visualizes a family tree using a hierarchical layout, with nodes representing individuals and links showing parent-child relationships. Rectangular nodes with names animate into position, and connecting paths draw from parent to child. The visualization is rendered as SVG using D3 v6, employing `d3.stratify()` to structure the flat data and `d3.tree()` to compute positions. Transitions animate the paths and text, with staggered delays based on node depth.

Bbhargavarathod
92% match
Loading thumbnail…

Fork of ICE 8 - Family Tree

This visualization displays a family tree using hierarchical data, with each person represented as a colored circle and labeled with their name. The tree is built from an array of parent-child relationships using the `d3.stratify()` and `d3.tree()` APIs, which compute node positions and link paths. Nodes are color-coded by depth—red for the root, blue for depth 1, and green for depth 2—while curved `path` elements with cubic Bézier curves connect each parent to their children. The data originates from a static JavaScript array, and the entire scene is rendered as SVG.

RRamakanth771
91% match
Loading thumbnail…

Fork of Fork of ICE-8 Family Tree

This example shows a family tree rendered as an interactive hierarchical diagram, with nodes representing people and links showing parent-child relationships. Users can click on nodes to expand or collapse their children, while smooth transitions animate the tree’s layout changes. Built with D3.js v3, it uses `d3.layout.tree` to compute positions and `d3.svg.diagonal` for curved links, with SVG circles and text for nodes. The data is hardcoded as nested JavaScript objects, and the visualization responds to user interaction via click handlers.

GGalineeharika
91% match
Loading thumbnail…

Fork of ICE 8 - Family Tree

This visualization displays a family tree as a node-link diagram, with circles representing individuals and curved paths connecting parents to their children. The tree layout is generated from nested data using the custom `d3.stratify()` and `d3.tree()` extensions, which compute node positions based on parent-child relationships. Node colors encode generational depth, with red for ancestors, blue for the middle generation, and green for descendants, while text labels show each person’s name. The SVG rendering is implemented in React, drawing all elements within an SVG container using D3’s selection and enter/append methods to create circles, paths, and labels.

DDing
91% match
Loading thumbnail…

Fork of Family Tree ICE-8

This interactive family tree visualizes hierarchical relationships through a branching structure of circles and connecting paths. The visualization uses D3.js v6, with `d3.stratify()` to process hierarchical data and `d3.tree()` for layout. Nodes are rendered as SVG circles with animated path connections that draw over time, while text labels appear sequentially with a delay based on tree depth. The dataset contains fictional names representing parent-child relationships, and CSS styling applies light blue circles with red borders against a white background.

Nnikhitha693
91% match
Loading thumbnail…

Fork of Family Tree -> ICE-8

This fork of a family tree visualization by ArruSkywalker uses D3 v6 and SVG animation to show hierarchical relationships among family members. The tree layout is generated programmatically from a hardcoded data array using `d3.stratify()`, which builds the tree structure, and `d3.tree()` with a size of [950, 300] to position nodes. Circles represent individuals, with colors assigned by generation depth via the `setGeneration()` function, and family connection paths animate from parent to child using `transition().duration(200)`. Text labels display each person’s name. The visualization demonstrates how D3’s stratify utility simplifies constructing a tree directly from link data, enhanced with CSS styling such as a blue background and black-stroked nodes.

AArruSkywalker
90% match