Skip to main content
SimilarExport ZIP
100%

ICE game Tree

✓ Published0🌍 Public
TTejamod
Last edited Jul 9, 2022
Created on Jul 9, 2022
Forked from HTML Starter

This visualization displays a tree diagram of popular video games, organized top-down into genres like Shooter, BR, Competitive, and Open World, with specific game titles as leaves. The code uses D3 v6’s `d3.stratify()` to convert the flat data into a hierarchy, `d3.tree()` to compute layout coordinates, and SVG circles, paths, and text for rendering. Links animate via a two-step `transition()` on path `d` attributes, while node fill colors shift by generation depth using a custom `setGeneration()` function.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE

This interactive D3.js visualization presents a named character hierarchy as an animated tree, with nodes color-coded by generation depth and lime-colored connecting paths. The chart uses a custom tree layout built through `d3.stratify` to structure parent-child relationships from a flat data array, then renders SVG circles and text labels for each character. Rendering relies on D3 v6 transitions to animate node and path drawing over time, with the layout sized at 900 by 350 pixels and offset within the viewport. The data is hardcoded, and the visualization focuses on showing hierarchical connections through a simple, color-coded branching structure.

Yyaswanthsen
81% match
Loading thumbnail…

Tree Example

This example shows a collapsible tree diagram of popular video games, organized by genre such as Battle Royale, Competitive, and Open World. The visualization uses d3.layout.tree and d3.svg.diagonal to render nodes and links as SVG elements with animated transitions. Clicking a node collapses or expands its children, with transitions handled by d3’s selection.transition. The styling uses custom CSS classes for node circles, text, and gold-colored links, with a fixed-depth layout spacing nodes horizontally by 180 pixels per level.

TTejamod
80% match
Loading thumbnail…

ICE-8 Tress and Network

This example shows an interactive collapsible tree visualization of Valorant game agents, organized hierarchically by role categories like Duelists, Controllers, Initiators, and Sentinels. Built with D3.js v3, the tree layout uses SVG rendering with animated transitions when nodes expand and collapse. The implementation uses d3.layout.tree for positioning, d3.behavior.zoom for pan and zoom controls, and foreignObject elements for wrapped text labels. Node colors are assigned programmatically with purple shading, and tooltips appear on hover to provide additional context.

TTharun Reddy
80% 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
79% match
Loading thumbnail…

ICE8-Tree

A hierarchical tree visualization displays a student data structure with parent-child relationships, including courses, names, and grades. Each generation is color-coded by depth level. The D3.js code uses the `d3.stratify()` utility to organize the data hierarchy and `d3.tree()` to compute node positions. Paths animate via chained `.transition().duration()` calls, while circles and text labels are rendered as SVG elements with staggered entrance animations.

SSatyaVineeth
79% match
Loading thumbnail…

ICE 8-3 Tree

This interactive tree diagram visualizes a three-level biological classification of animals, from the root “Animals” down to specific classes like Mammals and Insects. Built with D3.js (version 3.5) using `d3.layout.tree` and `d3.svg.diagonal`, it renders nodes as SVG circles with text labels and animated curved links. Each node’s fill color corresponds to its hierarchical level, while the stroke color remains uniformly grey, helping distinguish taxonomic depth at a glance.

HHARSHA BUDDANA
79% match
Loading thumbnail…

ICE 8

This interactive tree diagram visualizes a botanical classification hierarchy, from Plants down to Monocots and Dicots. The SVG visualization uses D3.js v3’s `d3.layout.tree` and `d3.svg.diagonal` to render nodes and curved links. Clicking a node toggles its children via a transition, animating the tree’s layout. Circles are colored and stroked based on the `level` and `type` fields in the data, with labels positioned around each node.

KKiran Jyothi Bodduluri-11604571
79% 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
78% match