KeyLines Architecture

A simple and secure architecture for your
visualization application.

The generic architecture of a KeyLines application
The generic architecture of a KeyLines application.

KeyLines’ architecture is simple, secure and scalable. You won’t need dedicated visualization servers, questionable Java applets or additional information security measures.

Above is an overview of how KeyLines network visualization architecture fits together.

A simple data visualization solution

KeyLines is made up of a few files which are deployed on your web server. Your web pages load one KeyLines JavaScript file which defines a set of functions for you to call.

The JavaScript controller is your customization code: it calls KeyLines functions for adding data to the chart. To customize behavior you bind to events which are triggered by the KeyLines component – showing extra information when the end-user clicks an item, for example.

The icons, images and glyphs used by KeyLines are hosted on your servers. We can provide icon sets but you are free to choose your own too.

Automatic rendering in any browser

In a modern browser, you can choose to either use WebGL or HTML5 Canvas for graphics rendering. WebGL offers the best performance but is not supported by as wide a range of legacy browsers as Canvas.

The smart thing about KeyLines is that exactly the same API is used for both renderers. The whole issue is abstracted away from your code, leaving the developer free to concentrate on the business logic.

Visualize bigger networks with WebGL

The WebGL component offloads much of the heavy lifting to the device’s GPU. By harnessing this additional processing power, it is possible to visualize much larger and more complex networks compared to the HTML5 Canvas renderer.

Read more about the KeyLines 3.0 release.

Event model

As the end-user interacts with KeyLines, it raises events. Developers can bind to those events to customize the behaviour of the component.

For example, by binding to the ‘contextmenu’ event, a developer can create a right-click menu for items on the chart.

Other events include ‘hover’ (for tool-tips), mouse clicking and keyboard presses. The SDK has many examples showing how these events can be customized.

Server architecture

KeyLines can be hosted by any web server – whether J2EE, .NET, NodeJS, or anything else. All KeyLines needs is to be embedded on the web page.

You are free to define your end points, MVC patterns and authentication choices in your favourite framework.

Choose your own framework

KeyLines has no dependencies. It does not depend on any 3rd party libraries such as JQuery. Nor does it extend any of the base Javascript prototypes or define global variables: everything is encapsulated within the KeyLines namespace.

This leaves the developer to choose their own preferred framework to work in, whether it is AngularJS, React, Ember, ExtJS, or any of the other hundred frameworks out there.

Scalable visualization

One key advantage in the KeyLines architecture is that there is no need to deploy visualization servers.

Some visualization vendors render content on the server-side and this can lead to difficulties:

  • Pushing images across the wire uses more bandwidth and can lead to higher latency
  • Visualization servers need to be purchased, configured and maintained – which costs more money
  • Additional servers may be needed at peak times or if the load increases

Our approach is much more scalable: processing for graphics is done client-side, meaning that the architecture can be simpler, the server costs are minimised and capacity is easier to plan. Furthermore, our components are simple, self-contained and easy to drop into a web application.

Secure data visualization

The traditional way of visualizing data in a browser is to use Java applets.

Java applets were invented back in the 1990s and suffer from known security issues. The user experience isn’t great because users have to accept a security warning. And loading the applet can take a long while.

HTML5 gives better security: code runs in the browser sandbox. And there is no need for the user to click OK in a dialog or wait for the JVM to load.

Security and hosting

KeyLines is designed to be hosted on your own servers inside the corporate firewall. KeyLines never ‘phones home’ – it does not require any connection outside your firewall. It is totally self-contained.

KeyLines is also suitable for extranet or even public deployments. The transport layer can be SSL encrypted with HTTPS end-points for both the KeyLines component, the data loaded, and the assets.

If additional transport security is required for data content, this can be implemented by your custom JavaScript controller. How the browser caches content can be controlled by setting cache-control headers if necessary.

From the blog

Get more from your graphs with glyphs

In this blog post, we'll describe five of our favorite ways to breathe new life into your graph visualizations with stylish glyphs.

My first experience of visualizing data with KeyLines

In this blog post, a first-time KeyLines user describes their experience of using the graph visualization toolkit to create their own visualization.

Bringing chord diagrams to life with graph visualizations

There are so many visualization options to choose from. In this post, we examine the pros and cons of one popular choice: chord diagrams.

Visit the blog

Subscribe to our newsletter

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