Fork of ICE8 - Social Network Graph

100%

Fork of ICE8 - Social Network Graph

✓ Published2🌍 Public

Last edited Apr 3, 2022

Created on Apr 3, 2022

A force-directed social network graph visualizing friendship ties among nine people. Nodes are yellow circles with name labels, connected by black lines with arrow markers. The layout uses `d3.forceSimulation` with link, charge, collision, and center forces, rendering in SVG. Interactions include dragging nodes and highlighting on mouseover via a CSS class. Data comes from a JSON file containing node IDs and link relationships.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE8 - Social Network Graph

This example visualizes a small social network graph, showing eight people connected by friendship links and rendered as yellow circles with labels. A force-directed layout using `d3.forceSimulation` positions nodes, with `d3.forceLink` defining edges based on a JSON data file containing source, target, and relationship attributes. SVG elements create nodes and links, while drag interaction via `d3.drag` lets viewers reposition nodes, and mouseover events highlight nodes with a green stroke.

Yyaswanthsen

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

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

94% match

Loading thumbnail…

Fork of ICE8 - Social Network Graph

This interactive social network graph visualizes relationships between people, with nodes representing individuals and lines indicating friend connections. The visualization uses a force-directed layout via `d3.forceSimulation`, combined with drag interactions and hover effects to highlight nodes. Node labels display names, and link arrowheads are defined with SVG markers. Data is loaded from a JSON file containing nodes and links, and the graph is rendered as SVG elements, using D3 v6 and a yellow color scale for all nodes.

NNaimisha-M

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

93% match

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

This fork of a D3.js social network graph visualizes connections between people as a force-directed network. Yellow circular nodes represent individuals, while labeled, arrowed links depict friendship relationships with varying weights. The visualization uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes dynamically. Users can drag nodes to explore the network, and hovering highlights a node with a green outline. Data is loaded from a local JSON file and rendered as SVG elements.

NNaimisha-M

93% match

Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This network graph visualizes friend connections among ten people, with nodes rendered as cyan circles and links as directed lines with arrowheads. The interactive layout uses d3.forceSimulation with link, charge, collision, and center forces, while circles are colored via a scaleOrdinal and respond to mouseover events. Data comes from a JSON file containing node and link objects with relationship metadata.

NNHRK555

93% match

Loading thumbnail…

Fork of Fork of Fork of ICE8 - Social Network Graph

This example visualizes a small social network of eight people and their friendship connections as a force-directed graph. The D3.js v6 code uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes and edges dynamically. It renders nodes as red circles with labels and links as lines with arrow markers, all within an SVG container. Data comes from a local `data.json` file. Nodes are draggable via D3's drag behavior, and hovering highlights a node with a green outline.

Ppreddythandra

93% match