papa - Social Network Graph

100%

papa - Social Network Graph

✓ Published10🌍 Public

Last edited Apr 5, 2022

Created on Apr 5, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of papa - Social Network Graph

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.

Llikith1266

89% match

Loading thumbnail…

Social Network Graph

This social network graph visualizes friendship connections among eight named individuals, with nodes arranged through a force-directed layout and directed edges indicating relationship direction. Built with D3 v6, the visualization uses `d3.forceSimulation` with link, charge, and collision forces to position overlapping nodes, while each person appears as a red circle with an ID label and arrowed lines marking connections. Interaction includes dragging nodes via `d3.drag` and hover effects that highlight a node with a green stroke. Data comes from a local JSON file containing node groups and repeated link entries, rendered as SVG elements with markers for arrowheads.

GGabriel Guimaraẽs de Almeida

84% match

Loading thumbnail…

Fork of papa - Social Network Graph

This example demonstrates an interactive social network graph built with D3.js v7, rendered as SVG. It models a network of university friends and professors, where a central "University" node connects to individual people (e.g., Deepika, Mohan, Rahul) and academic majors (e.g., Chemical, Civil, Computer). The visualization uses a force-directed simulation to position nodes, with red for the central hub and blue for peripheral nodes, and includes drag-and-drop interactivity for node manipulation. Buttons for adding or removing major nodes are also present, though not fully functional in the current implementation.

Hhelen azad

83% match

Loading thumbnail…

Social Network Graph

This social network graph visualizes the connections among eight people, with nodes linked by lines representing friendships. The network uses a force-directed layout via `d3.forceSimulation`, which combines link, many-body, collision, and centering forces to arrange nodes dynamically. Nodes are rendered as green circles with labels, and edges include arrow markers to show direction. The graph is interactive, allowing nodes to be dragged via `d3.drag`, and hovering highlights a node with a green stroke. Data comes from a local JSON file containing node and link definitions.

Ggeethanjalikotaru

82% match

Loading thumbnail…

Social Network Graph

This social network graph visualizes friendships between eight individuals, with nodes representing people and edges depicting their connections. The graph uses a force-directed layout computed by `d3.forceSimulation`, with edges rendered as SVG lines with arrowhead markers. Node labels appear directly on the gray circles, and hovering highlights the selected node. The data comes from a JSON file containing nodes and links with relationship types and weights.

Bbindusreeja

82% match

Loading thumbnail…

Social Network Graph

This social network graph visualizes friendships among eight people, with green circular nodes labeled by name and connected by thick black directed edges with arrowheads. The layout uses a force-directed simulation (`d3.forceSimulation`) with link, charge, collision, and centering forces. Nodes are draggable via D3’s drag behavior, and hovering highlights a node’s border. Data comes from a local `data.json` file containing node IDs and link relationships. The visualization is rendered as SVG using D3 v6, with all nodes sharing a single group color.

MmNamratha25

82% match

Loading thumbnail…

Social Network Graph

This social network graph displays eight individuals connected through friendship links, with each node labeled by name and visualized as a green circle. The network structure is computed using `d3.forceSimulation` with force-based layout including link, charge, collision, and center forces, applied to data loaded from a JSON file. The SVG rendering includes drag-and-drop interaction via `d3.drag`, and hover effects highlight nodes by changing their stroke color. Marker arrows indicate link direction between source and target nodes.

Llikith1266

82% match

Loading thumbnail…

Social Network Graph

This interactive social network graph visualizes friend relationships among eight individuals using a force-directed layout. The visualization employs D3’s forceSimulation with link, charge, collision, and center forces to arrange nodes, while edges with arrow markers indicate directed friendships. Users can drag nodes, and hovering highlights connections through CSS class changes. The code loads data from a local JSON file and renders the network as SVG elements, including circles for people and labeled text, using D3 v6.

Ssuryavamsi00024

81% match