Fork of Praneeth ICE 8

100%

Fork of Praneeth ICE 8

✓ Published1🌍 Public

Last edited Mar 28, 2023

Created on Mar 27, 2023

This interactive visualization shows a branching tree of plant species, from the root category “Plants” down to subgroups like Mosses, Ferns, Gymnosperms, and Angiosperms. A click on any node expands or collapses its children, with smooth 750ms transitions. The code uses D3.js v3’s `d3.layout.tree` to compute positions, `d3.svg.diagonal` for curved links, and SVG circles and text for nodes. Node colors encode type and level properties from the hardcoded dataset, while animations rely on D3 transitions.

AI-generated description

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

Similar vizzes

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

84% match

Loading thumbnail…

Fork of Fork of Family Tree ICE-8

This visualization shows an interactive family tree as a node-link diagram with collapsible branch nodes and directional links. It loads hierarchical JSON data and renders nodes as colored rectangles (coded by type) with SVG elements and animation. The code uses d3.layout.tree for the tree layout, d3.behavior.zoom for pan/zoom, and d3.select/append to build the SVG structure. Link labels and tooltips provide additional relationship details, while CSS styles define node colors, text appearance, and hover effects.

PPrathyusha0304

84% match

Loading thumbnail…

Fork of Fork of Family Tree ICE-8

PPrathyusha0304

84% match

Loading thumbnail…

Fork of ice8

This interactive tree diagram displays a family hierarchy loaded from a JSON file, with nodes labeled by names and connected by curved links. Users can click any node to collapse or expand its subtree, with smooth 1.1-second transitions animating nodes and links to new positions. The visualization uses D3.js v3’s `d3.layout.tree` for layout and `d3.svg.diagonal` for link paths, rendered as SVG with green-bordered circles and bold text labels. Node expansion state is managed by toggling between `children` and `_children` arrays.

PPujitha14challagulla

83% match

Loading thumbnail…

Fork of Jeevani ICE8

An animated collapsible tree diagram maps the hierarchical classification of animals, from the root "Animals" down through Vertebrates and Invertebrates to specific phyla and classes. Using D3.js v3, the SVG renders nodes as circles with colored strokes and labels, while curved diagonal links connect parent-child relationships. The tree layout organizes data from a hardcoded JSON array, with interactive node clicks triggering smooth transitions that expand or collapse branches. Level-based colors distinguish taxonomic depth, and the visualization updates dynamically via D3's tree layout and diagonal path generators.

BBala Sai Krishna

83% match

Loading thumbnail…

Fork of Fork of ICE 8: Tree and Network

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.

AArv1228

83% match

Loading thumbnail…

Fork of ICE - 8: Visualizing Tree

This interactive tree diagram visualizes hierarchical data about topics and their subcategories, using branch lengths to represent relationships and values. The visualization shows a collapsible tree structure where users can click nodes to expand or collapse children. The code uses D3.js version 3.5.17 with the `d3.layout.tree` and `d3.svg.diagonal` APIs to compute the layout and draw curved links between nodes. Nodes are rendered as SVG circles with text labels, and smooth animated transitions update the tree when nodes are clicked. The data structure contains topics like Sports, Crime, and Culture with their respective subcategories.

Eericliu6178@gmail.com

83% match

Loading thumbnail…

Fork of Fork of ICE 8 Family Tree

This example displays a family tree as a horizontal dendrogram, with each node colored according to its branch. The visualization uses D3 v5’s `tree` layout and `hierarchy` to compute node positions, while `linkHorizontal` generates the curved links between parent and child nodes. Interactive pan and zoom are enabled via D3’s `zoom` behavior, and SVG `text` elements render labels with sizes scaled by depth. The data is loaded as JSON and parsed with `d3.json`, with node colors applied directly from the dataset’s `color` property.

PPrathyusha0304

82% match