Cola

100%

✓ Published1🌍 Public

Last edited Feb 20, 2022

Created on Nov 6, 2021

Forked from Fork of WebCola Small Groups!

This example visualizes the syntactic structure of a sentence as a network of nodes and links grouped into semantic layers, including the core predicate, referents, and peripheral elements. It uses WebCola for constraint-based layout and D3 v4 for rendering, with both SVG and canvas. The graph is built from a JSON file containing screen model data, and the layout organizes nodes into colored groups representing core and clause-level periphery.

AI-generated description

A bare minimum WebCola 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

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

79% match

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

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

77% match

Loading thumbnail…

2-13-22 Clean Sheet

This visualization renders a semantic knowledge graph from linguistic JSON data, showing propositional relationships such as predicates, referents, and nested clauses. It builds nodes and links recursively from the `ContextTrackingData` structure, using D3 v4’s force simulation to layout the graph. The rendering combines SVG for nodes and links with Canvas 2D text measurement to size labels. WebCola is also loaded, though the primary layout is driven by `d3.forceSimulation`. The example demonstrates hierarchical clause decomposition, including recursive structures for reported speech and causation.

CConnor Trump

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

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

75% match

Loading thumbnail…

Visualization

This visualization shows the bipartite clause structure of an English sentence, using a force-directed graph to lay out words grouped by their grammatical roles (effector, theme, predicate, periphery). The graph displays nodes for each word or phrase, with links connecting core arguments to the predicate, and colored rectangles grouping related units like the core and clause. It uses D3’s `forceSimulation` with a many-body strength, and for layout it relies on the WebCola library via `d3adaptor` to handle grouping and overlap avoidance. The data is structured JSON from the meaning matcher, and the canvas is used to measure text width for node sizing.

CConnor Trump

75% match