JavaScript Plotly.js How to create a 3D surface plot using x, y, and z coordinates?

Question

I have read a few questions on this topic (although most were for the python version of this library) and none have worked for me. I want to create a 3D surface plot in plotly.js using x, y and z coordinates. However I am not completely glued to the idea of a surface plot, I have gotten scatter plots to work however they aren't as appealing visually.

I saw in the documentation that I needed to use a 2D matrix for the z axis so I just made every point its own array as I only have one z point for each x and y.

I am using flask to generate the data from an sql table so this is the code that generates my data:

    data = {}
    data["x_title"] = session["axis_1_name"]
    data["y_title"] = session["axis_2_name"]
    data["z_title"] = session["axis_3_name"]
    data["plot_title"] = session["axis_1_name"] + " vs " + session["axis_2_name"] + " vs " + session["axis_3_name"] 

    data["x"] = []
    data["y"] = []
    data["z"] = []
    for row in records:
        data["x"].append(row[1])
        data["y"].append(row[2])
        data["z"].append([row[3]])

And here is the code to plot it:

    <script>
        var plotDiv = document.getElementById("plot");
        trace = {
            x:{{data["x"] | safe}},
            y:{{data["y"] | safe}},
            z:{{data["z"] | safe}},
            type: "surface",
            colorscale: 'Viridis'
        };

        var layout = {
            title: '{{data["plot_title"]}}',
            autosize: true,
            scene: {
                xaxis:{title: 'x: {{data["x_title"]}}'},
                yaxis:{title: 'y: {{data["y_title"]}}'},
                zaxis:{title: 'z: {{data["z_title"]}}'},
            },
            margin: {
                l: 65,
                r: 50,
                b: 65,
                t: 90,
              }
        };

        Plotly.newPlot(plotDiv,[trace],layout);


    </script>

When Jinja gets done with it the relevant section looks like this:

 trace = {
            x:[0.0, 1.5, 3.0, 4.5, 6.0, 7.5, 9.0, 10.5, 12.0, 13.5, 15.0, 16.5, 18.0, 19.5, 21.0, 22.5, 24.0, 25.5, 27.0, 28.5, 30.0, 31.5, 33.0, 34.5, 36.0, 37.5, 39.0, 40.5, 42.0, 43.5, 45.0, 46.5, 48.0, 49.5, 51.0, 52.5, 54.0, 55.5, 57.0, 58.5, 60.0, 61.5, 63.0, 64.5, 66.0, 67.5, 69.0, 70.5, 72.0, 73.5, 75.0, 76.5, 78.0, 79.5, 81.0, 82.5, 84.0, 85.5, 87.0, 88.5, 90.0, 91.5, 93.0, 94.5, 96.0, 97.5, 99.0],
            y:[0.0, 0.5, 1.0, 1.5, 2.0, 2.5, 3.0, 3.5, 4.0, 4.5, 5.0, 5.5, 6.0, 6.5, 7.0, 7.5, 8.0, 8.5, 9.0, 9.5, 10.0, 10.5, 11.0, 11.5, 12.0, 12.5, 13.0, 13.5, 14.0, 14.5, 15.0, 15.5, 16.0, 16.5, 17.0, 17.5, 18.0, 18.5, 19.0, 19.5, 20.0, 20.5, 21.0, 21.5, 22.0, 22.5, 23.0, 23.5, 24.0, 24.5, 25.0, 25.5, 26.0, 26.5, 27.0, 27.5, 28.0, 28.5, 29.0, 29.5, 30.0, 30.5, 31.0, 31.5, 32.0, 32.5, 33.0],
            z:[[0.0], [0.5], [1.0], [1.5], [2.0], [2.5], [3.0], [3.5], [4.0], [4.5], [5.0], [5.5], [6.0], [6.5], [7.0], [7.5], [8.0], [8.5], [9.0], [9.5], [10.0], [10.5], [11.0], [11.5], [12.0], [12.5], [13.0], [13.5], [14.0], [14.5], [15.0], [15.5], [16.0], [16.5], [17.0], [17.5], [18.0], [18.5], [19.0], [19.5], [20.0], [20.5], [21.0], [21.5], [22.0], [22.5], [23.0], [23.5], [24.0], [24.5], [25.0], [25.5], [26.0], [26.5], [27.0], [27.5], [28.0], [28.5], [29.0], [29.5], [30.0], [30.5], [31.0], [31.5], [32.0], [32.5], [33.0]],
            type: "surface",
            colorscale: 'Viridis'
        };

However, nothing shows up. I did do a version where I created multiple z points for each x and y and was able to get that to plot however that's not really what I need this for so I would rather get this version to work.

Answer 1

As per my understanding, the surface plot is expecting a Z value for each X and Y combination. consider you have x = [0, 1] and y = [0, 1] so it expecting z value for [ [x0, y0], [x0, y1], [x1, y0], [x1, y1] ] (like 2x2 matrix value)

Please correct me if my understanding is wrong on this.