Fork of ICE-8 Social Network Graph

100%

Fork of ICE-8 Social Network Graph

✓ Published0🌍 Public

Last edited Apr 5, 2022

Created on Apr 5, 2022

This fork of ICE-8 renders a social network as a force-directed graph in SVG. It shows ten named nodes connected by green links, with edge thickness proportional to each link's weight. The visualization uses the D3 v2 `d3.layout.force` API for simulation and dragging, and loads node and link data from an external `network.json` file. Node circles and labels are colored via CSS classes, while link positions update on each simulation tick.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Social Network ICE 8

This fork of a social network example uses D3.js v4 to render a small force-directed graph inside an SVG. The visualization displays eight named nodes and nine weighted links, with nodes colored green and labeled with their corresponding names from the embedded `data.json` file. The implementation relies on D3's force layout module to position the nodes, updating the SVG line and circle elements on each tick of the simulation. While the code imports from `d3.select`, `d3.layout`, and `d3.json`, the example adapts the basic network chart pattern from the D3 Graph Gallery.

QQin FaCai

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

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 ICE-8 (Social Network Graph)

This example shows a small social network of named individuals and brands, with green curved links connecting the nodes. Node size and color intensity reflect the number of connections each node has. The graph uses `d3.forceSimulation` with link, charge, and centering forces, and renders as SVG. Links are drawn as curved paths using a quadratic arc formula. Nodes are draggable via `d3.drag`, and labels are positioned beside each circle.

Yyoav95

91% match

Loading thumbnail…

Fork of ICE8 - Social Network Graph

This network graph visualizes a personal social network, showing relationships between eight individuals as red, arrowed links connecting large, light-blue circular nodes. Node labels are displayed within each circle. The graph is constructed using a `d3.forceSimulation` engine with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to determine node positions, and nodes are rendered as SVG circles. The visualization is interactive, allowing users to drag nodes, with hover effects highlighting the selected circle.

Bbhargavarathod

91% match