What is Ogma?

Ogma is Linkurious' JavaScript graph visualization library. It provides a powerful graphics engine based on WebGL and supports older machines with HTML5 Canvas.

Ogma offers all features required to display, explore, and interact with graph data within Web applications. This includes connecting to various sources to import and export data, smart layouts of the data, rich user interaction, and fully customizable visual style.

Key features

• High-performance rendering: Ogma uses WebGL to render large graphs efficiently, ensuring smooth interactions even with millions of nodes and edges.
• Smart layouts: Ogma provides various layout algorithms to automatically arrange nodes and edges in a visually appealing way, making it easier to understand complex relationships.
• Flexible data model: Ogma supports various data formats, allowing you to work with JSON, CSV, and other graph data structures.
• Interactive exploration: Users can zoom, pan, and filter graphs, making it easy to navigate complex datasets. There are also built-in features for selecting nodes and edges, editing and drawing graphs, and more.
• Customizable styles: Ogma allows you to define custom styles for nodes, edges, and labels, enabling you to create visually appealing graph visualizations.

Integrating Ogma into your application

Whether you are using a modern JavaScript framework like React, Angular, or Vue.js, or building a traditional web application, integrating Ogma is straightforward. First you need to install the library, then follow our tutorials or use the API wrappers for the specific framework you are using.

• Installation guide

Integrating Ogma with frontend frameworks

Ogma provides dedicated API wrappers for popular frontend frameworks, making it easy to integrate graph visualizations into your applications. These wrappers handle the lifecycle of Ogma instances and provide a React-like API for managing graphs, events, and styles. You can find the API wrappers on GitHub and install them via npm.

• Integrations with React
• Integration with Angular
• Integration with Vue.js
• Integration with Svelte

Jupyter notebooks

Ogma can be used inside of a Jupyter notebook extension, allowing you to visualize graphs in notebook cells. This is particularly useful for data scientists and researchers who want to explore graph data interactively in their notebooks. Take a look at our basic tutorials for Jupyter notebooks to get started.

Why not D3.js or Vis.js?

We have a dedicated page comparing Ogma to D3.js, vis.js and sigma.js as well, but here are some key points:

• Performance: Ogma is built for high-performance graph visualization, leveraging WebGL for rendering large datasets efficiently.
• Ease of use: Ogma provides a high-level API that simplifies the process of creating and managing graph visualizations, while D3.js requires more low-level manipulation of the DOM.
• Out-of-the-box features: Ogma comes with built-in features for graph layouts, styles, and interactions, reducing the need for custom code.
• Enterprise support: Ogma offers professional support and documentation, making it easier for teams to integrate and maintain graph visualizations in their applications.