Skip to main content
SimilarExport ZIP
100%

Social Network graph

✓ Published0🌍 Public
Aadapavaishnavi12
Last edited Apr 13, 2023
Created on Apr 13, 2023

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Social Network graph

This example uses a force-directed network graph to visualize a social network of nine people and their relationships. The visualization shows connections as blue lines whose thickness corresponds to the weight of each relationship. Nodes are rendered as circles with red borders, and each person’s name is displayed adjacent to their node. The layout uses `d3.layout.force` (a force simulation API) to position nodes, with drag interaction enabled via `force.drag`. Data is loaded from an external JSON file (`graph.json`) and rendered as an SVG, with styling applied through CSS.

DDineshK2602
92% match
Loading thumbnail…

Social Network graph

This example shows a social network graph of nine people, with blue, purple-outlined circles representing individuals and labeled with their names. The visualization uses a force-directed layout to position the nodes and displays the relationships between them as blue lines, where the line thickness corresponds to the connection weight. Built with D3.js v4, the code loads the network structure from a JSON file and leverages the `d3.forceSimulation` API for the layout physics, along with custom SVG styling for node and link appearance. The implementation creates the graph as an SVG element and supports dragging nodes with the mouse.

GGARIDIDEEKSHITHREDDY
91% match
Loading thumbnail…

Network_graph

This example visualizes a small social network as a force-directed graph, showing nine named individuals and their weighted connections. Nodes render as violet circles with red outlines and black name labels, while links appear as pink lines whose thickness reflects the connection weight. The graph uses the older `d3.layout.force` API with `gravity`, `distance`, and `charge` parameters, reading node and link data from a local `graph.json` file. Users can drag nodes interactively, and the layout updates continuously via the force tick event, with SVG elements styled directly in the page’s CSS.

Cchandanagandla
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
91% match
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
91% match
Loading thumbnail…

Social Network graph

A social network graph displays nine people as labeled blue circles connected by weighted black lines. The visualization uses a force-directed layout via `d3.layout.force` to position nodes, with link thickness proportional to the `weight` value from the loaded `graph.json` data. Nodes are draggable, and the graph renders in SVG with D3 v4. The tick event updates node transforms and link coordinates continuously, creating an interactive, physics-based layout.

SShivaPriyad
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
91% match
Loading thumbnail…

Network Graph

This example demonstrates a social network graph of nine individuals connected by various relationships such as friendship, siblings, and colleagues. Nodes are represented as large green circles with red labels, and links are drawn as blue arrows with arrowhead markers. The visualization uses d3.forceSimulation to compute the layout, with forces for link distance, charge repulsion, collision, and centering. Users can drag nodes to reposition them, and hovering highlights a node with a red stroke. Data is loaded from a local graph.json file, and the code imports select and scaleOrdinal from d3.

Bbogasamudramvamsikrishnareddy
91% match