Fork of papa - Social Network Graph

100%

Fork of papa - Social Network Graph

✓ Published0🌍 Public

Last edited Apr 5, 2022

Created on Apr 5, 2022

A social network graph displays eight people as purple circular nodes connected by directed lines with arrowheads. The visualization uses d3.forceSimulation with link, charge, collision, and center forces to position nodes, while forceLink manages the connections. Users can drag nodes to rearrange the layout via d3.drag. The data.json file provides the nodes and links with relationship labels and strength values, with link thickness not directly reflecting the value attribute. Nodes highlight with a green stroke on mouseover, and labels are rendered as SVG text elements.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

papa - Social Network Graph

This interactive social network graph visualizes friendship connections between eight individuals, with nodes representing people and directed edges showing relationships. The visualization employs a D3.js force-directed layout using `d3.forceSimulation` with link, charge, collision, and center forces. Each circular node is rendered in SVG with its label displayed, and users can drag nodes to reposition them. Hovering highlights nodes with a green stroke via CSS classes. The data comes from a JSON file containing node identifiers and link relationship values, with results drawn as SVG elements updated on each simulation tick.

Bbhargavarathod

89% match

Loading thumbnail…

Fork of fork

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.

TTekmal-Bhavana

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

85% match

Loading thumbnail…

Fork of Graph

This interactive network graph visualizes a small social network of eight people, with node size representing the group and arrows indicating friendship connections. Built with D3 v6, the visualization uses the `d3.forceSimulation` API to apply force-directed layout, combining link, many-body, collision, and center forces. Users can drag nodes, which triggers the simulation's restart and target alpha adjustments. Node highlighting occurs on mouseover via the `classed` method, while SVG markers define arrowheads. The graph reads from a JSON file and renders entirely as an SVG, with a skyblue fill for all nodes.

Nnsatyaprakash22

85% match

Loading thumbnail…

Fork of Social Network Graph

The visualization displays a social network graph where purple nodes represent people, connected by blue arrows indicating friendship relationships. The network uses a force-directed layout powered by d3.forceSimulation, with link forces, charge forces, collision detection, and centering. Nodes are rendered as SVG circles with labels, and can be dragged interactively. Arrow markers are defined in SVG defs, while node highlighting on hover uses CSS classes. The graph loads from a JSON data file containing explicit source and target person names.

Rradhadevarapu

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

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

85% match

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

A social network graph shows seven people as red circles connected by directed, arrowed lines representing "Friend with" relationships. The layout is computed dynamically using `d3.forceSimulation` with link, charge, collision, and center forces. Nodes are draggable, and hovering thickens a node's border via CSS class changes. The SVG rendering uses data from a local `data.json` file, with node labels displayed directly on the circles.

PPriyanka7002

85% match