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.

Plot USA UK Germany

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

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

• Gathering the data is mostly an exercise in spreadsheets and then putting square brackets at the start and end of each line. The yield data is stored in the yield_data.js file.
• To use a data/time axis, the params.time_axis property must be set with the appropriate entry being true. Here, time is on the y-axis, so params.time_axis = [false, true, false].
• I use axis_length_ratios to make the plot elongated along the time axis.
• I set params.hide_mesh_x to true so that 5000 yield curves aren't drawn individually, but you can see the time series for each bond type.
• The dates in yield_data.js are just strings; they need to be converted into JavaScript Date objects before use.
• Each of the three countries' yield data is stored in params.data.other for later retrieval in the click function by d.input_data.other.usa, (or .uk or .germany). These are also used to grab the data and when changing which countries' yields are plotted.

Posted 2016-12-22.