High performance network visualization

Powered by WebGL and HTML5 Canvas

Finding a network visualization technology that works for all users is essential. An analyst in the office, a tablet user in the field, or the CEO on an iPhone: they all need quick and easy access to visualization tools.

KeyLines offers excellent cross-browser and device compatibility, running in virtually any environment. This is achieved by using a variety of flexible web technologies.

HTML5 and WebGL graphics rendering

KeyLines is a JavaScript toolkit for building web applications for network visualization. We’ve chosen two different web technologies to render graphics in the browser: WebGL and HTML5:

WebGL

WebGL harnesses the user’s machine’s GPU to give outstanding power and performance, especially when visualizing larger data sets. In our benchmarks, KeyLines’ WebGL renderer was around 10x more performant than the HTML5 equivalent. There is, however, a trade-off. As a newer technology, WebGL is not supported by some older browser versions.

HTML5

HTML5 Canvas is KeyLines’ back-up renderer. If your user’s browser is not WebGL-compatible, KeyLines will automatically revert to HTML5. Although not as powerful as WebGL, Canvas still offers outstanding performance, easily able to handle networks with hundreds of nodes and links.

We’ve made sure the KeyLines API for both options rendering options is identical, so you only need to write your code once.

KeyLines Performance

We’ve worked hard to make KeyLines the most powerful network visualization tool available. We’ve done this by harnessing high-performance rendering technologies, and carefully optimizing our code and algorithms for speed and power.

The precise performance you will get from KeyLines depends on many different factors – the device, browser, data set and renderer used, to name a few) but our benchmarks have shown KeyLines using the WebGL renderer is capable of running at a fluid 60 frames per second with 100,000 chart elements:

Even with a more complex network with labels, you will enjoy a high frame rate with 10,000 elements.

Touch device support

It’s important that your network visualization application is accessible to all users – regardless of the device they’re using. KeyLines is fully compatible with Android and iOS devices, and all a wide range of different touch screen devices, supporting the interactions and gestures your users are familiar with, including:

  • Swipe to move
  • Pinch to zoom
  • Drag, drop and explore

From the blog

5 (quirky) ways to style combos for maximum impact

Combos are great for reducing clutter and organizing your networks into something more manageable. This blog demonstrates five combo styling ideas you’ve probably never thought of.

More powerful geospatial with KeyLines and Esri ArcGIS

We show how to integrate KeyLines with Esri’s open source esri-leaflet library to access their ArcGIS mapping platform.

KeyLines 5.1: New year, new combos

The groundbreaking combos functionality released early last year just got better. Enhanced features, neat styling and improved performance will change the way you group chart items.

Visit the blog

Subscribe to our newsletter

Get occasional data visualization updates, stories and best practice tips by email