Skip to main content
SimilarExport ZIP
100%

ICE 8 - Network

✓ Published0🌍 Public
Mmendemrudula@gmail.com
Last edited Nov 7, 2025
Created on Nov 7, 2025
Forked from ICE - 8 Tree

This example visualizes a many-to-many network connecting authors to papers they wrote, using a force-directed graph in SVG with D3 v7. The data is non-hierarchical, so a network layout is used instead of a tree. Nodes are colored by type (green for authors, teal for papers), and d3.forceSimulation with link, charge, center, and collide forces positions the elements, with drag interaction and a tooltip showing node details.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8 Network

This network visualization shows a bipartite graph of three authors connected to three papers through authorship relations, with authors as circles and papers as squares. The layout is generated using D3's `d3.forceSimulation` with link, many-body charge, center, and collision forces, allowing nodes to be repositioned via mouse drag. The rendering uses D3's `symbol` API for distinct node shapes, SVG paths for nodes, and `d3.select` joins for interactive elements like hover tooltips and a legend. The example demonstrates D3 v7's force-directed graph capabilities in a simple, self-contained dataset.

SSainathreddypotu@gmail.com
92% match
Loading thumbnail…

ICE-8 — Social Network (Authors & Papers)

This force-directed network visualizes relationships between authors and papers, using circles for authors and diamonds for papers, with colors distinguishing the two groups. The graph employs d3.forceSimulation with link, charge, center, and collision forces to position nodes, while drag behavior allows interactive repositioning. Hovering reveals tooltips showing each node's ID and type, and a legend clarifies the shape encoding. The code uses D3 v7 with SVG rendering, constructing node symbols via d3.symbol and d3.symbolCircle/diamond, with hardcoded sample data.

Jjanisha30gowda@gmail.com
91% match
Loading thumbnail…

ICE8-q2-2

A network visualization maps research collaborations between eight authors and eight papers. Circle nodes represent authors colored by group, while square nodes represent papers; links connect authors to their published works, including cross-group collaborations. The graph uses d3.forceSimulation with forceLink, forceManyBody, forceCenter, and forceCollide to position nodes, with drag interaction enabled. Rendered as SVG, the chart uses d3.v7 and includes hover effects that highlight nodes and links.

Ppashamsahithi2391@gmail.com
86% match
Loading thumbnail…

Fork of ICE-8_Network

This interactive network diagram visualizes collaborations between authors, books, and publishers as a force-directed graph. Node color and shape distinguish the three entity types, with links showing authorship and publication relationships. The visualization uses d3.forceSimulation with link, charge, and center forces to position nodes, while d3.scaleOrdinal maps entity types to color. Hovering over a node triggers a tooltip that displays information. The graph animates as the simulation runs, with all elements rendered as SVG.

Kkovuribalanagavinay@gmail.com
85% match
Loading thumbnail…

ICE8: Network Graph

A network graph maps personal and professional connections radiating from a central node, with labeled circles and colored links showing relationships between individuals. Using d3.forceSimulation with forceManyBody, forceLink, and forceCenter, the SVG visualization computes node positions and supports drag interactions. Node sizes and colors differentiate hierarchy levels, while link distances vary by relationship type. Data is defined in JavaScript modules and rendered via D3 selections for circles, lines, and text labels.

SSharmaAshwini
84% 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
84% 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
84% match
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
83% match