KeyLines FAQ – The improved time bar

8th May, 2018

Time is often a crucial dimension in understanding connected data and unlocking insight. The KeyLines time bar is a great way to analyze how networks change and evolve over time.

In a previous blog post we introduced you to working with the time bar. In this FAQ post, we take a closer look at the time bar improvements, introduced in the KeyLines 4.2 release, and how they can help you visualize and explore your dynamic graph data more accurately.

1. What is the time bar?

The KeyLines time bar is a powerful tool to help you interpret how your connected data evolves and behaves over time. As long as your data has a timestamp, the KeyLines time bar can visualize it.

A KeyLines chart and time bar, representing malware attacks and their target countries
A KeyLines chart and time bar, representing malware attacks and their target countries

We’ve designed the time bar to work seamlessly with the KeyLines chart. The time bar and chart are independent of each other, so can be deployed as a standalone components, or be fully integrated with one another. If integrated, you can use the time bar to explore, filter and ‘play’ the data in your chart.

2. Why should I use the time bar?

Most graph data has a time element, which analysts need to explore. The time bar helps reveal a dataset’s temporal trends, allowing you to filter large datasets, understand what happened during a specific period of time, watch a network form, evolve and break or understand trends at a sub-network level.

The KeyLines time bar
The KeyLines time bar

In the example below, we’ve used a simplified, fictitious dataset (adapted from this Neo4j graph gist) representing credit card fraud data. We’ve use the time bar’s ‘play’ feature to show how the network of people, transactions and retailers forms and breaks over time. The histogram represents the total volume of transactions in the network and the red trend line shows the number of disputed transactions.

The time bar in action
The time bar in action

Let’s have a look at what changed in KeyLines 4.2.

3. What’s better about the time bar?

Until KeyLines 4.2, the time bar represented events with a single timestamp ‘dt’. This was great for instantaneous events – like text messages or transactions – that took place at a particular point in time. But what about events like relationships or phone calls, that have a start point, end point and duration?

As of KeyLines 4.2, time bar items can have two timestamps: dt1 and dt2. This means they can have a start and end point, so you can show relationships over a period of time as well as instantaneous events. This helps you represent your temporal graph data more accurately, resulting in clearer insight, faster.

Below we show you what you need to do to show time periods.

4. How do I use time periods?

Changing your data to take advantage of this new feature is pretty straightforward. The time period object is a dt1 and/or dt2 property representing the start and/or end of the time period. To represent an open-ended time period, set the dt1 property only. To represent a time period without a start time, set the dt2 property only.

Your JSON object would look something like this:

var data = {
 items: [
   { id: 'id1',         //'id1' is the identity that the item relates to
     dt: [...],         //a time entry or array of time entries - Date objects or numbers,
                        // or a TimePeriod object
     v:  [...],         //an optional value or array of values for each time entry
                        //values must be numbers, there must be one for each time entry
   { id: 'id2',
     dt: [...],
     v:  [...]
timebar.load(data, function () {
  //fit the time bar to the data:
  timebar.zoom('fit', { animate: false });

The KeyLines chart and the time bar both use the same JSON format, so you define your data once and load it into both your chart and the time bar.

Now that we’ve made the changes to the data, let’s see the new time bar.

5. Can I see the improved time bar in action?

The Show Time Periods demo, available on our SDK (which you can sign up for here) provides a great demonstration of the time bar advancements.

The fictitious data contains links between entrepreneurs and the companies they’re directors of and the demo cycles through the changing relationships. The person icon represents the entrepreneurs and the building icon represents the companies. When focusing on a particular entrepreneur, the red trend line shows the number of companies the entrepreneurs are directors of at the time selected in the time bar.

The updated time bar is able to handle events with no start/end points and open-ended events. In the example below, we can see when Brooke Fields was appointed the director of a company but because she never resigned and is still a director, we don’t have an end date.

The updated time bar
The updated time bar

Unleash the power of the time bar

The KeyLines time bar is a powerful feature, and a great tool to experiment with. If you want to explore the time bar and discover how it can help you understand your dynamic graphs better – request a KeyLines trial here.

Subscribe to our newsletter

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