jQuery, Websockets, and Bitcoin Time and Sales

If you haven’t seen Clark Moody’s Mt.Gox bitcoin market data website yet, you should.  It’s a really beautiful presentation of realtime Mt.Gox BitCoin orderbook depth, the trade tape, and charts at various time frames.

I was so impressed by Clark’s presentation of market information that I wanted to dig into how modern web sites present information from real-time data sources.  I don’t typically work on web applications, so I had to figure out what was involved.  There were three pieces of key knowledge:  1) Basic javascript, 2) knowing how to use a websocket API, and 3) using CSS and jquery to figure out how to manipulate documents in a web browser.  (I had very minimal knowledge of all three.  Fortunately, Javascript is easy to get a handle on for someone with previous programming experience.)

I first went to look at the Mt.Gox API web page, where I found some simple explanations on how to connect to their streaming market data.  After using a dozen console.log() statements to see what I was looking at, I finally tweaked my Javascript code to manipulate table rows in a tbody styled by CSS.  I ended up with this time and sales viewer.  (Please note that when loading the viewer, it will take a few seconds to establish a connection to the exchange.  Once the connection occurs, you should be able to see current trades happening in realtime.  Note that I’ve only tried the viewer in Chrome and Firefox.  I have no idea what browsers it works and doesn’t work in, as the project was just an experiment.)

The mini-project was a great deal of fun — websockets are very interesting.  I was impressed by how much could be accomplished with so little work.