Skip to main content
SimilarExport ZIP
100%

Fork of Social Network

✓ Published1🌍 Public
Kkalyanikotha
Last edited Apr 3, 2022
Created on Apr 3, 2022

This network visualization displays a small social graph with six named nodes and five weighted links connecting them. The visualization uses a force-directed layout to position nodes, with link thickness scaled to the square root of each link's weight. The code relies on d3.v4.js and the older d3.layout.force API to calculate node positions and handle dragging. Links are rendered as orange SVG lines, while nodes appear as blue circles with purple labels taken from the data.json file.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork for the Social Network

This force-directed network diagram visualizes a small social graph of six people and five weighted connections between them. Using data from a JSON file, circular nodes represent individuals, while lines with varying thickness encode relationship strength through the square root of each link's weight. The visualization is built with D3.js v4, employing the legacy `d3.layout.force` layout to position nodes and handle drag interactions. Node labels appear beside each circle, and the SVG renderer updates positions on every tick event, with CSS styling for link colors and node fills.

Rrohinikotha
91% match
Loading thumbnail…

Fork of SOCIAL NETWORK

A force-directed network graph displays ten named nodes and nine weighted links, using red edges and blue circles with lime text. The visualization loads node and link data from a local `network.json` file, then applies a `d3.layout.force` simulation with gravity, charge, and distance parameters. SVG renders circles and lines, while node labels appear as text elements; user interaction enables drag-and-drop via `force.drag`. Link stroke widths scale by `Math.sqrt(d.weight)`, and the running simulation updates positions on each tick event.

VVineela Reddy
90% match
Loading thumbnail…

Fork of Social Network Visualization

This visualization shows a small social network graph with seven named friends connected by blue weighted links and green circular nodes. Each node displays a person’s name in maroon, and the graph is interactive, allowing users to drag nodes around the SVG canvas. The implementation uses D3.js v4’s `d3.layout.force` with gravity, charge, and distance parameters to position nodes, while a separate D3 v2 script is also loaded. Node and link styling are handled via CSS classes, with link thickness determined by the `weight` value from the `network.json` data source.

Kkarumanchimanasa
89% match
Loading thumbnail…

Fork of Social Network graph

This visualization shows a small social network of nine named individuals connected by weighted links. The graph uses d3.layout.force to simulate physical forces, positioning nodes with gravity and charge while link thickness reflects each connection’s weight. Nodes appear as green circles with labels, and users can drag them interactively. The code loads data from graph.json, renders everything as SVG, and relies on d3.v4’s force layout and drag behavior.

Iii-kc
89% match
Loading thumbnail…

Fork of Social Network graph

This interactive force-directed graph visualizes a small social network of nine people connected by eight weighted links, with node labels showing names and link thickness encoding connection weight. The visualization uses D3.js v4 with the legacy `d3.layout.force` API, rendering nodes as red circles with yellow strokes and black connecting lines in an SVG container. Users can click and drag individual nodes to rearrange the network, while the simulation updates positions during tick events to maintain the layout. The data comes from a local `graph.json` file with node and link arrays.

SSaiSree0122
89% match
Loading thumbnail…

Fork of Fork of Social Network

This example shows a small social network of six people, grouped into three clusters, with weighted connections indicating relationship strength. The visualization uses a force-directed layout to position nodes and links, with node labels displayed beside each circle. Built with D3 v4, it employs `d3.layout.force` for simulation, `force.drag` for interactivity, and SVG elements (`line`, `circle`, `text`) for rendering. Edge thickness is scaled by the square root of the link weight, while node styling uses a custom color palette defined in CSS. The data is loaded from a local `data.json` file containing node names and group assignments.

Ssnehareddygurram
89% match
Loading thumbnail…

Fork of fork

This social network visualization displays nine named individuals connected by weighted links, with node positions determined by a force-directed layout. Using the D3 v4 library through the `d3.layout.force()` API, the code creates a SVG canvas with yellow circular nodes labeled with each person’s name, while black link strokes vary in thickness according to the connection weight. The network is interactive, allowing dragging of nodes via the force layout's drag functionality, with gravity, distance, and charge parameters controlling the spatial arrangement. Data comes from a local JSON file containing node group assignments and link weights.

TTekmal-Bhavana
89% match
Loading thumbnail…

Fork of Social Network graph

This example shows a small social network graph with seven named nodes and six weighted links, rendered as an SVG in a React project. The visualization uses the force-directed layout from D3 v4 (`d3.layout.force`) with gravity, distance, and charge parameters to position nodes, and applies a green stroke to links with widths proportional to link weight. Nodes appear as purple circles with maroon outlines and text labels, and the entire graph is interactive, allowing users to click and drag nodes to rearrange the layout.

RReyden Harris
87% match