ice8

100%

✓ Published1🌍 Public

Last edited Mar 30, 2023

Created on Mar 13, 2023

A collapsible tree diagram visualizes hierarchical family relationships, rendering nodes and links as an animated SVG. The example uses D3.js version 3.5 with the `d3.layout.tree` and `d3.svg.diagonal` APIs to compute the layout and draw curved paths. Circles and text labels represent individuals, and clicking a node toggles its children’s visibility with smooth transitions. Styling is applied via external CSS, and the input data comes from a local `qn_tree.json` file.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

ice8 -Tree

This interactive tree diagram visualizes a hierarchical dataset, with nodes representing names and animated connections showing parent-child relationships. Clicking a node toggles the expansion or collapse of its children, smoothly transitioning the layout. Built with d3.layout.tree, it uses d3.svg.diagonal for curved links and d3.json to load the external qn_tree.json file. The SVG rendering includes a fixed-depth normalization, orange node strokes, and semi-transparent links, with all nodes positioned based on their depth in the hierarchy.

SSaivignesh-9176

93% match

Loading thumbnail…

Fork of ice8

This fork of ice8 displays an interactive family tree from a JSON dataset, rendered as a collapsible hierarchy of circles and labels. Clicking a node toggles its children, animating the layout with smooth transitions. The visualization uses d3.layout.tree and d3.svg.diagonal to position and draw links, with SVG elements styled via CSS. Data loads from an external qn_tree.json file, and node expansion/collapse is handled through custom click events and update functions.

SSaivignesh-9176

90% match

Loading thumbnail…

ice8

This interactive tree diagram visualizes a family hierarchy, starting with a root node and branching through named individuals. The graph shows parent-child relationships, with nodes that can be clicked to expand or collapse their descendants. Built with D3.js, the visualization uses a `d3.layout.tree` for positioning and `d3.svg.diagonal` for the connecting links. Data is loaded from an external JSON file, and the animated transitions between states are handled through D3’s `.transition().duration()` method.

PPujitha14challagulla

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

88% match

Loading thumbnail…

ice8 abhi3.1

This example visualizes a family tree as an animated node-link diagram, showing relationships between ten individuals. Nodes are rendered as large aqua circles with brown strokes, connected by animated black paths that grow from parent to child. The tree layout and animations are built using D3 v6's `stratify`, `tree`, and `transition` APIs, with data defined as parent-child links in a flat array. The SVG output is drawn in the browser viewport, and text labels display each person's name within the circles.

Aabhi051197

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

87% match

Loading thumbnail…

ICE8 - Interactive Tree Graph

This example presents an interactive family tree visualization using D3.js version 3.5.17. The tree layout (`d3.layout.tree`) arranges hierarchical data with named family members, while SVG circles and text labels render each node and curved diagonal paths (`d3.svg.diagonal`) connect parent-child relationships. Clicking any node toggles its children, triggering smooth 750ms transitions that animate nodes and links to new positions. The code uses fixed-depth spacing (180 pixels per level) and custom styling with teal nodes and thick teal links against a white background.

Kkirangithub23

87% match

Loading thumbnail…

ICE-8(11630234)

This interactive D3.js tree diagram displays a manually defined family hierarchy, with clickable nodes that collapse or expand their child branches. The visualization uses `d3.layout.tree` to compute node positions and `d3.svg.diagonal` for the connecting links, with smooth transitions between layout states. Node circles are colored red by default or lightsteelblue when collapsed, and text labels show names. The SVG rendering includes animated enter, update, and exit transitions driven by click events that toggle a node’s `children` and `_children` properties. The code loads D3 v3.5.17 from a CDN.

KKovvuri Supraj

87% match