Fork of Social Network Graph --> ICE-8

100%

Fork of Social Network Graph --> ICE-8

✓ Published0🌍 Public

Last edited Jul 27, 2023

Created on Jul 27, 2023

Forked from Social Network Graph --> ICE-8

The visualization displays a social network graph where orange circular nodes represent entities like "Pet Controller" and "Owner," connected by red, arrowed lines. It uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position nodes, while `d3.drag` enables interactive movement. The SVG renders from `data.json`, with nodes labeled via `text` and links styled with `marker-end` arrows, highlighted on hover using CSS classes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This social network graph visualizes connections between individuals, with nodes representing people and links indicating friendships. The node labels show the person's name, and each link uses a directional arrow to show the relationship flow, with the line weight reflecting the strength of the connection. The visualization uses D3 v6 with `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to position nodes in a force-directed layout, reading data from a JSON file. Nodes are rendered as cyan circles with blue strokes, and users can drag them to rearrange the layout.

SSaiSreya1

92% match

Loading thumbnail…

Fork of ICE8 - Social Network Graph

This network graph visualizes a personal social network, showing relationships between eight individuals as red, arrowed links connecting large, light-blue circular nodes. Node labels are displayed within each circle. The graph is constructed using a `d3.forceSimulation` engine with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to determine node positions, and nodes are rendered as SVG circles. The visualization is interactive, allowing users to drag nodes, with hover effects highlighting the selected circle.

Bbhargavarathod

90% match

Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This example visualizes a social network as a force-directed graph, showing friendships between ten people with labeled nodes and directional links. The layout is computed using `d3.forceSimulation` with link, charge, collision, and center forces, while nodes are rendered as large cyan circles with SVG text labels. Links are drawn as lines with arrow markers to indicate direction, and nodes are draggable via D3’s drag behavior, with a hover effect that thickens the node border. The code loads data from a JSON file and uses SVG for all rendering.

Rradhadevarapu

90% match

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

This example visualizes a social network as a force-directed graph, with red circular nodes representing individuals and black lines indicating connections such as “family with” or “friend with” relationships. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes dynamically. Dragging is enabled via `d3.drag`, and hovering highlights nodes using a CSS class. Data is loaded from a JSON file, and the graph is rendered as SVG elements (`<circle>`, `<line>`, `<text>`), with marker arrows defined in `<defs>`.

PPriyanka7002

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

90% match

Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This example visualizes a social network as a directed graph, showing how individuals are connected through friendship links. Nodes represent people with a consistent cyan color and circle shape, while lines with arrow markers depict the direction of each friendship relationship. The graph uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes, with drag interactions enabled. Data comes from a local `data.json` file containing nodes and links with relationship attributes, and hover states are styled via CSS classes.

Ppreddythandra

90% match

Loading thumbnail…

Fork of Social Network Graph ICE-8

This interactive social network graph visualizes friendships between individuals. It presents a static force-directed layout where each person is a large orange node, and lines with directional markers connect friends. The size of the node is uniform, while the connection strength, represented by `value`, influences the simulation. The graph uses D3's `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position the nodes. User interaction is enabled through `d3.drag`, allowing nodes to be repositioned. Hovering over a node triggers a CSS class change via `classed`, highlighting it with a gray stroke. The data is loaded from a local `data.json` file.

Ssnehareddygurram

90% match

Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This example displays a small social network of four interconnected people, rendered as a force-directed graph in two separate SVG views. The code uses D3 v6’s `d3.forceSimulation` with link, charge, collision, and centering forces to position the nodes, which are drawn as large red circles with labels. Each node can be dragged interactively, and hovering changes its stroke width. The graph is loaded from a local `data.json` file, with every node and link redrawn on each simulation tick.

GGvl Naga Saikiran

90% match