Sigma Large-Graph Rendering

Overview#

An investigation network with 50,000 nodes is not a problem that a force simulation running on the main thread can solve. D3 force simulations stall, frames drop below one per second, and the analyst is left waiting for a layout that never converges. The same network handed to a WebGL renderer that was designed for this scale becomes interactive in seconds: nodes rearrange under ForceAtlas2, zoom and pan respond immediately, and clicking a single node to highlight its neighbours does not pause the rest of the canvas.

The Sigma Large-Graph Rendering module adds a second rendering engine alongside the existing D3 and Three.js graph views. Sigma.js v3, backed by graphology as the in-memory graph structure, renders graphs of 100,000 nodes and edges at interactive frame rates by drawing everything through WebGL. The ForceAtlas2 algorithm, originally published in the Gephi ecosystem, handles layout in a worker-friendly synchronous pass that completes within the browser without blocking the UI thread. A Noverlap post-processing pass prevents nodes from sitting on top of each other after layout converges. The renderer is auto-selected when a graph exceeds 5,000 nodes, and can be manually toggled via the toolbar for any investigation network.

Last Reviewed: 2026-04-14 Last Updated: 2026-04-14

Key Features#

• Sigma.js v3 WebGL Rendering: The graph is rendered entirely through WebGL via Sigma.js v3, bypassing the DOM entirely for node and edge drawing. This means 100,000 node graphs render at 30-60 frames per second on mid-range hardware. The camera system handles zoom and pan in the GPU layer, keeping interactions smooth regardless of graph size.

• ForceAtlas2 Layout: The ForceAtlas2 algorithm from the Gephi project is used for initial layout. Barnes-Hut approximation reduces the per-iteration cost from O(n^2) to O(n log n), making it tractable for very large graphs. Gravity, scaling ratio, and slowdown parameters are all configurable. The algorithm runs synchronously in a single pass so layout completes and the graph becomes interactive as quickly as possible.

• Noverlap Post-processing: After the primary layout algorithm converges, a Noverlap pass adjusts node positions to remove visual overlap. This is especially useful after Circular or Random layout where all nodes start at predictable positions. Noverlap runs as a short secondary pass and does not significantly increase total layout time.

• Auto-selection and Manual Toggle: The rendering engine is chosen automatically based on graph size. Graphs with more than 5,000 nodes use Sigma by default. Graphs below that threshold use the existing D3 view. The toolbar includes a toggle button that lets analysts switch between engines at any time, which is useful when comparing layouts or when the automatic threshold is not appropriate for a particular network.

• Degree-Based Node Sizing: Node sizes scale with degree. Nodes connected to many other nodes appear larger and are easier to identify as hubs. A configurable minimum and maximum size cap prevents single outlier nodes from dominating the canvas or becoming invisible. Explicit per-node sizes from the data are respected and override the degree-based calculation.

• Entity-Type Colour Mapping: Nodes are coloured by entity type using the Argus colour palette. Person nodes are blue, Organisation nodes orange, Location nodes green, Threat nodes red, and so on. The mapping follows the same palette used elsewhere in the platform so that analysts move between graph views and other data views without having to re-learn what each colour means.

• Hover Neighbourhood Highlight: Hovering over a node dims all nodes and edges that are not direct neighbours of the hovered node. This lets an analyst quickly assess the immediate connections of any node in a dense graph without losing their place in the wider structure. Moving the cursor off the node restores the full graph immediately.

• Performance HUD: A small overlay in the bottom-right corner shows the current node count, edge count, and live frames-per-second reading. This helps analysts judge whether the graph is performing well on their device and gives them information to decide whether to apply layout with Barnes-Hut enabled or disabled.

Use Cases#

• Large Investigation Networks: An analyst receives a financial crime investigation graph with 40,000 entities and 120,000 relationships. The Sigma renderer loads and layouts the network in seconds and remains interactive throughout, allowing the analyst to explore the network structure at scale.
• Hub Identification: Degree-based sizing and ForceAtlas2 layout naturally pull high-connectivity nodes to the centre of the canvas. Analysts can immediately see which entities are most connected without running a separate centrality analysis.
• Neighbourhood Exploration: An analyst clicks a single node to lock focus on it, then uses the hover highlight to trace its immediate connections without losing context on where that node sits in the broader network.
• Renderer Comparison: An analyst with a 3,000-node graph that performs adequately in D3 uses the toggle button to switch to Sigma and compare how ForceAtlas2 groups the network compared to the D3 force simulation.
• Layout Experimentation: An analyst uses the layout selector in the toolbar to switch between ForceAtlas2, Circular, and Random layouts to find the arrangement that makes the investigation network structure clearest.

Integration#

• D3 and Three.js Graph Views: The Sigma renderer sits alongside the existing D3 and Three.js views. No existing components are modified. The auto-selection threshold and toggle button handle renderer selection without requiring any configuration from the analyst.
• GraphVisualization Component: The SigmaGraphView component accepts the same node and edge data interface as the existing graph components, accepting arrays of typed node and edge objects that are mapped directly to graphology graph attributes.
• Argus UI Package: Toolbar buttons use the Button component from @argus/ui. Loading state during layout uses the LoadingSpinner component. All interactive elements follow the platform accessibility standards including aria-labels and minimum touch target sizes.

Open Standards#

ForceAtlas2 is described in: Jacomy, M., Venturini, T., Heymann, S., & Bastian, M. (2014). ForceAtlas2, a Continuous Graph Layout Algorithm for Handy Network Visualisation Designed for the Gephi Software. PLOS ONE, 9(6), e98679. DOI: 10.1371/journal.pone.0098679. The algorithm is published under the Apache 2.0 license as part of the Gephi project ecosystem.