plotly colorscale in scatter data plot

Question

Using marker:{color:x} in javascript plotly (http://jsfiddle.net/d8bt1qof/), I can color-code my data:

But how can I change the colorscale?

Different colorscales seems to be available (https://plotly.com/javascript/colorscales/), but the usage is only explained for heatmap plots. And adding colorscale: 'Portland' seems not to work.

Answer 1

scattergl trace markers can also have a colorschale. I found a reference for it in the documentation here:

colorscale Parent: data[type=scattergl].marker Type: colorscale Sets the colorscale. Has an effect only if in marker.coloris set to a numerical array. The colorscale must be an array containing arrays mapping a normalized value to an rgb, rgba, hex, hsl, hsv, or named color string. At minimum, a mapping for the lowest (0) and highest (1) values are required. For example, [[0, 'rgb(0,0,255)'], [1, 'rgb(255,0,0)']]. To control the bounds of the colorscale in color space, usemarker.cmin and marker.cmax. Alternatively, colorscale may be a palette name string of the following list: Greys,YlGnBu,Greens,YlOrRd,Bluered,RdBu,Reds,Blues,Picnic,Rainbow,Portland,Jet,Hot,Blackbody,Earth,Electric,Viridis,Cividis.

So an example based on your fiddle you could look like this:

var x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

var trace1 = {
  x: x,
  y: x,
  mode: 'markers',
   marker: {
    size: 20,
    color: x,
    colorscale: 'Greens'
  },
};

Plotly.newPlot('myDiv', [trace1], {});

Answer 2

Here is an implementation for a custom colorscale based on the viridis colour scale R users will be familiar with.

var x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var y = vector_normalise(x);

var trace1 = {
  x: x,
  y: x,
  mode: 'markers',
  marker: {
    colorscale: [
      [0.000, "rgb(68, 1, 84)"],
      [0.111, "rgb(72, 40, 120)"],
      [0.222, "rgb(62, 74, 137)"],
      [0.333, "rgb(49, 104, 142)"],
      [0.444, "rgb(38, 130, 142)"],
      [0.556, "rgb(31, 158, 137)"],
      [0.667, "rgb(53, 183, 121)"],
      [0.778, "rgb(109, 205, 89)"],
      [0.889, "rgb(180, 222, 44)"],
      [1.000, "rgb(253, 231, 37)"]
    ],
    color: y,
    size: 20,
  },
};

Plotly.newPlot('myDiv', [trace1], {});

Below is my normalisation function, I have left it verbose to help with understanding. The input vec could be overwritten and returned to reduce local variables if desired.

function vector_normalise(vec) {
  var vmin = Math.min(...vec);
  var vmax = Math.max(...vec);
  // calculate the delta to save time with big arrays
  var vdelta = vmax - vmin;
  // create an empty array to return
  var vec_ret = [];
  // push doesn't seem to like inline functions
  var vnorm;
  // iterate over the array/vector
  vec.forEach(value => {
    vnorm = (value - vmin) / vdelta;
    vec_ret.push(vnorm);
  })
  return vec_ret
}

Edit: Turns out Viridis is one of the existing available palettes... ?