Skip to main content
SimilarExport ZIP
100%

Social Network Graph ICE-8 Data Visualization

✓ Published0🌍 Public
MManasaPatange
Last edited Apr 4, 2022
Created on Apr 2, 2022
Forked from HTML Starter

This visualization displays a social network of countries as a force-directed graph, with red circular nodes representing countries and blue links showing connections between them. It uses D3.js v4 with `d3.forceSimulation` to calculate node positions based on link forces, many-body repulsion, and centering forces, rendering the final layout as an SVG with labeled text for each country name. The graph is built for React and pulls its node and link data from a JSON file hosted on GitHub Gist.

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

This interactive network visualization shows the relationships between individuals in a social group, with nodes representing people and links representing connections. The graph uses a force-directed layout to position nodes, visually separating them into clusters based on their group assignments. Built with D3.js v4 and React, the code leverages the `d3.layout.force()` API to simulate attractive and repulsive forces between nodes, while SVG elements render the graph with styled links and nodes. Node labels display each person's name, and the simulation updates positions in real-time.

Rrajasrilekkala
86% match
Loading thumbnail…

Social Network Graph ICE-8

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.

TTharun2022
86% match
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
85% match
Loading thumbnail…

ICE 8 - Social Network

This interactive force-directed network diagram visualizes the relationships within a social network dataset loaded from a GitHub gist. Red circles represent individual nodes, with dashed gray lines indicating links between them, and each node is labeled with its corresponding name. The layout is computed dynamically using D3.js (v6) APIs, specifically `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody` for repulsion, and `d3.forceCenter` to attract nodes toward the center. The SVG rendering updates node, link, and label positions at each simulation step.

DDaniel Mata
85% 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
85% match
Loading thumbnail…

Social Network graph ICE-8

This interactive social network graph visualizes connections between nine individuals, with nodes grouped by community and linked by weighted edges. The layout uses a force-directed algorithm (d3.layout.force with gravity, distance, and charge parameters) that positions nodes dynamically within an 900x600 SVG canvas. Node styling comes from CSS classes for circles (blue stroke, lightpink fill) and labels (black text with green stroke), while edge thickness maps to link weight. The graph is rendered in SVG, with data loaded from the graph.json file, and nodes are draggable via the force.drag interaction. The visualization uses D3.js v2/v4 APIs for rendering and force simulation.

Ggayathrikavya
85% match
Loading thumbnail…

ICE-8 Social Network Graph (Dhanusree Kodali)

This interactive network graph visualizes a social network of nine individuals and their connections, using node-link diagrams to represent people and their relationships. The visualization is built with D3.js v4 and React, rendering SVG elements with animation. The force-directed layout is powered by `d3.layout.force()` with custom gravity, distance, and charge parameters, while nodes are draggable and display tooltips on hover. Data is loaded from an external JSON file containing node groups and weighted links, with link thickness proportional to connection weight.

DDhanusree Kodali
85% 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
85% match