Hi! I've spent the last few weeks developing a visualization of live Bitcoin activity, which shows how new transactions pile up in the mempool before being packaged into blocks.
Whenever I make Bitcoin transactions, I tend to sit mindlessly refreshing a block explorer until they're confirmed. My aim with this project was to come up with something a bit more engaging to watch while waiting for the next block.
The front end is built in Svelte, with the visualization itself rendered in vanilla WebGL. On the back there's an Elixir server which consumes ZeroMQ events emitted by a local Bitcoin node, parses the raw block and transaction data, and forwards it over websockets to any connected clients.
This was my first foray into both Svelte and Elixir/Erlang (coming from a professional background of mostly Vue, Node and Python), so the whole project was a bit of a learning exercise.
Aside from playing with those bits of new tech, I particularly enjoyed the challenge of designing the Mondrian-style online square packing algorithm, and streamlining the graphics pipeline to handle several thousand separately animated squares without hammering the processor or frame rate too hard.
I noticed for the donation when choosing Lightning you have to generate an invoice first. LND for example supports "keysend" which allows variable payer-initiated payments while from the payee side you can show the same static QR code: https://github.com/lightningnetwork/lnd/pull/3795
I didn't check if all Lightning clients already support it, but I think most do.
Yeah, keysend would be perfect for this. Last time I checked there wasn't quite enough support across the more popular lightning wallets, but I'm definitely keen to switch over once the feature gains more traction.
I love it! I’m guessing that mempool is coming from a node you are running?
I first assumed the square size was based on the number of bytes, then I clicked the tooltip an it is based on transaction size in BTC which was surprising for a visualisation of the block but perhaps that’s more interesting to people.
It was amazing to watch a new block get formed!
The most satisfying thing I’ve seen in a while and a nice antidote to hatetris!
10 comments
[ 3.1 ms ] story [ 30.7 ms ] threadWhenever I make Bitcoin transactions, I tend to sit mindlessly refreshing a block explorer until they're confirmed. My aim with this project was to come up with something a bit more engaging to watch while waiting for the next block.
The front end is built in Svelte, with the visualization itself rendered in vanilla WebGL. On the back there's an Elixir server which consumes ZeroMQ events emitted by a local Bitcoin node, parses the raw block and transaction data, and forwards it over websockets to any connected clients.
This was my first foray into both Svelte and Elixir/Erlang (coming from a professional background of mostly Vue, Node and Python), so the whole project was a bit of a learning exercise.
Aside from playing with those bits of new tech, I particularly enjoyed the challenge of designing the Mondrian-style online square packing algorithm, and streamlining the graphics pipeline to handle several thousand separately animated squares without hammering the processor or frame rate too hard.
I'd love to hear any feedback or questions!
Some thoughts:
- Why are transactions dropping in bursts?
- Would it make more sense to have the latest block at the bottom, then the white line on top, then the mempool on top of that?
- It might be cool to give some room to a context of the whole blockchain.
- "3 minutes ago" on each transaction hover popup would be helpful.
- It might be fun to add "highlight a transaction", and then someone could use this and see their transaction in the mempool while they wait
- An "ETA" until next block might be helpful
- Perhaps also show $USD?
- Can you make one for BitClout?
I noticed for the donation when choosing Lightning you have to generate an invoice first. LND for example supports "keysend" which allows variable payer-initiated payments while from the payee side you can show the same static QR code: https://github.com/lightningnetwork/lnd/pull/3795
I didn't check if all Lightning clients already support it, but I think most do.
Yeah, keysend would be perfect for this. Last time I checked there wasn't quite enough support across the more popular lightning wallets, but I'm definitely keen to switch over once the feature gains more traction.
I first assumed the square size was based on the number of bytes, then I clicked the tooltip an it is based on transaction size in BTC which was surprising for a visualisation of the block but perhaps that’s more interesting to people.
It was amazing to watch a new block get formed!
The most satisfying thing I’ve seen in a while and a nice antidote to hatetris!
Yeah, there's a lightweight pruned node running on the back end that supplies all of the transaction data and mempool statistics.
Sizing based on byte size is a great idea, I'll think about adding that as an option.