Skip to main content
SimilarExport ZIP
100%

RobFaj MyTree ICE-8

✓ Published1🌍 Public
RRobFaj
Last edited Apr 13, 2023
Created on Apr 13, 2023
Forked from MY Tree ICE-8

A family tree chart built with D3.js (v3.5.17) displays hierarchical data in a static, animated SVG layout using `d3.layout.tree` and `d3.svg.diagonal` for curved links. Nodes are colored circles with labels, color-coded by parent and leaf status, and respond to clicks for interactivity. The visualization uses an HTML page with embedded CSS and JavaScript, rendering from hardcoded JSON family data.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

MY Tree ICE-8

This interactive family tree visualization shows a multi-generational genealogy chart with expandable and collapsible nodes. Using D3.js version 3.5.17, the tree layout (d3.layout.tree) arranges family members hierarchically, with cyan nodes connected by blue diagonal links. The chart features animated transitions (750ms duration) when clicking nodes to expand or collapse branches, with data embedded directly in the page as a JavaScript array. SVG rendering styles nodes with red strokes and orange background, while text labels display each person's name.

VVishnu Sudireddy
83% match
Loading thumbnail…

Family Tree ICE-8

A family tree visualization built with D3 v6 renders hierarchical relationships as an orange-node SVG tree on a purple background. The code uses `d3.stratify()` to convert flat parent-child data into a tree structure and `d3.tree()` to compute node positions. Animated paths draw connecting links over one second via `transition()`, while circles and text labels appear with a shorter transition. The final layout positions nodes using the tree’s computed coordinates, with names displayed inside each circle in bold gray text.

Aarcothanmukha
83% match
Loading thumbnail…

MY Tree ICE-8

This interactive tree chart visualizes a family hierarchy using D3.js. An animated SVG layout, with blue links and red-bordered nodes, shows the relationships from a single ancestor down through multiple generations. The code uses the `d3.layout.tree` API to position nodes and `d3.svg.diagonal` for the connecting paths. Clicking a node triggers a smooth transition, collapsing or expanding its children, while all elements are styled through inline CSS.

Ssaishashank
83% match
Loading thumbnail…

Family Tree ICE-8

A static family tree visualization built with D3.js, rendered as SVG, displays hierarchical relationships among family members as colored nodes and curved links. The tree layout uses `d3.tree` and `d3.hierarchy` to position nodes, with node size and color encoding values and types from the embedded data. Styled circles and labels distinguish parent and child nodes, while the data is defined inline in the code.

SSyed Araib Karim
83% match
Loading thumbnail…

Tree ICE-8

An interactive family tree visualization renders a multi-generational dataset as an animated node-link diagram. The chart displays relationships from a root ancestor downward, using cyan nodes with pink outlines and gray links. Users can click nodes to collapse or expand branches. The implementation utilizes the D3.js layout and SVG diagonal APIs to compute positions and draw curved edges, with CSS transitions animating node movements and link redraws over 750 milliseconds.

Cchandanagandla
83% match
Loading thumbnail…

Fork of MY Tree ICE-8

This example displays a family tree as an animated node-link diagram, with a root ancestor and several generations of descendants. The tree data is manually defined in JavaScript, and each node can be clicked to collapse or expand its child branches. The visualization is built using the D3.js library (version 3.5.17), which handles the tree layout and SVG rendering. The code uses the `d3.layout.tree` API to compute node positions, `d3.svg.diagonal` to draw the connecting links, and animation via a `duration` variable to smoothly transition between states. The interface is styled with CSS, featuring a prominent heading and a strong color scheme of cyan, red, and blue on an orange background.

Cchoey1324@gmail.com
82% match
Loading thumbnail…

Tree Chart ICE-8

A collapsible family tree chart displays hierarchical relationships among named individuals using D3.js layout and SVG rendering. Clicking nodes toggles child branches, with animated transitions updating node positions and link paths. The code constructs a tree layout with `d3.layout.tree`, draws links as red diagonal paths, and styles nodes with cyan circles and green borders. The dataset is a hardcoded JSON family tree, rendered on a yellow background with 750-millisecond duration animations.

Ggayuvurukuti@gmail.com
82% match
Loading thumbnail…

Family Tree with Colors ICE-8

A static hierarchical family tree rendered as an SVG, with nodes colored by generation depth using a custom `setGeneration` function. The tree is built from link data via `d3.stratify` and laid out with `d3.tree`, showing relationships from a root ancestor down to descendants. Circle nodes are animated with a growing radius on load, while connecting paths animate from source to target positions. Text labels display each person's name, and the chart uses a grey background with pink node strokes for visual contrast.

Aarcothanmukha
82% match