Examples

Featured

Transport network analysis Find shortest paths & explore metro connections on an interactive map

GPU layout newExplore GPU mode settings of the force layout.

Fraud detection Spot suspicious connections in financial data using a graph

iPhone parts origin See where iPhone parts come from, grouped by country

Cyber security log analysis Filter cybersecurity logs to focus on relevant events and timeframes

IT Management demo Reorganize and filter IT infrastructure nodes by group or type

Anti Money Laundering demo Reveal money laundering patterns by simplifying complex transaction graphs

Supply chain Visualize supply and demand across a network of suppliers

Draw your graph Interactively draw graphs by dragging, connecting, and deleting nodes

Graph and table newThis example keeps an Ogma graph and a custom table web component in sync. Selecting or hovering a node in the graph highlights the matching row in the table…

Performance Workbench Stress test rendering performance with thousands of nodes

Real-time collaboration Collaborate on a graph visualization in real time with others

Annotations newAdd annotations and sticky notes directly onto your graph

AI classification Predict node categories using an AI model trained on a citation network

AI recommendation system newDetect fraud risk using in-browser machine learning

Versioned graph This example shows how to visualize the evolution of a graph across multiple versions, using a hierarchical layout with explicit layer / siblingIndex placement…

Accessibility newNavigate a graph using only keyboard controls and a screen reader

Maze navigation newA game-like keyboard navigation demo where a pixel axolotl swims a graph like a maze. The twist: the movement is spatial rather than topological. What it…

Recently added

Maze navigation newA game-like keyboard navigation demo where a pixel axolotl swims a graph like a maze. The twist: the movement is spatial rather than topological. What it…

Graph and table newThis example keeps an Ogma graph and a custom table web component in sync. Selecting or hovering a node in the graph highlights the matching row in the table…

Subgraph layouts around geo cores newThis example shows how to position graph subgraphs in geo mode around a few "core" nodes anchored to real locations in Minneapolis, US. Only the core…

Geo mode with layouts newExplore layouts within grouped nodes in geo mode.

Identity card nodes newRender rich identity card layouts as custom node content

Cluster annotation newDisplay cluster backgrounds and donut charts as graph overlays

Force layout GPU vs CPU newCompare GPU vs CPU speed for force layout

Animated edges newAnimate dashed edges using a canvas layer

Filtering performance newTest how filters perform on large datasets with a range slider

Multilevel Grouping newGroup a graph into three nested levels of hierarchy

ESRI vector tiles newUse Esri vector tiles as the base map in geo mode

Visual grouping expand/collapse newExpand or collapse groups and load their children on demand

Async load nodes metadata newShow a loading spinner on a node while fetching its data

GPU layout newExplore GPU mode settings of the force layout.

Annotations newAdd annotations and sticky notes directly onto your graph

Force layout with custom node masses and edge weights newControl node mass and edge weight in force layout

Expand/collapse in place newDouble-click a group node to expand or collapse it in place

In place resize newDouble-click any node to resize it 20x its current size

Group layout optimization newOptimise layout work for star patterns and disconnected nodes

Org chart with DOM nodes newBuild an org chart and promote any node to the top of the tree

Google Spanner newQuery a Google Spanner database and display results as a graph

Geo mode + marker clustering newCluster map markers geographically and expand them on click

Group layout performance newAdd nodes dynamically and watch grouping and layout update live

Grouping layout on a large graph newTest grouping layout performance on a very large graph

AI recommendation system newDetect fraud risk using in-browser machine learning

Accessibility newNavigate a graph using only keyboard controls and a screen reader

Z-index newControl which nodes appear on top when they overlap

Hierarchical pack siblings newCompact hierarchical layouts by packing sibling nodes tightly

Accessibility newNavigate a graph using only keyboard controls and a screen reader

Hierarchical pack sitemap newUse sibling packing in a hierarchical sitemap layout

Easy Grouping newGroup nodes by category or region with one method call

Badge newAdd a small badge along edges

Grid background newAdd an SVG grid background behind the canvas

Community detection newThis example demonstrates the Leiden community detection algorithm — an improvement over the Louvain algorithm that guarantees well-connected communities. A…

Graph operations

Load graph Load a graph into a visualization from scratch

Read nodes and edges Retrieve and list nodes and edges from a graph

Count nodes and edges Get the total count of nodes and edges in a graph

Add node Add a single node to an existing graph

Add edge Add a single edge connecting two nodes

Remove node Remove a specific node from a graph

Remove edge Remove a specific edge from a graph

Set data Attach data to nodes and edges and use it to style them

Clear Wipe all nodes and edges from the graph in one action

Undo redo Undo and redo changes made to the graph

Data translators

JSON Export graph data as a JSON file

