Skip to main content
SimilarExport ZIP
100%

Fork of ICE8-network

✓ Published0🌍 Public
Ssaiprasadpilla937@gmail.com
Last edited Nov 10, 2025
Created on Nov 10, 2025
Forked from 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`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE8-network

This interactive network visualization displays a collaboration network among students, projects, and labs, with nodes colored by group and sized by connection weight. The graph uses force-directed layout via d3.forceSimulation with forceLink for link constraints, forceManyBody for repulsion, and forceCenter to keep the layout centered. Users can drag nodes with d3.drag to explore relationships, and hovering reveals a tooltip with node details from the CSV data sources. The SVG rendering uses d3.select and join operations to efficiently manage the dynamic graph elements.

SSai Charan
91% match
Loading thumbnail…

Fork of Fork of ICE-8 (Network)

A force-directed network graph visualizes a small study group of seven people, with nodes representing members and links showing their connections. The simulation uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while SVG rendering draws lines and circles with `d3.schemeTableau10` colors. Node dragging via `d3.drag` allows interactive repositioning. The accompanying `data.csv` file—though not directly loaded in the code—lists country codes and values, suggesting a separate dataset unrelated to the in-script node/link arrays. The dark-themed interface renders entirely client-side using D3 v7.

LLokesh
89% 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
88% match
Loading thumbnail…

Fork of ICE 8 - STEP 2(B) - VISUALIZING NETWORKS

This example shows a small friendship network among seven students in a study group, using a force-directed layout to position nodes and links. The D3.js code uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute the layout, while nodes are rendered as SVG circles and labels as text. Links are drawn as gray lines, and nodes are colored with `d3.schemeSet2`. The simulation updates positions on each tick, and nodes can be dragged with `d3.drag` to explore the network interactively.

Ssakethgoud333@gmail.com
88% 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
88% match
Loading thumbnail…

Fork of ICE8 - Social Network Graph

This network graph visualizes a personal social network, showing relationships between eight individuals as red, arrowed links connecting large, light-blue circular nodes. Node labels are displayed within each circle. The graph is constructed using a `d3.forceSimulation` engine with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to determine node positions, and nodes are rendered as SVG circles. The visualization is interactive, allowing users to drag nodes, with hover effects highlighting the selected circle.

Bbhargavarathod
87% match
Loading thumbnail…

Fork of ICE-8: Social Network

This visualization shows a small social network of six people, with colored circles representing individuals and orange lines linking them. A force-directed layout, created using `d3.layout.force` from the v2/v3 API, positions the nodes and edges. Node labels are appended as SVG text, while link thickness reflects each connection’s weight value from the JSON data. The graph is rendered as an SVG element, and nodes are draggable via `force.drag`, with positioning updated on each tick event.

Ssaivinay143
87% match
Loading thumbnail…

Fork of ICE8 network graph

This fork of the ICE8 network graph visualizes a social network of 16 individuals, showing connections between them as a force-directed layout. Nodes are drawn as orange circles with black borders, labeled with names, and links are rendered as black lines whose thickness reflects the connection weight. The graph uses D3 v4’s force layout API (via `d3.layout.force`) to position nodes, with interactive dragging enabled through the `force.drag` method. Data comes from a local JSON file (`graphFile.json`), and the entire visualization is rendered as SVG within a 1000×500 canvas, with node and link styles defined in embedded CSS.

KKusumaKumariDama@my.unt.edu
87% match