ICE 8 Network Graph

100%

ICE 8 Network Graph

✓ Published2🌍 Public

Last edited Apr 3, 2022

Created on Apr 2, 2022

This example visualizes a hierarchical family tree as an interactive network graph, with a central parent node (Ramana) and its direct and indirect child nodes (Jaggu, Sonu, Anu, Vinay, and Jaggu’s children Usha and Vyshnavi). The visualization uses d3.forceSimulation to apply many-body repulsion, link forces, and centering forces, positioning nodes and connecting them with lines. Circles and labels are rendered via SVG, with node sizes and colors predefined in a palette. The simulation updates node positions on each tick, demonstrating a simple force-directed layout.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of ICE 8 Network Graph

This example shows a network graph of family relationships, with a central parent node connected to child nodes and further sub-nodes. The visualization uses D3.js force simulation to position the nodes and links, rendered as SVG circles and lines. The code applies `d3.forceSimulation` with `forceManyBody` for repulsion, `forceLink` for connections, and `forceCenter` to anchor the layout. Node colors and sizes are defined in a separate `colors.js` module, and the data structure is built programmatically in `data.js`.

Mmanvithareddykarra

86% match

Loading thumbnail…

ICE 8 Network Graph

This example visualizes a network graph of eight named nodes connected by seven links, with two large main nodes and smaller child nodes. A force-directed layout using `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` positions the nodes, while SVG circles, lines, and text labels render the structure. Node colors and sizes are assigned from a separate color module, and dragging is enabled via the D3 drag behavior.

PPrasanth Damarla

84% match

Loading thumbnail…

ICE8 - Family Tree

This interactive family tree visualizes a multi-generational hierarchy using collapsible nodes and animated layout transitions. It shows relationships between individuals like ViplavaKumari, Rambabu, and their descendants, with color-coded node types indicating different generations or branches. Built with D3.js v3, the visualization uses a tree layout to position nodes, SVG rectangles with external HTML foreign objects for labels, and CSS-based tooltips. Clicking a node collapses or expands its subtree, while panning and zooming is enabled through `d3.behavior.zoom`. The tree loads hierarchical data from a JSON file and arranges nodes with animated transitions.

Kkartik900

84% match

Loading thumbnail…

ICE 8 Network Graph

This example displays a small network of two main nodes and their connected child nodes, each labeled with a name and styled with distinct colors from a predefined palette. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter APIs to position the nodes, while SVG circles, lines, and text elements render the graph. Node data is generated in a separate JavaScript module, with forces applied through a tick event that updates the x and y coordinates of all elements automatically.

SSnapika

83% match

Loading thumbnail…

ICE-8: Family Tree

This example visualizes a family tree using a hierarchical layout, displaying relationships between individuals such as Sai, Raju, Swathi, and their descendants. The tree is rendered as an SVG with orange rectangular nodes connected by purple animated links, which draw from source to target over one second. The code constructs the hierarchy with `d3.stratify()` and positions nodes using `d3.tree()`, then applies transitions to text and paths for a dynamic reveal. Data is hardcoded as an array of child-parent pairs, with styling defined via CSS for circles, text, and paths.

MManasaPatange

83% match

Loading thumbnail…

ICE8 - Network Graph

This network graph visualizes relationships between eight people, with nodes representing individuals and links showing connections between them. The graph uses physics-based force-directed layout through `d3.forceSimulation`, combining forces from `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position nodes. Interactive dragging is enabled via `d3.drag`, allowing users to manually reposition nodes. The SVG rendering includes arrow markers on links via the `defs` element, and node hover effects are implemented with CSS classes. Data comes from a JSON file containing node names and link relationships.

AAnanyaSamala

83% match

Loading thumbnail…

tree network - Ice 8

This interactive tree diagram visualizes a three-generation family network rooted at SangaReddy. The visualization uses D3.js version 3.5’s `d3.layout.tree` with SVG rendering, displaying violet circular nodes and connecting links. Clicking any node triggers an animated collapse or expansion of its children using D3 transitions, with nodes smoothly repositioning along the horizontal hierarchy. The data is hardcoded as a JavaScript object array containing family member names and parent-child relationships.

Ssuchitra2602

83% match

Loading thumbnail…

Fork of ICE-8 : Network Tree

This example displays a small family-style network as a force-directed tree, with nine labeled nodes connected by curved, red or black links whose style varies according to link weight. Node radius and blue fill intensity reflect the number of connections per node. Built with D3 v5, it uses `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` to position nodes, while SVG paths and circles render the graph. Users can drag nodes to reposition them, and the simulation updates continuously via tick events.

JJyothicherukuri

83% match