MY Tree ICE-8

100%

✓ Published0🌍 Public

Last edited Apr 12, 2023

Created on Apr 12, 2023

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.

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 displays four generations of a single lineage, using a collapsible node layout. The chart renders as an SVG with animated transitions, where nodes are colored cyan with red outlines and connected by light blue links. The visualization is built with D3.js, employing the `d3.layout.tree` and `d3.svg.diagonal` APIs to compute the tree structure and draw the connecting paths. Clicking a node triggers a collapse or expand animation via the `transition` methods, adjusting the layout dynamically.

VVAbhiram99

95% match

Loading thumbnail…

MY Tree ICE-8

This interactive tree diagram displays a family genealogy with animated expansion and collapse of branches. Built with React and D3.js v3, it uses `d3.layout.tree` to compute node positions and `d3.svg.diagonal` for curved links, rendered as SVG. Clicking a node toggles its children, with transitions animating nodes and links via `transition().duration()`. The data is a hardcoded JavaScript array of family members, styled with cyan circles, green links, and a light pink background.

Ggayathrikavya

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

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

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

91% match

Loading thumbnail…

ICE-8 Family Tree

This interactive D3 v3 visualization displays a hierarchical family tree, using a collapsible node layout to show relationships from grandparents down to nieces and nephews. The tree renders as SVG rectangles with color-coded node types and includes animated transitions. Built with the `d3.layout.tree` API, it loads family data from a JSON file and supports click interactions to expand or collapse branches, with tooltips providing additional details.

KKande2011

91% match

Loading thumbnail…

ICE-8 Family Tree

This interactive family tree visualization displays generational relationships using a collapsible hierarchy. The D3 v3 tree layout positions colored nodes by family type, with light green for grandparents, grey for parents’ siblings, blue for siblings/cousins, and pink for the next generation. Clicking nodes collapses or expands branches with animated transitions, while SVG arrows and light steelblue links trace connections. Tooltips provide additional relationship details when hovering. The code uses `d3.layout.tree`, `transition().duration()`, and `foreignObject` for wrapped text labels, loading data from a local JSON file.

AAnanyaSamala

90% match

Loading thumbnail…

ICE-8 Tree

This interactive family tree visualizes a simple genealogical dataset with two named individuals. Built with D3 v7, it renders the hierarchy as an SVG with expandable and collapsible nodes, using animated transitions to reorganize the layout when branches are toggled. The code employs `d3.stratify()`, `d3.tree()`, and `d3.hierarchy()` to structure and position data, while `d3.select()` and `.transition()` handle the dynamic updates to nodes and links in response to clicks.

DDan Waters

90% match