WebCola Test

100%

✓ Published0🌍 Public

Last edited Mar 26, 2024

Created on Mar 26, 2024

Forked from Fork of Let's make a face with D3.js!

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.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

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

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

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

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

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

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

79% match

Loading thumbnail…

webcola d3 test

This example uses WebCola to lay out a small directed graph with six labeled nodes and five links, rendering nodes as gray circles with text and links as strokes whose width corresponds to each link’s value. The WebCola `d3adaptor` integrates with d3.v5, applying constraint-based layout with symmetric link lengths and a `start(30)` call. The SVG updates on each `tick` event, while dragging nodes via `d3cola.drag` fixes them in place on click, animating positions in real time.

Tthomas-leitner

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

78% match