Social network graph for ice 8

100%

Social network graph for ice 8

✓ Published0🌍 Public

Last edited Mar 30, 2023

Created on Mar 30, 2023

A social network graph visualizes character connections from the ice 8 dataset, showing six nodes (Sita, Rama, Lakshman, Hanuman, Arjuna, Bheem) linked by seven edges with directional arrows. The SVG rendering uses d3.forceSimulation with link, charge, collision, and center forces to position nodes dynamically. Nodes appear as purple circles with labels, support drag interaction, and highlight on mouseover. The visualization loads data from a JSON file and applies custom CSS styling for hover states and edge strokes.

AI-generated description

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

Similar vizzes

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

86% match

Loading thumbnail…

ICE8 - Social Network Graph_Ramakanth

A social network graph displays eight people as nodes connected by directed, labeled friendship links, with node size and color kept uniform to emphasize structure. The visualization uses d3.forceSimulation with link, charge, collision, and center forces to position nodes, while draggable circles and arrow markers enhance interactivity. It renders to SVG using d3.v6, loading graph data from a JSON file. Hovering highlights a node with a thick green stroke, and labels appear on each node to identify individuals.

RRamakanth771

85% match

Loading thumbnail…

Social Network Graph ICE-8

A social network graph depicts eight fictional people connected by friend relationships, with edge thickness representing relationship strength and arrowheads indicating direction. The visualization uses SVG rendering with D3.js v6, employing `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes dynamically. Nodes are draggable via `d3.drag`, and hovering triggers a CSS class change that thickens the node border. Data comes from a local `data.json` file containing node identifiers and link metadata, with blue circles and labeled text overlaid on a white background.

Sshabbab01

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…

Social Network Graph ICE-8

This network graph shows the social connections among a group of eight people, with nodes representing individuals and directed links indicating friendship relationships, such as "Friend with." The data is loaded from a JSON file and visualized using D3 v6's `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position the nodes. The graph is rendered as an SVG, with draggable nodes that react to mouseover and mouseout events. Each connection includes a triangular marker at its endpoint to indicate direction, while node and link colors and styles are defined in a separate CSS file.

KKrishnaPriyaKurra

85% match

Loading thumbnail…

Social Network Graph_ICE8

A social network graph displays eight people as blue circular nodes connected by directed arrows, with edge thickness indicating relationship strength via the `value` attribute. The layout is computed using `d3.forceSimulation` with link, charge, collision, and center forces, while nodes are draggable via `d3.drag`. Hovering highlights a node by changing its stroke. Data is loaded from an external JSON file, and the SVG rendering uses D3 v6 selections, `scaleOrdinal` for color, and marker elements for arrowheads.

UUNTAdityaAnanthula

85% match

Loading thumbnail…

ICE8 - Social Network Graph

This interactive social network graph visualizes friendship connections among eight people. The visualization uses a force-directed layout, rendering nodes as labeled circles and links as red, arrow-tipped lines. Users can drag nodes to rearrange the network, which dynamically updates the link positions. The implementation leverages d3.forceSimulation for the physics-based layout, with d3.forceLink, d3.forceManyBody, d3.forceCollide, and d3.forceCenter. Nodes are drawn as SVG circles with sky blue fill and text labels, while hovering highlights a node with an orange stroke.

RRaajithaSabbineni

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