Fork of Fork of Social network

100%

Fork of Fork of Social network

✓ Published0🌍 Public

Last edited Mar 28, 2023

Created on Mar 28, 2023

Forked from Fork of Social network by Praneeth

This visualization maps a social network of ten people, using nodes and directed links to show “Friend with” relationships. The code uses `d3.forceSimulation` with forces for link distance, charge, collision, and centering, rendering the SVG with circles and text labels. A custom drag interaction allows nodes to be repositioned. The data is loaded from a JSON file, and marker-end arrows indicate link direction. Hover styling highlights nodes via a CSS class toggled in mouseover and mouseout events.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Social network by Praneeth

This social network visualization displays ten individuals as circular nodes connected by lines to represent friendship links, with the data read from `data.json`. Each node is labeled with a person's name and rendered as a 75-pixel-radius circle, while links use arrow markers to indicate directed relationships. The network layout is computed using several force-directed physics simulations from D3 version 6, including `d3.forceSimulation` for the overall physics, `d3.forceLink` for link-based attraction, `d3.forceManyBody` for repulsion between nodes, and `d3.forceCollide` to prevent overlap. Nodes are draggable, and hovering highlights the selected node with a thicker stroke via mouseover and mouseout event handlers.

PPran6728

91% match

Loading thumbnail…

Fork of Network Graph

A fork of the D3 network graph example visualizes a social network of ten people, with circular nodes representing individuals and directed links showing friendship relationships. The graph uses a force-directed layout via `d3.forceSimulation` with forces for link distance, charge repulsion, collision detection, and centering. Nodes are draggable, and hovering highlights them. Data is loaded from a JSON file containing nodes and links with relationship metadata. The visualization is rendered as an SVG with green circles, red labels, and blue arrows, using D3 v6.

BBhavanaGIrni

90% match

Loading thumbnail…

Fork of Fork of Social Network Graph - ICE-8

This example visualizes a social network as a node-link diagram, with ten people connected by twelve friendship links. Circles represent each person, with their name displayed as a text label, and arrows on the connecting lines indicate the direction of the relationship. The network is laid out using D3’s `forceSimulation` with link, charge, and collision forces, and users can drag nodes to explore the connections. The SVG rendering uses the `d3.js` v6 library, and the data is loaded from a JSON file containing node and link attributes like person names and relationship types.

GGvl Naga Saikiran

89% match

Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This visualization shows a social network graph of ten individuals connected by friendship links. Each node is rendered as a circle with a person’s name, and directional arrows on the connecting lines indicate the relationship’s source and target. The layout is computed using `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and a center force. Nodes are draggable via `d3.drag`, with hover effects toggling a CSS class. Data comes from a local `data.json` file, and the SVG is rendered with D3 v6.

Bbhanuprasadk19

88% match

Loading thumbnail…

Fork of Fork of Fork of Social Network Graph - ICE-8

This interactive social network graph visualizes friendship connections among ten individuals, with nodes representing people and directed links showing their relationships. The D3.js v6 visualization uses a physics-based force simulation, combining `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` forces to position nodes with 75-pixel radius circles. Users can drag nodes to explore the network, with hover effects highlighting connections. The SVG rendering displays node labels in orange text, with the data loaded from a JSON file containing relationship weights and person identifiers.

GGvl Naga Saikiran

88% match

Loading thumbnail…

Fork of SOCIAL NETWORK

A force-directed network graph displays ten named nodes and nine weighted links, using red edges and blue circles with lime text. The visualization loads node and link data from a local `network.json` file, then applies a `d3.layout.force` simulation with gravity, charge, and distance parameters. SVG renders circles and lines, while node labels appear as text elements; user interaction enables drag-and-drop via `force.drag`. Link stroke widths scale by `Math.sqrt(d.weight)`, and the running simulation updates positions on each tick event.

VVineela Reddy

88% match

Loading thumbnail…

Fork of Social Network Graph

This interactive network graph visualizes a social network of 10 individuals, mapping friend connections as links between circular nodes. Built with D3 v7 and rendered as SVG, the visualization uses a force-directed layout—though the code shown also includes a click-to-explore prototype where clicking a node swaps the view to a bar chart of related values, with a button to return. Node positions are computed dynamically, and link width encodes relationship strength via the `value` field. The graph is interactive, allowing users to click nodes and explore connections. The single cyan color scale keeps the visual minimal while focusing on network topology.

Hhelen azad

88% match

Loading thumbnail…

Fork of Social Network Graph - ICE-8

This example shows a small social network of ten people connected by friendship links, with each person displayed as a labeled circle. Nodes and links are rendered as SVG elements and positioned using d3.forceSimulation, which applies link, charge, collision, and center forces to create a stable layout. The data is loaded from data.json, and each link includes a relationship label and a value. The visualization supports dragging nodes to explore the network and highlights nodes on hover. The code uses d3.forceLink, d3.forceManyBody, d3.forceCollide, and d3.forceCenter.

GGvl Naga Saikiran

88% match