What is Ogma?

Ogma is a Javascript library for large-scale interactive graph visualizations. Its graphical engine is built for WebGL first. But it also supports HTML5 Canvas and SVG with the same level of details. 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.

Ogma is a commercial library. Please reach out to ogma@linkurio.us to try it out.

Download

What Ogma can do?

You can develop rich applications using graph data visualisations with Ogma. Adding custom UI on top of Ogma is easy as it integrates with all the popular front end frameworks. You can use static and dynamic styles for your data using the same concepts as in CSS, and react to the changes in data and graph topology, finding and emphasizing individual patterns and structures. You can visualize large networks using state of the art graph layout algorithms and leverage the power of rule-based transformations that would help you clear the view and gain insights on your data.

see more

Features

Graph layouts

Graph layouts

Use different kinds of layouts to gain insight into your data and emphasize the structure in it. The state of the art layout algorithms of Ogma are your first step in creating visualisations.

See more

Analysis

Analysis

Use graph analysis tools and algorithms: shortest path, cycle detection, connectivity.

See more

Transformations

Transformations

Transformations are Ogma's tools to dynamically adapt the view on the data to your needs by filtering, grouping nodes and edges and turning attributes into entities

See more

Geo mode

Geo mode

Geographical mode allows you to display the graph on top of a map, giving you a new perspective on your data. Ogma can integrate with different map services and display additional annotation layers

See more

Node styling

Node styling

Apply styling to the graph nodes to express their meaning using a full palette of colors, borders, icons, badges and text labels

See more

Edge styling

Edge styling

Edges can be styled to so that the links in your data would help revealing the important information

See more

Graph editing

Graph editing

You can create and edit data using Ogma, adding new links and nodes, reconnecting the points in your data and giving it new meaning.

See more

Interactions

Interactions

Move and re-arrange the nodes and links, select and expand the items to highlight and investigate the connections and patterns.

See more

Getting started

<html>
<head>
  <!-- Include the library -->
  <script src="../build/ogma.min.js"></script>
  <style type="css">
  #graph-container { width: 500px; height: 500px; }
  </style>
</head>
<body>
  <!-- DOM element containing the graph -->
  <div id="graph-container"></div>

<script>
  // Create an instance of Ogma and bind it to the graph-container.
  const ogma = new Ogma({
    container: 'graph-container',
  });

  // Create a node with id 'n0'.
  const n0 = { id: 'n0', attributes: { x: 0, y: 0 }};
  // Add the node to ogma.
  ogma.addNode(n0);

  // Create a node with id 'n1'.
  const n1 = { id: 'n1', attributes: { x: 50, y: 0 }};
  // Add the node to ogma.
  ogma.addNode(n1);

  // Create an edge from 'n0' to 'n1'
  const edge = {
    id: 'e0',
    source: 'n0',
    target: 'n1',
    attributes: {
      shape: 'arrow'
    }
  };
  // Add the edge to ogma.
  ogma.addEdge(edge);
</script>
</body>
</html>
Sample graph