ICE-8 — Social Network (Authors & Papers)

100%

ICE-8 — Social Network (Authors & Papers)

✓ Published1🌍 Public

Last edited Nov 6, 2025

Created on Nov 6, 2025

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.

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

91% match

Loading thumbnail…

ICE 8 - Network

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.

Mmendemrudula@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

87% match

Loading thumbnail…

ICE 8 - Social Network

This interactive force-directed network diagram visualizes the relationships within a social network dataset loaded from a GitHub gist. Red circles represent individual nodes, with dashed gray lines indicating links between them, and each node is labeled with its corresponding name. The layout is computed dynamically using D3.js (v6) APIs, specifically `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody` for repulsion, and `d3.forceCenter` to attract nodes toward the center. The SVG rendering updates node, link, and label positions at each simulation step.

DDaniel Mata

85% match

Loading thumbnail…

ICE 8 Social Network

A force-directed network graph visualizes a personal social network, with each person as a light blue circle labeled by name and connected by thick black links. It displays the relationships among friends from a JSON dataset loaded via `d3.json`. The layout uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while SVG circles and text elements render the final result, with positions updated on each simulation tick.

NNitheeshSama

84% match

Loading thumbnail…

ICE8 - Social Network Graph

This social network graph visualizes friendships among a group of people, with nodes representing individuals and lines representing their relationships. The graph uses a force-directed layout powered by `d3.forceSimulation`, with link forces, charge repulsion, and collision detection to position the nodes. Data is loaded from a JSON file containing node IDs and link relationships. The visualization is rendered as SVG, with violet circles for nodes, labels showing names, and directional arrow markers on the links. Hovering highlights a node by changing its stroke width and color.

Mmboinapally17

84% match

Loading thumbnail…

ICE8 Social Network

A force-directed network diagram visualizes the friendships among eight people in a social group, using orange circular nodes and directed links with arrowheads to show one-way relationships. The visualization uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, while the code also implements drag interactions and hover highlighting via mouseover and mouseout events. Node positions update on each simulation tick, with labels displayed at the center of each node. The data comes from a JSON file containing node IDs and link definitions.

EEeshwarReddy

84% match

Loading thumbnail…

Social Network Graph --> ICE-8

This example visualizes a social network as a force-directed graph, showing friend relationships among a group of people. The nodes, rendered as large cyan circles with labels, are positioned using `d3.forceSimulation` with link, charge, collision, and center forces. The data, loaded from a JSON file, defines nodes and links with relationship attributes. The graph uses SVG elements, with markers indicating link direction. Users can drag nodes to reposition them, and hovering highlights a node by thickening its stroke via CSS classes.

NNithish Kumar

84% match