GEXF Export graph data as a GEXF file

Neo4j Cypher Connect to a Neo4j database and visualize query results

Google Spanner newQuery a Google Spanner database and display results as a graph

SPARQL to JSON Fetch movie data from Wikidata via SPARQL and visualize it

CSV Export graph nodes and edges as CSV files

Excel Export graph data as an Excel spreadsheet

Custom JSON Pre-process JSON data before importing it into the visualization

GraphML Export graph data as a GraphML file

MTX Import a graph from an MTX matrix file format

Node styles

Radius Change the size of nodes using the radius setting

Color Change the color of text labels

Color pie Show a pie chart inside each node using color segments

Shape Change edge shapes — line style, head, tail, body type

Text Add text labels along edges

Stroke Add inner and outer strokes around nodes

Outline Add a shadow outline to edges

Icon Display icons inside nodes using font glyphs like Lucide or FontAwesome

Image Display images (PNG, JPG, SVG) inside nodes

Badge Add a small badge along edges

Halo Add a halo glow beneath edges

Pulse Animate a pulse effect along edges

Custom charts Render custom donut charts or textures directly on nodes

All styles Interactively tweak every available node and edge style

Themes Apply a visual theme that styles the graph in various states

Zoom-dependent styles Load icons only when nodes are large enough to show them on screen

Z-index newControl which nodes appear on top when they overlap

Edge styles

Width Adjust the thickness of edges

Color Change the color of text labels

Shape Change edge shapes — line style, head, tail, body type

Text Add text labels along edges

Badge newAdd a small badge along edges

Outline Add a shadow outline to edges

Halo Add a halo glow beneath edges

Pulse Animate a pulse effect along edges

Parallel Show multiple curved edges between the same two nodes

Arrow size Adjust the size of arrowheads on directed edges

Zoom-dependent texts Update edge label size and content as you zoom in or out

Text styles

Font Set the font used for edge text labels

Style Change the text style on nodes and edges - normal, bold, italic

Color Change the color of text labels

Size Set the size of text labels on nodes and edges

Centered Center text labels along the middle of edges

Position Change the position of text labels relative to nodes

Multiline Display multi-line text labels on nodes and edges

Background Add a background behind text labels

Secondary Show a secondary label beneath the main text on nodes and edges

RTL support Display right-to-left text (e.g., Arabic, Hebrew) on the graph

Layers

Free drawing Draw freehand lines on the graph

Categories annotation Add horizontal level lines to hierarchical layouts

Distance annotation Show distance from a central node on a radial layout

Overlays + annotations Animate data flow in a neural network with overlapping annotations

Context menu Right-click a node to open a custom context menu

Editable notes and in-place forms Double-click nodes to edit rich text notes attached to them

Text on edge extremities Display text labels at the start or end of edges

Edge badges Render icon badges along edges using a canvas layer

Flowlines Draw animated flow lines along edges

Diagrams Visualize data flow with area and node overlays

d3 integration Sync a D3.js chart with the Ogma graph

Density contours Render density contour shapes behind the graph using D3

Konva.js integration Add a Konva.js canvas layer as an overlay on the graph

PixiJs integration Add a PixiJS layer for custom shapes and images on the graph

Cluster annotation newDisplay cluster backgrounds and donut charts as graph overlays

Blueprint Overlay a blueprint or schematic behind graph nodes

Animated edges newAnimate dashed edges using a canvas layer

Async load nodes metadata newShow a loading spinner on a node while fetching its data

Parallel views with annotations Pan and zoom two graph views in sync, linked by dotted edges

Identity card nodes newRender rich identity card layouts as custom node content

Org chart with DOM nodes newBuild an org chart and promote any node to the top of the tree

Interaction

Hover Show node or edge info when hovering with the mouse

Click Show details about a node or edge when you click on it

Select Listen for selection events on nodes and edges

Disabled state Disable nodes and edges so they can't be selected or hovered

Panning Click and drag to move the camera around the graph

Rectangle selection Draw a rectangle with Ctrl+drag to select nodes or edges

Lasso (nodes) Draw a freehand lasso to select a group of nodes

Selection API Get the currently selected and unselected nodes and edges

Custom selection Build a custom selection mechanism with left and right click

Drag nodes Drag nodes and track their movement with events

Badges interactions Handle clicks and hover on node badges

Node resizing Manually resize nodes by dragging a handle

Container resizing Resize the graph container on the fly

Edge rewiring Drag edge endpoints to rewire connections between nodes

Group selection Group a set of selected nodes into one meta-node

Connect nodes Let users draw new edges by dragging between nodes

Keyboard interactions Bind keyboard shortcuts to graph actions

Draggable/non-draggable nodes Enable or disable dragging on individual nodes

