visualizing Ukraine's Ethereum donations

The official account of Ukraine recently tweeted an Ethereum address asking for donations to aid in their fight against the Russian occupation.

I was watching the transactions flow in and was amazed to see that in every new block there were multiple new donations. I wanted a better way to visualize this.

As I run a local archive node and multi-chain indexer, accessing the transaction data through an API was easy.

I created a small wrapper API that would retrieve the latest transactions just for the donation address and then provide this data in real time through a websocket.

With this, I created ukraineeth.xyz.

Each cube represents a donation, and the size of the box represents the amount of Ethereum donated. Hovering over a cube will show the sender's address and the amount donated.

As new transactions are received, they are pushed down through the websocket and the visualization is updated.

On the client side, I started with D3.js however wasn't able to make the level of customizations I wanted, so I ended up switching to Three.js just to get a more "free form" visualization. As this was just a Sunday afternoon side project, you'll probably notice that the base style / animation is shamelessly stolen from my own homepage, however in the future I do plan on building out some more data-focused blockchain visualizations back on d3.js.

I should note, this does not show all transactions - just the last ~200, plus all new ones received since you loaded the page - because more than a few hundred mesh items seems to cause Three.js to go a bit haywire.

last updated 2022-02-28T07:23:37-0800