Fork of ICE8 - Social Network Graph

100%

Fork of ICE8 - Social Network Graph

✓ Published0🌍 Public

Last edited Jul 9, 2022

Created on Jul 9, 2022

This social network graph visualizes friend connections between named individuals in a small dataset. Interactive nodes are rendered as labeled circles with directed links showing relationships. The visualization uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes. Drag-and-drop functionality and hover highlighting are implemented via d3.drag and mouseover/mouseout events. The SVG output includes marker elements for directional arrows and text labels for node identification.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE8 - Social Network Graph

This network graph visualizes a personal social network, showing relationships between eight individuals as red, arrowed links connecting large, light-blue circular nodes. Node labels are displayed within each circle. The graph is constructed using a `d3.forceSimulation` engine with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to determine node positions, and nodes are rendered as SVG circles. The visualization is interactive, allowing users to drag nodes, with hover effects highlighting the selected circle.

Bbhargavarathod

93% match

Loading thumbnail…

Fork of ICE8 - Social Network Graph

A force-directed social network graph visualizing friendship ties among nine people. Nodes are yellow circles with name labels, connected by black lines with arrow markers. The layout uses `d3.forceSimulation` with link, charge, collision, and center forces, rendering in SVG. Interactions include dragging nodes and highlighting on mouseover via a CSS class. Data comes from a JSON file containing node IDs and link relationships.

MMar-99

93% 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 ICE8 - Social Network Graph

This interactive social network graph visualizes relationships between people, with nodes representing individuals and lines indicating friend connections. The visualization uses a force-directed layout via `d3.forceSimulation`, combined with drag interactions and hover effects to highlight nodes. Node labels display names, and link arrowheads are defined with SVG markers. Data is loaded from a JSON file containing nodes and links, and the graph is rendered as SVG elements, using D3 v6 and a yellow color scale for all nodes.

NNaimisha-M

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

This visualization shows a social network graph of ten individuals connected by friendship links. Each node is rendered as a circle with a person’s name, and directional arrows on the connecting lines indicate the relationship’s source and target. The layout is computed using `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and a center force. Nodes are draggable via `d3.drag`, with hover effects toggling a CSS class. Data comes from a local `data.json` file, and the SVG is rendered with D3 v6.

Bbhanuprasadk19

93% match

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

92% match

Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This social network graph visualizes connections between individuals, with nodes representing people and links indicating friendships. The node labels show the person's name, and each link uses a directional arrow to show the relationship flow, with the line weight reflecting the strength of the connection. The visualization uses D3 v6 with `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to position nodes in a force-directed layout, reading data from a JSON file. Nodes are rendered as cyan circles with blue strokes, and users can drag them to rearrange the layout.

SSaiSreya1

92% match