Fork of ICE-8: Social Network

100%

Fork of ICE-8: Social Network

✓ Published0🌍 Public

Last edited Apr 14, 2023

Created on Apr 14, 2023

This example visualizes a small social network with six nodes and five weighted links, displaying names as labels and circle nodes colored green. The force-directed layout uses `d3.layout.force` from D3 v4, with gravity, charge, and distance parameters controlling node positioning, while link thickness reflects the `weight` attribute. Data is loaded from a local `data.json` file, and the SVG rendering includes drag interaction via `force.drag` and tick-based updates for link coordinates and node transforms.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

92% match

Loading thumbnail…

Fork of Fork of Social Network Graph ICE-8

This example shows a social network graph using a force-directed layout. A small set of person nodes are connected by directed links that represent friendships, with link thickness varying by edge value. The user can drag nodes to reposition them. The visualization is rendered with SVG and built using D3 v6, specifically `d3.forceSimulation` with link, charge, collision, and center forces, alongside `d3.drag` for interactivity. Node labels and link arrow markers are included, and data is loaded from an external JSON file.

Ssnehareddygurram

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

91% match

Loading thumbnail…

Fork of ICE8 network graph

This example visualizes a small directed network graph with seven nodes and six weighted links, using labeled circles to represent entities and lines to show connections. The graph is rendered as SVG and positioned through a force-directed layout, with link stroke widths reflecting each connection’s weight. It relies on the older `d3.layout.force` API from d3.v2 (loaded alongside d3.v4) to simulate physics, while node dragging is enabled via `force.drag`. The data comes from an embedded `graphFile.json` file, and styling uses CSS.

Ssaijahnaviappineni

90% match

Loading thumbnail…

Fork of ICE8 Social Network Graph d3

This example shows a social network of ten people, displayed as a force-directed graph where nodes are yellow circles and links are red lines. The graph uses d3.layout.force (the v3 API) to position nodes, with link stroke widths scaled by the `weight` attribute in the data. Node labels are drawn in blue text, and nodes are draggable via `force.drag`. The network.json file supplies the node names and link weights, and the visualization renders entirely in SVG on a plain HTML page.

Ssudhamshu24

90% match

Loading thumbnail…

Fork of Data visualization ICE-8 Social network

This example visualizes a social network as an interactive force-directed graph, showing friendships between named people. The SVG rendering uses D3 v6’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while draggable circles and text labels represent individuals. Links are drawn as red lines with arrow markers, and hovering highlights a node’s border. The data, loaded from `data.json`, specifies nodes and links with relationship types and values, with all links sharing a uniform blue fill and green stroke styling.

Vvamshisoletii

90% match

Loading thumbnail…

Fork of ICE-8: Social Network

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.

LLakshmiManjushaReddyYarreddu

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

90% match