ICE-8

100%

✓ Published0🌍 Public

Last edited Nov 2, 2025

Created on Nov 2, 2025

This example shows an interactive social network of ten people divided into five community groups and connected by weighted links. The visualization uses D3.js v7 with force-directed simulation to position nodes on an SVG canvas, while the `d3.scaleOrdinal` color scale maps each community group to a distinct color. Users can click and drag nodes to rearrange the network, and a custom tooltip displays additional information on hover, while a legend identifies the group colors.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8 : Social Network

This example shows a small social network of 12 people grouped into five communities, with weighted links between them. It uses D3 v4’s `d3.layout.force` simulation to position nodes and links in an SVG canvas, with drag interaction enabled via `force.drag`. Node circles are styled with a yellow stroke and pink fill, while link thickness reflects the `weight` value from the `graph.json` data. The rendering is entirely SVG-based, with static node labels and a simple title header, as implemented in the provided `index.html`.

IIndiraSiripurapu

91% match

Loading thumbnail…

ICE-8: Social Network

This example visualizes a social network as an interactive force-directed graph, showing connections among ten individuals grouped into four clusters. The SVG rendering uses D3 v4’s `d3.layout.force` (a predecessor to `d3.forceSimulation`) to simulate physical forces—gravity, charge, and link distance—that arrange nodes and edges dynamically. Node positions update on each “tick” event, while link stroke widths scale with the `weight` value from the `network.json` data. Users can drag and drop nodes via the force drag handler, with text labels and colored circles distinguishing each person.

RRebecca Moore

89% match

Loading thumbnail…

ICE-8

This example shows a network of nine people connected by weighted links, with each node labeled by name and grouped by color-coded circles. The visualization uses a force-directed layout to position the nodes and links dynamically. The code implements this with `d3.layout.force`, specifying gravity, distance, and charge parameters to control the simulation. Links are rendered as black lines with stroke width proportional to link weight, while nodes appear as blue circles with red text labels. The graph data comes from a local JSON file, and the SVG rendering updates positions on each tick event.

DDineshK2602

88% match

Loading thumbnail…

ICE8_Network

This example visualizes a small social network of six people grouped into three clusters, with links weighted by connection strength. A force-directed layout positions the nodes, and users can drag them to rearrange the structure. The visualization is built with D3 v4, using `d3.layout.force` for simulation, SVG circles for nodes, and lines for links whose stroke width scales with the square root of each edge weight. Node labels appear beside each circle, and the layout updates continuously during the simulation.

SSai Bhavana Akkineni

88% match

Loading thumbnail…

ICE-8: Social Network graph

This example shows a small social network of nine people, grouped into four clusters, with weighted links connecting them. The visualization uses a force-directed layout to position nodes and edges, which are rendered as SVG circles and lines. The code employs d3.layout.force, the v2/v4 D3 API, and force.drag to make nodes interactive. Node names appear as text labels, and link thickness reflects the weight value from the JSON data file.

PPrasanth Damarla

88% match

Loading thumbnail…

ICE-8 Social Network graph

This visualization displays a social network with nine people as nodes and eight weighted connections as links, rendered as an SVG using D3.js. It shows relationships between individuals, where line thickness corresponds to link weight. The graph uses the D3 v4 `d3.layout.force` API for physics-based layout with gravity, charge, and distance parameters, allowing nodes to be click-dragged. Node positions update during the force simulation’s tick events, while labels and styled circles mark each person. Data comes from an embedded graph.json file containing names, group assignments, and connection weights.

HHarshinireddyy19

88% match

Loading thumbnail…

ICE-8

This example shows an interactive force-directed network of ten people grouped into five clusters, with weighted links drawn as red lines and labeled circular nodes that users can drag. The graph layout is generated by d3.layout.force, while D3.js v4 renders the SVG scene and manages node dragging. The node names and link weights come from graph.json, and the visualization’s appearance is controlled through CSS, including stroke styles and text formatting.

Pprathyusha-reddy-arch

88% match

Loading thumbnail…

ICE-8: Social Network graph with D3.js

This example visualizes a small social network of six people, grouped into three clusters, with weighted links indicating connection strength. The graph uses a force-directed layout via `d3.layout.force` to position nodes, which are rendered as orange circles with blue outlines and labeled with purple text. Links appear as black lines whose stroke width reflects each link’s weight. Nodes are draggable, and the simulation updates positions continuously on each tick. Data comes from a local JSON file, and the visualization is drawn as SVG.

Mmanasanimmagadda13

88% match