Neo4j Live: Stunning Graph Visualizations with NVL

When data grows beyond tables and charts, visualisation becomes the fastest path to insight. That’s exactly where the Neo4j Visualization Library (NVL) shines. In a recent Neo4j Live session, Clemens Ansman from the Bloom team showcased how NVL transforms raw graph data into interactive experiences that help you see connections at scale.

Why NVL?

Originally built as the engine behind Neo4j Bloom, NVL is now available as a standalone, GPU-accelerated library. That means developers can integrate Bloom’s high-performance visualisation capabilities into their own apps – whether for quick prototypes or full enterprise tools.

NVL is:

Fast: GPU acceleration handles both layout and rendering, making even massive datasets smooth to explore.
Flexible: Its three-layer design (base library, interaction handlers, React wrappers) balances simplicity with deep customisation.
Proven: It already powers visualisation across Neo4j’s products, including Bloom, Explore and Data Importer.

Under the Hood: A Three-Layer Architecture

The base library renders static graphs at the core. Add interaction handlers for essentials like zoom, pan, and drag, and you’ve got an interactive canvas without reinventing the wheel. For React developers, NVL’s wrappers make it even simpler, synchronising props and handling common graph interaction patterns out of the box.

This layered approach means you can start simple, then dive deeper when you need custom behaviours.

From Demo to Discovery

To bring NVL to life, Clemens built a graph exploration app around Manchester crime investigation data. Nodes were colour-coded by type, sized by properties, and styled with captions, icons, and overlays – instantly creating a visual hierarchy.

Clicking on a node opens a detailed drill-down modal with related cases. This demonstrates how multiple NVL instances can work together to create layered experiences. It captures what NVL does best: turn complexity into clarity.

Performance Without Compromise

Visualising graphs isn’t just about looks – performance matters. NVL gives developers two modes to balance detail and scale:

Canvas Rendering: Full fidelity with labels and arrows, ideal for small–medium graphs (under ~1,000 nodes).
WebGL Rendering: GPU-accelerated mode that trades visual detail for speed, scaling to 100,000+ nodes while keeping interactions fluid.

For large datasets, hybrid approaches let you switch between modes dynamically – delivering both clarity and performance.

Beyond Force-Directed Layouts

While most graph tools stop at force-directed layouts, NVL goes further:

Hierarchical layouts for tree-like structures and organisational charts.
Custom positioning with setNodePositions() for circular, geospatial, or domain-specific layouts.
Hybrid layouts, where pinned nodes remain fixed while others arrange themselves dynamically.

One standout moment in the demo showcased NVL’s geospatial capabilities. Clemens filtered the crime data to show locations with latitude and longitude coordinates, then used custom positioning to map these nodes to their real-world positions while keeping related nodes arranged around them through force-directed layout. The result was a hybrid visualisation where geographic accuracy met relationship clarity – pinned location nodes stayed fixed to their coordinates while other connected data points (officers, vehicles, phone numbers) clustered naturally around them.
This flexibility makes NVL a fit for everything from investigative dashboards to location-based apps.

Getting Started

Although the demo used React, NVL is framework-agnostic. Vue, Angular, Svelte, or even vanilla JavaScript apps can all integrate NVL by wrapping its imperative API into reactive patterns.

NVL is freely available through npm and can be used in any application that connects to a Neo4j database – the only true requirement. Whether you’re building internal tools, customer dashboards, or specialised domain applications, you can integrate NVL without additional Neo4j licenses. The library’s documentation includes step-by-step guides, API references, and boilerplate projects for both vanilla JavaScript and React to get you up and running quickly.

Key Takeaways for Developers

Start simple, scale smart: Begin with interactive wrappers, then optimise with custom interactions.
Balance detail and performance: Switch between Canvas and WebGL modes as your dataset grows.
Explore custom layouts: Use geospatial, hierarchical, or circular positioning to surface domain insights.
Plan for scale: NVL handles massive graphs, but thoughtful UX design around rendering and layout is key.
Integrate freely: NVL fits into any modern JavaScript ecosystem.

Additional Resources