Fork of Social Network Graph

100%

Fork of Social Network Graph

✓ Published0🌍 Public

Last edited Mar 29, 2023

Created on Mar 29, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

89% match

Loading thumbnail…

Fork of Social Network Visualization

This visualization shows a small social network graph with seven named friends connected by blue weighted links and green circular nodes. Each node displays a person’s name in maroon, and the graph is interactive, allowing users to drag nodes around the SVG canvas. The implementation uses D3.js v4’s `d3.layout.force` with gravity, charge, and distance parameters to position nodes, while a separate D3 v2 script is also loaded. Node and link styling are handled via CSS classes, with link thickness determined by the `weight` value from the `network.json` data source.

Kkarumanchimanasa

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

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

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

87% match

Loading thumbnail…

Fork of Network Graph

This network graph visualizes a small social network of named individuals and their friendship connections, loaded from a `graph.json` file. It shows nodes as large light green circles with names, connected by blue directed lines, where link thickness indicates relationship value. Using the D3 v6 library, the layout is computed with `d3.forceSimulation`, combining forces for link distance, many-body repulsion, and collision avoidance. The SVG rendering includes interactive dragging, with node highlighting on hover.

Rrushithareddyy

87% match

Loading thumbnail…

Fork of Fork of Social network

This visualization maps a social network of ten people, using nodes and directed links to show “Friend with” relationships. The code uses `d3.forceSimulation` with forces for link distance, charge, collision, and centering, rendering the SVG with circles and text labels. A custom drag interaction allows nodes to be repositioned. The data is loaded from a JSON file, and marker-end arrows indicate link direction. Hover styling highlights nodes via a CSS class toggled in mouseover and mouseout events.

PPran6728

86% match