Fork of Data visualization ICE-8 Social network

100%

Fork of Data visualization ICE-8 Social network

✓ Published0🌍 Public

Last edited Mar 30, 2023

Created on Mar 30, 2023

This example visualizes a social network as an interactive force-directed graph, showing friendships between named people. The SVG rendering uses D3 v6’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while draggable circles and text labels represent individuals. Links are drawn as red lines with arrow markers, and hovering highlights a node’s border. The data, loaded from `data.json`, specifies nodes and links with relationship types and values, with all links sharing a uniform blue fill and green stroke styling.

AI-generated description

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

Similar vizzes

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

93% match

Loading thumbnail…

Fork of Social Network Graph ICE-8

This interactive social network graph visualizes connections between people using a force-directed layout. Nodes represent individuals and links depict their relationships, with arrowhead markers indicating direction. Users can drag nodes to reposition them, and hovering highlights a node with a green outline. The visualization is built with React, D3 v6, and SVG, utilizing `d3.forceSimulation` with link, charge, collision, and center forces. Data is loaded from a local `data.json` file containing explicit node and link definitions, while CSS styles control colors, strokes, and hover effects.

NNaimisha-M

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

92% match

Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This visualization shows a social network graph of ten individuals connected by friendship links. Each node is rendered as a circle with a person’s name, and directional arrows on the connecting lines indicate the relationship’s source and target. The layout is computed using `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and a center force. Nodes are draggable via `d3.drag`, with hover effects toggling a CSS class. Data comes from a local `data.json` file, and the SVG is rendered with D3 v6.

Bbhanuprasadk19

92% match

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

This example visualizes a social network as a force-directed graph, with red circular nodes representing individuals and black lines indicating connections such as “family with” or “friend with” relationships. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes dynamically. Dragging is enabled via `d3.drag`, and hovering highlights nodes using a CSS class. Data is loaded from a JSON file, and the graph is rendered as SVG elements (`<circle>`, `<line>`, `<text>`), with marker arrows defined in `<defs>`.

PPriyanka7002

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

92% match

Loading thumbnail…

Fork of ICE 8 - Social Network

This visualization displays a social network as a force-directed graph, with red circular nodes representing individuals and dashed gray lines showing connections between them. Each node is labeled with the person’s name using SVG text elements. The code uses D3 v6’s `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes dynamically. Data is loaded from a remote JSON file via `d3.json`, and all rendering occurs in SVG.

RRamakanth771

92% match