Fork of Social Network Visualization

100%

Fork of Social Network Visualization

✓ Published0🌍 Public

Last edited Mar 28, 2023

Created on Mar 28, 2023

Forked from My 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.

AI-generated description

Fork of Social Network Visualization

MIT Licensed

Similar vizzes

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

90% match

Loading thumbnail…

Fork of Network graph of Social Connections

This network graph displays social connections among seven individuals, with green links and cyan circular nodes labeled by name. The visualization uses an interactive force-directed layout, allowing nodes to be dragged and repositioned. The code relies on the D3 library (v4 with a v2 fallback), explicitly using `d3.layout.force()` for the physics simulation and `force.drag` for node interaction. SVG elements render the nodes and weighted links, with stroke widths reflecting the `weight` values from the JSON data source.

SSnapika

90% 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 network graph visualizes social connections among nine people, with node colors and link weights indicating group membership and relationship strength. The interactive visualization uses D3.js v4’s force-directed layout API (`d3.layout.force()`) to position nodes, applying gravity, distance, and charge parameters. Node and link data come from a local `graph.json` file, rendered as SVG elements. Users can click and drag nodes using `force.drag`, with positions updated on each tick of the simulation.

HHARSHA BUDDANA

89% match

Loading thumbnail…

Fork of Social Network

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.

Kkalyanikotha

89% match

Loading thumbnail…

Fork of Network graph of Social Connections

This example visualizes a small social network as an interactive force-directed graph, displaying seven named individuals and the connections between them. Nodes are rendered as cyan circles with maroon outlines, while green links represent relationships, with thicker lines indicating stronger ties based on a weight value from the JSON data. The graph uses the older `d3.layout.force` API from d3.v2, loading data from `graphFile.json` via `d3.json`. Users can click and drag nodes to reposition them, with the simulation updating positions on each tick. The visualization is built with SVG within a React framework.

MManideepChakilam

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

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

88% match