Fork of fork

100%

✓ Published0🌍 Public

Last edited Apr 12, 2023

Created on Apr 12, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

90% 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 Network graph of social connection

This network graph visualizes social connections among nine named people, with nodes positioned by a force-directed layout and links indicating relationships. The code loads data from a JSON file and uses d3.layout.force with gravity, distance, and charge parameters to simulate node placement. Node circles are green with maroon strokes, while link thickness varies with the weight value from the data. Text labels display each person’s name, and dragging is enabled via force.drag. The visualization renders in SVG on an HTML canvas using D3 v4.

NNaveed945

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

89% match

Loading thumbnail…

Fork of Network Graph

A fork of the D3 network graph example visualizes a social network of ten people, with circular nodes representing individuals and directed links showing friendship relationships. The graph uses a force-directed layout via `d3.forceSimulation` with forces for link distance, charge repulsion, collision detection, and centering. Nodes are draggable, and hovering highlights them. Data is loaded from a JSON file containing nodes and links with relationship metadata. The visualization is rendered as an SVG with green circles, red labels, and blue arrows, using D3 v6.

BBhavanaGIrni

88% match

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

88% match