Support 2D data for X and Y in contour trace

[ndrezn]

While surface plots support X, Y, and Z as 2-dimensional arrays, contour traces only support 2-dimensional arrays in the Z index, while X and Y must be 1-dimensional arrays.

Because the contour plot is a 2D representation of a surface plot, we would expect that the same data structure could be used to construct either trace.

A workaround to avoid manipulating the dataset would be to use a surface plot with an isometric projection and position so that only specific axes are visible.

See these examples for reference:

Surface.js

var x = [[1.254,        1.2415788,              1.2291576,              1.2167364, 1.2043152],
[1.2601017,            1.2475489,              1.2349961,              1.2224432,              1.2098905],
[1.2662034,            1.2535189,              1.2408346,              1.2281501,              1.2154658],
[1.2723051,            1.259489,                1.2466731,              1.233857,                1.2210411],
[1.2784067,            1.2654592,              1.2525115,              1.239564,                1.2266163],
[1.2845085,            1.2714293,              1.25835, 1.2452708,              1.2321916],
[1.2906102,            1.2773993,              1.2641885,              1.2509776,              1.2377669],
[1.2967119,            1.2833694,              1.270027,                1.2566845,              1.2433422],
[1.3028135,            1.2893395,              1.2758654,              1.2623914,              1.2489175],
[1.3089153,            1.2953097,              1.281704,                1.2680984,              1.2544926]];
 
var y = [[-341.0,       -335.22034,            -329.44067,            -323.661,                 -317.88135],
[-341.0,   -335.14996,            -329.29993,            -323.44986,            -317.59982],
[-341.0,   -335.0796,               -329.15915,            -323.23874,            -317.3183],
[-341.0,   -335.0092,               -329.01837,            -323.0276,               -317.03677],
[-341.0,   -334.9388,               -328.87762,            -322.81644,            -316.75525],
[-341.0,   -334.86844,            -328.73685,            -322.6053,               -316.47372],
[-341.0,   -334.79803,            -328.5961,               -322.39413,            -316.1922],
[-341.0,   -334.72766,            -328.45532,            -322.18298,            -315.91064],
[-341.0,   -334.6573,               -328.31458,            -321.97183,            -315.62912],
[-341.0,   -334.5869,               -328.1738,               -321.7607,               -315.3476]];
 
var z = [[0.1,             0.1,           0.1,           0.1,           0.1],
[0.10254237,          0.10250961,           0.10247686,           0.1024441,              0.10241134],
[0.10508475,          0.10501923,           0.104953706,         0.10488819,           0.10482267],
[0.107627116,        0.10752884,           0.10743056,           0.10733228,           0.10723401],
[0.11016949,          0.11003845,           0.10990742,           0.10977638,                  0.109645344],
[0.11271186,          0.11254807,           0.112384275,         0.11222047,           0.11205668],
[0.11525424,          0.115057684,         0.11486112,           0.11466457,                  0.114468016],
[0.11779661,          0.11756729,           0.11733798,           0.117108665,         0.11687935],
[0.120338984,        0.12007691,           0.11981483,           0.11955276,           0.11929069],
[0.12288135,          0.122586526,         0.12229169,           0.12199686,                  0.12170202]];
 
var data = [{
  x: x,
  y: y,
  z: z,
  type: 'surface,'
  contours: {
    z: {
      show:true,
      usecolormap: true,
      highlightcolor:"#42f462"
    }
  }
}];
 
var layout = {
};
 
Plotly.newPlot('myDiv', data, layout);

Contour.js

var data = [{
  z: [[10, 10.625, 12.5, 15.625, 20],
       [5.625, 6.25, 8.125, 11.25, 15.625],
       [2.5, 3.125, 5., 8.125, 12.5],
       [0.625, 1.25, 3.125, 6.25, 10.625],
       [0, 0.625, 2.5, 5.625, 10]],
  x: [-9, -6, -5 , -3, -1],
  y: [0, 1, 4, 5, 7],
  type: 'contour'
}];
 
var layout = {
  title: 'Setting the X and Y Coordinates in a Contour Plot'
};
 
Plotly.newPlot('myDiv', data, layout);