Node snapping Snap nodes to alignment grid while dragging them

Halo masking Fade out non-adjacent edges when hovering a node

Fast highlight Highlight connected nodes and edges on mouse hover

Hold space to drag Hold Space to drag the viewport instead of selecting

Scroll to pan Use scroll to pan the view; Ctrl+scroll to zoom

Animations

Nodes Animate node colors and positions smoothly

Edges Animate edge colors and widths smoothly

Camera Control the camera — move, rotate, and zoom the view

Animate to bounds Animate the camera to zoom in on a specific cluster

Dataset switch This example shows how to smoothly transition between datasets that share common nodes. Nodes present in both the current and the next dataset animate to their…

Layouts

Force layout Arrange nodes using a force-directed layout

Force layout GPU vs CPU newCompare GPU vs CPU speed for force layout

Force layout large graph Run force layout on a large graph and tune performance

Force layout auto-stop Speed up force layout on partially laid-out graphs

Force layout with custom node masses and edge weights newControl node mass and edge weight in force layout

Grid Generate nodes arranged in a regular grid pattern

Concentric Place nodes in concentric rings by distance from a center node

ForceLink Use the legacy ForceLink layout algorithm

Continuous ForceLink Animate node positions continuously as ForceLink runs

Hierarchical Arrange nodes in a top-down tree or hierarchy

Hierarchical advanced Adjust hierarchical layout settings- node distance, direction, etc.

Hierarchical sort siblings Sort sibling nodes in a hierarchy by a data field

Hierarchical pack siblings newCompact hierarchical layouts by packing sibling nodes tightly

Hierarchical pack sitemap newUse sibling packing in a hierarchical sitemap layout

Sequential Layout Assign nodes to specific layers in a sequential layout

Radial Arrange nodes radially by graph distance from a selected node

Local grid Apply a grid layout to only a selected subset of nodes

Local ForceLink Apply ForceLink layout to only a selected subset of nodes

Local force Run force layout on selected nodes without moving others

Local concentric Apply concentric layout to a selected subset of nodes

Local Radial Apply radial layout to a selected subset of nodes

Force layout automatic settings Let force layout automatically pick the best settings

Incremental ungrouping Double-click to expand grouped nodes one level at a time

Incremental expand Add new nodes to a graph without rearranging existing ones

Expand with pinning Pin existing nodes while force layout places new ones around them

Remove nodes overlap Spread out overlapping nodes while preserving the current layout

Circular layout (plugin) Arrange nodes in a circle using a custom plugin

Circle-packing layout Pack nodes into nested circles by cluster or group

Expand/collapse in place newDouble-click a group node to expand or collapse it in place

In place resize newDouble-click any node to resize it 20x its current size

Transformations

Filter nodes Filter nodes based on their data, such as numerical values

Filter edges Filter edges based on their data, such as numerical values

Group nodes Group nodes together by a shared data property like location

Group edges Merge parallel edges between the same two nodes into one

Visual grouping Visually group nodes and see their contents inside the group

Visual grouping clustering Group a large network by topic area

Visual grouping manual Manually group nodes by dragging them onto each other

Visual grouping highlight Highlight a node's connections when you hover over its group

Visual grouping expand/collapse newExpand or collapse groups and load their children on demand

Group on zoom Automatically group nodes based on the current zoom level

Onion Decomposition Rank nodes by importance using onion (k-core) decomposition

Clustering Middleware Compare clustering vs grouping APIs for compressing large graphs

Node collapsing Collapse nodes matching a selector, connecting their neighbors directly

Neighbor merging Merge neighboring nodes into one, combining their data.

Neighbor generation Generate new neighbor nodes and edges from existing ones

Virtual properties Add computed virtual properties to nodes and edges

Transformation pipeline See how the order of transformations changes the graph output

Multilevel Grouping newGroup a graph into three nested levels of hierarchy

Visual grouping Geo Group geo-located nodes on a map, with auto-computed coordinates

Drilldown API for grouping Click a node to drill down and explore its underlying subgraph

Group layout optimization newOptimise layout work for star patterns and disconnected nodes

Group layout performance newAdd nodes dynamically and watch grouping and layout update live

Grouping layout on a large graph newTest grouping layout performance on a very large graph

Easy Grouping newGroup nodes by category or region with one method call

Analysis

Data-driven styles Style nodes and edges automatically based on their data values

Shortest path Find and highlight the shortest path between two nodes

Cycle detection Detect and highlight all cycles in a graph

Weakly connected components Color nodes by their connected component

Data Lineage Trace which datasets produced a given report in a pipeline

Minimum Spanning Tree Highlight the minimum spanning tree of a graph (efficient way to link nodes)

BFS and DFS graph traversals Traverse a graph using breadth-first or depth-first search

