How to build a custom network visualization application with KeyLines

KeyLines is a Software Development Kit (SDK) for quickly and easily building network visualization applications that turn data into insight. The KeyLines SDK site includes everything you need to build your own app, including tutorials, downloadable demo examples, detailed API documentation and quick-start guides.

Why use an SDK?

With a toolkit like KeyLines, you get flexibility without the headache of creating your own code from scratch.

Every aspect of your application can be tailored to suit you, your data and the questions you need to answer. It will integrate seamlessly to suit the look, feel and UX of your product.

It’s designed for web deployment – using JavaScript, HTML5 Canvas and WebGL – meaning it’s very easy to incorporate into your existing tools and workflows.

The architecture of a KeyLines application

Harness the event model

When a user interacts with the KeyLines chart, an event gets raised. You can define what should happen for each of those events, building up your own UX. Perhaps you would like a menu to appear when you click a node, or for information to appear in a tooltip when a node is double-clicked? You can build this interaction model.

Building a custom user experience in this way means the application is intuitive and right for your users, reducing the need for training and ensuring high levels of adoption.

Visually customize your network visualization

The KeyLines SDK has been designed to help you build applications that are easy to use and understand. Almost every element of the KeyLines chart can be customized to suit your data and the questions you need to answer.

Nodes – These usually represent the main entities in your data. Our SDK provides the references to adjust almost every attribute of a node.

Links – These are the connections between your data entities. You can use attributes like weight, color and style to communicate different kinds and strengths of connection.

Halos – these are rings that orbit nodes, helping you highlight an event on a node – like a flag or warning. KeyLines can accommodate up to ten halos for each node, with the option to customize the radius, width, and color. They’re also very simple to animate.

Glyphs – These are small icons on nodes and links that are used to communicate different characteristics of a node or link. You can define their position, color or icon, and animate them for added effect.

Labels – These can be added to nodes and links and are the most obvious way of identifying the different elements in your chart. They can be customized with different font sizes and colors.

Charts – The entire chart can be customized to meet the requirements of your application – the background color, watermark text or image, chart logo and navigation controls and logo can all be modified.

Donuts – a colorful and simple way to understand, at a glance, the volumes of data in your network. You can select how many segments are needed, their size and the color palette used.

Self-links – If you’re analysing an IT network or cyber threat, it’s not unusual to find nodes that send network traffic to themselves. Self-links reflect this neatly.

Fine-grain control – the KeyLines SDK gives you control over a huge range of other visual attributes, from arrow-head size, to label height, to link behavior when it approaches a node.

Selection – You can adjust the effect used to highlight selected entities, and define the behavior around selected nodes and links.

Ready to learn more?

Our white paper explains in more detail how you can use the KeyLines software development kit to build your own great network visualization application.

Download the White Paper

From the blog

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.

KeyLines tutorial: presenting graphs on images

This developer tutorial demonstrates how to use images as backdrops. With detailed code examples throughout, you’ll see how easy it is to provide custom context for your visualizations.

KeyLines 5.2: (drum roll...) Combos are out of beta!

The beta development phase of KeyLines’ node-combining ‘combos’ feature is over. You can download KeyLines 5.2 now and discover the power of combos.

Visit the blog

Subscribe to our newsletter

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