Skip to main content
SimilarExport ZIP
100%

Fork of Social Network Graph ICE-8

✓ Published1🌍 Public
PPrathyusha0304
Last edited Apr 4, 2022
Created on Apr 4, 2022

A force-directed network graph of a small social circle, with seven people (such as Prathyusha and Vineela) as black nodes connected by green edges labeled with relationship types like "Friend with." Node size encodes the group value of 5, and edges are weighted by a numeric value. Built with D3 v6 (d3.forceSimulation, d3.forceManyBody, d3.forceCollide), the SVG visualization supports interactive drag-and-drop repositioning. Node highlighting occurs on mouseover via the nodeHover class, with styling defined in an external CSS file.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

A social network graph shows seven people as red circles connected by directed, arrowed lines representing "Friend with" relationships. The layout is computed dynamically using `d3.forceSimulation` with link, charge, collision, and center forces. Nodes are draggable, and hovering thickens a node's border via CSS class changes. The SVG rendering uses data from a local `data.json` file, with node labels displayed directly on the circles.

PPriyanka7002
90% 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
89% 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
89% match
Loading thumbnail…

Fork of Social Network ICE 8 11580431

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.

Vviswak12
89% match
Loading thumbnail…

Fork of Social Network Graph ICE-8

This graph visualizes a small social network where nodes represent people and links show friendship relationships. Built with D3.js and React, it uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes dynamically. The SVG rendering includes cyan circles with green arrow markers on links, and supports drag interactions plus hover highlighting via the `nodeHover` CSS class. Data comes from an external `data.json` file containing node groups and link relationship attributes.

Ssathwikrajidi
88% match
Loading thumbnail…

Fork of Social Network Graph - ICE-8

This example shows a small social network of ten people connected by friendship links, with each person displayed as a labeled circle. Nodes and links are rendered as SVG elements and positioned using d3.forceSimulation, which applies link, charge, collision, and center forces to create a stable layout. The data is loaded from data.json, and each link includes a relationship label and a value. The visualization supports dragging nodes to explore the network and highlights nodes on hover. The code uses d3.forceLink, d3.forceManyBody, d3.forceCollide, and d3.forceCenter.

GGvl Naga Saikiran
88% 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
88% match
Loading thumbnail…

Fork of Social Network Graph ICE-8

This static SVG network graph visualizes friendships between eight individuals, with nodes positioned by a force-directed simulation and edges representing "Friend with" relationships. The interactive visualization uses d3.forceSimulation with link, many-body charge, collision, and center forces to layout the graph. Nodes are draggable, and hovering highlights them with a green stroke. The data is loaded from a JSON file, and the graph is rendered using D3 v6 with a fixed 960 by 600 pixel viewBox, using circles and lines.

NNaimisha-M
88% match