Fork of ICE-8: Social Network

100%

Fork of ICE-8: Social Network

✓ Published0🌍 Public

Last edited Apr 10, 2023

Created on Apr 10, 2023

This example visualizes a small social network of six people, with five connections between them, using a force-directed graph layout. In the visualization, blue circular nodes represent individuals and red lines with varying thickness indicate the strength of their relationships. The code loads the network data from a `data.json` file, then uses D3’s `d3.layout.force` to simulate the layout, with node dragging enabled and labels attached to each node. All graphical elements are drawn as SVG shapes, styled via CSS.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ICE-8: Social Network

This example shows a small social network of six people arranged as a force-directed graph. Nodes are drawn as blue circles with name labels, while orange links connect friends, with link thickness reflecting the friendship weight. The visualization uses the D3.js v4 library and its `d3.layout.force` API, loading the data from a local JSON file and rendering with SVG. The layout applies gravity, charge, and distance parameters to position the nodes, and the tick handler updates the node and link positions dynamically.

Rreddysushma994@gmail.com

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

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

92% match

Loading thumbnail…

Fork of Social_Network_graph_ICE-8

This example displays a small social network of nine named individuals grouped into five categories, with weighted links connecting them. It uses the D3.js library, specifically `d3.layout.force`, to simulate the network layout, rendering nodes as blue circles with red labels and edges as black lines whose thickness varies with link weight. The visualization is drawn as an SVG element and loads data from a local JSON file, allowing nodes to be dragged interactively via `force.drag`.

Aadapavaishnavi12

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

This force-directed network graph visualizes a small social network of nine people and their connections. The visualization uses D3.js (v4) to render SVG circles for individuals and lines for relationships, with line thickness indicating connection weight. The graph implements interactive dragging via the d3.layout.force API. Node labels appear in red text with blue circular markers. Data comes from graph.json, which defines nodes grouped by community and edges with assigned weights. The force layout algorithm positions nodes dynamically based on gravitational and charge parameters.

Mmanishcheruku

91% match

Loading thumbnail…

Fork of ICE-8: Social Network

This example displays a small social network of six named individuals organized into three groups, with weighted links connecting them. It uses a force-directed layout created with `d3.layout.force` (from D3 v4), rendering nodes as blue circles and links as black lines whose stroke-width reflects each connection’s weight. Node labels appear in red text, and the graph is drawn as an SVG element sized 950 by 500 pixels. The data comes from a local `data.json` file containing nodes and links with weight attributes.

MManohar Kowthavarapu

91% match

Loading thumbnail…

Fork of ICE8 - Social Network Graph

This graph visualizes a small social network of eight individuals and their friendship connections, with directed arrows indicating the relationships. Built with D3.js v6, the visualization employs a force-directed layout computed by `d3.forceSimulation`, combining link, many-body, collision, and center forces to position nodes. The SVG rendering uses circles for people, labels for names, and lines with markers for edges, with all nodes initially placed at the center. Data is loaded from a JSON file containing node and link arrays.

RRamakanth771

91% match