Tree hierarchy

100%

Tree hierarchy

✓ Published1🌍 Public

Last edited Apr 13, 2026

Created on Apr 13, 2026

This example visualizes a social network graph with six person nodes and seven friendship links using a force-directed layout. The D3.js force simulation (`d3.forceSimulation`) positions nodes in an SVG canvas, applying link, charge, and centering forces to arrange connections naturally. Each node is rendered as a colored circle with an adjacent text label, while lines represent relationships. Users can drag nodes via `d3.drag`, which temporarily fixes their positions during interaction, and the simulation updates positions on each tick event.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

network

This example visualizes a conceptual friendship network, showing seven people as circles connected by labeled links that represent relationships like "Close Friends" and "Project Partners." A force-directed layout simulation positions the nodes, repelling them apart while pulling connected nodes closer. The visualization is rendered as an SVG using D3.js v7, with the simulation and layout handled by `d3.forceSimulation` and its associated `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` APIs. Nodes are colored by group using `d3.scaleOrdinal` with `d3.schemeSet2`, and users can drag circles to interactively reposition the network.

Uumeshchandravegineti999@gmail.com

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

86% match

Loading thumbnail…

Network

This example shows a small friendship network of six people, with labeled nodes connected by gray links to indicate relationships. Using d3.forceSimulation, the code applies a link force for connection distance, a many-body charge force for repulsion, and a center force to anchor the graph. Nodes are rendered as skyblue circles in SVG, with drag interactions enabled via d3.drag to reposition them during the simulation.

Ppvvaishnavi93@gmail.com

86% match

Loading thumbnail…

Social Network Graph

This example visualizes a small social network as a node-link diagram. The network graph shows eight people (nodes) and their “Friend with” relationships (links), with the link thickness between "july" and "tanu" indicating a higher connection value. The layout is generated by a force simulation, using `d3.forceSimulation` with link, charge, collision, and center forces to position nodes. The graph is rendered as SVG, with nodes as circles and links as lines with arrow markers, and users can drag nodes to explore the network.

AArun Pratap

86% match

Loading thumbnail…

Social Network Graph

This interactive social network graph visualizes friendships among seven people using a force-directed layout. The D3.js visualization renders nodes as orange circles with name labels and directed arrows for edges, showing connections like David's links to Emma, James, Oliver, Sophia, and Liam. The graph uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes dynamically. Users can drag nodes to rearrange the network, with hover effects highlighting individual nodes. The example demonstrates D3 v6 imports via UNPKG, JSON data loading, and SVG rendering with mouse event handlers and drag behavior.

LLakshmanRangisetti

85% match

Loading thumbnail…

Network Graph

This example shows a social network graph of ten people connected by friendship links, with nodes labeled by name and sized uniformly. It uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position the nodes, while SVG circles and text render each person. Links are drawn as blue lines with arrow markers, and the graph is fully interactive—nodes can be dragged via d3.drag, and hovering highlights them with a black border. The data comes from a JSON file specifying relationships and node groups.

Vvineelaramulapalli32

85% match

Loading thumbnail…

Social Network Graph

This example visualizes a small social network of eight people and their friendship connections. Users can drag nodes around, with hover effects highlighting nodes in red. The graph uses D3 version 6’s `d3.forceSimulation` with force-link, force-many-body, force-collide, and force-center to position nodes and links, rendered as SVG circles and lines. Data comes from a local `data.json` file, and the code implements drag behavior and marker arrowheads for the directed edges.

Nnsatyaprakash22

84% match

Loading thumbnail…

Social Network

A force-directed graph displays a social network of six people and five weighted connections, with nodes as orange circles and links as gray lines. Built using D3 v4, the visualization loads node and link data from a local JSON file and uses the `d3.layout.force()` API to simulate physical forces that position the nodes. Dragging is enabled via the force simulation's `drag` method, and each node includes a text label showing the person's name, with link thickness scaled by the `weight` value.

Ddheeraj1509

84% match