Network Visualization (ICE-8)

100%

Network Visualization (ICE-8)

✓ Published1🌍 Public

Last edited Nov 1, 2025

Created on Nov 1, 2025

This example visualizes a family tree as an interactive network graph in SVG, using colored nodes to distinguish grandparents, parents, and children. Force-directed layout via `d3.forceSimulation` with link, charge, and center forces positions the nodes, while links represent familial relationships. Nodes are draggable, and a legend maps roles to colors. The code uses D3 v7, applies drag behavior, and renders labels directly on each node.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-8 NETWORK

This example presents a family relationships network as an interactive force-directed graph. It shows individuals as draggable nodes and parent–child connections as links, with node color indicating generation depth. The visualization uses D3 v7’s `d3.forceSimulation` with link, charge, center, and collide forces, and loads CSV data from a GitHub Gist to build the hierarchy via `d3.stratify`. SVG rendering displays nodes, links, and labels, with a hover tooltip for additional information.

Sskmriyaz0786@gmail.com

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

88% match

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

88% match

Loading thumbnail…

ICE-8 assignment

This example presents two complementary D3.js visualizations: a hierarchical family tree and a force-directed social network. The family tree uses a `d3.tree` layout with `d3.linkHorizontal` curves to connect nodes representing three generations. The social network applies `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position seven interconnected individuals, with draggable nodes. Both visualizations render as SVG elements, and the force graph includes labels beside each node, allowing users to explore relationships through interactive dragging.

BBHUMIKA CHUNDU

87% match

Loading thumbnail…

(d3.js)Network Graph and Family Tree

This example displays two distinct visualizations: a network graph and a family tree. The network graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes based on attractive and repulsive forces, rendering connections as lines. The family tree uses `d3.tree` and `d3.stratify` to convert parent-child relationships into a hierarchical layout. Both visualizations render as SVG elements with nodes as styled circles and labels, with data hardcoded in JavaScript arrays.

Mmogantirudhrani@gmail.com

87% match

Loading thumbnail…

ICE8 NETWORK plot

A network diagram visualizes family relationships across generations, with colored nodes representing people and links connecting parents to children. The graph uses D3 v7 and an SVG renderer, loading data from a CSV file, and applies a force-directed layout driven by `d3.forceSimulation` with link, charge, center, and collide forces. Nodes are draggable via `d3.drag`, and hovering displays a tooltip showing each person’s name and generation number.

Ddiwashhumagain@my.unt.edu

87% match

Loading thumbnail…

Fork of (d3.js)Network Graph and Family Tree

This example combines an interactive force-directed network graph with a hierarchical family tree, both rendered as SVG. The network uses `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody` to position nodes representing named individuals, with labeled circles and linking lines. The tree is generated from parent-child data using `d3.stratify` and `d3.tree` layout. The code defines data arrays for both structures and applies custom styling for nodes, labels, and links.

Mmogantirudhrani@gmail.com

86% match

Loading thumbnail…

ICE-8

This example visualizes the multi-generational Smith family tree, showing 47 members across 4 generations as an interactive network. It uses D3.js v7 with a force-directed layout via `d3.forceSimulation`, rendering nodes and links as SVG elements. The data is embedded directly in the page as a flat array of parent-child relationships. Hovering over a node triggers a tooltip that displays member details, with `d3.mouse` positioning and CSS transitions controlling the tooltip’s appearance.

HHarshithaAru06

85% match