Network

100%

✓ Published1🌍 Public

Last edited Nov 9, 2025

Created on Nov 9, 2025

A social network graph displays six people grouped by category—Family, Friends, or Work—with colored nodes and labeled connections. The visualization uses a D3 force-directed layout via `d3.forceSimulation`, `forceLink`, and `forceManyBody` to position nodes and links dynamically. Node colors are mapped with a `d3.scaleOrdinal` against a hardcoded dataset of names and relationships. Interactions are minimal, with the simulation updating SVG circle and line positions on each tick.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

SocialNetwork

A force-directed network diagram visualizes friendship ties among seven people, with nodes labeled by name and links styled as green lines with arrowheads to indicate direction. The graph uses `d3.forceSimulation` with link distance, charge, collision, and centering forces to position nodes, which are rendered as purple-stroked circles with bold text labels. Users can drag nodes to rearrange the layout, and hovering highlights a node with a cyan outline. Data comes from a JSON file containing nodes and links with relationship and value attributes, rendered as SVG.

Ssugunagar

88% match

Loading thumbnail…

Network Graph

A social network graph displays seven individuals connected by friendship links, with each node labeled by name and rendered as a large green circle. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCollide to position nodes, while SVG circles and lines represent the network. Nodes are draggable and highlight on hover, with the data loaded from a local graph.json file containing node and link objects.

Aaniteshterala2000

88% match

Loading thumbnail…

Network Graph

A network graph shows social connections among ten individuals, with nodes representing people and lines indicating friend relationships. The graph uses a force-directed layout powered by d3.forceSimulation, with collision detection and charge forces to position the nodes. Nodes are rendered as circles with labels, and links include arrow markers. The visualization is built with D3 v6 and renders to SVG, reading data from a JSON file. Users can drag nodes to reposition them, and hovering over a node triggers a CSS class change for visual feedback.

MManideeprenikindi

88% match

Loading thumbnail…

Network Graph

This social network graph visualizes a small group of people as nodes with green circles and blue, arrow-tipped links representing friendships. The layout is computed using `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter`, while nodes are draggable via `d3.drag`. Friend connection strength is encoded by line thickness, based on the `value` field in the loaded `graph.json`. Hovering a node highlights it via CSS class changes, and all elements are rendered as SVG.

VVinay Vemuri

88% match

Loading thumbnail…

network

This example visualizes a social network as a force-directed graph, showing eight people and their friend relationships with links labeled by relationship type. Nodes are rendered as grey circles with names, and lines with arrowheads indicate directed connections based on a JSON data file. The graph uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, while drag interactions let viewers move nodes. Hovering highlights nodes with a green stroke via CSS class toggling.

BBala Sai Krishna

88% match

Loading thumbnail…

Network Graph

A social network graph visualizes friendships among ten people using a force-directed layout. Nodes are rendered as labeled circles, with links drawn as directed lines and arrow markers. The visualization loads data from a local JSON file and uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to position the elements. Users can drag nodes to rearrange the network, and hovering highlights them. The SVG output is styled with custom CSS.

Aaniteshterala2000

88% match

Loading thumbnail…

Social Network graph

A social network graph displays nine named individuals as nodes grouped by color-coded categories, with weighted links connecting them by relationships. The visualization uses a force-directed layout via `d3.layout.force` to position nodes, with link stroke-width scaled by the square root of the connection weight. Node circles are styled with blue fills and pink stroke, while purple links and text labels are rendered as SVG elements defined in CSS. Data comes from an external `graph.json` file containing node names, group assignments, and weighted edge pairs, and nodes support dragging through the force layout's drag behavior.

Aadapavaishnavi12

87% match

Loading thumbnail…

Network Graph

A social network graph visualizes friend connections between people, with each person as a circular node and their relationships as lines with arrow markers. The graph uses a force-directed layout via `d3.forceSimulation`, with `d3.forceLink` controlling link distances and `d3.forceManyBody` for repulsion between nodes. Node colors are uniform light green, and text labels display names. Users can drag nodes to reposition them, and hovering changes the node stroke. The data comes from a JSON file containing nodes and links, rendered as SVG elements.

Lleftymadi

87% match