Black Lives Matter. Please consider donating to Black Girls Code today.

Add custom contours on top of 3d surface plot

I am trying to add a contour layer on top of a 3d surface graph based on custom data (shown in image below)
its desired top view looks like below (just contour parts)

I went thr’ documentation about how to add custom data on contours but it works when it is plotted separately. I aim to plot surface3d and a 2d contour (parallel to x-y plane) on same plot.

Here is what I have tried but contours are still not picking that custom data-

var data = [{
z: z_data,
type: ‘surface’,
contours: {
z: {
show: true,
coloring: ‘heatmap’,
showlabels: true,
project: { z: true }
Plotly.newPlot(‘myDiv’, data, layout, { showSendToCloud: true });

I am really new on community and apologize if it looks so obvious question. I will appreciate any help on this

Thanks for using Plotly.js
Here is a demo.