Ethereum Live. Visualising the Ethereum blockchain.

One of Double Negative's products is EthTools.com, a website which provides a number of tools for interacting with the Ethereum blockchain.

I have recently been playing around with D3.js a visualisation library written is Javascript. It hit me that visualising the Ethereum blockchain would be incredibly cool and would allow for a better understanding of how the blockchain is being utilised. As blockchain becomes more prominent it is my view that analytical tools for working with the chain will become increasingly important.

D3.js is not a simple library to work with. It is as simple as it could be but given what it does it neccesitates a certain level of complexity. When playing with new libraries I tend to not read documentation and simply dive in. I would suggest that with D3.js you read the documentation first :)

The result of my playing is Ethereum Live.

Ethereum Live allows you to visualise transactions that have been mined on the Ethereum blockchain in real time (ish). Whilst developing the tool there were a number of engineering hurdles that I had to jump through mainly pertaining to the efficient loading of large amounts of data in near real time from the blockchain. During this process it hit me that without some enterprise level infrastructure loading all transactions in real time would be nigh on impossible. Even then.. I suspect that browsers simply could not handle the overhead associated with showing all transactions as they happen even with a well optimised library like D3.

The problem is that Ethereum is too popular.

I recently saw the below infographic on Twitter. It almost certainly needs to be taken with a pinch of salt (as it is being shared by speculators), but the general point stands. Lots of transactions.

Large scale usage and short block times mean that hundreds of transactions are being mined every minute. This will only increase.

Even if we could show them all in real time I suspect that the resulting graph would be of little use. It would be too crowded.

Instead I opted for a live graph with delayed loading.

10 transactions will be loaded at a time that have been mined from the point at which you load the page.
If you are logged into your EthTools.com account, 10 further transactions will be loaded every 5 seconds. If you are not logged in every 20 seconds.
At any point you can click 'Load more' to.. load more.
At all points we detail how many transactions have been mined since that are not displayed (yet).

This setup is to attempt to provide a useful tool which provides insight whilst not destroying our servers. We are absolutely open to suggestions on how this can be improved/optimised to provide the most value to you.

Features

You can click a node to see details of the address.

You can click a a transaction (or internal transaction) line to see transaction details.
You can toggle the graph 'type' such that the color of the transaction lines visually represent the value of the transaction, the amount of gas used, or the gas price. You can easily see if most transactions are for 0.01 Ether or 1,000 Ether.
You can discern between contract transactions and value transfer transactions, and you can show/hide internal transactions.

Whilst the code and the backend to power this tooling is fairly complex the actual end product is actually fairly simple. Simple but powerful. I think it provides a huge amount of insight.

It seemed only logical to utilise the same tooling to provide some additional visual functionality. As such you can now see a visual representation of transactions mined in a specific block as well as those sent/received by a specific address.

These graphs can be accessed from:

The individual block transactions page (for example here).

The individual address/contract page (for example here).

Contact us if you have any comments or suggestions for further development. You can also follow EthTools on Twitter or my personal account.