Fork of ICE8 - Social Network Graph

100%

Fork of ICE8 - Social Network Graph

✓ Published0🌍 Public

Last edited Apr 5, 2022

Created on Apr 5, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

Fork of Fork of Fork of ICE8 - Social Network Graph

This social network graph visualizes friendships among eight people using a force-directed layout with red circular nodes and labeled text. It uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes and edges. The D3 v6 code loads data from `data.json`, renders the graph as SVG with arrowhead markers on links, and supports drag interaction. Hovering highlights a node by turning its border green.

Nnsatyaprakash22

93% match

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

This example visualizes a small social network as a force-directed graph, showing eight people as red circular nodes and their “Friend with” relationships as directed, arrow-headed lines. Node labels display each person’s name. The layout is computed with d3.forceSimulation, combining d3.forceLink, d3.forceManyBody, d3.forceCollide, and d3.forceCenter to manage link distances, repulsion, collision, and centering. Users can drag nodes via d3.drag, and hovering triggers a focusNode/ blurNode interaction that changes the node stroke to green. Data is loaded from a JSON file using d3.json.

MM.Saleh Tibi

93% match

Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This social network graph visualizes connections between individuals, with nodes representing people and links indicating friendships. The node labels show the person's name, and each link uses a directional arrow to show the relationship flow, with the line weight reflecting the strength of the connection. The visualization uses D3 v6 with `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to position nodes in a force-directed layout, reading data from a JSON file. Nodes are rendered as cyan circles with blue strokes, and users can drag them to rearrange the layout.

SSaiSreya1

93% match

Loading thumbnail…

Fork of ICE8 - Social Network Graph

This social network graph visualizes friend connections between named individuals in a small dataset. Interactive nodes are rendered as labeled circles with directed links showing relationships. The visualization uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes. Drag-and-drop functionality and hover highlighting are implemented via d3.drag and mouseover/mouseout events. The SVG output includes marker elements for directional arrows and text labels for node identification.

MMgk1255

93% match

Loading thumbnail…

Fork of ICE-8 (Social Network Graph)

This social network graph visualizes connections among nine individuals, with nodes sized and colored by their degree centrality—larger, darker blue circles indicate more connections. The network uses curved links to show relationships, and users can drag any node to reposition it while the force-directed layout recalculates. Built with D3 v5, the example uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute node positions, while SVG paths and circles render the graph. Node fill colors derive from `d3.interpolateBlues`, and drag behavior is implemented via `d3.drag`.

Ttrucntx007

93% match

Loading thumbnail…

Fork of Fork of Fork of ICE8 - Social Network Graph

This social network graph visualizes friendships among eight people, with nodes representing individuals and links showing their connections. The graph layout is computed using d3.forceSimulation, which applies link, charge, collision, and center forces to position the nodes and edges. The SVG rendering displays yellow circles with person names, using arrow markers on lines to indicate relationship direction. Dragging and hovering interactions are enabled through D3's drag behavior and CSS class toggling, allowing users to explore the network dynamically. The data comes from a JSON file containing node and link definitions.

Bbhanuteja1807@gmail.com

93% match

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

A social network graph of eight people and eleven "Friend with" relationships, with nodes as red circles labeled by name and directed links with arrowheads. The d3.forceSimulation, d3.forceLink, d3.forceManyBody, d3.forceCollide, and d3.forceCenter APIs compute node positions, while SVG circles and lines render the result. Hovering highlights a node with a green stroke. Data comes from a static JSON file containing link endpoints and node IDs.

Rradhadevarapu

93% match