3D Yield Curve - using array of arrays as the z-axis?

plotly.js
1

My aim is to create a 3D yield curve using the Plotly library in Javascript. I have found these examples of people achieving this in Python and R:

http://www.akll.io/2016/5/5/3-d-view-us-treasury-yield-curve-r/

I have also read through the examples of creating 3D graphs on:

From these examples I am able to plot one year of yield curve data using the following code:

// Add an empty element
DivElement divElement = new DivElement()
    ..style.width = "800px"
    ..style.height = "800px";
document.body.append(divElement);

// Create trace & layout options
Map traceA =
{
    'x': ['1-month', '3-month', '6-month', '1-year', '2-year', '3-year', '5-year', '7-year', '10-year', '20-year', '30-year'],
    'y': ['1990-01-02', '1990-01-02', '1990-01-02', '1990-01-02', '1990-01-02', '1990-01-02', '1990-01-02', '1990-01-02', '1990-01-02', '1990-01-02', '1990-01-02'],
    'z': [ '' , 7.83, 7.89, 7.81, 7.87, 7.9, 7.87, 7.98, 7.94, '' , 8.0],
    'type': 'scatter3d',
    'mode': 'lines'
};

Map layout = { };

// Plot
Plot plot = new Plot(divElement, [traceA], layout);

My issue though is how do I plot multiple years worth of data? I am able to achieve this by plotting a new trace for every year. For example, the following code achieves this:

// Add an empty element
DivElement divElement = new DivElement()
    ..style.width = "800px"
    ..style.height = "800px";
document.body.append(divElement);

// Create trace & layout options
List traces = [];
for(int i = 0; i < 10; ++i)
{
    Map trace =
    {
        'x': ['1-month', '3-month', '6-month', '1-year', '2-year', '3-year', '5-year', '7-year', '10-year', '20-year', '30-year'],
        'y': ['1990-01-0${i}', '1990-01-0${i}', '1990-01-0${i}', '1990-01-0${i}', '1990-01-0${i}', '1990-01-0${i}', '1990-01-0${i}', '1990-01-0${i}', '1990-01-0${i}', '1990-01-0${i}', '1990-01-0${i}', '1990-01-0${i}'],
        'z': ['' , 7.83, 7.89, 7.81, 7.87, 7.9, 7.87, 7.98, 7.94, '' , 8.0, '' ],
        'type': 'scatter3d',
        'mode': 'lines'
    };

    traces.add(trace);
}

Map layout = { };

// Plot
Plot plot = new Plot(divElement, traces, layout);

But I am not sure that plotting a new trace for every year can be the correct method? Is it not possible for example to supply an array of arrays as the z-axis or something similar (I have tried that but did not work for me). Note the code above is in Dart but happy for javascript examples as the 2 languages are very similar and know most people know javascript over dart.)

2

Ah. Those 3D yields curves are actually plotly.js surface traces.

See https://plot.ly/javascript/3d-surface-plots/ for some examples.

1 Like
3

Thanks - I think that solves it for me. Setting up my trace object like this now:

var trace = {
  		'x': ['1-month', '3-month', '6-month', '1-year', '2-year', '3-year', '5-year', '7-year', '10-year', '20-year', '30-year'],
  		'y': ['1990-01-02', '1990-01-03'],
  		'z': [ [7, 7.83, 7.89, 7.81, 7.87, 7.9, 7.87, 7.98, 7.94, 7, 8], 
  			   [7, 7.83, 7.89, 7.81, 7.87, 7.9, 7.87, 7.98, 7.94, 7, 8],
  			   ],
  		'type': 'surface'
	};

And seems to plot as expected. Let me know if you think I’ve done anything else wrong there!