Fork of Fork of ICE8 - Social Network Graph

100%

Fork of Fork of ICE8 - Social Network Graph

✓ Published0🌍 Public

Last edited Mar 30, 2023

Created on Mar 30, 2023

Forked from Fork of ICE8 - Social Network Graph

This is a social network graph showing friendship connections among eight people. The visualization uses a force-directed layout to arrange nodes and links, with each node labeled by name and rendered as a circle. The code uses D3 v6’s `d3.forceSimulation` with link, charge, collision, and center forces to position the nodes, and SVG elements are updated on each simulation tick. Link arrows are drawn via SVG markers, and nodes are interactive, with hover effects and drag support. The data comes from a JSON file specifying people and their friend relationships.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

A social network graph visualizes friend connections among eight people, with nodes labeled by name and directed, arrow-tipped links indicating relationships. The force-directed layout uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position nodes. Nodes are draggable via `d3.drag`, and hovering highlights a node with a green stroke. The SVG output is rendered with D3 v6, using data from a JSON file.

RRahulChaitu999

96% 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

95% match

Loading thumbnail…

Fork of Fork of Fork of ICE8 - Social Network Graph

This social network graph visualizes friendships among eight people, with nodes representing individuals and links showing their connections. The graph layout is computed using d3.forceSimulation, which applies link, charge, collision, and center forces to position the nodes and edges. The SVG rendering displays yellow circles with person names, using arrow markers on lines to indicate relationship direction. Dragging and hovering interactions are enabled through D3's drag behavior and CSS class toggling, allowing users to explore the network dynamically. The data comes from a JSON file containing node and link definitions.

Bbhanuteja1807@gmail.com

95% match

Loading thumbnail…

Fork of ICE8 - Social Network Graph

This graph visualizes a small social network of eight individuals and their friendship connections, with directed arrows indicating the relationships. Built with D3.js v6, the visualization employs a force-directed layout computed by `d3.forceSimulation`, combining link, many-body, collision, and center forces to position nodes. The SVG rendering uses circles for people, labels for names, and lines with markers for edges, with all nodes initially placed at the center. Data is loaded from a JSON file containing node and link arrays.

RRamakanth771

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

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

This social network graph visualizes friendships among a group of people, with each node representing a person and each directed link indicating a "Friend with" relationship. The visualization uses the D3.js force-directed layout from `d3.forceSimulation`, combining `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position nodes and edges. Nodes are rendered as blue circles with labels, and links have arrow markers. The graph is rendered in SVG, with data loaded from a JSON file containing node and link definitions.

VVenkata Rajashekar Reddy Chinthala

94% 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

93% 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

93% match