Fork of Collapsed Combination 2

100%

Fork of Collapsed Combination 2

✓ Published0🌍 Public

Last edited Apr 17, 2021

Created on Apr 11, 2021

This example visualizes a heterogeneous graph of entities, attributes, and relations, representing trace records and their associated data. Nodes are color-coded by type—entities in blues, attributes in oranges, and relations in blue-green—with a force-directed layout managed by WebCola’s `cola.d3adaptor`. The graph is rendered as SVG rectangles and lines, with D3 v4 handling zoom and pan interactions. Color themes are loaded from a JSON palette file, and the visualization supports grouping of related nodes into collapsible sessions.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Collapsed Combination 2

This example shows a graph visualization where nodes represent entities and attributes, and groups represent collapsed trace records, each with a distinct color palette. The visualization uses a force-directed layout to position the elements, with rectangular groups and nodes rendered as SVG elements. The code loads data from `graph.json` and `colors.json`, and uses the WebCoLA library via `cola.d3adaptor(d3)` to handle the layout with grouping, link lengths, and overlap avoidance. Dynamic colors are applied to nodes and groups based on the loaded color schemes, and the whole visualization is zoomable.

Bbrett@cloudaccelerator.co

90% match

Loading thumbnail…

Combination 2

This example shows a hierarchical graph visualization of event trace data, using grouped rectangles to represent nested records and colored nodes to distinguish between entities, attributes, and relations. The visualization is rendered using D3 v4 and the WebCola layout library (accessed through `cola.d3adaptor`) to position and group elements with constraints-based optimization. A zoomable SVG canvas displays the graph, with a color scheme defined in a separate JSON file. The graph data comes from `graph.json`, which specifies group structures and leaf descriptions.

Bbrett@cloudaccelerator.co

84% match

Loading thumbnail…

Combination 3

This example visualizes a graph of event entities and their attributes, representing a log of traced events. It uses a force-directed layout with the WebCola algorithm to arrange nodes, colored according to a categorical theme. The visualization distinguishes entity nodes (blue) from attribute nodes (orange), with links showing relationships. The implementation uses D3.js v4 for SVG rendering and styling, with colors loaded from a JSON palette. A "shadow" style is applied to certain nodes, and grouped containers are drawn with rounded rectangles.

Bbrett@cloudaccelerator.co

83% match

Loading thumbnail…

Combination 5

This interactive visualization displays a hierarchical graph of event data, with nodes representing entities and attributes connected by a force-directed layout using the WebCoLa constraint-based layout library within a React and D3.js v4 framework. It supports zooming and panning via D3’s zoom behavior, and a “Collapse Group” button enables grouping of related nodes. The visualization uses SVG rendering and color themes loaded from a `colors.json` file, applying distinct color scales for entities, attributes, relations, and shadows to highlight data structure.

Bbrett@cloudaccelerator.co

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…

Combination 0

This example visualizes a graph of event entities and their attributes, such as event names and trace IDs, using a force-directed layout with grouped nodes. The SVG rendering uses a custom theme applied from a JSON color palette, with distinct colors for entities, attributes, and relations. The visualization leverages the WebCola layout library via `cola.d3adaptor` for graph positioning, while D3.js v4 handles data loading, node and link rendering, and zoom interactions. Data comes from bundled JSON files containing the graph structure and color schemes.

Bbrett@cloudaccelerator.co

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

77% match