Skip to main content
SimilarExport ZIP
100%

Social Network

✓ Published0🌍 Public
HHarshithaAmbilpur
Last edited Jul 22, 2023
Created on Jul 22, 2023
Forked from Hello VizHub

The visualization displays a social network graph, mapping eight people and their friendships as nodes and connecting lines. It uses D3.js v6 to run a physics-based simulation, employing `d3.forceSimulation` with link, charge, and collision forces to position the nodes. The SVG renders pink links with arrow markers and interactive nodes that enlarge on hover and can be dragged, with data sourced from a local `network.json` file.

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

The visualization shows a social network graph of eight friends, mapping their connections with pink circular nodes and blue arrowed links. It represents who is friends with whom, with all individuals initially clustered at the center. The graph uses D3.js version 6's physics-based simulation system, combining `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position nodes. Users can drag any node to rearrange the network, and hovering highlights a node with a thicker stroke. The data comes from a JSON file containing node and link definitions.

Aavvarijayakrishna99@gmail.com
92% match
Loading thumbnail…

Social Network

The visualization displays a small social network of seven people, with weighted links indicating relationship strength. It uses a force-directed layout to position nodes, allowing users to click and drag them around the canvas. The graph is rendered as an SVG using D3.js, with brown strokes for links and silver circles with royal blue borders for nodes. Data comes from a local JSON file containing node names and link weights. The code relies on d3.layout.force() for the physics simulation, with node labels positioned to the right of each circle.

LLakshmipriya-kalapala
91% match
Loading thumbnail…

Network

This interactive network graph visualizes a small social network of six people and their connections. Nodes are orange circles with labels, and links are gray lines; hovering turns a node red and displays a tooltip. Users can drag nodes to rearrange the layout. The visualization uses the D3.js library, specifically the `d3.forceSimulation` API with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` for physics-based layout, alongside custom drag functions and SVG rendering.

Hharshithamiriyam@gmail.com
91% match
Loading thumbnail…

SocialNetwork Graph

A social network graph shows friendships among eight people, with arrows indicating the direction of each relationship and labels on nodes identifying each person. The visualization uses a force-directed layout via `d3.forceSimulation`, `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while `d3.drag` enables interactive movement. Data is loaded from a JSON file, and nodes are rendered as orange circles with SVG text labels; hovering highlights a node by increasing its stroke width. The code defines arrow markers in SVG `defs` and updates link positions on each simulation tick.

HHemanthh81
90% match
Loading thumbnail…

Social Network Graph

This social network graph visualizes the connections among eight people, with nodes linked by lines representing friendships. The network uses a force-directed layout via `d3.forceSimulation`, which combines link, many-body, collision, and centering forces to arrange nodes dynamically. Nodes are rendered as green circles with labels, and edges include arrow markers to show direction. The graph is interactive, allowing nodes to be dragged via `d3.drag`, and hovering highlights a node with a green stroke. Data comes from a local JSON file containing node and link definitions.

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

Social Network Graph

This social network graph displays eight individuals connected through friendship links, with each node labeled by name and visualized as a green circle. The network structure is computed using `d3.forceSimulation` with force-based layout including link, charge, collision, and center forces, applied to data loaded from a JSON file. The SVG rendering includes drag-and-drop interaction via `d3.drag`, and hover effects highlight nodes by changing their stroke color. Marker arrows indicate link direction between source and target nodes.

Llikith1266
90% match