streamtube coloring and positions depend on data order #4206

var gd = document.getElementById('graphDiv');

var type = 'streamtube';

var allX = [];
var allY = [];
var allZ = [];
var allU = [];
var allV = [];
var allW = [];

var res = 10;
var ni = res;
var nj = res;
var nk = res;
var i, j, k;

for(var k = 0; k < nk; k++) {
    for(var j = 0; j < nj; j++) {
      for(var i = 0; i < ni; i++) {
            var x = i;
            var y = j;
            var z = k;

            allX.push(x);
            allY.push(y);
            allZ.push(z);

            var u = 0;
            var v = 0;
            var w = z;

            allU.push(u);
            allV.push(v);
            allW.push(w);

        }
    }
}

var allX2 = [];
var allY2 = [];
var allZ2 = [];
var allU2 = [];
var allV2 = [];
var allW2 = [];

for(var k = 0; k < nk; k++) {
    for(var j = 0; j < nj; j++) {
      for(var i = 0; i < ni; i++) {
            var x = k;
            var y = j;
            var z = i;

            allX2.push(x);
            allY2.push(y);
            allZ2.push(z);

            var u = 0;
            var v = 0;
            var w = z;

            allU2.push(u);
            allV2.push(v);
            allW2.push(w);

        }
    }
}

Plotly.newPlot(gd, {
  data:  [{
    type: type,
    x: allX,
    y: allY,
    z: allZ,
    u: allU,
    v: allV,
    w: allW,
    scene: 'scene1'
  },
  {
    type: type,
    x: allX2,
    y: allY2,
    z: allZ2,
    u: allU2,
    v: allV2,
    w: allW2,
    scene: 'scene2'
  },
],
  layout: {
    width: 1200,
    height: 600,
    scene1: {
      domain: {
        x: [0, 0.45]
      }
    },
    scene2: {
      domain: {
        x: [0.5, 0.95]
      }
    },
  }
}
);