Betweenness Color and scale nodes by their betweenness centrality score

Other centrality measures Compare degree, closeness, betweenness, and PageRank measures

Community detection newThis example demonstrates the Leiden community detection algorithm — an improvement over the Louvain algorithm that guarantees well-connected communities. A…

Data exports

CSV Export graph nodes and edges as CSV files

Excel Export graph data as an Excel spreadsheet

Excel Advanced Export graph data to Excel with one tab per element type

GEXF Export graph data as a GEXF file

GraphML Export graph data as a GraphML file

JSON Export graph data as a JSON file

Image exports

PNG Export the graph visualization as a PNG image

Export selection Select and export a specific area of the visualization

PNG with watermark Export the graph as a PNG with a custom watermark

SVG Export the graph visualization as an SVG file

PNG with geographical map Export a geo-mode graph as PNG including map tiles

PDF Export the graph as a high-quality PDF

UI

Background color Change the background color of the graph canvas

Dark mode This example shows how to implement a dark mode toggle in an Ogma graph

Cursor style Customize the mouse cursor on hover over nodes, edges, or canvas

Fullscreen Toggle the graph into fullscreen mode

All settings Browse and tweak Ogma interaction settings

Tooltip Build a tooltip using an overlay layer component

Legend Auto-generate a legend from the styles applied to the graph

Branding Add your logo, link, or copyright text to the visualization

Scrollable page Prevent the graph from capturing mouse scroll when not in focus

Fuzzy search Search for nodes by name and highlight matches in the graph

Import progressbar Show a circular progress indicator while a large graph loads

Nodes label editing Double-click a node's label to edit it inline

Overview control Show a minimap of the graph to track the current viewport

Drag and drop Drag and drop a graph file onto the canvas to load it

Grid background newAdd an SVG grid background behind the canvas

Complex Demos

Multiple instances Run multiple independent graph instances on the same page

Neighborhood highlight Hover a node to highlight its direct and second-degree neighbors

US Airlines Render and navigate a large US airline routes graph

Radial layout on a transport network Click a node and position others according to the shortest path from the selected one.

Geo Mode

Geographical mode Display nodes on an interactive map using latitude and longitude

Dynamic geo base maps Switch between different map tile providers on the fly

Geo clustering Cluster map nodes as you zoom out, uncluster as you zoom in

PNG export with geo map and vector-layers Export a geo-mode graph as PNG including map tiles and layers

Indoor maps Display nodes on a custom floor plan or indoor map

Vector layers and GeoJSON Add interactive GeoJSON shapes to a map and link them to nodes

Vector tiles Use Mapbox vector tiles as the base map for the graph

Native Mapbox layers Render native Mapbox GL polygons and lines under the graph

Esri/ArcGIS basemap Use Esri/ArcGIS tiles as the base map for the graph

ESRI vector tiles newUse Esri vector tiles as the base map in geo mode

Geo mode integration with custom minimap This example shows how to run a graph in geo mode and integrate the mini-map plugin so you can keep track of the current viewport while navigating the map. Pan…

Geo mode + Heatmap Overlay a heatmap on a geo-mode graph

Geo mode + marker clustering newCluster map markers geographically and expand them on click

Transport Network Use geo clustering to simplify a transport network on a map

Show Overlaping Nodes Show overlapping nodes in a popup side-view on hover on a map

Geo mode with layouts newExplore layouts within grouped nodes in geo mode.

Subgraph layouts around geo cores newThis example shows how to position graph subgraphs in geo mode around a few "core" nodes anchored to real locations in Minneapolis, US. Only the core…

Timeline

Timeline Filter the graph using a timeline slider

Time layout Display movies and actors as an event timeline graph

Timeline animation Animate the graph data over time

Timeline with node lifespans Show nodes with different start and end dates on a timeline

Integrations

React Integrate the graph library into a React application

React + Minimap Add a minimap control to a React-based graph application

Vue Integrate the graph library into a Vue 3 application with the ogma-vue wrapper

Angular Integrate the graph library into an Angular application

Svelte Integrate the graph library into a Svelte application

Performance

Performance (Github) Render a large GitHub network graph to test performance

Performance (Cosmic Web) Render a cosmic galaxy network to benchmark large graph speed

Filtering performance newTest how filters perform on large datasets with a range slider

Plugins

Tooltip Build a tooltip using an overlay layer component

Fish-eye Use a fisheye lens to zoom into graph details without losing context

Graph generators

Random Generate a random graph with a specified number of nodes

Grid Generate nodes arranged in a regular grid pattern

Tree Generate a balanced tree graph structure

Small world Generate a graph using the Erdős–Rényi random model

Power law Generate a graph using the Barabási–Albert preferential attachment model