Social Network graphic

100%

Social Network graphic

✓ Published0🌍 Public

Last edited Apr 13, 2023

Created on Apr 13, 2023

This social network graphic visualizes family relationships using a force-directed layout, with nodes representing individuals and links showing connections weighted by line thickness. The red circular nodes display names and support dragging, while blue links scale their stroke width based on relationship weight. Built with d3.v4 and the legacy d3.layout.force API, the visualization loads data from family.json and renders everything as SVG. The simulation applies gravity, charge, and distance parameters to position nodes dynamically.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Social Network

This social network visualization displays family relationships using a force-directed graph, with orange links connecting labeled nodes that represent individuals such as “husband,” “wife,” and “daughter’s son.” The code loads family data from a JSON file and uses `d3.layout.force` with gravity, charge, and distance parameters to position the nodes. Node circles are styled with a blue fill, and link thickness reflects each relationship’s weight. Text labels are placed beside each circle using SVG groups, and node dragging is enabled via `force.drag`.

Ppavankalyan1507

91% match

Loading thumbnail…

Family Network graph

This example visualizes a family network as a force-directed graph, with eight named nodes connected by weighted links that represent relationships. The code uses D3 v4’s `d3.layout.force` to compute node positions and render the structure as an SVG, drawing red links with stroke widths proportional to each link’s `weight` value. Node labels appear in orange text with blue circles, and interactive dragging is enabled via `force.drag`. Data is loaded from an external `data.json` file, which defines the nodes and their connection weights.

DDINESH SAI BOPPANA

86% match

Loading thumbnail…

Family Network graph

This example shows a family network graph, visualizing eight individuals as labeled nodes and their relationships as weighted links. The force-directed layout uses `d3.layout.force` from D3 v4 to position nodes and edges, with link thickness proportional to a weight value. Red links and orange text labels render in SVG, while node circles are filled blue. The data comes from a static JSON file, and the graph is interactive through `force.drag` for node repositioning.

DDINESH SAI BOPPANA

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

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

84% match

Loading thumbnail…

SOCIAL NETWORK

A social network diagram displays ten named people as blue circular nodes connected by red lines, with link thickness proportional to each connection’s weight. The force-directed layout, created with `d3.layout.force`, positions nodes using gravity, charge, and distance parameters while supporting drag interaction. Data comes from an external `network.json` file containing node names and weighted links. The visualization renders in SVG, with node labels styled in red and lime text, and red strokes on both circles and links.

VVineela Reddy

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

84% match

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

84% match