Graph visualization just got a major performance boost. Ogma 5.3 introduces a new approach to cluster layout calculations that delivers up to 10x faster performance for grouped visualizations, while significantly expanding React developer resources and capabilities.
The standout feature of Ogma 5.3 addresses one of the most common bottlenecks in large-scale graph visualization: calculating layouts for multiple clusters simultaneously.
When exploring complex networks—whether transaction flows, supply chains, or social connections—users frequently need to experiment with different grouping strategies. Previously, calculating layouts for hundreds of small clusters could take up to a minute as each cluster's layout was processed sequentially. This created a prohibitive barrier to the iterative exploration that's essential for discovering meaningful patterns in data.
Our new clustering algorithm calculates all sublayouts simultaneously rather than queuing them sequentially. The result? What used to take a minute now takes 2 seconds, even when processing hundreds of groups with complex meta-layouts positioning the clusters themselves.
The new algorithm lets you quickly apply grouping and responds at lightning speed as the contents of groups change
This isn't just about speed—it's about enabling a fundamentally different way of working with your data. Users can now rapidly test different clustering criteria, immediately seeing results without the friction of long wait times.
A major technical advancement in 5.3 is GPU layout support within clusters. Previously, GPU layouts weren't viable for cluster contexts due to WebGL context limitations. Our new architecture eliminates this constraint, enabling GPU-accelerated layouts within groups for even faster, higher-quality visualizations. If you are in a restricted environment or using Node.js, you can still use the CPU mode for the layout which is also times faster than calculating individual layouts.
Key benefits:
- 10x performance improvement for cluster layout calculations
- GPU acceleration now available for sublayouts
- Real-time exploration of different grouping strategies
- Scalable to hundreds of clusters without performance degradation
The performance gains come with a streamlined API that requires minimal code changes. In most cases, upgrading means replacing a single ogma.layouts.force() call in your onGroupUpdated callback with a configuration object specifying the layout name and parameters.
// Before
onGroupUpdated: (group) => {
return ogma.layouts.force();
}
// After
onGroupUpdated: (group) => {
return {
name: 'force',
// optional parameters,
params: {
...
}
}
}React developers get significant improvements in both documentation and tooling with Ogma 5.3.
We've extended our most sophisticated examples to React, giving developers best practices for:
- Transport Network Analysis - Complex routing and flow visualizations
- Interactive Annotations - Rich, contextual graph annotations
- Fraud Detection - Real-world financial network analysis
- Draw Your Graph - Interactive graph creation and editing
- iPhone parts - Transformations in supply chain analysis
The new useEvents hook brings Ogma's powerful event system into idiomatic React patterns with full TypeScript support:
import { Ogma, useEvent } from '@linkurious/ogma-react';
const [clickedNode, setClickedNode] = useState<OgmaNode|null>(null);
const onMouseMove = useEvent('mousemove', ({ target }) => {
if (target && target.isNode) console.log(target.getId());
});
const onClick = useEvent('click', ({ target }) => {
setClickedNode((target && target.isNode) ? target : null);
});
<Ogma
options={options}
onMouseMove={onMouseMove}
onClick={onClick}
/>
Managing node and edge styles is now intuitive with new declarative subcomponents. Control hover and selection states directly in your JSX:
<Ogma options={options}>
<NodeStyle.Hovered attributes={{ color: "blue", radius: 12 }} />
<NodeStyle.Selected attributes={{ color: "red", radius: 15 }} />
<EdgeStyle.Hovered attributes={{ color: "blue", width: 3} />
<EdgeStyle.Selected {{ color: "red", color: 4}} />
</Ogma>
This approach eliminates complex style rule management and makes visual states immediately clear from your component structure.
React developers now have first-class support for Ogma's theming API directly in the wrapper. Switching between light and dark modes, or any custom themes, is now as simple as passing a theme prop:
const [isDark, setIsDark] = useState(false);
<Ogma
options={options}
theme={isDark ? darkTheme : lightTheme}
/>
This makes it effortless to integrate graph visualizations with your application's existing theme switching logic.
Our React wrapper is open source, allowing developers to examine implementation details and contribute improvements. This transparency, combined with our commitment to React-idiomatic patterns, allows us to share the abstractions required to make Ogma React-friendly and invites the feedback and communication around this code.
The problem we solved: Mobile devices, particularly those over 4-5 years old, couldn't leverage GPU-accelerated layouts due to memory and precision constraints. This forced mobile applications to use slower CPU layouts or exclude older devices entirely—a significant barrier for enterprise applications requiring broad device support.
The breakthrough: Advanced precision control and memory management now enable GPU layouts on older mobile hardware. Combined with WebGL optimizations, all devices see a 15% performance improvement across GPU-accelerated layouts. Mixed node sizes (20-50x variance) no longer cause layout defects.
The problem we solved: When nodes varied dramatically in size—especially with grouped nodes—badges scaled proportionally, creating two critical issues: oversized badges on large nodes became unreadable due to rendering artifacts, and large badges were perceived as separate nodes rather than informational overlays.
The solution New scalingMethod property with “fixed” and “scaled” options maintains visual hierarchy at all zoom levels:
// Keep badges readable regardless of node size
badgeStyle: {
scalingMethod: 'fixed',
// ... other properties
}
// Utility function eliminates size calculation guesswork
const badgeScale = ogma.styles.fontSizeToBadgeScale(desiredFontSize);This maintains clear information hierarchy while eliminating the confusion between large badges and actual graph nodes.
Capability expansion: The card nodes plugin now provides sophisticated progressive disclosure, showing contextual node information based on zoom level and user interaction patterns. See the example here.
The UX flow
- Distance view: Skeleton placeholders maintain spatial awareness
- Medium zoom: Summary cards show key information
- Close zoom: Full detailed cards with complete data
Technical improvements:
- HTML-based implementation for rich content support
- Overlap prevention algorithms
- Level-of-detail controls for performance optimization
- Moving from example to standalone GitHub plugin due to demand
Use cases:
- Graph exploration with contextual detail
- Investigation workflows following node-to-node paths
- Cluster analysis with progressive information reveal
Current implementation: Keyboard navigation support introduces arrow key control (↑↓←→) for viewport movement and +/- keys for zoom control—the foundation for comprehensive accessibility.
Our vision: We're treating graph visualization itself as an accessibility challenge: making complex data inclusive to users with different needs and capabilities. This represents pioneering work in an area where traditional accessibility guidelines don't directly apply.
Roadmap ahead:
- Node-to-node navigation following graph structure
- Compliance pathway development
- Screen reader integration
- Alternative interaction methods
Beyond the major performance and React enhancements, Ogma 5.3 includes several refinements that improve the overall developer experience:
- Visual consistency: All node shapes now use uniform rounded corner values, creating a more polished and consistent appearance across different visualization styles.
- Improved error handling: The element.hasClass method now gracefully handles non-existent classes by returning false instead of throwing an error, making defensive programming patterns more straightforward.
- Better animation quality: Fixed visual glitches in quadraticIn and quadraticOut easing functions, ensuring smooth transitions in layouts and animations.
- Smarter selection management: When nodes and edges are hidden by transformations, they remain selected, making it easier to manage selection states and retrieve visible selected elements.
- Geographic positioning control: New latitude, longitude, and zoom parameters for geo mode enable precise camera positioning when enabling geographic layouts.
- Enhanced edge styling: setSelectedEdgeExtremitiesAttributes and setHoveredEdgeExtremitiesAttributes provide granular control over edge endpoint styling for selected and hovered states.
- API efficiency: Undeprecated layoutGroups API offers more efficient layout updates by rerunning layouts without recomputing the entire transformation pipeline.
The performance improvements in Ogma 5.3 benefit any application using visual clustering:
- Financial services: Fixed-size badges maintain clarity in complex transaction networks.
- Telecommunications: Analyze network topology and traffic flows with dynamic grouping
- Supply chain: Progressive disclosure manages information density in complex logistics networks
- Knowledge graphs: Navigate and cluster RDF data for semantic analysis
- Enterprise mobility: GPU performance on older devices expands deployment scenarios
These improvements reflect our broader commitment to making complex graph visualization both powerful and accessible. By eliminating performance barriers, solving visual hierarchy problems, and providing React developers with familiar, well-documented patterns, Ogma 5.3 enables teams to focus on insights rather than implementation challenges.
The combination of dramatically faster clustering performance, enhanced React support, and accessibility makes this release particularly valuable for teams building data exploration tools where user experience and technical flexibility are equally important.
Existing users can upgrade to Ogma 5.3 with our migration guide, and new users can experience these performance improvements immediately.
Explore the new features:
- Updated React Documentation - Complete guides and converted demos
- Interactive Performance Demo - See the 10x improvement in action
- Migration Guide - Step-by-step upgrade instructions
Originally published 25 June 2025. Last updated 10 September 2025.
A spotlight on graph technology directly in your inbox.
