Build a live Bitcoin timeline & graph visualization

Bitcoin’s price made headlines in January 2021 after reaching an all-time high.

As the popularity of cryptocurrency continues to grow, the challenge facing anti-money laundering (AML) analysts and financial crime investigators gets tougher. In turn, there’s pressure on virtual asset service providers (VASPs) to comply with tighter regulations. Both must take a proactive approach.

We’ve blogged before about how our data visualization toolkits can build powerful apps to help users understand cryptocurrency exchange patterns and anomalies. But instead of looking at historic Bitcoin transactions, what if we could look at Bitcoin activity in real time? And why not combine a powerful Bitcoin network visualization chart, showing key connections, with a dedicated Bitcoin timeline view, featuring precise details of transactions as they happen?

A live dashboard of Bitcoin transactions - in timeline and chart form - created using our data visualization toolkits
A live dashboard of Bitcoin transactions – in timeline and chart form – created using our data visualization toolkits

In this blog post, I’ll use our KronoGraph and KeyLines data visualization toolkits to create a slick, interactive live dashboard.

Want to create your own live dashboard?

Request a free trial


About Bitcoin, and why timelines matter

We’ve blogged about Bitcoin before, so if you’re new to this cryptocurrency, check out What is Bitcoin?

After quadrupling in value in 2020, Bitcoin celebrated its 12th birthday in style by exceeding the $40,000 mark. The price has fluctuated since, but interest in Bitcoin continues to grow with approximately 330,000 daily transactions and over a million individuals mining at any time.

Bitcoin finished 2020 on a high. Source: https://www.coindesk.com/price/bitcoin
Bitcoin finished 2020 on a high. Source: https://www.coindesk.com/price/bitcoin

We’ve also seen rapid growth in technology companies building products to monitor and make sense of blockchain, the solution used by Bitcoin and other cryptocurrencies to maintain and protect the correct order of transactions.

In its simplest form, blockchain is a vast and complex series of transaction events between entities. With this in mind, the benefits of visualizing it as both a network and a timeline become obvious. Let’s explore this further, starting with examples of Bitcoin timeline charts built with KeyLines and ReGraph.

The graph visualization solution

Using our graph visualization toolkits, you can build apps that bring cryptocurrency data to life. Investigators use network charts to explore blocks and individual transactions of interest, relying on search queries to answer questions about items of interest.

When you visualize a Bitcoin block you spot distinct shapes and patterns right away.
When you visualize a Bitcoin block you spot distinct shapes and patterns right away.

They rely on the time bar to filter their data and focus on a specific interval to understand what happened in the past. This is a useful detection technique for uncovering patterns and anomalies that’s widely used by fraud analysts.

Fraud analysts need to know when unusual transactions took place. The time bar makes it easy to visualize time-stamped blockchain data.
Fraud analysts need to know when unusual transactions took place. The time bar makes it easy to visualize time-stamped blockchain data.

Now we’ll look at another way of visualizing cryptocurrency transactions: by building an interactive Bitcoin timeline directly from the data.

The timeline visualization solution

KronoGraph is a front-end toolkit for building interactive timeline visualizations. Apps built with KronoGraph reveal sequences of events, showing how they unfold and how they’re connected.

Fraud analysts need to know when unusual transactions took place. Transaction patterns are easy to spot using KronoGraph timelines
Transaction patterns are easy to spot using KronoGraph timelines

Investigators who need to understand transactions better, or VASPs trying to manage their regulatory compliance, benefit from the ability to visualize Bitcoin timelines in this way.

A timeline view answers crucial questions – who bought/sold what, and when? Blocks of transactions go from left to right, with directional arrows revealing Bitcoin transfers between bitcoin addresses. We’ve truncated the addresses to the first five characters to save screen space, but it’s easy to add a tooltip to reveal the full identity.

Learn more about KronoGraph

Download the white paper


So what’s the best solution for AML and fraud investigators? Should they choose a Bitcoin timeline chart to visualize blocks as a network, or choose Bitcoin timelines to reveal the precise sequence of transactions?

The answer = both.

KronoGraph integrates seamlessly with our graph visualization toolkits to create a powerful tool for exploring time-based data in a new way.

Let’s hook up to a live feed of Bitcoin transactions and visualize them in both network and timeline form.

The best of both worlds: a real-time Bitcoin timeline application

A live dashboard featuring Bitcoin timelines, together with a network chart, means investigators can spot patterns and anomalies as soon as they emerge. With visual alerts on suspicious wallets, accounts or locations, they’re notified immediately when activity takes place that needs further investigation.

A dynamic approach, which adapts the visualizations in real time as transactions occur, also makes your app stand out from the competition.

Let’s get started with our dashboard.

Building our Bitcoin timeline dashboard

Front-end development with JavaScript often means a large number of dependencies and complex build processes. This doesn’t have to be the case when you build an interactive app. My aim is to keep things simple, so for this dashboard, I’ll use plain (or ‘vanilla’) JavaScript and no dependencies.

We’ll use KeyLines – our pure JavaScript graph visualization library – to integrate with KronoGraph and build the dashboard.

