ego2

100%

✓ Published0🌍 Public

Last edited Dec 21, 2020

Created on Dec 21, 2020

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.

AI-generated description

A bare minimum WebCola page.

Similar vizzes

Loading thumbnail…

Egocentric Network

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.

Bbrett@cloudaccelerator.co

83% match

Loading thumbnail…

Fork of Brett's Type Refinery D3v4 and Webcola Controls

This example demonstrates a network diagram of interconnected nodes and links, highlighting the relationships between data elements. It shows a dynamic graph where nodes are positioned using the `d3.forceSimulation` layout, with drag-and-drop interaction enabled through WebCola’s constraint-based optimization. The visualization uses D3v4 to render SVG paths and transitions, while WebCola manages link distances and node alignment for a tidier layout. The code leverages `d3.drag` and `simulation.alphaTarget` to handle user interaction, with the data source being a predefined JSON array of nodes and edges. The result is a responsive, zoomable graph that balances force-directed clustering with readable spacing.

22470008471@qq.com

71% match

Loading thumbnail…

Force-Graph

This interactive force-directed graph visualizes the network of game assets, with nodes representing individual files and links showing connections between them. The visualization uses a physics simulation to position nodes, balancing link forces, many-body repulsion, and centering forces. Built with d3.forceSimulation, d3.forceLink, and d3.forceManyBody, the SVG rendering updates each tick to reflect the evolving layout. Users can drag nodes, which temporarily reactivates the simulation to reposition the graph, with node colors assigned via a categorical color scheme.

LLo-ov

71% match

Loading thumbnail…

Force

This interactive network visualization shows a force-directed graph of connected nodes, with larger colored circles representing main hubs and smaller ones as children. Using d3.forceSimulation's many-body and link forces, the graph settles into a clustered layout. Users can drag nodes, which restarts the simulation. The SVG renders colored edges and circles, with labels for main nodes, built with d3.v6 in a React framework.

Hheters

71% match

Loading thumbnail…

Directed Graph Editor

This interactive directed graph editor lets users create, drag, and connect nodes with labeled links, highlighting selected edges with dashed styling. The visualization is built using D3 v5's force simulation for node placement and SVG elements for rendering, with graph interactions handled through mouse events in a React application. The code uses `d3.forceSimulation` to manage node positions and link forces, while CSS controls visual feedback such as cursor changes and stroke styles. The graph is displayed in a full-window SVG canvas.

00-1CxH

71% match

Loading thumbnail…

Directed Graph Editor

This interactive directed graph editor displays a network of nodes and links that respond to mouse events. Users can click nodes to select them, and drag to create or modify connections. The visualization uses D3 v5’s force simulation (`d3.forceSimulation` with `forceManyBody` and `forceCenter`) for layout, while SVG paths and circles render the graph elements. The code styles interactions through CSS classes, including draggable links and reflexive node states.

00-1CxH

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

70% match

Loading thumbnail…

Untitled

This interactive network graph visualizes the connections between nodes, using a force-directed layout to arrange them spatially. Built with React and rendered as SVG, the visualization employs `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to compute node positions and link distances. The graph supports dynamic updates, allowing nodes and links to be added or removed while the simulation restarts to re-stabilize. Colors are assigned from predefined palettes, with node sizes indicating hierarchy. Data loading from a CSV file is prepared but commented out, currently showing three main nodes without links.

JJediquu

70% match