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 contact@linkurio.us to try it out.
Download
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 helps you clear the view and extract insights from your data.
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
Use graph analysis tools and algorithms: shortest path, cycle detection, connectivity.
See more
Transformations are Ogma's tools to dynamically adapt how the data is displayed to your needs by filtering, grouping nodes and edges and turning attributes into entities
See more
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
Apply styling to your nodes to express their meaning using a full palette of colors, borders, icons, badges and text labels
See more
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
Move and re-arrange the nodes and links, select and expand the items to highlight and investigate the connections and patterns.
See more
<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>
