Fork of Social Network Graph ICE-8

100%

Fork of Social Network Graph ICE-8

✓ Published0🌍 Public

Last edited Apr 13, 2023

Created on Apr 13, 2023

A social network graph maps named individuals to their connections, with nodes labeled by person ID and edges drawn as directed, arrowed lines. The visualization uses a force-directed layout via `d3.forceSimulation`, combining link, many-body charge, collision, and centering forces for layout. Nodes are rendered as cyan circles in SVG, with interactive drag-and-drop support. Data comes from a `data.json` file containing arrays of nodes and links, styled with CSS for hover effects and edge appearance.

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

A force-directed social network graph visualizes connections between individuals from the `data.json` file. Nodes represent people, and lines with arrow markers depict friendships, with edge thickness possibly indicating relationship strength. The visualization uses `d3.forceSimulation` with link, many-body, collision, and centering forces to position nodes. Built with D3 v6 and React, it renders as an SVG and allows interactive node dragging through `d3.drag`.

AAsherpranayp

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

94% match

Loading thumbnail…

Fork of Fork of Social Network Graph ICE-8

This example shows a social network graph using a force-directed layout. A small set of person nodes are connected by directed links that represent friendships, with link thickness varying by edge value. The user can drag nodes to reposition them. The visualization is rendered with SVG and built using D3 v6, specifically `d3.forceSimulation` with link, charge, collision, and center forces, alongside `d3.drag` for interactivity. Node labels and link arrow markers are included, and data is loaded from an external JSON file.

Ssnehareddygurram

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

92% match

Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This social network graph visualizes connections between individuals, with nodes representing people and links indicating friendships. The node labels show the person's name, and each link uses a directional arrow to show the relationship flow, with the line weight reflecting the strength of the connection. The visualization uses D3 v6 with `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to position nodes in a force-directed layout, reading data from a JSON file. Nodes are rendered as cyan circles with blue strokes, and users can drag them to rearrange the layout.

SSaiSreya1

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

91% match

Loading thumbnail…

Fork of ICE8 network graph

This fork of the ICE8 network graph visualizes a social network of 16 individuals, showing connections between them as a force-directed layout. Nodes are drawn as orange circles with black borders, labeled with names, and links are rendered as black lines whose thickness reflects the connection weight. The graph uses D3 v4’s force layout API (via `d3.layout.force`) to position nodes, with interactive dragging enabled through the `force.drag` method. Data comes from a local JSON file (`graphFile.json`), and the entire visualization is rendered as SVG within a 1000×500 canvas, with node and link styles defined in embedded CSS.

KKusumaKumariDama@my.unt.edu

91% match

Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This example visualizes a social network as a directed graph, showing how individuals are connected through friendship links. Nodes represent people with a consistent cyan color and circle shape, while lines with arrow markers depict the direction of each friendship relationship. The graph uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes, with drag interactions enabled. Data comes from a local `data.json` file containing nodes and links with relationship attributes, and hover states are styled via CSS classes.

Ppreddythandra

90% match