Plotly 3dscatter and colorscale

Question

I am using Plotly.js through its JavaScript API to plot some 3D scatter plots. It looks fantastic:

In this plot the colors of the points are based on the z values of the points. If I change this to the x or y values (by changing the data[0].marker.color array), and redraw, things go wrong:

I expect to see something like:

No matter if I use redraw or newPlot again. It looks like once a colorscale is calculated from the data it keeps the same mapping function from data to color. So my question is how can I "invalidate" the colorscale such that things get recomputed when doing a redraw with a new color array.

update

In the answer from etpinard (thanks!) there is a simple complete example. However this version has already all x,y, and z data nicely scaled between 0 and 1. I.e. it has:

function randomArray() {
  var out = new Array(N);
  for(var i = 0; i < N; i++) {
    out[i] = Math.random();
  }
  return out;
}

var x = randomArray(),
    y = randomArray(),
    z = randomArray();

My data has different units for x,y and z. I can simulate this with:

function randomArray(lo,up) {
  var out = new Array(N);
  for(var i = 0; i < N; i++) {
    out[i] = lo+(up-lo)*Math.random();
  }
  return out;
}

var x = randomArray(0,1),
    y = randomArray(0,1),
    z = randomArray(0,1000);

With this version the first plot looks good:

We color the dots according to their z value. But then when I click on the 'x' button I see:

I hope this helps to reproduce the problem.

Answer 1

You should try using Plotly.restyle for operations of the sort.

Here's an example: http://codepen.io/etpinard/pen/WrxRKO