Tutorials

Comprehensive guides to help you build interactive graph visualizations with Ogma.

Getting started

Learn the basics: installation, key concepts, and build your first visualization

15 tutorials

• What is Ogma?
• Compatibility
• Installing the library
• Key concepts
• Hello world!
• Loading data
• Exports
• Working with graph data
• Visual styles
• Camera
• Layouts
• Filters
• Interactions
• Integration
• AI coding

Key concepts

Deep dive into styling, data management, and renderer optimization

8 tutorials

• Styling API
• Data API
• User interactions API
• Managing the renderer state
• Styling optimization
• Using icon fonts
• Optional dependencies
• Exporting on Node.js

Best practices & performance

Optimize your visualizations for speed and scalability

1 tutorial

Go to tutorial →

Playground & editor for Ogma

Interactive coding environment to experiment with Ogma

1 tutorial

Go to tutorial →

Transformations

Group, filter, and transform graph data dynamically

2 tutorials

• Transformation API
• Grouping in depth

Layouts

Arrange nodes with force-directed, hierarchical, and custom layouts

1 tutorial

Go to tutorial →

Geo mode

Display graphs on geographic maps with Leaflet integration

2 tutorials

• Geo mode migration guide
• Geo mode + Esri ArcGIS services

Data sources

Connect to Neo4j, Oracle, Neptune, and other graph databases

6 tutorials

• Parsing a graph from an external data-source
• Integration with Google Spanner
• Integration with Neo4j
• Integration with Oracle
• Integration with Amazon Neptune using Gremlin
• Integration with JanusGraph

Integrations

Use Ogma with React, Angular, Vue, Svelte, and TypeScript

13 tutorials

• Integration with TypeScript
• React
  • Integration with React
  • @linkurious/ogma-react
  • Ogma + React with functional components
  • Integration with React-Redux
  • Integration with React (using Context API)
  • Integration with React (class components)
• Angular
  • Integration with Angular
  • Integration with Angular 9
• Integration with Vue
• Integration with Svelte/Vite
• Integration with test frameworks
• Integration with Jupyter Notebooks

Build tools

Bundle Ogma with Webpack, Rollup, Vite, Parcel, and more

7 tutorials

• Integration with Vite
• Integration with WebPack
• Integration with Rollup
• Integration with Parcel
• Integration with Browserify
• Integration with SystemJS
• Integration with RequireJS

Development version

Access pre-release features and development builds

1 tutorial

Go to tutorial →