Trial WebCola with G!

100%

Trial WebCola with G!

✓ Published1🌍 Public

Last edited Dec 6, 2020

Created on Nov 21, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

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

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

82% 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…

Combination 1

This example demonstrates a hierarchical graph visualization depicting events, attributes, and their relationships, with nodes color-coded by type and grouped into shaded clusters. It uses the WebCola constraint-based layout library via `cola.d3adaptor` to position nodes, prevent overlaps, and manage group boundaries. The visualization loads JSON data from local files and applies color themes from a separate `colors.json` to style entities, attributes, and group backgrounds. SVG rendering, zooming, and dragging interactivity are handled through D3 v4’s selection and zoom APIs.

Bbrett@cloudaccelerator.co

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

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

81% match