Fork of Social Network ICE 8

100%

Fork of Social Network ICE 8

✓ Published0🌍 Public

Last edited Oct 16, 2023

Created on Oct 16, 2023

This example shows a social network of eight people as a force-directed graph, with nodes representing individuals and links showing weighted connections between them. The visualization uses D3 v4’s `d3.layout.force` (from the `d3` module) to simulate physical forces like gravity, charge, and distance, positioning nodes dynamically. Circles are drawn as SVG elements, with text labels and blue link lines styled via CSS. Data comes from a local `data.json` file, loaded asynchronously with `json()`, and node dragging is enabled through the force layout’s drag behavior.

AI-generated description

Example code of basic network chart in d3

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Social Network ICE 8

A force-directed network diagram displays eight people grouped into four clusters, with nine weighted links connecting them. The visualization uses D3 v4's `d3.layout.force` to simulate node physics, applying gravity, charge, and distance parameters. Each node renders as a green circle with a black text label, while blue lines represent edges whose stroke-width is set from link weight data. Data loads from `data.json` via D3's `json` method. The SVG canvas measures 960 by 500 pixels, and nodes are draggable through the force layout's `drag` handler, with positions updated continuously on each tick event.

Mmohamed el haddadi

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

93% match

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

This example visualizes a small social network as a force-directed graph, showing eight people as red circular nodes and their “Friend with” relationships as directed, arrow-headed lines. Node labels display each person’s name. The layout is computed with d3.forceSimulation, combining d3.forceLink, d3.forceManyBody, d3.forceCollide, and d3.forceCenter to manage link distances, repulsion, collision, and centering. Users can drag nodes via d3.drag, and hovering triggers a focusNode/ blurNode interaction that changes the node stroke to green. Data is loaded from a JSON file using d3.json.

MM.Saleh Tibi

93% match

Loading thumbnail…

Fork of ICE - 8: Social Network Graph

This example visualizes a social network of seven people, using nodes and directed links to show friendship relationships. The graph layout is computed with `d3.forceSimulation`, applying link, charge, collision, and center forces to position nodes and edges dynamically. Dragging nodes is supported via `d3.drag`, and hovering highlights a node with a red stroke. The SVG rendering includes arrowheads on lines, with node labels displayed directly on each circle. The dataset is loaded from `data.json`, which specifies nodes and their pairwise links.

Ssnehareddygurram

92% match

Loading thumbnail…

Fork of ICE-8: Social Network

This visualization shows a small social network of six people, with colored circles representing individuals and orange lines linking them. A force-directed layout, created using `d3.layout.force` from the v2/v3 API, positions the nodes and edges. Node labels are appended as SVG text, while link thickness reflects each connection’s weight value from the JSON data. The graph is rendered as an SVG element, and nodes are draggable via `force.drag`, with positioning updated on each tick event.

Ssaivinay143

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

92% match

Loading thumbnail…

Fork of Fork of ICE8 - Social Network GraphTEST

This example visualizes a small social network of eight people and their friendship links, with each person represented as a red circle and lines connecting friends. The graph uses D3.js force simulation (`d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, `d3.forceCenter`) to arrange nodes and links dynamically. Nodes are draggable via `d3.drag`, and hovering changes their stroke color. The data comes from a JSON file containing node IDs and link relationships, rendered as SVG elements within a 960×600 viewport.

VVamsi Krishna

92% match

Loading thumbnail…

Social Network ICE 8

This example shows a small social network of eight named individuals organized into four groups, with weighted links connecting them. The visualization uses a force-directed layout to position nodes and links in an SVG. It is built with D3 v4, employing the `d3.layout.force` API to simulate physics, and renders circles and text labels for nodes, with lines for edges. The data comes from `data.json`, and the code explicitly sets gravity, charge, and distance parameters to control the layout. Link stroke widths and node fills are styled via CSS, though the stroke width does not actually reflect the link weight.

Hhossaphul

92% match