Prasanth ICE - 8 - SOCIAL NETWORK

100%

Prasanth ICE - 8 - SOCIAL NETWORK

✓ Published0🌍 Public

Last edited Apr 13, 2023

Created on Apr 13, 2023

This visualization uses a force-directed layout to display a social network of 11 named individuals, grouped into five clusters by the thickness of their connecting links. The graph is rendered as an SVG using the D3.js v4 and v2 libraries, with the d3.layout.force API managing node attraction, repulsion, and gravity. Node position updates occur on each simulation tick, while circles and text labels are drawn using the SVG `circle` and `text` elements, styled with custom CSS and loaded from the `graph.json` data source.

AI-generated description

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

Similar vizzes

Loading thumbnail…

social Network graphic

This interactive social network graphic visualizes the relationships among ten individuals grouped into four clusters. The visualization uses a force-directed layout, where nodes are connected by weighted links displayed as blue lines. Node labels show names, and circles represent each person. The example employs D3.js, specifically the `d3.layout.force` API for physics-based positioning and drag-and-drop interaction. It loads node and link data from `graphFile.json` and renders the network as SVG elements.

Pprashanth yamala

86% match

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

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…

ICE-8 Graph for Social Network(Bharath Siva Kumar)

This example visualizes a small social network as a force-directed graph, with nine named people connected by weighted links. Black circles represent nodes, and line thickness reflects link weight. Users can drag nodes, and hovering over a node displays a tooltip with the person’s name. The visualization uses d3.layout.force (from d3.v4) with gravity, distance, and charge parameters, rendering SVG circles, lines, and text. It loads node and link data from a local graph.json file and animates node positions via the force simulation’s tick event.

Bbharathsivakumar07

85% match

Loading thumbnail…

Fork of Social Network Graph ICE-8

A force-directed network graph of a small social circle, with seven people (such as Prathyusha and Vineela) as black nodes connected by green edges labeled with relationship types like "Friend with." Node size encodes the group value of 5, and edges are weighted by a numeric value. Built with D3 v6 (d3.forceSimulation, d3.forceManyBody, d3.forceCollide), the SVG visualization supports interactive drag-and-drop repositioning. Node highlighting occurs on mouseover via the nodeHover class, with styling defined in an external CSS file.

PPrathyusha0304

85% match

Loading thumbnail…

ICE-8: Social Network graph

This example shows a small social network of nine people, grouped into four clusters, with weighted links connecting them. The visualization uses a force-directed layout to position nodes and edges, which are rendered as SVG circles and lines. The code employs d3.layout.force, the v2/v4 D3 API, and force.drag to make nodes interactive. Node names appear as text labels, and link thickness reflects the weight value from the JSON data file.

PPrasanth Damarla

85% match

Loading thumbnail…

ICE8 - Social Network Graph

This interactive network graph visualizes social connections among nine individuals, with undirected links representing friendship and each node labeled with a person's name. The graph uses a physics-based layout via D3's `forceSimulation`, incorporating link, many-body charge, collision, and center forces to position nodes. Users can drag nodes to rearrange the network, with hover highlighting indicating the selected node. The data comes from a JSON file, rendered as SVG circles and lines.

PPriyanka7002

84% match