Fork of Social Network Graph ICE-8

100%

Fork of Social Network Graph ICE-8

✓ Published0🌍 Public

Last edited Jul 9, 2022

Created on Jul 9, 2022

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.

AI-generated description

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

Similar vizzes

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

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

94% match

Loading thumbnail…

Fork of ICE8 - Social Network Graph

This interactive social network graph visualizes relationships between people, with nodes representing individuals and lines indicating friend connections. The visualization uses a force-directed layout via `d3.forceSimulation`, combined with drag interactions and hover effects to highlight nodes. Node labels display names, and link arrowheads are defined with SVG markers. Data is loaded from a JSON file containing nodes and links, and the graph is rendered as SVG elements, using D3 v6 and a yellow color scale for all nodes.

NNaimisha-M

94% match

Loading thumbnail…

Fork of Social Network Graph ICE-8

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.

AAsherpranayp

94% match

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

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

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

93% match

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

This fork of a D3.js social network graph visualizes connections between people as a force-directed network. Yellow circular nodes represent individuals, while labeled, arrowed links depict friendship relationships with varying weights. The visualization uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes dynamically. Users can drag nodes to explore the network, and hovering highlights a node with a green outline. Data is loaded from a local JSON file and rendered as SVG elements.

NNaimisha-M

92% match