Fork of Fork of ICE8 - Social Network Graph

100%

Fork of Fork of ICE8 - Social Network Graph

✓ Published1🌍 Public

Last edited May 10, 2022

Created on May 10, 2022

Forked from Fork of ICE8 - Social Network Graph

This example visualizes a small social network as a force-directed graph, showing eight people as red circular nodes and their “Friend with” relationships as directed, arrow-headed lines. Node labels display each person’s name. The layout is computed with d3.forceSimulation, combining d3.forceLink, d3.forceManyBody, d3.forceCollide, and d3.forceCenter to manage link distances, repulsion, collision, and centering. Users can drag nodes via d3.drag, and hovering triggers a focusNode/ blurNode interaction that changes the node stroke to green. Data is loaded from a JSON file using d3.json.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ICE8 - Social Network GraphTEST

This example visualizes a small social network of eight people and their friendship links, with each person represented as a red circle and lines connecting friends. The graph uses D3.js force simulation (`d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, `d3.forceCenter`) to arrange nodes and links dynamically. Nodes are draggable via `d3.drag`, and hovering changes their stroke color. The data comes from a JSON file containing node IDs and link relationships, rendered as SVG elements within a 960×600 viewport.

VVamsi Krishna

96% match

Loading thumbnail…

Fork of Fork of Fork of ICE8 - Social Network Graph

This example visualizes a small social network of eight people and their friendship connections as a force-directed graph. The D3.js v6 code uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes and edges dynamically. It renders nodes as red circles with labels and links as lines with arrow markers, all within an SVG container. Data comes from a local `data.json` file. Nodes are draggable via D3's drag behavior, and hovering highlights a node with a green outline.

Ppreddythandra

95% match

Loading thumbnail…

Fork of ICE8 - Social Network Graph

This example visualizes a small social network of eight people and their friendship connections, using a force-directed graph layout. Node size is uniform, and all links are styled identically, though the underlying data includes a relationship type and a weight value. The visualization is rendered as an SVG using D3 v6, with `d3.forceSimulation` handling the layout physics, including link distance, charge, collision, and centering forces. Nodes are draggable, and hovering highlights a node with a green stroke. Data is loaded from an external JSON file.

Tttummala17

94% match

Loading thumbnail…

Fork of Fork of Fork of ICE8 - Social Network Graph

This social network graph visualizes friendships among eight people using a force-directed layout with red circular nodes and labeled text. It uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes and edges. The D3 v6 code loads data from `data.json`, renders the graph as SVG with arrowhead markers on links, and supports drag interaction. Hovering highlights a node by turning its border green.

Nnsatyaprakash22

94% match

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

A social network graph of eight people and eleven "Friend with" relationships, with nodes as red circles labeled by name and directed links with arrowheads. The d3.forceSimulation, d3.forceLink, d3.forceManyBody, d3.forceCollide, and d3.forceCenter APIs compute node positions, while SVG circles and lines render the result. Hovering highlights a node with a green stroke. Data comes from a static JSON file containing link endpoints and node IDs.

Rradhadevarapu

94% match

Loading thumbnail…

Fork of Fork of Fork of ICE8 - Social Network Graph

This social network graph visualizes eight people and their friendship connections, with directed arrows indicating the relationship from one person to another. D3’s force simulation (`d3.forceSimulation`) positions nodes using link, charge, collision, and center forces, while drag behavior lets users reposition nodes interactively. The graph is rendered in SVG with red circles for individuals and labeled text, reading friend relationships from a JSON data structure. Hovering highlights a node with a green stroke, and duplicate links appear as thicker lines.

DDamon Young

94% match

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

This example visualizes a small social network graph with eight nodes and eleven directed links, showing friendship relationships between individuals. The graph uses a force-directed layout, with nodes rendered as blue circles and labeled with their IDs, while links appear as lines with arrow markers indicating direction. Hovering highlights a node with a green border. The visualization is built with d3.forceSimulation, d3.forceLink, d3.forceManyBody, d3.forceCollide, and d3.forceCenter, with data loaded from a JSON file and rendered as SVG elements.

CCHENNI-Nidhaleddine

94% match

Loading thumbnail…

Fork of Fork of Fork of ICE8 - Social Network Graph

A node-link social network graph visualizes friend relationships among eight people, with nodes labeled by name and connected by directed edges that indicate a "Friend with" relationship. The graph uses a red fill for all nodes, and hovering over a node highlights it with a green stroke. The layout is computed using d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter forces, while edges are drawn as SVG lines with markers. The dataset is loaded from data.json, and the visualization is rendered in SVG.

Mmanishcheruku

94% match