Fork of ICE-8 (Social Network Graph)

100%

Fork of ICE-8 (Social Network Graph)

✓ Published0🌍 Public

Last edited Oct 16, 2023

Created on Oct 16, 2023

Forked from ICE-8 (Social Network Graph)

This example shows a small social network of named individuals and brands, with green curved links connecting the nodes. Node size and color intensity reflect the number of connections each node has. The graph uses `d3.forceSimulation` with link, charge, and centering forces, and renders as SVG. Links are drawn as curved paths using a quadratic arc formula. Nodes are draggable via `d3.drag`, and labels are positioned beside each circle.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-8 (Social Network Graph)

This interactive network graph visualizes a small social network of nine individuals, with green links showing connections and node size and color indicating degree centrality. The force-directed layout, driven by d3.forceSimulation with link, center, and many-body forces, positions nodes while the drag interaction allows users to manually reposition them. Implemented in D3 v5 with SVG rendering, the example uses custom link paths with quadratic Bézier curves and node labels via standard text elements.

Kkollirohit2000

91% match

Loading thumbnail…

Fork of ICE-8 Social Network Graph

This fork of ICE-8 renders a social network as a force-directed graph in SVG. It shows ten named nodes connected by green links, with edge thickness proportional to each link's weight. The visualization uses the D3 v2 `d3.layout.force` API for simulation and dragging, and loads node and link data from an external `network.json` file. Node circles and labels are colored via CSS classes, while link positions update on each simulation tick.

Ffouzanuddin

91% 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 ICE8 - Social Network Graph

This social network graph visualizes friend connections between named individuals in a small dataset. Interactive nodes are rendered as labeled circles with directed links showing relationships. The visualization uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes. Drag-and-drop functionality and hover highlighting are implemented via d3.drag and mouseover/mouseout events. The SVG output includes marker elements for directional arrows and text labels for node identification.

MMgk1255

90% match

Loading thumbnail…

Fork of ICE8 - Social Network Graph

This example visualizes a small social network graph, showing eight people connected by friendship links and rendered as yellow circles with labels. A force-directed layout using `d3.forceSimulation` positions nodes, with `d3.forceLink` defining edges based on a JSON data file containing source, target, and relationship attributes. SVG elements create nodes and links, while drag interaction via `d3.drag` lets viewers reposition nodes, and mouseover events highlight nodes with a green stroke.

Yyaswanthsen

90% match

Loading thumbnail…

Fork of ICE8 - Social Network Graph

This example visualizes a small social network of eight people and their friendship connections, using a force-directed graph layout. Node size is uniform, and all links are styled identically, though the underlying data includes a relationship type and a weight value. The visualization is rendered as an SVG using D3 v6, with `d3.forceSimulation` handling the layout physics, including link distance, charge, collision, and centering forces. Nodes are draggable, and hovering highlights a node with a green stroke. Data is loaded from an external JSON file.

Tttummala17

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