Disconn Actual

100%

Disconn Actual

✓ Published2🌍 Public

Last edited Mar 11, 2021

Created on Dec 20, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

83% match

Loading thumbnail…

Grakn Force Graph

A Grakn knowledge graph is visualized as an interactive force-directed network. Entities are rendered as rounded rectangles, while attributes are distinguished by color. The visualization uses the D3 force simulation API (`d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCenter`) to position nodes and reveal clustering. A custom context menu, triggered by right-clicking a node, provides actions. The graph data, including node types and attributes, is loaded from a JSON file and rendered as SVG within a React framework.

Bbrett@cloudaccelerator.co

79% match

Loading thumbnail…

Grakn D3 Force Graph

This example visualizes a Grakn knowledge graph as an interactive force-directed network, displaying entities, attributes, and relations as colored nodes and links. Built with D3 v4 in a React framework, it uses SVG rendering and `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes. The code implements zooming via `d3.zoom`, node dragging, and a custom right-click context menu for node actions. Node shapes and colors vary by type, with text labels sized to fit each rectangle.

Bbrett@cloudaccelerator.co

77% match

Loading thumbnail…

Grakn Force Graph

A force-directed graph visualization of Grakn knowledge graph data, displaying entities, attributes, and relations as colored nodes with labels and connecting links. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while rendering SVG rectangles and text for each node based on its type. It supports right-click context menus with custom actions, zooming via d3.zoom, and loads data from a JSON file containing nodes, links, and type details.

Mmarxwood

77% match

Loading thumbnail…

Try the Split ups

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.

Bbrett@cloudaccelerator.co

76% match

Loading thumbnail…

Fork of Grakn Force Graph

This example visualizes a knowledge graph using a force-directed layout, displaying entities, attributes, and relations from a JSON dataset. The graph uses colored, rounded rectangles for entities and attributes, and circles for relations, with text labels for each node. It implements interactive features, such as a right-click context menu that appears at the node's location. The visualization is built with React and uses D3 v6 APIs including `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to simulate the physics, while the graph is rendered as SVG.

Yyoav95

76% match

Loading thumbnail…

Grakn Force Graph

This example visualizes a Grakn knowledge graph as an interactive force-directed network, displaying entities, attributes, and relations as color-coded nodes connected by labeled edges. It uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, and renders SVG shapes with D3 selections. Right-clicking a node opens a custom context menu, built via a reusable `menuFactory` function that appends menu entries to the SVG. The graph data comes from a static JSON file, and the visualization is implemented in React with D3 v6.

PPharmazeutik

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

75% match