Egocentric Network

100%

Egocentric Network

✓ Published1🌍 Public

Last edited Dec 21, 2020

Created on Dec 20, 2020

This example presents two egocentric social networks side by side, showing the connections of "Jonica" and "Alex." Each network uses a force-directed layout via WebCola’s `d3adaptor`, rendering nodes and links as SVG elements. The interface includes a button and spacebar handler to disconnect or reconnect the central node (node 0) from its network, triggering animated transitions as the layout recomputes. The graph data is loaded from text files specifying adjacency matrices.

AI-generated description

A bare minimum WebCola page.

Similar vizzes

Loading thumbnail…

ego2

Two interactive force-directed graphs render the same ego network side by side, with nodes and edges laid out using the WebCola constraint-based layout library via its D3 adaptor. The visualization encodes nodes as colored circles and links as gray lines, with graph data pulled from a JSON file containing nodes, links, and group hierarchies. A button and spacebar trigger a dynamic animation that disconnects or reconnects all edges from node 0, updating both D3 SVG renderings simultaneously to compare the resulting layout changes.

Bbrett@cloudaccelerator.co

83% match

Loading thumbnail…

Network graph of social connection

This example shows a network graph of social connections, with nodes representing characters from a fictional world and links indicating relationships between them. The graph uses D3’s force layout (d3.layout.force) to position nodes, which are rendered as purple circles with dark outlines and labeled with names. Links appear as black lines, and link thickness is set based on a numeric weight attribute when present. Users can click and drag nodes to rearrange the layout, which updates in real time. The visualization reads data from a local JSON file and renders entirely in SVG.

SSamanvitha1

77% match

Loading thumbnail…

SocialNetwork

A force-directed network diagram visualizes friendship ties among seven people, with nodes labeled by name and links styled as green lines with arrowheads to indicate direction. The graph uses `d3.forceSimulation` with link distance, charge, collision, and centering forces to position nodes, which are rendered as purple-stroked circles with bold text labels. Users can drag nodes to rearrange the layout, and hovering highlights a node with a cyan outline. Data comes from a JSON file containing nodes and links with relationship and value attributes, rendered as SVG.

Ssugunagar

77% match

Loading thumbnail…

Fork of Network graph of Social Connections

This example visualizes a small social network as an interactive force-directed graph, displaying seven named individuals and the connections between them. Nodes are rendered as cyan circles with maroon outlines, while green links represent relationships, with thicker lines indicating stronger ties based on a weight value from the JSON data. The graph uses the older `d3.layout.force` API from d3.v2, loading data from `graphFile.json` via `d3.json`. Users can click and drag nodes to reposition them, with the simulation updating positions on each tick. The visualization is built with SVG within a React framework.

MManideepChakilam

77% match

Loading thumbnail…

network

This network visualization shows a small social graph of seven named individuals with weighted connections between them, rendered as green nodes with yellow labels on a black background. The force-directed layout, built with d3.layout.force from d3.v4, positions nodes and links while supporting drag interaction. The code loads data from data.json via d3.json, then uses SVG line elements for links with stroke-width determined by the square root of each link's weight, and groups for nodes with attached circles and text labels.

Ddivyagunuguntla

76% match

Loading thumbnail…

Network Graph

This interactive network graph visualizes a social network of friends, with nodes representing individuals and links showing their connections. The layout is computed using D3's force-directed simulation, combining `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes with repulsion and attraction. Rendered as an SVG, the graph reads JSON data from a GitHub gist and displays each node as a circle with a label, using colored lines and styling from CSS.

AAISWARYAMARAPATLA1999

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

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

76% match