How to make example colorscale heatmap horizontal instead of diagonal

plotly.js
1

How do I make the example JavaScript colorscale heatmap parallel to the x-axis and keeping the center of it in the middle of the y-axis. I cannot find in the documentation how to do this

Link to Colorscale Heatmap. It’s the first one : First Colorscale Heatmap

Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
  z: figure.z,
  colorscale: [
    ['0.0', 'rgb(165,0,38)'],
    ['0.111111111111', 'rgb(215,48,39)'],
    ['0.222222222222', 'rgb(244,109,67)'],
    ['0.333333333333', 'rgb(253,174,97)'],
    ['0.444444444444', 'rgb(254,224,144)'],
    ['0.555555555556', 'rgb(224,243,248)'],
    ['0.666666666667', 'rgb(171,217,233)'],
    ['0.777777777778', 'rgb(116,173,209)'],
    ['0.888888888889', 'rgb(69,117,180)'],
    ['1.0', 'rgb(49,54,149)']
  ],
  type: 'heatmap'
}];
Plotly.newPlot('myDiv', data);
   });
2

heatmap
heatmap700×500 7.92 KB

If this is the heatmap you’d like to plot, then define z as a list of lists, of this form

z= [[0, 0, 0, 0,  0, 0],
    [0.25, 0.25, 0.25, 0.25, 0.25, 0.25],
    [0.5, 0.5, 0.5, 0.5, 0.5, 0.5],
    [0.75, 0.75, 0.75, 0.75, 0.75, 0.75],
    [1, 1, 1, 1, 1, 1]]

For my plot the list z has the length 401, and each inner list has 500 identical elements.
I derived the cooresponding z for this heatmap (in Python)
dividing the interval [0,4] by 401 equally spaced points. Each such a point is the value that fills a sublist in z.