Fork of ICE - 8: Social Network Graph

100%

Fork of ICE - 8: Social Network Graph

✓ Published1🌍 Public

Last edited Apr 6, 2023

Created on Apr 6, 2023

Forked from ICE - 8: Social Network Graph

This example visualizes a social network of seven people, using nodes and directed links to show friendship relationships. The graph layout is computed with `d3.forceSimulation`, applying link, charge, collision, and center forces to position nodes and edges dynamically. Dragging nodes is supported via `d3.drag`, and hovering highlights a node with a red stroke. The SVG rendering includes arrowheads on lines, with node labels displayed directly on each circle. The dataset is loaded from `data.json`, which specifies nodes and their pairwise links.

AI-generated description

MIT Licensed

Similar vizzes

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 Social Network Graph --> ICE-8

This example visualizes a social network as a force-directed graph, showing friendships between ten people with labeled nodes and directional links. The layout is computed using `d3.forceSimulation` with link, charge, collision, and center forces, while nodes are rendered as large cyan circles with SVG text labels. Links are drawn as lines with arrow markers to indicate direction, and nodes are draggable via D3’s drag behavior, with a hover effect that thickens the node border. The code loads data from a JSON file and uses SVG for all rendering.

Rradhadevarapu

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

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

93% match

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

93% match

Loading thumbnail…

Fork of 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.

MM.Saleh Tibi

93% match

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

A social network graph shows seven people as red circles connected by directed, arrowed lines representing "Friend with" relationships. The layout is computed dynamically using `d3.forceSimulation` with link, charge, collision, and center forces. Nodes are draggable, and hovering thickens a node's border via CSS class changes. The SVG rendering uses data from a local `data.json` file, with node labels displayed directly on the circles.

PPriyanka7002

93% match

Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This example visualizes a social network as a directed graph, showing how individuals are connected through friendship links. Nodes represent people with a consistent cyan color and circle shape, while lines with arrow markers depict the direction of each friendship relationship. The graph uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes, with drag interactions enabled. Data comes from a local `data.json` file containing nodes and links with relationship attributes, and hover states are styled via CSS classes.

Ppreddythandra

92% match