Social Network graph

100%

Social Network graph

✓ Published0🌍 Public

Last edited Apr 13, 2023

Created on Apr 12, 2023

Forked from Fork of Social Network graph

A social network graph displays eight people as orange circles connected by black links, with each person's name labeled beside their node. The network layout is computed using the D3 v4 force simulation (`d3.layout.force`) with gravity, charge, and distance parameters that position nodes dynamically. Data comes from a JSON file (`graph.json`) containing node names and group assignments, plus weighted links between individuals. Users can click and drag any node to rearrange the graph, with link thickness varying according to the weight value of each connection.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Social Network graph

A social network graph displays nine people as yellow circles with pink outlines, connected by black links whose thickness reflects a numeric weight. The layout is computed with d3.layout.force using gravity, charge, and distance parameters, while d3.json loads the graph data from an external JSON file. Nodes are draggable via force.drag, and each node includes an orange text label showing the person's name. The visualization uses SVG rendering within an 800×500 pixel canvas, with the tick handler updating link coordinates and node transforms during simulation.

Cchandrakalavanukuri

94% match

Loading thumbnail…

Social Network graph

A social network graph displays six people as labeled yellow circles, with orange links of varying thickness indicating connection strength between individuals. The visualization uses D3.js v4 with an SVG rendering approach, applying a force-directed layout via `d3.layout.force` to position nodes and manage collision and attraction. Links are drawn as lines with stroke widths proportional to each connection’s weight, while node labels are added as text elements. The data comes from a static JSON file containing nodes with group assignments and weighted links. Interactive dragging is enabled through `force.drag` on node groups, with positions updated on each tick event.

AAkhila-Battula

91% match

Loading thumbnail…

Social Network graph

A social network graph displays nine named individuals as nodes grouped by color-coded categories, with weighted links connecting them by relationships. The visualization uses a force-directed layout via `d3.layout.force` to position nodes, with link stroke-width scaled by the square root of the connection weight. Node circles are styled with blue fills and pink stroke, while purple links and text labels are rendered as SVG elements defined in CSS. Data comes from an external `graph.json` file containing node names, group assignments, and weighted edge pairs, and nodes support dragging through the force layout's drag behavior.

Aadapavaishnavi12

91% match

Loading thumbnail…

Social Network Graph

This social network graph visualizes the connections among eight people, with nodes linked by lines representing friendships. The network uses a force-directed layout via `d3.forceSimulation`, which combines link, many-body, collision, and centering forces to arrange nodes dynamically. Nodes are rendered as green circles with labels, and edges include arrow markers to show direction. The graph is interactive, allowing nodes to be dragged via `d3.drag`, and hovering highlights a node with a green stroke. Data comes from a local JSON file containing node and link definitions.

Ggeethanjalikotaru

91% match

Loading thumbnail…

Social Network Graph

A social network graph visualizes friendship connections among eight people, with directed arrows showing relationships and yellow circular nodes representing each person. The layout uses a D3 force-directed simulation (`d3.forceSimulation`) with link, charge, collision, and centering forces to position nodes. Interactive drag behavior lets users move nodes, while hovering highlights them via CSS class changes. The graph is rendered as SVG with data loaded from a JSON file, using D3 v6.

AABCDB15

91% match

Loading thumbnail…

Social Network Graph

This social network graph displays eight individuals connected through friendship links, with each node labeled by name and visualized as a green circle. The network structure is computed using `d3.forceSimulation` with force-based layout including link, charge, collision, and center forces, applied to data loaded from a JSON file. The SVG rendering includes drag-and-drop interaction via `d3.drag`, and hover effects highlight nodes by changing their stroke color. Marker arrows indicate link direction between source and target nodes.

Llikith1266

91% match

Loading thumbnail…

Social Network graph

This social network graph visualizes a small set of named individuals organized into four groups, with links between them representing connections of varying weight. The nodes are rendered as circles with lightgreen fills and labels, while links appear as black lines whose stroke width scales with the square root of each link’s weight. The layout is driven by d3.layout.force, which applies gravity, distance constraints, and charge to position nodes, and users can drag nodes interactively. The SVG is generated dynamically from the graph.json data file using d3.v4 and d3.v2 APIs.

LLG0498

90% match

Loading thumbnail…

Social Network

A force-directed graph displays a social network of six people and five weighted connections, with nodes as orange circles and links as gray lines. Built using D3 v4, the visualization loads node and link data from a local JSON file and uses the `d3.layout.force()` API to simulate physical forces that position the nodes. Dragging is enabled via the force simulation's `drag` method, and each node includes a text label showing the person's name, with link thickness scaled by the `weight` value.

Ddheeraj1509

90% match