Displaying Z values in 3D Surface Plot

[anonim]

Hello, i’m using Plotly javascript library, i have a 3D surface plot, which i convert it to 2D looking (like in this example: Projection of 3d surface in Python/v3) grid (image is below), what i want is that somehow i want to display Z values in each boxes in the grid, couldn’t find any way to do it, is it even possible to do that?

Note: Z values are set to 0 in order to make the plot look like 2D grid, i can have another array that has some values and i still want to display/print them on the grid.

You can check the codes and everything: https://codepen.io/anonim11/pen/KKxyQNY

to

[AIMPED]

Hi @anonim welcome to the forums. Is there a reason for using 3D surface plots and then reducing it to 2D? Couldn’t you use an annotated heatmap?

Heatmaps

[anonim]

Hello @AIMPED, sorry for late reply, i honestly thought nobody was going to say something. I’ve tried heatmaps but couldn’t get exactly what i wanted to do. The reason i’m using 3D surface plots is that, i have a 3D surface plot with depths etc. and i wanted to show exactly as is how it looks in 2D surface.

For example, in the picture below i’m using surfacecolor to point out the depth but in 2D. You can kinda understand how it would look in 3D surface plot. If i would be able to get same view with heatmaps, i think i would use it, but i want my 2D looking exactly like the 3D surface plot, but again, with 2D version.

Pretty much like in this example: https://chart-studio.plotly.com/create/?fid=jordanpeterson:1174#/ but with grid lines and the Z values on it.

[AIMPED]

No problem. I’m pretty sure this is possible to do. Are you able to share sample data?

[anonim]

@AIMPED

X: [[30,30,30,30,30],[60,60,60,60,60],[90,90,90,90,90],[120,120,120,120,120],[150,150,150,150,150]]
Y: [[30,60,90,120,150],[30,60,90,120,150],[30,60,90,120,150],[30,60,90,120,150],[30,60,90,120,150]]
Z: [[3283,1667,978,3781,2942],[1757,3798,4517,1448,3838],[3513,2001,4473,3891,2041],[1143,660,1431,2886,4372],[914,933,3891,4829,1053]]

What i got with these data right now:

I would like something like that, also notice that i expect 5 boxes in X axis and 5 boxes in Y axis, but some boxes are missing in my case, maybe because of i’m using 3D surface plot. Also it would be great if i’m able to customize text style/size/alignment and everything on the grid.

[AIMPED]

Why do you expect 5 “boxes”?

Z.shape = (5,5), in order to have 5 “boxes” you would need 6 data points. The 5 data points are the values on the grid line crossings.

I played around with go.Contour, could you share your code for this figure?

Contour

import plotly.graph_objects as go
import numpy as np

X= np.asarray([[30,30,30,30,30],[60,60,60,60,60],[90,90,90,90,90],[120,120,120,120,120],[150,150,150,150,150]])
Y= np.asarray([[30,60,90,120,150],[30,60,90,120,150],[30,60,90,120,150],[30,60,90,120,150],[30,60,90,120,150]])
Z= np.asarray([[3283,1667,978,3781,2942],[1757,3798,4517,1448,3838],[3513,2001,4473,3891,2041],[1143,660,1431,2886,4372],[914,933,3891,4829,1053]])

contour = go.Figure(
    layout={'width': 400, 'height':400 },
    data=go.Contour(
        z=Z,
        line_smoothing=0,
        contours_coloring='heatmap'
    ) 
)
contour.update_yaxes(
    scaleanchor="x",
    scaleratio=1,
  )
contour.show()

[anonim]

Yes i need 6 data points but since i have 5 value in each array in Z, i wanted to show all values on the grid. I may add a fake non-visible data point for that, not sure yet.

You can check my code with the data i’ve shared before. You’ll see it’s a bit weird how i’ve done this, it’s because i just wasn’t be able to find a way to do it exactly how i wanted to do, so i’ve tried to go around for everything i wanted to do

[AIMPED]

I just noticed the plotly JS tag on this topic

I think the easiest way to show the data points would be to add a scatter trace, setting the marker color to rgba(0,0,0,0) and showing the text only, pretty much like here:

Custom marker characters

Hi @abhinavk welcome to the forums. You could use the text argument: import plotly.graph_objects as go import numpy as np fig = go.Figure() for fac, txt in enumerate('ABCDE'): fig.add_scatter( x=np.arange(1, 10), y=np.arange(1, 10) + 10*fac, mode='text+lines', text=txt, name=f'trace_{txt}') fig.show() creates: [newplot (10)]

Sorry, I can’t really help with JS

[anonim]

@AIMPED Oh okay, thanks anyway, but i assume python or javascript doesn’t change plots etc. so i would be still interested and see if you would be able to do what i’m trying to do in python

[AIMPED]

@anonim

python or javascript doesn’t change plots

True.

Just to clarify: You want to see the 3d plot, on the bottom the 2D heatmap/contour with grid lines and values as text for each data point.

[AIMPED]

Maybe this (python) thread helps?

How to plot a 2d Graph on the background (side wall) of a 3d Plot

Hi, I have a sample 3d plot (shown in the following) and as you see the side walls (Backgrounds) are colored. import plotly.graph_objects as go import numpy as np t = np.linspace(-1, 1.2, 500) x = (t**3) + (0.3 * np.random.randn(500)) y = (t**6) + (0.3 * np.random.randn(500)) z=(t**2) + (0.3 * np.random.randn(500)) fig = go.Figure() fig.add_scatter3d( x = x, y = y, z = z, mode = 'markers', marker = dict( color = 'rgba(0,0,0,0.3)', size = 3) ) fig.update_layout( auto…

[anonim]

@AIMPED At least for me, didn’t help and i still couldn’t do it.

[AIMPED]

OK, I’ll give it a try when I find the time