Skip to main content
SimilarExport ZIP
100%

Network Graph

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

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.

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…

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
95% match
Loading thumbnail…

Network Graph

This example shows a social network graph of friends, with nodes representing people and directed links showing relationships. The graph is rendered as SVG, and users can drag and hover over nodes to interact with the visualization. The code uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position the nodes, while data is loaded from a local `graph.json` file.

SSharankumar02
94% match
Loading thumbnail…

Network Graph

This example visualizes a social network as an interactive force-directed graph using D3.js. The SVG renders circular nodes labeled with person names and blue directed links with arrowheads, showing friendship connections weighted by a numeric value. The layout relies on `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position the nodes. Nodes are draggable via `d3.drag`, and hovering highlights a node by adding a CSS class. Data comes from the local `graph.json` file.

Ssuryavamsi00024
93% 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
93% match
Loading thumbnail…

Network Graph

This example visualizes a social network as a force-directed graph, displaying ten people as nodes connected by lines that represent friendships. Nodes are rendered as large light-green circles with names, and each link includes an arrow marker indicating direction. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, and supports dragging via `d3.drag`. Data comes from a local `graph.json` file, and the visualization is built with D3 v6, rendering entirely in SVG.

NNagateja99
93% 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
93% match
Loading thumbnail…

Network Graph

This social network graph displays a set of named individuals and their “Friend with” connections. The visualization uses D3's `forceSimulation` API, combining `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position the circular nodes. Rendered with SVG, nodes are draggable and turn green on hover; links use arrow markers. Node and link data are loaded from a local `graph.json` file.

UUVarshaReddy
93% 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
92% match