Skip to main content
SimilarExport ZIP
100%

WebCola Small Groups!

✓ Published6🌍 Public
Bbrett@cloudaccelerator.co
Last edited Aug 1, 2022
Created on Nov 11, 2020

This example shows a force-directed network layout of seven nodes and eight links grouped into overlapping rectangular clusters using WebCola, a constraint-based layout library. The nodes and groups are rendered as SVG rectangles with labels and color-coded fills, while links appear as thick lines. Users can drag nodes to rearrange them, with double-clicking releasing a node from its fixed position. The visualization uses WebCola's `d3adaptor` with `avoidOverlaps` and `linkDistance` settings, integrated with D3 v4's zoom and drag behavior on an SVG container.

AI-generated description

A bare minimum WebCola page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of WebCola Small Groups!

This example demonstrates a force-directed graph layout with nodes grouped into nested clusters. The visualization uses WebCola's `cola.d3adaptor` to position seven labeled rectangles connected by eight links, while translucent background rectangles represent the hierarchical group structure. Nodes can be dragged to reposition, and double-clicking releases a node, allowing it to move freely again. The data comes from `graph.json`, which specifies node sizes, link connectivity, and a group hierarchy, and the SVG rendering is updated during each simulation tick.

SShivam Singh
90% match
Loading thumbnail…

Fork of WebCola Small Groups!

This example visualizes a small graph of seven nodes and eight links using WebCola’s constraint-based layout, with nodes grouped into translucent, colored rectangles. The graph data comes from `graph.json`, and the visualization renders as SVG via D3 v4, where nodes are draggable and zoomable. WebCola’s `d3adaptor` handles the layout, enforcing link distances and avoiding overlaps, while D3’s `tick` handler updates node, link, and group positions. Double-clicking a node releases it from its fixed position, letting the layout re-optimize around the user’s manual placement.

SShivam Singh
90% match
Loading thumbnail…

WebCola Groups Trial!

This example demonstrates a WebCola layout with grouped nodes, where rectangular clusters highlight relationships between connected elements in a network. The visualization uses the WebCola adaptor with `d3.v4` to compute the force-directed layout, applying `avoidOverlaps(true)` and custom group bounds to keep nodes and their enclosing rectangles distinct. Node and group drag interactions are enabled via `cola.drag`, while a `d3.zoom` handler transforms the SVG root for pan and zoom. The data comes from a JSON file containing node metadata, links, and hierarchical group definitions, rendered as SVG rectangles, lines, and text labels.

Bbrett@cloudaccelerator.co
89% match
Loading thumbnail…

Fork of Fork of WebCola Small Groups!

This example demonstrates an interactive force-directed graph layout using WebCola, with seven labeled nodes and eight links arranged into small groups. The visualization supports drag-and-drop node manipulation, where dragged nodes become fixed in place and can be released by double-clicking. Built with React and D3 v4, the code renders SVG rectangles for nodes and lines for links, with WebCola's `cola.d3adaptor` handling the layout algorithm, collision avoidance, and link distance constraints. The graph data comes from a JSON file loaded via `d3.json`.

SShivam Singh
89% match
Loading thumbnail…

Fork of WebCola Small Groups!

A small network of seven labeled nodes and eight links is laid out as a force-directed graph. Nodes are rendered as fixed-size rectangles, with edges as thick lines, and are positioned by the WebCola library, which adapts the cola.js constraint-based layout engine. The example uses D3.js v4 for SVG rendering and event handling, including drag-to-fix and double-click-to-release interactions. The code loads node and link data from a JSON file, and the graph’s layout responds dynamically to user input.

SShivam Singh
89% match
Loading thumbnail…

Fork of WebCola Small Groups!

A fork of the WebCola small groups example visualizes force-directed graph layout with interactive node dragging. Seven rectangular nodes and eight links are arranged into overlapping, color-coded group rectangles using the cola.d3adaptor for constraint-based layout. Nodes can be dragged to fix their positions, and double-clicking releases them, allowing users to manipulate the network structure. The example uses D3 v4 with SVG rendering, reading node, link, and group data from a JSON file, and leverages cola’s drag and tick events to update positions live.

RRohit Gupta
87% match
Loading thumbnail…

Unconstrained WebCola!

This example uses WebCola to perform force-directed graph layout on the Les Misérables character co-occurrence dataset, rendered as SVG circles and lines. The nodes are colored by their group assignment using `d3.scaleOrdinal` with `d3.schemeCategory20`, and link thickness varies with edge weight. Clicking a node fixes it in place while the layout continuously updates, with positions driven by WebCola’s `cola.d3adaptor` and `on("tick")` callback using `d3.json` to load the graph data.

Bbrett@cloudaccelerator.co
84% match
Loading thumbnail…

Unconstrained WebCola!

This example uses WebCola’s constraint-based layout to render a graph of entity, attribute, and relation nodes from a JSON dataset, with SVG rectangles and text labels colored by type. The code leverages the `cola.d3adaptor` with `symmetricDiffLinkLengths` and `start` to drive the force-directed simulation, while node dimensions adapt to label bounding boxes via `getBBox()`. Rendering is handled through D3 v4 selections, with zoom and drag interactions enabled.

Bbrett@cloudaccelerator.co
83% match