Home > three_d.js > Examples

Yield curves

In March 2015, the New York Times' Upshot published a 3D visualisation of the yield curve. It remains the most technically impressive data visualisation work I've ever seen from a media outlet (and maybe from anyone?). I've implemented it as best I can below, and I give myself a low pass mark – the NYT's original is much smoother to rotate, but I at least can click on points and have the yields for a specific date displayed (below the plot). Sue Lockwood tried this as a one-off exercise here (finding that post was an encouragement to me to make 3D graphs), and her plot also rotates much more smoothly than mine, suggesting that I should really re-write my surface routines sometime.

There are almost 5000 trading days' worth of data along the date axis, going back to the start of 1998. Bond yield data for the US comes from the US Treasury; for the UK from the Bank of England, and for Germany from the Bundesbank.

Manipulating the plot on my Galaxy S3 causes Chrome to crash. I guess I'm too ambitious for the amount of triangles I want to draw. Please let me know if it crashes on a different device (email dw.barry@gmail.com or tweet @pappubahry).

Mouse controls: Left-click and drag to rotate; alt (Mac)- or ctrl (Windows)-click-drag or middle-click-drag to pan; scroll or shift-click-drag to zoom. Touch screen controls: one finger to rotate; two-finger scroll to pan; pinch to zoom. Click/tap on the cube icons to snap to a side-on view.


Clicked point:
date:  ; period:  
US:  ; UK:  ; Germany:  .

You can see how the plot is constructed in the HTML source:

Posted 2016-12-22.

Home > three_d.js > Examples