Social Network

100%

Social Network

✓ Published0🌍 Public

Last edited Mar 30, 2023

Created on Mar 29, 2023

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.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Social Network Graph

A social network graph visualizes six people connected by weighted links, with each person represented as a pink circle labeled by name. The force-directed layout positions nodes dynamically, and link stroke widths reflect relationship weights. The example uses d3.v4 with the legacy `d3.layout.force` API to simulate physics and render an SVG, loading data from the `graphFile.json` file. Nodes are draggable, and the tick handler updates link coordinates and node transforms.

Ssiddu7147

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

92% match

Loading thumbnail…

Social Network

A social network diagram displays six people as labeled circles connected by weighted, orange links. The visualization uses a D3 v4 force-directed layout, specifically calling `d3.layout.force` with gravity, distance, and charge parameters to position nodes. Links are drawn as SVG lines whose stroke-width reflects each connection's weight from the JSON data. Node styling includes solid blue circles with purple text labels, and the simulation updates node transforms and link coordinates on each tick.

Nnagarjuna1968

92% match

Loading thumbnail…

Social Network

The visualization displays a small social network of seven people, with weighted links indicating relationship strength. It uses a force-directed layout to position nodes, allowing users to click and drag them around the canvas. The graph is rendered as an SVG using D3.js, with brown strokes for links and silver circles with royal blue borders for nodes. Data comes from a local JSON file containing node names and link weights. The code relies on d3.layout.force() for the physics simulation, with node labels positioned to the right of each circle.

LLakshmipriya-kalapala

91% match

Loading thumbnail…

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.

NNitheeshSama

90% match

Loading thumbnail…

Social Network Graph

This social network graph visualizes the connections between ten individuals, with node size and link thickness representing group membership and relationship weight. Using `d3.layout.force()` for physics-based layout and `force.drag()` for interactivity, nodes are rendered as SVG circles with red text labels. The network loads JSON data from `network.json`, drawing links as blue lines whose stroke-width reflects each connection’s weight. The graph uses D3.js v4 and v2 APIs to position elements dynamically, enabling users to drag and rearrange nodes while the force simulation updates positions in real time.

0057SatvikDamera

90% match

Loading thumbnail…

Social Network

This social network graph visualizes the friendships between ten people using a force-directed layout. Nodes represent individuals and links show their connections, with all nodes colored orange and link thickness indicating relationship strength. Built with D3 v6, the visualization uses `d3.forceSimulation` with link, many-body, collision, and center forces to position nodes. Users can drag nodes to rearrange the network. Data comes from the embedded `data.json` file, with nodes labeled directly and rendered as SVG circles and lines.

AAshrith Kudidhi

90% match

Loading thumbnail…

Social Network

This example visualizes a small social network with seven named people and weighted connections. It uses a force-directed layout via `d3.layout.force` to position nodes and links, rendering them as SVG circles and lines. The thickness of each link corresponds to the `weight` field from the JSON data, and node labels display names. The graph is interactive, allowing nodes to be dragged and repositioned while the simulation updates the layout in response to tick events.

SSohilaBheemReddy

90% match