Fork of network ICE

100%

Fork of network ICE

✓ Published1🌍 Public

Last edited Apr 8, 2025

Created on Apr 8, 2025

This example visualizes a small health data network as a force-directed graph, organizing records by gender, then age, and finally metric values for sleep quality and stress level. Nodes are colored by hierarchy level: purple for gender, gold for age, and teal for metric leaves. The layout is computed with `d3.forceSimulation`, using `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, with draggable nodes via a custom drag handler. Rendering is SVG-based, with node labels and a legend showing the color mapping.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Tree Graph ICE

This interactive tree diagram displays hierarchical health data, structuring gender, age, and sleep/stress metrics as a branching network. The visualization uses colored nodes—red for gender, blue for age, and green for metrics—with connecting links, and the D3.js library (v7) builds the layout via `d3.tree()`, `d3.hierarchy()`, and `d3.linkVertical()`. Each metric leaf node labels specific sleep quality and stress level values, with the SVG rendering driven by direct DOM manipulation through D3 selections. The chart is populated from hardcoded JSON data embedded in the HTML file.

GGorantla Vishnusai

82% match

Loading thumbnail…

Fork of ICE-8 - Network - Nghia Dang

A force-directed network diagram visualizes 13 nodes grouped by color (using a categorical scale) and linked by weighted edges, with node positions determined by a physics simulation. The SVG rendering uses d3.v5 and the `d3.forceSimulation` API with `forceLink`, `forceManyBody`, and `forceCenter` to compute layout, while `d3.scaleOrdinal` assigns colors based on group membership. Data is loaded from `data.json`, and link stroke widths encode the `value` attribute, with all elements updated on each simulation tick.

AArefa Patwary

81% match

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

81% match

Loading thumbnail…

Fork of ICE8 network graph

This example visualizes a small directed network graph with seven nodes and six weighted links, using labeled circles to represent entities and lines to show connections. The graph is rendered as SVG and positioned through a force-directed layout, with link stroke widths reflecting each connection’s weight. It relies on the older `d3.layout.force` API from d3.v2 (loaded alongside d3.v4) to simulate physics, while node dragging is enabled via `force.drag`. The data comes from an embedded `graphFile.json` file, and styling uses CSS.

Ssaijahnaviappineni

81% match

Loading thumbnail…

Fork of ICE8-network

This collaborative network visualization uses a force-directed layout to show relationships between students, projects, and a lab. D3’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` position colored nodes by group, while link thickness encodes connection value. The SVG rendering includes draggable nodes via `d3.drag()` and hover tooltips that display each node’s name and group. Data loads from two CSV files, with node color mapped by a `d3.scaleOrdinal`.

Ssaiprasadpilla937@gmail.com

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

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

80% match

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

This example visualizes a social network as a force-directed graph, with red circular nodes representing individuals and black lines indicating connections such as “family with” or “friend with” relationships. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes dynamically. Dragging is enabled via `d3.drag`, and hovering highlights nodes using a CSS class. Data is loaded from a JSON file, and the graph is rendered as SVG elements (`<circle>`, `<line>`, `<text>`), with marker arrows defined in `<defs>`.

PPriyanka7002

80% match