Fork of Social Network ICE 8 11580431

100%

Fork of Social Network ICE 8 11580431

✓ Published0🌍 Public

Last edited Apr 13, 2023

Created on Apr 13, 2023

This interactive force-directed network diagram visualizes a small social graph with seven named individuals and six weighted connections. Nodes are rendered as silver circles with yellow outlines, labeled with green text, while orange links connect friends. The visualization uses the d3.layout.force API for physics-based layout, enabling nodes to be clicked and dragged. Data comes from an embedded graph JSON file containing node names, group assignments, and edge weights, which influence link stroke thickness via a square-root scale.

AI-generated description

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

93% match

Loading thumbnail…

Fork of Social Network Graph_ICE8 _ A_K

This visualization shows a social network of eight people as an interactive node-link diagram, with orange circles representing individuals and labeled arrows showing friendship connections. The graph uses d3.forceSimulation with link, charge, collision, and center forces to position nodes, while d3.drag enables users to move nodes. Hovering highlights a node with a gray border. The data is loaded from a JSON file containing nodes with group assignments and links with relationship types and values, and the SVG renders markers on link endpoints to indicate direction.

Aamulyakannam

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 interactive social network graph visualizes a small, fictional group of people and their friendships. The visualization uses a physics-based simulation to arrange the nodes, placing every node with the same green color and size. The lines between the friends have arrows to denote direction, and a thicker line indicates a stronger connection. The graph is rendered as a Scalable Vector Graphic using the d3.forceSimulation API, which handles the layout and dragging. Data is loaded from a JSON file, with viewers able to click and drag nodes to rearrange the network.

SSANEEM MOHAMMAD

92% match

Loading thumbnail…

Fork of Social Network ICE 8

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.

Yyoav95

92% match

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

92% match

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

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

91% match