Innovolve Grakn Refinery

100%

Innovolve Grakn Refinery

✓ Published0🌍 Public

Last edited Feb 17, 2021

Created on Feb 14, 2021

Forked from Lets make a face with d3.js!

This example presents an interactive interface for querying and exploring a Grakn knowledge graph through a series of linked dropdown menus and type selectors. Users navigate hierarchical data by choosing main and secondary leaves, linking roles, and a third leaf to refine their exploration. The visualization uses React for state management and D3.js v4, rendering SVG elements on a Bootstrap-styled page. It connects to a Grakn database via URL and port, executing queries against a specified keyspace, with the graph’s structure updated dynamically based on user selections.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

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

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…

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

73% match

Loading thumbnail…

Fork of Grakn D3 Force Graph

This example visualizes a graph of entities and attributes from a Grakn knowledge graph, rendered as an interactive force-directed network. Using d3.forceSimulation, forceLink, and forceManyBody, nodes are positioned and connected by links, with SVG rectangles and text labels styled by node type. The code includes a custom right-click context menu (createContextMenu) that appears at the cursor position, offering placeholder actions. Zooming is enabled via d3.zoom, and node dragging is supported through d3.drag, all within a React-based setup using D3 v4.

GGeolffrey S Mena

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

72% match

Loading thumbnail…

first level drilldown

This interactive data visualization demonstrates a hierarchical drilldown through a force-directed network layout. Users click nodes to explore deeper levels of a tree structure, with a back button to return to previous views. The rendering is done using SVG elements managed by D3.js, with the graph layout and node interactions handled programmatically. The code uses a bundling approach with React components, and the underlying data structure is loaded from a JSON source via D3’s force simulation algorithms.

DDivyang Soni

70% match