Skip to main content
SimilarExport ZIP
100%

Unconstrained WebCola!

✓ Published1🌍 Public
Bbrett@cloudaccelerator.co
Last edited Nov 21, 2020
Created on Nov 4, 2020

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Trial WebCola with G!

This example demonstrates an interactive graph visualization using WebCola for constraint-based layout and D3 v4 for rendering, with React as the framework. It displays a network of entities, attributes, and relations as rounded rectangles and circles, color-coded by type, with SVG text labels for node names and IDs. The force-directed layout is managed by `cola.d3adaptor`, while `d3.zoom` enables pan and zoom, and `cola.drag` supports node manipulation. Data is loaded from a local JSON file, rendering as an SVG with styling applied through CSS classes.

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

WebCola Test

This example demonstrates a WebCola constraint-based graph layout applied to a small set of unattached STIX threat-intelligence entities, including a software, file, and process node. The visualization partitions the SVG canvas into three horizontal bands representing promoted, attached, and unattached categories, using fixed boundary nodes and separation constraints to keep nodes within their designated regions. The code loads data from a JSON file via D3’s `json` method and uses WebCola’s `d3adaptor` for simulation, with SVG rectangles drawn for the region boundaries.

CCurran Kelleher
86% 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 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
83% 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
83% match
Loading thumbnail…

Combination 4

This visualization presents a grouped network graph of entity, attribute, and relation nodes, where colored rectangles represent groups and nodes, with labels attached. It uses the WebCola constraint-based layout library through its `cola.d3adaptor` to arrange nodes, while D3 v4 handles SVG rendering and zoom interactions. Node and group colors are dynamically assigned from a loaded JSON palette, and the graph data originates from a `graph.json` file. The example demonstrates combining D3 with WebCola to create a force-directed diagram with grouped clustering capabilities.

Bbrett@cloudaccelerator.co
82% 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
82% match