Skip to main content
SimilarExport ZIP
100%

ICE-8

✓ Published0🌍 Public
Ssairathan.p045@gmail.com
Last edited Apr 13, 2026
Created on Apr 13, 2026

This interactive force-directed graph visualizes a small friendship network of seven people, with nodes colored by social group and labeled by name. The visualization uses D3.js v7’s `d3.forceSimulation` to compute physics-based layout, combining `d3.forceLink`, `d3.forceManyBody`, `d3.forceCenter`, and `d3.forceCollide` to position nodes and edges. Rendering as SVG, the graph supports node dragging and displays a tooltip with a person’s name and group on hover. The data are explicitly defined in the code as simple node and link arrays.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8 Network Graph

This network graph visualizes the friendships among eight individuals, showing the connections and relationships between them through a force-directed layout. The visualization uses D3 version 6 with the `d3.forceSimulation` API to manage the physics of node placement, incorporating forces for linking, collision detection, and centering. Nodes are rendered as circles with labels, while links are drawn as lines with arrow markers. The graph supports interactive dragging, and hovering highlights individual nodes through CSS class changes. Data is loaded from a JSON file containing link and node definitions.

Aabdhaseeeb
91% match
Loading thumbnail…

ICE8 Network Graph

This interactive network graph visualizes friendships among a group of ten people, with nodes representing individuals and edges denoting "Friend with" relationships. The visualization uses D3’s `forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position the nodes, rendering them as sky-blue circles with labels in an SVG. Users can drag nodes to rearrange the network, and hovering highlights a node with a thicker stroke, as implemented via `d3.drag` and CSS class toggling.

EEshwarreddyt
91% match
Loading thumbnail…

ICE8 - Social Network Graph

This example displays a social network graph of eight people connected by friendship links. Nodes are rendered as blue circles with white labels, while directed edges with arrowheads indicate the relationship direction and thickness reflects connection strength. The visualization uses D3 v6’s `forceSimulation`, `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, with drag interaction via `d3.drag`. Data comes from a local `data.json` file, and the SVG output updates on each simulation tick.

MMgk1255
91% match
Loading thumbnail…

Network Graph - ICE 8

This network graph visualizes friendships among eight people, with nodes connected by directed links and arrowhead markers. The graph uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes. Node and link styling is applied via SVG circles, lines, and text labels. Data is loaded from a JSON file containing node IDs and link relationships. Nodes can be dragged using d3.drag, and hovering highlights them by changing the stroke color.

JJustin Roberts
91% match
Loading thumbnail…

ICE8- social network

A force-directed network graph visualizes a small social network of nine people connected by ten friendship links. The chart uses D3 v6’s `d3.forceSimulation` with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, which are rendered as gold circles with labels. The code loads data from a JSON file, applies drag interaction via `d3.drag`, and renders arrows on edges using SVG markers. Node highlighting occurs on mouse hover, while link thickness reflects a numeric `value` attribute from the data.

DDeepa-Murugesan
91% match
Loading thumbnail…

ICE8 - Social Network Graph

This interactive graph visualizes friendship connections among eight people, with nodes representing individuals and directed links showing relationships. The graph uses a force-directed layout to position nodes, and users can drag nodes to rearrange the network. Implemented with D3 v6, it leverages `d3.forceSimulation` with link, charge, collide, and center forces, plus `d3.drag` for interactivity. Node sizes are fixed, and hover highlighting is handled via CSS classes. The data is loaded from a JSON file containing node and link definitions.

LLakshmiVandanaNunna
91% match
Loading thumbnail…

Social Network Graph --> ICE-8

A force-directed social network graph displays ten people connected by twelve friendship links. The visualization uses a pink circular node for each person, with their name displayed inside, and red directed lines with arrowheads showing relationships. The layout is computed using `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter`. Nodes are interactive via `d3.drag`, and hovering changes the stroke color through CSS classes. Data comes from a JSON file containing nodes and links with relationship metadata.

RRevanthReddyG
90% match
Loading thumbnail…

ICE-8_Social_network

This example visualizes a small social network of eight people and their friendship connections using a force-directed graph. Pink circular nodes represent individuals, while black lines with arrowheads depict the "Friend with" relationships between them. The layout is computed with `d3.forceSimulation`, applying link, charge, collision, and center forces to position nodes dynamically. Users can drag nodes to rearrange the network, and hovering highlights a node with a distinct stroke. The visualization renders in SVG using D3 v6, with data loaded from a local `data.json` file.

NNiharika-Guthikonda
90% match