Skip to main content
SimilarExport ZIP
100%

Fork of ICE8 - Social Network Graph

✓ Published1🌍 Public
NNaimisha-M
Last edited Jul 9, 2022
Created on Jul 9, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

This fork of a D3.js social network graph visualizes connections between people as a force-directed network. Yellow circular nodes represent individuals, while labeled, arrowed links depict friendship relationships with varying weights. The visualization uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes dynamically. Users can drag nodes to explore the network, and hovering highlights a node with a green outline. Data is loaded from a local JSON file and rendered as SVG elements.

NNaimisha-M
96% match
Loading thumbnail…

Fork of Social Network Graph ICE-8

This interactive social network graph visualizes connections between people using a force-directed layout. Nodes represent individuals and links depict their relationships, with arrowhead markers indicating direction. Users can drag nodes to reposition them, and hovering highlights a node with a green outline. The visualization is built with React, D3 v6, and SVG, utilizing `d3.forceSimulation` with link, charge, collision, and center forces. Data is loaded from a local `data.json` file containing explicit node and link definitions, while CSS styles control colors, strokes, and hover effects.

NNaimisha-M
94% 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
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 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.

MMgk1255
93% match
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
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
Loading thumbnail…

Fork of Social Network Graph ICE-8

This static SVG network graph visualizes friendships between eight individuals, with nodes positioned by a force-directed simulation and edges representing "Friend with" relationships. The interactive visualization uses d3.forceSimulation with link, many-body charge, collision, and center forces to layout the graph. Nodes are draggable, and hovering highlights them with a green stroke. The data is loaded from a JSON file, and the graph is rendered using D3 v6 with a fixed 960 by 600 pixel viewBox, using circles and lines.

NNaimisha-M
92% match