Skip to main content
SimilarExport ZIP
100%

ICE8-network

✓ Published2🌍 Public
SSai Charan
Last edited Nov 9, 2025
Created on Nov 9, 2025
Forked from React & D3 Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

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
91% match
Loading thumbnail…

ICE 8 Network Graph

This interactive network graph visualizes connections among a group of friends, with nodes representing individuals and links showing relationships. The D3.js force-directed layout uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while d3-force provides drag interaction. Node colors come from d3.schemeCategory10 based on group membership (1 or 2). The SVG rendering includes node labels and link thickness scaled by connection value. Users can drag nodes to explore the network, with zoom functionality via d3.zoom.

Ddivyageethanjali
90% match
Loading thumbnail…

ICE8-Network

A force-directed network visualization maps six named team members into three functional groups—Design, Engineering, and Research—using colored nodes and labeled links to show collaboration patterns. The example uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while d3.drag enables interactive repositioning. Nodes render as SVG circles with a categorical color scale, and a tick handler updates link coordinates and label positions in real time.

Aaravindsg99@gmail.com
90% match
Loading thumbnail…

ICE8- Network

This interactive network visualization uses a force-directed layout to display a small social graph of ten named individuals connected by green links. Built with D3 v4, the code applies `d3.forceSimulation` with link, charge, and centering forces, rendering nodes as orange circles with black strokes and name labels using SVG. The simulation updates node and link positions on each tick, and the layout settles after the forces reach equilibrium.

KKolliTeja
89% match
Loading thumbnail…

ICE8 - Network Graph

This interactive network graph visualizes connections between eight people using D3 version 6. Nodes are rendered as pink circles with name labels, linked by blue lines with arrow markers. The layout uses `d3.forceSimulation` with link, many-body charge, collision, and centering forces to position nodes dynamically. Users can drag nodes, and hovering changes the stroke color. Data comes from a JSON file containing node names and link relationships. The SVG output updates on each simulation tick, repositioning edges and nodes based on the force-directed physics.

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

ICE8 - Network Graph

A network graph visualizes the relationships between eight individuals, with nodes labeled by name and connected by directed, arrowed links. The layout is determined by a force-directed simulation, using `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide`, with nodes rendered as pink circles and blue links. Data comes from a local `networkData.json` file, and the visualization includes interactive dragging via D3's `drag` handler, with hover effects that change the node stroke to green.

Sshiiva-surya
89% match
Loading thumbnail…

ICE 8

This interactive network visualization shows collaborations among eight researchers, with nodes colored by department (CS, Math, Physics, Design) and labeled with names. Built with D3.js v7, it uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while `d3.drag()` enables node dragging. Hovering reveals a tooltip with the person's department. The demo uses a small hardcoded dataset and renders to SVG.

Aavinashpandian79@gmail.com
89% match