Skip to main content
SimilarExport ZIP
100%

Social Network Graph ICE-8

✓ Published3🌍 Public
TTharun2022
Last edited Apr 4, 2022
Created on Apr 4, 2022
Forked from HTML Starter

This example shows a social network graph with nodes representing people and links indicating friendships. The visualization uses a force-directed layout powered by `d3.forceSimulation`, with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to arrange nodes and edges. SVG circles and text labels render the nodes, while lines with arrow markers depict relationships. The graph is interactive, allowing nodes to be dragged via `d3.drag`, and nodes highlight on hover. Data is loaded from a local `data.json` file, and the code uses D3 v6 within a React framework.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Social Network Graph ICE-8

A social network graph visualizes relationships between people, with nodes representing individuals and directed links showing "Friend with" connections. The graph uses a force-directed layout, where nodes are positioned through physical simulation and can be dragged interactively. Built with React and D3 v6, it employs `d3.forceSimulation` for layout, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` for physical forces, and `d3.drag` for user interaction. The visualization renders as SVG, with node labels and hover effects that highlight connected nodes.

Aachalasam
94% match
Loading thumbnail…

Social Network Graph ICE-8

This example visualizes a social network of eight people using a force-directed graph rendered with SVG. The graph shows people as cyan nodes with labels and their friendships as green arrowed lines, with the relationship type and connection strength encoded in the data. The layout is driven by d3.forceSimulation with link, charge, collision, and center forces, and nodes are interactive via d3.drag, highlighting on hover. The code loads node and link data from a JSON file and uses D3 v6 within a React application.

Ssathwikrajidi
93% match
Loading thumbnail…

Social Network Graph- ICE8

This example shows a social network graph of people connected by friendship links. Each person appears as a brown circle with a name label, and directional lines with arrow markers indicate the relationship between individuals. The graph is built with D3.js, using `d3.forceSimulation` with link, charge, collision, and center forces to position nodes dynamically. Users can drag nodes to rearrange the layout, and hovering highlights a node with a thicker white stroke. The data comes from a JSON file with node and link arrays, and the visualization renders to SVG.

Ggayuvurukuti@gmail.com
93% match
Loading thumbnail…

ICE_8_Social_Network_Graph

This example shows a small social network graph of people and their friendships, with nodes labeled by name and linked by green directed edges that use arrow markers. A force-directed layout, built with `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody`, positions the nodes, while drag interactions and hover highlighting are supported via D3’s `drag` and CSS classes. The code loads `data.json` specifying nodes and links, renders SVG circles and text, and uses D3 v6 through an ES module import.

RRamch16
92% match
Loading thumbnail…

ICE8-Social Network Graph Diagram

This example shows a small social network of six people connected by seven directed relationships, rendered as an interactive node-link diagram. The visualization uses D3’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while SVG circles and lines represent people and connections. Users can drag nodes via `d3.drag` to reposition them, and hovering triggers the “nodeHover” CSS class to highlight a node. The code loads its data from a local `data.json` file, applies a single turquoise fill color to all nodes, and displays each person’s name as a text label.

Aaiswaryapalla
92% match
Loading thumbnail…

Social Network Graph --> ICE-8

This example visualizes a small social network as an interactive node-link diagram. The graph shows ten people and the friendship connections between them, with arrowheads indicating link direction. The layout is computed using D3’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter`. Nodes are rendered as large cyan circles with text labels, and users can drag them via `d3.drag`. Data is loaded from a local JSON file, and the SVG is rendered with scaling and marker definitions from D3 v6.

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

ICE8 - Social Network Graph

This social network graph visualizes eight people and their friendships using a force-directed layout. Nodes are coral circles labeled with names, and links represent connections. The code uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position nodes. Dragging is enabled via `d3.drag`, and hovering highlights a node by changing its stroke color. Data comes from `data.json`, and the SVG rendering is built with D3 v6.

Mmanojgne
91% match