Network

100%

✓ Published0🌍 Public

Last edited Sep 24, 2023

Created on Sep 24, 2023

Forked from Fork of Fork of ICE8 - Social Network Graph

This network diagram visualizes friendship relationships among eight people, with red circular nodes and labeled connections showing who is linked to whom. The layout uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes dynamically. Users can drag nodes to rearrange the network, with hover effects highlighting nodes. Data comes from a JSON file containing nodes and link objects, rendered as SVG elements with arrow markers on edges.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

network

This example visualizes a social network as a force-directed graph, showing eight people and their friend relationships with links labeled by relationship type. Nodes are rendered as grey circles with names, and lines with arrowheads indicate directed connections based on a JSON data file. The graph uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, while drag interactions let viewers move nodes. Hovering highlights nodes with a green stroke via CSS class toggling.

BBala Sai Krishna

91% 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

90% match

Loading thumbnail…

Network Graph

This network graph visualizes friend relationships among eight individuals, with each yellow node representing a person and directed links showing connections labeled by type. The code uses d3.forceSimulation with link, charge, collision, and center forces to position nodes, and d3.drag enables interactive node movement. Mouse hover highlights nodes with a green stroke via CSS classes. Data comes from an external JSON file containing node and link arrays, rendered as SVG with markers on connecting lines.

SSRI RAM REDDY KOTERU

90% match

Loading thumbnail…

SocialNetwork

A force-directed network diagram visualizes friendship ties among seven people, with nodes labeled by name and links styled as green lines with arrowheads to indicate direction. The graph uses `d3.forceSimulation` with link distance, charge, collision, and centering forces to position nodes, which are rendered as purple-stroked circles with bold text labels. Users can drag nodes to rearrange the layout, and hovering highlights a node with a cyan outline. Data comes from a JSON file containing nodes and links with relationship and value attributes, rendered as SVG.

Ssugunagar

89% match

Loading thumbnail…

Social Network Graph

This social network graph visualizes friendship connections among eight named individuals, with nodes arranged through a force-directed layout and directed edges indicating relationship direction. Built with D3 v6, the visualization uses `d3.forceSimulation` with link, charge, and collision forces to position overlapping nodes, while each person appears as a red circle with an ID label and arrowed lines marking connections. Interaction includes dragging nodes via `d3.drag` and hover effects that highlight a node with a green stroke. Data comes from a local JSON file containing node groups and repeated link entries, rendered as SVG elements with markers for arrowheads.

GGabriel Guimaraẽs de Almeida

89% match

Loading thumbnail…

Network Graph

A social network graph displays seven individuals connected by friendship links, with each node labeled by name and rendered as a large green circle. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCollide to position nodes, while SVG circles and lines represent the network. Nodes are draggable and highlight on hover, with the data loaded from a local graph.json file containing node and link objects.

Aaniteshterala2000

89% 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 network graph visualizes friendships among eight individuals, with nodes representing people and directed links showing the relationship between a source and target. The data comes from a local `data.json` file, and the layout is computed using `d3.forceSimulation` with forces for link distance, charge, collision, and centering. Rendered as SVG, nodes are draggable via `d3.drag`, and hovering highlights nodes with a color change. Links include arrow markers and vary in stroke style, while node labels display each person’s name.

Vvegurusaiprathyusha

89% match