The name’s KronoGraph: get started with the React version

One of the things developers love about KronoGraph, our timeline visualization toolkit, is its flexibility. It works with any JavaScript framework, and comes with a React component that makes dropping it into React applications a breeze.

In an earlier developer tutorial, I wrote about how to create a KronoGraph timeline visualization using the JavaScript API.

This time I’ll use the same dataset (the watches worn by James Bond) to demonstrate how easy it is to build a simple React application from the ground up.

Start building your timeline visualization in React

The KronoGraph version we’ll use was designed specifically for React developers. When I log into the SDK site, I choose React as my framework. From this point on, the documentation, code snippets and examples I see are React specific.

KronoGraph documentation supports both JavaScript and React versions
KronoGraph documentation supports both JavaScript and React versions

The simple getting started guide takes me through the process of downloading KronoGraph and importing it into a new application made with Create React App.

Within a couple of minutes I’ve already created an empty timeline. It’s as simple as adding a <Timeline> component to my app’s main component.

function App() {
  return (
    <div style={{ height: '100vh' }}>
      <Timeline />
    </div>
  );
}
A blank KronoGraph timeline visualization created using React
We’ve created our first React KronoGraph timeline visualization in minutes

Try the KronoGraph SDK for free

Join the KronoGraph EAP


Loading data into our KronoGraph React app

The React version of KronoGraph expects exactly the same data model as the plain JavaScript version. There’s more information on the data we’re using in the previous blog. To visualize the data here, we need to pass two mandatory props (events and entities) and two optional ones (eventTypes and entityTypes).

Passing just entities and events gives me the basic dataset.

<Timeline entities={data.entities} events={data.events} />
Our initial Bond-themed React timeline visualization built using KronoGraph
Our initial Bond-themed React timeline visualization built using KronoGraph

Now we can bring the data to life by adding entity types and event types to the component, which set the styles we’re going to use for the data.

Styling entities and timelines

With KronoGraph, it’s easy to build a React timeline visualization that looks great and matches your app’s style.

This example entityType entry tells KronoGraph to display all data items of type ‘actor’ using a combination of font icon and coloring.

   actor: {
      color: "#242424",
      icon: {
        text: "\uf554",
        color: "white",
        scale: 1.2,
        fontFamily: "Font Awesome 5 Free Solid",
      },
    }

To liven up my timeline, I’ll also pass an options prop to the component. This lets me style the timeline itself. Here’s what I’ll pass to it:

const options = {
    entities: {
      highlightColor: "#F9F4E8",
    },
    focus: {
      backgroundColor: "#F3E0B0",
    },
    backgroundColor: "#F3F3F4",
    scales: {
      textColor: "#242424",
      borderColor: "#242424",
    },
  }

And here’s the result:

Customized font icons and styling bring our React timeline visualization to life
Customized font icons and styling bring our React timeline visualization to life

When you double click on a timeline, KronoGraph automatically drills down on that individual timeline and its connections. For investigators working with particularly large datasets featuring many timelines, it gives them the power to quickly identify and analyze key events.

Here, the focus part of the options prop lets me control how items are styled when the user double clicks them. When we double-click Sean Connery, KronoGraph highlights his timeline, making it easier to analyze his relatively modest range of watch choices:

Use KronoGraph’s customization options to style selected timelines and focus on areas of interest
Use KronoGraph’s customization options to style selected timelines and focus on areas of interest

Our React timeline visualization is fairly simple, but we still benefit from the ability to focus on a specific timeline in this way.

Adding interactions

The React version of KronoGraph comes with the same interaction handlers as its JavaScript counterpart, so you can design interactions that match your user’s investigative workflows. That’s the beauty of a toolkit approach: you get to decide how your app looks and behaves so it fits your particular timeline visualization use case.

If you want to bind to a hover event to generate a tooltip, just add a handler to the relevant prop.

I’ll store my tooltip in state using the useState hook, something like this:

  const [tooltip, setTooltip] = useState(null);

Next I’ll write a simple hover handler which updates this state based on the data for the event I’m hovering over.

<Timeline
        entities={entities}
        events={events}
        onTimelineHover={({ id, x, y }) => {
          const event = id === undefined ? null : events.find(ev => ev.id === id);
          if (event) {
            setTooltip({
              data: event.data,
              x,
              y
            }
          } else {
            setTooltip(null);
          }
        }}
      />

All that’s left is to add a tooltip component to my app which pulls my tooltip definition from state. In our Bond timeline visualization, this brings out key information about the movie that’s stored on the data property of my timeline data.

It’s Omegas all the way from the 1990s onwards, but Pierce Brosnan was more loyal to the same timepiece than Daniel Craig, who’s worn 7 different models so far
It’s Omegas all the way from the 1990s onwards, but Pierce Brosnan was more loyal to the same timepiece than Daniel Craig, who’s sported 7 different models so far

Create your own React timeline visualizations

I’ve shown how it’s really easy to use KronoGraph in React. Drop in your data and the timeline component will effortlessly adapt to whatever you pass it.

Want to try for yourself? Join our Early Access Program

More from our blog

Visit our blog

Registered in England and Wales with Company Number 07625370 | VAT Number 113 1740 61 | 6-8 Hills Road, Cambridge, CB2 1JP. All material © Cambridge Intelligence 2020.