Blockchain.info provides a great endpoint for monitoring Bitcoin activity as it happens. By subscribing to a particular WebSocket, We’re able to write code to handle each transaction in turn.

To connect to the Blockchain.info websockets, we’ll use the native browser WebSocket function:

const wsUri = `wss://ws.blockchain.info/inv`;
let websocket = new WebSocket(wsUri);
 
websocket.onopen = function (event) {
 state.items = [];
 websocket.send(JSON.stringify({ op: 'unconfirmed_sub' }));
};
 
websocket.onclose = function (event) {
 console.log('Socket closed');
};
 
websocket.onmessage = onMessage;
 
websocket.onerror = function (event) {
 console.log(event.data);
};

Here we’re sending an initial request to subscribe to all unconfirmed transactions. We then bind the onMessage function to the onmessage event listener. This is where we handle each of the transactions sent via the WebSocket.

The data provided by the endpoint is mapped to “in” nodes in our network chart (where the Bitcoin is coming from) and “out” nodes (where it’s going). The data also contains a Bitcoin transaction hash, which is the unique ID for every verified transaction in the blockchain. We don’t necessarily need this in our data model, but for now we’ll use purple nodes to represent them.

Visualizing Bitcoin transactions as a graph reveals interesting patterns in the data
Visualizing Bitcoin transactions as a graph reveals interesting patterns in the data

In our Bitcoin timeline, the entities (similar to nodes in KeyLines) down the left-hand side represent addresses. KronoGraph has helpfully aggregated these to fit as much data on the screen as possible. In this example, you’ll see that most entities contain (25) addresses.

Our dashboard presents a side-by-side view of our Bitcoin timeline and chart
Our dashboard presents a side-by-side view of our Bitcoin timeline and chart

The events (similar to links) on each timeline showing individual transactions. We’ve used styling options to reveal what’s happening at-a-glance. Entities shown as a brighter pink color represent addresses with more funds coming in than going out.

Converting this JSON data to the format expected by KeyLines is simple. We just need to create an array of nodes and links. KronoGraph expects a slightly different data format to account for cases where events can be connected, or can refer to more than two nodes.

KeyLines works effectively with dynamic networks, adapting to nodes and links incrementally as they’re provided to the graph. Our adaptive layouts option adds new items in a way that’s logical and easy to follow, so users don’t lose their mental map of where items exist on the chart. It’s also easy to use:

await chart.expand(chartItems, {layout: { fit: true, name: 'organic' }})

The equivalent function call for KronoGraph is the set function, shown here in the entire mergeWithChart function:

const mergeWithChart = async () => {
   const { chart, items, timelineData, timeline, mode } = state;
 
   if (['pause', 'stop'].includes(mode)) {
     return;
   }
 
   const fit = mode === 'play';
 
   itemsToTimeline(items);
   timeline.set(timelineData);
 
   if (fit) {
     runFit();
   }
 
   if (!state.layoutInProgress && mode) {
     await chart.expand(items, {
       layout: { fit, name: 'organic' },
     });
     state.items = [];
     setTotalSeen();
   }
   state.tick++;
 };
 
 const asyncMergeWithChart = asyncThrottle(mergeWithChart);

We want smooth animations across the dashboard as the data changes. To manage the large amount of transactions returned from the WebSocket, we’ll use a simple asyncThrottle function. This makes sure we only animate new data once the previous animation has completed.

Adaptive behavior means nodes accommodate new items by moving just as much as they need to and no more
HeroIcons controls

Investigators and analysts will want to pause live updates if they receive an alert or spot an anomaly in real time that needs further investigation. I’ve added pause, resume, stop and refresh controls using the excellent SVG HeroIcons to avoid a dependency on font icons in our application. I think they look great!

One neat trick: I automatically pause the updates when a user zooms into the Bitcoin timelines past a certain threshold. This is to avoid overwhelming them with new data if they’ve chosen to take a closer look.

To give extra context, in the bottom right corner of the chart we’ve included a counter of the approximate value of the Bitcoins shown in the dashboard.

A count of the total value of Bitcoins in the dashboard, updated in real time
Our chart includes a count of the total value of Bitcoins in the dashboard, updated in real time

In a half hour window, I watched transactions worth a staggering $963,401,426.84!

Finally, we mentioned earlier that the transaction ID we left as a chart node isn’t strictly necessary. It’s a common problem, and we’ve blogged about data modelling best practice and how the data model provided by an endpoint or database isn’t always the right fit for a visual representation. To update our dashboard, we can just link the “in” and “out” nodes directly, and remove the transaction node from the chart. It also removes the transaction events from the timeline.

A count of the total value of Bitcoins in the dashboard, updated in real time
Bitcoin timelines and a Bitcoin timeline chart: two powerful views of the same live data

Build your own Bitcoin timeline & chart

We’ve used KeyLines and KronoGraph to create our own integrated Bitcoin timeline and chart application. It gives investigators two powerful ways to analyze the same data and monitor live transactions, a valuable technique in their fight against money laundering and fraud. Our app was quick and easy to create, and (my favorite bit) dependency-free.

If you’re tempted to build your own live dashboard, sign up for a free trial of our toolkits.

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 2021.