Skip to main content
SimilarExport ZIP
100%

Try the Split ups

✓ Published0🌍 Public
Bbrett@cloudaccelerator.co
Last edited Mar 12, 2021
Created on Mar 11, 2021
Forked from Disconn Actual

This interactive graph visualizes the relationships between data entities in a process model, distinguishing entities, attributes, and relations through distinct node colors. Users can toggle several view options via buttons, including showing groups, constraints, shadows, and disconnecting attributes. Built with React and D3 v4, the visualization uses a force-directed graph layout with WebCola for constraint-based positioning, and renders the graph as animated SVG elements. The node and edge styling is dynamically loaded from a JSON color theme.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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
80% 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
76% 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
76% match
Loading thumbnail…

Fork of Collapsed Combination 2

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.

Bbrett@cloudaccelerator.co
75% 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
73% 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
72% 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
72% 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
71% match