Skip to main content
SimilarExport ZIP
100%

Fork of MY Tree ICE-8

✓ Published0🌍 Public
Cchoey1324@gmail.com
Last edited Jan 31, 2024
Created on Jan 30, 2024
Forked from 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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of MY Tree ICE-8

This animated tree chart displays a three-generation family tree rooted at "peddi kumara," with branches for children and grandchildren. Built with the D3.js library (version 3.5.17), the SVG visualization uses the `d3.layout.tree` algorithm to position nodes and `d3.svg.diagonal` to draw curved links between relatives. Nodes are clickable, triggering smooth transitions that expand or collapse subtrees, while the orange background, cyan-filled circles with red strokes, and blue links give the chart a distinctive color scheme. The interaction and layout transitions rely on D3's selection and transition methods to animate node positions and link paths.

LLin Xing
92% match
Loading thumbnail…

Fork of MY Tree ICE-8

This interactive tree chart displays a family genealogy, starting with "peddi kumara" and branching into children and grandchildren. Users can click on a node to collapse or expand its subtree, with nodes and links smoothly animating to their new positions. The visualization is built with the D3.js library, using the `d3.layout.tree` for hierarchical layout and `d3.svg.diagonal` for curved links. The static SVG is rendered with custom CSS styles, including an orange background, cyan-filled circles with red strokes, and blue links, with an HTML page providing the interface.

Ppauldbayes@gmail.com
92% match
Loading thumbnail…

Fork of MY Tree ICE-8

A family tree chart visualizes hierarchical relationships across three generations, with names displayed beside circular nodes connected by blue curved links. Users can collapse and expand branches by clicking nodes, revealing or hiding descendants. The visualization uses D3.js version 3.5.17 with the `d3.layout.tree` and `d3.svg.diagonal` APIs for layout and path generation, and applies CSS styling with cyan nodes, red strokes, and an orange background. SVG rendering is animated with transitions set to 750 milliseconds.

MMahitha-Moparthi
91% match
Loading thumbnail…

Fork of Fork of ICE-8 Family Tree

A family tree visualization renders hierarchical relationships as an interactive node-link diagram, with each family member displayed in a color-coded box with text for name, node type, and relation. Built with D3 v3, the layout uses `d3.layout.tree` to position nodes, and SVG rectangles and `foreignObject` elements render the node content, while links are drawn as paths with arrow markers. Clicking a node toggles its children’s visibility, and transitions animate nodes to new positions over 600 milliseconds. Data comes from a JSON structure containing nested family members, with tooltips providing additional details on hover.

AAnanyaSamala
90% match
Loading thumbnail…

Fork of Fork of ICE-8 Family Tree

A family tree visualization renders hierarchical relationships as an interactive node-link diagram, with each family member displayed in a color-coded box with text for name, node type, and relation. Built with D3 v3, the layout uses `d3.layout.tree` to position nodes, and SVG rectangles and `foreignObject` elements render the node content, while links are drawn as paths with arrow markers. Clicking a node toggles its children’s visibility, and transitions animate nodes to new positions over 600 milliseconds. Data comes from a JSON structure containing nested family members, with tooltips providing additional details on hover.

AAnanyaSamala
90% 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
90% match
Loading thumbnail…

Fork of ICE8 - Family Tree

This example displays a family tree as an animated, zoomable node-link diagram, using color-coded rectangles to represent different generations and branches. Built with D3.js v3, it reads hierarchical family data from a JSON file and renders it as an SVG using `d3.layout.tree`. Nodes open and close on click with a smooth transition, while links are drawn with arrow markers and tooltips show additional details. The layout adjusts dynamically to prevent node collisions.

TTejucmandava
90% match
Loading thumbnail…

Fork of ICE8 - Family Tree

This visualization displays a family tree as an interactive, collapsible hierarchy. Using the D3.js library (v3), it renders nodes as colored rectangles representing family members, connected by curved links, with tooltips and zoom/pan support. The tree layout is computed via `d3.layout.tree`, and the data is loaded from a JSON file containing nested family relationships. SVG elements and a zoom behavior enable animation and navigation, with node colors indicating generational types.

Bbhargavarathod
90% match