Fork of Social Network graph

100%

Fork of Social Network graph

✓ Published0🌍 Public

Last edited Mar 30, 2023

Created on Mar 30, 2023

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Social Network graph

This example shows a social network graph with seven named nodes and six weighted links, rendered as an interactive SVG. Users can drag nodes, which then move according to a force-directed layout. The visualization uses `d3.layout.force` from D3 v4 to apply gravity, link distance, and charge parameters, and updates node positions via the `force.on("tick")` event. The graph data is loaded from a JSON file referencing nodes by name and links by array indices. Node circles and text are styled via CSS, with link stroke width proportional to link weight. The code also includes an unused reference to D3 v2.

VVenkata Sai Preetham

90% match

Loading thumbnail…

My social Network graph

This example visualizes a small social network as a force-directed graph, with seven people connected by weighted links. The SVG rendering uses D3 v4’s `d3.layout.force` to position nodes and edges, applying gravity, distance, and charge parameters. Nodes are draggable circles with name labels, and link thickness reflects the `weight` property from `graphFile.json`. The code also references D3 v2, though the primary layout comes from the v4 API.

KKiran3295

88% match

Loading thumbnail…

Fork of Fork of Social Network Graph ICE-8

This example shows a social network graph using a force-directed layout. A small set of person nodes are connected by directed links that represent friendships, with link thickness varying by edge value. The user can drag nodes to reposition them. The visualization is rendered with SVG and built using D3 v6, specifically `d3.forceSimulation` with link, charge, collision, and center forces, alongside `d3.drag` for interactivity. Node labels and link arrow markers are included, and data is loaded from an external JSON file.

Ssnehareddygurram

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

This is a fork of a social network graph that visualizes connections between nine named individuals using a force-directed layout. The visualization loads data from a `graph.json` file, which contains nodes grouped by category and weighted links between them, and displays it as red circles connected by black lines whose thickness corresponds to link weight. The graph uses the older `d3.layout.force` API to simulate node movement, with drag-and-drop interaction enabled via `force.drag`. The example is implemented in React and renders to SVG, with node labels shown as text next to each circle.

SSaiSree0122

88% match

Loading thumbnail…

Fork of ICE-8: Social Network

This example visualizes a small social network with six nodes and five weighted links, displaying names as labels and circle nodes colored green. The force-directed layout uses `d3.layout.force` from D3 v4, with gravity, charge, and distance parameters controlling node positioning, while link thickness reflects the `weight` attribute. Data is loaded from a local `data.json` file, and the SVG rendering includes drag interaction via `force.drag` and tick-based updates for link coordinates and node transforms.

SSrujana390

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

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

87% match