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 email@example.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.
date: ; period:
US: ; UK: ; Germany: .
You can see how the plot is constructed in the HTML source:
params.time_axisproperty must be set with the appropriate entry being
true. Here, time is on the y-axis, so
params.time_axis = [false, true, false].
axis_length_ratiosto make the plot elongated along the time axis.
trueso that 5000 yield curves aren't drawn individually, but you can see the time series for each bond type.
params.data.otherfor later retrieval in the
.germany). These are also used to grab the data and when changing which countries' yields are plotted.