Skip to main content
SimilarExport ZIP
100%

Fork of WebCola Small Groups!

✓ Published0🌍 Public
RRohit Gupta
Last edited Aug 1, 2022
Created on Aug 1, 2022
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
93% 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
92% match
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
91% 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
91% match
Loading thumbnail…

WebCola Small Groups!

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.

Bbrett@cloudaccelerator.co
87% 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
84% match
Loading thumbnail…

Fork of WebCola Small Groups!

This fork of WebCola's Small Groups example visualizes sentence structure as a force-directed graph of clauses, predicates, and referents. Nodes are grouped by syntactic role, with colors distinguishing predicates, referents, and peripheries. The implementation uses the WebCola layout engine through its `d3adaptor`, with drag-and-drop interaction for repositioning nodes and double-clicking to release them. Data originates from a static JSON file containing the sentence "The shark bit the surfer savagely at the beach yesterday because it was hungry."

CConnor Trump
82% 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
79% match