Fork of ICE-8 - Network - Nghia Dang

100%

Fork of ICE-8 - Network - Nghia Dang

✓ Published0🌍 Public

Last edited Apr 4, 2022

Created on Apr 4, 2022

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8 - Network - Nghia Dang

This visualization displays a force-directed network with 13 nodes and 17 links, where node color encodes group membership and link thickness encodes the connection’s value. Using D3 v5, it loads the data via `d3.json`, then applies `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody` to position the nodes, while rendering circles and lines as SVG elements that update on each simulation tick.

Tteohangxanh

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

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

87% match

Loading thumbnail…

Fork of ICE-8_Network_Chart

This example shows a small network of seven named nodes connected by six links, with node groups and link weights visible through circle styling and stroke width. It uses a force-directed layout via `d3.layout.force` to position nodes, with SVG rendering for lines, circles, and text labels. The code loads node and link data from a JSON file and supports dragging nodes through `force.drag`. Styling is applied with CSS, and the visualization updates on each tick of the force simulation.

SSreekarveeravelly

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

86% match

Loading thumbnail…

Fork of Social Network ICE 8

A force-directed network diagram displays eight people grouped into four clusters, with nine weighted links connecting them. The visualization uses D3 v4's `d3.layout.force` to simulate node physics, applying gravity, charge, and distance parameters. Each node renders as a green circle with a black text label, while blue lines represent edges whose stroke-width is set from link weight data. Data loads from `data.json` via D3's `json` method. The SVG canvas measures 960 by 500 pixels, and nodes are draggable through the force layout's `drag` handler, with positions updated continuously on each tick event.

Mmohamed el haddadi

86% match

Loading thumbnail…

Fork of Fork of ICE-8 : Network Tree

This example shows a small network of nine nodes connected by curved links, with node size and color intensity reflecting the number of connections each node has. The graph is generated from a hardcoded JavaScript array of link objects using D3 v5’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while `d3.drag` enables interactive node movement. Link stroke color and dash style vary by a numeric value in the data, and the SVG output renders curved paths between nodes with labels.

Sspandhanabadekol

86% match

Loading thumbnail…

Fork of ICE8-Network

This example visualizes a collaboration network among six team members, with nodes colored by department and links showing connections. Using D3.js’s force-directed layout, the `d3.forceSimulation` API applies link, many-body charge, and centering forces to arrange the vertices dynamically. Circles and lines are rendered as SVG elements, and labels place names beside each node. The simulation updates positions on each tick, while drag handlers allow interactive repositioning of nodes, restarting the physics as needed.

Kkmuktha09@gmail.com

85% match