Plotly - different color scales for multiple surfaces

I am trying to use plotly (4.7.1) with R 3.4.1 to plot two 3D surfaces on the same plot, with two different color scales (variations of blue for one and variations of purple for the other one), and color values derived from z values. When I plot surfaces separately, it works pretty fine, but when I plot both surfaces on the same plot by using add_trace or add_surface, the second surface takes the color of the first one.

Here is an example, using example code from https://plot.ly/r/3d-surface-plots/#new-to-plotly

library(plotly)

z <- c(
  c(8.83,8.89,8.81,8.87,8.9,8.87),
  c(8.89,8.94,8.85,8.94,8.96,8.92),
  c(8.84,8.9,8.82,8.92,8.93,8.91),
  c(8.79,8.85,8.79,8.9,8.94,8.92),
  c(8.79,8.88,8.81,8.9,8.95,8.92),
  c(8.8,8.82,8.78,8.91,8.94,8.92),
  c(8.75,8.78,8.77,8.91,8.95,8.92),
  c(8.8,8.8,8.77,8.91,8.95,8.94),
  c(8.74,8.81,8.76,8.93,8.98,8.99),
  c(8.89,8.99,8.92,9.1,9.13,9.11),
  c(8.97,8.97,8.91,9.09,9.11,9.11),
  c(9.04,9.08,9.05,9.25,9.28,9.27),
  c(9,9.01,9,9.2,9.23,9.2),
  c(8.99,8.99,8.98,9.18,9.2,9.19),
  c(8.93,8.97,8.97,9.18,9.2,9.18)
)
dim(z) <- c(15,6)

z1 <- z - 1
z2 <- z + 1

cols1 <- c(rgb(255/255,112/255,183/255,1),rgb(128/255,0/255,64/255,1))
cols2 <- c(rgb(107/255,184/255,214/255,1),rgb(0/255,90/255,124/255,1))

p1 <- plot_ly(showscale = TRUE) %>%
  add_surface(z = ~z1, cmin = min(z1), cmax = max(z2), color = ~z1, colors = cols1) %>%
  layout(scene = list(zaxis = list(range = c(min(z1),max(z2)))))

p2 <- plot_ly(showscale = TRUE) %>%
  add_surface(z = ~z2, cmin = min(z1), cmax = max(z2), color = ~z2, colors = cols2) %>%
  layout(scene = list(zaxis = list(range = c(min(z1),max(z2)))))

p3 <- plot_ly(showscale = TRUE) %>%
  add_surface(z = ~z1, cmin = min(z1), cmax = max(z2), color = ~z1, colors = cols1) %>%
  add_surface(z = ~z2, cmin = min(z1), cmax = max(z2), color = ~z2, colors = cols2) %>%
  layout(scene = list(zaxis = list(range = c(min(z1),max(z2)))))

p1
p2
p3

I tried inherit=F into second add_surface but it didn’t change anything. I also looked at https://stackoverflow.com/questions/46150158/plotly-different-colours-for-different-surfaces, but the answer does not apply to my case as I don’t want uniformely colored plots but colors depending on z values.

I didn’t find any answers elsewhere, but I am pretty new to plotly so I hope the answer is not obvious.
I somehow managed to get two different scales by using the colorscale argument in the second add_surface: the first surface’s colorscale was the default, and the second was different, but not from the colors I defined.

p4 <- plot_ly(showscale = TRUE) %>%
  add_surface(z = ~z1, cmin = min(z1), cmax = max(z2), color = ~z1, reversescale=T) %>%
  add_surface(z = ~z2, cmin = min(z1), cmax = max(z2), color = ~z2, colorscale = list(c(min(z1),"rgb(107,184,214)"),c(max(z2),"rgb(0,90,124)"))) %>%
  layout(scene = list(zaxis = list(range = c(min(z1),max(z2)))))

p4

I guess it is somehow manageable because of this last example, but I guess I am doing something wrong here. Any help would be very much appreciated! I also asked the question on Stack Overflow, and I was suggested to open a ticket on Plotly Github page, but I preferred to ask it here first in case someone has an easy solution. Thanks!

@sebastien1785
With Python its works: https://plot.ly/~empet/14630. I don’t know R, but looking at your code:

p4 <- plot_ly(showscale = TRUE) %>%
  add_surface(z = ~z1, cmin = min(z1), cmax = max(z2), color = ~z1, reversescale=T) %>%
  add_surface(z = ~z2, zmin = min(z1), zmax = max(z2), color = ~z2, colorscale = list(c(min(z1),rgb(107,184,214)),c(max(z2),rgb(0,90,124)))) %>%
  layout(scene = list(zaxis = list(range = c(min(z1),max(z2)))))

I noticed that you inserted a few keys that are not allowed in the surface definition: color, zmin, zmax. The first surface has no colorscale ,
while the second has a strange definition. I think that it should be similar with the colorscale defined in Python,
that is instead list(c(min(z1),rgb(107,184,214)),c(max(z2),rgb(0,90,124))) it should be:
list(c(0, rgb(107,184,214)),c(1, rgb(0,90,124)))

@empet
Thank you Empet for your answer. I edited my question as zmin and zmax were actually a mistake from me.
With p4, I indeed got two different color scales : https://plot.ly/~sebastien1785/13/. As I did not defined the colorscale of the first surface, it takes the default, but the second surface should take the color I defined and it is not the case.

I tried the following code, changing the colorscale definition as you suggested and removing the color key :

p5  <- plot_ly(showscale = TRUE) %>%
  add_surface(z = ~z1, cmin = min(z1), cmax = max(z2), colorscale = list(c(0,"rgb(255,112,183)"),c(1,"rgb(128,0,64)"))) %>%
  add_surface(z = ~z2, cmin = min(z1), cmax = max(z2), colorscale = list(c(0,"rgb(107,184,214)"),c(1,"rgb(0,90,124)"))) %>%
  layout(title="SURFACE 1 + SURFACE 2\n(Same colorscale and not the one I defined)", scene = list(zaxis = list(range = c(min(z1),max(z2)))))

And it gives this: https://plot.ly/~sebastien1785/15/. Here, it gives the same colorscale for the two surfaces, which suggests that there is something wrong with how I define colorscales.

However, when I used colors in p1 and p2, it gave the correct colorscales, but when I tried to have both on the same plot in p3, the second surface had the same colorscale as the first, and I really don’t get why.

@empet
Thank you again Empet. I managed to get two different colorscales as I wanted them by using the colorscale key. Apparently in R it should be coded as list(c(0,1),c("rgb(107,184,214)","rgb(0,90,124)")).

It gives something like that https://plot.ly/~sebastien1785/20/ using the following code:

p6 <- plot_ly(showscale = TRUE) %>%
  add_surface(z = ~z1, cmin = min(z1), cmax = max(z2), colorscale = list(c(0,1),c("rgb(255,112,184)","rgb(128,0,64)"))) %>%
  add_surface(z = ~z2, cmin = min(z1), cmax = max(z2), colorscale = list(c(0,1),c("rgb(107,184,214)","rgb(0,90,124)"))) %>%
  layout(title="SURFACE 1 + SURFACE 2\n(Distinct colorscales as defined)", scene = list(zaxis = list(range = c(min(z1),max(z2)))))

I couldn’t reproduce this result by using the colors key.

1 Like