Fork of ICE-8.4 - Social Network - 11545863

100%

Fork of ICE-8.4 - Social Network - 11545863

✓ Published0🌍 Public

Last edited Apr 18, 2024

Created on Apr 18, 2024

Forked from ICE-8.4 - Social Network - 11545863

This example visualizes a social network as a node-link diagram, showing friendships between eleven individuals grouped by color. The graph layout is computed using d3.forceSimulation with link, charge, collision, and center forces, while nodes are draggable via the d3.drag API. Each node is rendered as an SVG circle with a text label, and connections are drawn as lines with arrowhead markers defined in SVG defs. The data is loaded from a local JSON file, and interactions include node highlighting on mouseover.

AI-generated description

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

Similar vizzes

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

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

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

92% match

Loading thumbnail…

Fork of Fork of Social Network Graph - ICE-8

This example visualizes a social network as a node-link diagram, with ten people connected by twelve friendship links. Circles represent each person, with their name displayed as a text label, and arrows on the connecting lines indicate the direction of the relationship. The network is laid out using D3’s `forceSimulation` with link, charge, and collision forces, and users can drag nodes to explore the connections. The SVG rendering uses the `d3.js` v6 library, and the data is loaded from a JSON file containing node and link attributes like person names and relationship types.

GGvl Naga Saikiran

91% match

Loading thumbnail…

Fork of Data visualization ICE-8 Social network

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.

Vvamshisoletii

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

91% match

Loading thumbnail…

Fork of Fork of ICE8 - Social Network GraphTEST

This example visualizes a small social network of eight people and their friendship links, with each person represented as a red circle and lines connecting friends. The graph uses D3.js force simulation (`d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, `d3.forceCenter`) to arrange nodes and links dynamically. Nodes are draggable via `d3.drag`, and hovering changes their stroke color. The data comes from a JSON file containing node IDs and link relationships, rendered as SVG elements within a 960×600 viewport.

VVamsi Krishna

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

91% match