Describe Actual

100%

Describe Actual

✓ Published0🌍 Public

Last edited Feb 1, 2021

Created on Jan 17, 2021

This example visualizes a graph of event entities and their attributes, such as event names, trace IDs, and indices, using an interactive node-link diagram. The graph shows entity nodes in blue and attribute nodes in orange, with connections between them, and includes buttons to toggle shadows (duplicate attribute nodes), disconnect attributes, and group nodes. Built with React and D3 v4, it uses `d3.json` to load graph and color palette data, and integrates the WebCola library for layout. Nodes are rendered as SVG shapes with animation, and tooltips display detailed node metadata.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

79% match

Loading thumbnail…

Disconn Actual Old

This example shows a node-link diagram where event nodes connect to attribute nodes such as eventName, index, and traceId, with a toggleable view that disconnects all attributes from their parent entities. The visualization uses WebCola’s `d3adaptor` for constrained layout, rendering nodes and links as SVG elements within a zoomable `g` group. Node colors are loaded from a JSON theme file, with distinct palettes for entities, attributes, relations, and shadows. Pressing the spacebar triggers the disconnection or reconnection of attribute links, updating the layout live via `restart()`.

Bbrett@cloudaccelerator.co

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

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

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

74% match

Loading thumbnail…

Disconn Actual

This interactive graph visualization demonstrates a Grakn knowledge graph, showing entities, attributes, and relations with distinct color schemes. Users can toggle between connected and disconnected attribute views, reveal shadow relationships, and group or dissolve nodes via buttons or the spacebar. The visualization uses D3 v4 with the WebCola layout library for constraint-based graph positioning, rendering in SVG within a React framework. Node and edge styles are dynamically updated based on user interactions, with color themes loaded from a JSON palette file.

Bbrett@cloudaccelerator.co

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

72% match

Loading thumbnail…

Try the d3 only

This example demonstrates an interactive entity-relationship graph visualization for log data, using D3 v4 within a React framework. Users can toggle between different view modes with buttons, including showing attributes, disconnecting attribute nodes, displaying groups, and applying constraints. The visualization renders as an SVG with a force-directed layout, where nodes are colored according to a theme loaded from a JSON color palette. The graph data structure comes from a JSON file containing schema types, links, and constraints, while the layout and interactions are driven by D3’s force simulation and zoom behaviors.

Bbrett@cloudaccelerator.co

72% match