Fork of Fork of Social Network

100%

Fork of Fork of Social Network

✓ Published0🌍 Public

Last edited Apr 6, 2023

Created on Apr 6, 2023

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.

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_graph_ICE-8

This fork of the Social_Network_graph_ICE-8 example displays a small social network of nine named people, grouped into clusters, with eight weighted connections between them. The visualization uses D3 v4’s force layout to position nodes and links, rendering them as SVG circles and lines. Node labels appear in red text, while circles have blue fills and strokes. The code loads data from a JSON file, applies a force-directed simulation with gravity, charge, and distance parameters, and supports dragging nodes via `force.drag`. Link thickness reflects the numeric weight of each connection.

GGvl Naga Saikiran

90% 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 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 ICE-8: Social Network

This example displays a small social network of six named individuals organized into three groups, with weighted links connecting them. It uses a force-directed layout created with `d3.layout.force` (from D3 v4), rendering nodes as blue circles and links as black lines whose stroke-width reflects each connection’s weight. Node labels appear in red text, and the graph is drawn as an SVG element sized 950 by 500 pixels. The data comes from a local `data.json` file containing nodes and links with weight attributes.

MManohar Kowthavarapu

89% match

Loading thumbnail…

Fork of Social_Network_graph_ICE-8

This example displays a small social network of nine named individuals grouped into five categories, with weighted links connecting them. It uses the D3.js library, specifically `d3.layout.force`, to simulate the network layout, rendering nodes as blue circles with red labels and edges as black lines whose thickness varies with link weight. The visualization is drawn as an SVG element and loads data from a local JSON file, allowing nodes to be dragged interactively via `force.drag`.

Aadapavaishnavi12

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

88% match