Skip to main content
SimilarExport ZIP
100%

Social Network Graph Example

✓ Published0🌍 Public
Aakshayvenishetty1437
Last edited Jul 20, 2023
Created on Jul 20, 2023
Forked from Hello VizHub

A social network graph example visualizes five people (John, Alice, Bob, Eve, Cynthia) as blue circles connected by six friendship links as lines. Using D3 v6, the code employs `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while `d3.drag` enables interactive dragging. The SVG rendering updates node positions (`cx`, `cy`) and link coordinates on each simulation tick, with text labels showing names. This demonstrates loading D3 via UNPKG and importing local ES6 modules.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Social Network Graph with d3.js

This example displays a small social network of five people—John, Alice, Bob, Emily, and Michael—as a node-link diagram rendered in SVG. The graph shows connections between individuals as green links, with each person represented by a large light-green circle and a text label. The layout is computed using d3.forceSimulation with link, charge, collision, and centering forces, while d3.drag enables interactive repositioning of nodes. Hovering over a node triggers a class change to color it steelblue.

VVinay Vemuri
90% match
Loading thumbnail…

Social Network Graph

This visualization shows a small social network with five nodes (Alice, Bob, Charlie, Eve, and David) connected by friendship links. The graph is rendered as SVG elements styled with CSS, using D3.js v6’s `d3.forceSimulation` with link, charge, and center forces to position nodes dynamically. Each node displays a blue circle and a text label, while links appear as gray lines that update positions on every tick via the simulation’s tick event.

BBhavanaGIrni
90% 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
89% match
Loading thumbnail…

Network Graph

This example shows a social network graph of people connected by friendship links. It uses D3 v6’s `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position nodes, with drag and hover interactions. The SVG rendering reads node and link data from a local `graph.json` file, styling each person as a large light-green circle with a red label and blue directed edges that include arrow markers.

NNukaShravanKumar
89% match
Loading thumbnail…

Social Network Graph

A social network graph displays five people as circular nodes connected by five undirected edges, with labels identifying each person. The visualization uses D3 v5’s `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCenter` to position nodes and links dynamically. Hardcoded data defines the nodes and links, and the SVG container updates on each simulation tick to draw lines, circles, and text labels.

UUVarshaReddy
89% match
Loading thumbnail…

Social Network Graph in d3.js

This example visualizes a small social network with five people and their connections as a force-directed graph rendered in SVG. It loads node and link data from a JSON file, drawing each person as a green circle and each relationship as a gray line. The layout is computed dynamically using d3.forceSimulation, which applies forces for pairwise repulsion (d3.forceManyBody), edge-based attraction (d3.forceLink), and centering (d3.forceCenter). As the simulation runs, a ticked callback updates the positions of the circles and lines, letting the network settle into a readable arrangement.

Bbugfree55
89% match
Loading thumbnail…

Network Graph

This example displays a social network graph of individuals connected by friendship links. It uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, which are rendered as labeled circles and drawn with SVG. The data comes from a local graph.json file, and the visualization demonstrates drag interactions and hover highlighting, with lines styled in blue and arrow markers indicating link direction.

BBhavyaMammai
88% match
Loading thumbnail…

Network Graph

This example shows a social network graph of ten people connected by friendship links. Each person appears as a labeled circle, with nodes positioned by a force-directed layout and links drawn as lines with arrowheads. Users can drag nodes to rearrange the network. The code uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCollide` to handle physics, and D3's drag behavior for interaction. Data is loaded from a local JSON file containing nodes and links with relationship metadata, and the visualization is rendered as SVG with custom styling.

UUmarani Vemula
88% match