Skip to main content
SimilarExport ZIP
100%

Network Graph

✓ Published0🌍 Public
MmNamratha25
Last edited Jul 17, 2023
Created on Jul 10, 2023
Forked from Hello VizHub

This network graph visualizes a social network of ten people, using color-coded nodes and red links to show friendships. Built with D3 v6 and rendered as an SVG, the graph employs `d3.forceSimulation` with link, charge, and collision forces to position nodes. Links are drawn as lines with arrow markers, and data originates from a local `graph.json` file. Users can drag nodes, and hovering highlights them with a black stroke.

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 network graph visualizes a small social network of ten people and their friend relationships, with each node labeled by name and connected by directed links. The graph uses a force-directed layout via `d3.forceSimulation` with link, charge, collision, and centering forces, rendering nodes as green circles and links as blue lines with arrow markers. Node colors are assigned using `scaleOrdinal`, and nodes are draggable through `d3.drag`, with hover highlighting. Data comes from a local `graph.json` file, and the visualization is built with D3 v6 and SVG.

Ssrikkanth05
94% match
Loading thumbnail…

Network Graph

This network graph visualizes a social network of ten people and their friendships, with green circles representing individuals and blue directed arrows connecting friends. Loaded from a local `graph.json` file, the layout is computed using `d3.forceSimulation` with link, charge, collision, and center forces to position nodes. Nodes are draggable via `d3.drag`, and hovering highlights a node by changing its stroke color. The SVG rendering uses D3 v6, with markers defining arrowheads and labels displaying each person’s name.

HHarshiiiiiiiip
93% match
Loading thumbnail…

Network Graph

This network graph displays a social network of ten people connected by friendship links. The visualization uses a force-directed layout via `d3.forceSimulation` with link distance, charge, collision, and centering forces. Nodes are rendered as green circles with labels in an SVG, and links appear as blue lines with arrow markers. Each node is draggable, and hovering highlights the circle. Data comes from `graph.json`, loaded with `d3.json`. The code imports specific functions like `select`, `scaleOrdinal`, and `selectAll` from D3 v6.

VVenkat-Sumith-Thota
93% 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
93% match
Loading thumbnail…

Network Graph

This network graph visualizes a social network of ten individuals, using pink rectangles as nodes and brown, arrowed lines to depict friendships. The graph is rendered as an SVG and uses a force-directed layout via `d3.forceSimulation` with forces for links, charge, collision, and centering. Users can drag nodes, which triggers the simulation to restart. Data is loaded from a local `graph.json` file, and node highlighting occurs on mouseover via CSS class changes.

BBhavyaMammai
93% match
Loading thumbnail…

Social Network

This social network graph visualizes the friendships between ten people using a force-directed layout. Nodes represent individuals and links show their connections, with all nodes colored orange and link thickness indicating relationship strength. Built with D3 v6, the visualization uses `d3.forceSimulation` with link, many-body, collision, and center forces to position nodes. Users can drag nodes to rearrange the network. Data comes from the embedded `data.json` file, with nodes labeled directly and rendered as SVG circles and lines.

AAshrith Kudidhi
93% match
Loading thumbnail…

Network Graph

This network graph visualizes friendships among ten people, with nodes connected by directed, arrowed links and labeled with names. The graph uses D3.js v6’s `forceSimulation`, `forceLink`, `forceManyBody`, and `forceCollide` to position nodes and edges, while nodes are rendered as large SVG circles that can be dragged. Data comes from a JSON file containing node and link objects with relationship types. The visualization also sets a cyan background, uses light green for nodes, and highlights nodes on hover.

Ppardha1411
93% match
Loading thumbnail…

Network Graph

This network graph visualizes a social network of ten friends, with nodes representing people and edges depicting their friendship connections. The graph is rendered as a static SVG, but users can drag nodes to rearrange the layout. The visualization is built using D3.js v6, specifically leveraging the `d3.forceSimulation` API for the physics-based layout, along with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter`. Node colors are uniform, and edge thickness is not varied, though link data includes a `value` attribute. Data comes from the included `graph.json` file.

Bbogasamudramvamsikrishnareddy
92% match