Syntax issue for 3d scatter points

plotly.js
1

I am new to plot.ly and trying to get the syntax to work just right. The sample scatter3d chart is almost perfect for my needs, but it pulls data from a CSV. That in and of itself is fine; I can make my own CSV and insert it, but that’s a little clunky - I’d prefer to pull data directly from a mySQL database.

I’ve looked at some of their getting started type documentation, and can do a 2d scatter chart where I just specify the X/Y coordinates. But if I want to get into a 3d chart, things start going haywire on me.

This code works great.

Plotly.d3.csv('mydata.csv', function(err, rows){

    function unpack(rows, key) {
        return rows.map(function(row) { return row[key]; });
    }

    var data = [{
        x: unpack(rows, 'x'),
        y: unpack(rows, 'y'),
        z: unpack(rows, 'z'),
        mode: 'markers',
        type: 'scatter3d',
        marker: {
          color: 'rgb(10, 100, 240)',
          size: 2
        }
    },{
        alphahull: 7,
        opacity: 0.1,
        type: 'mesh3d',
        x: unpack(rows, 'x'),
        y: unpack(rows, 'y'),
        z: unpack(rows, 'z')
    }];



    var layout = {
        autosize: true,
        height: 1200,
        scene: {
            aspectratio: {
                x: 1,
                y: 1,
                z: 1
            },
            camera: {
                center: {
                    x: 0,
                    y: 0,
                    z: 0
                },
                eye: {
                    x: 1.25,
                    y: 1.25,
                    z: 1.25
                },
                up: {
                    x: 0,
                    y: 0,
                    z: 1
                }
            },
            xaxis: {
                type: 'linear',
                zeroline: false
            },
            yaxis: {
                type: 'linear',
                zeroline: false
            },
            zaxis: {
                type: 'linear',
                zeroline: false
            }
        },
        title: 'My Test',
        width: 1600
    };

    Plotly.newPlot('myDiv', data, layout);

});

But again, I’d rather specify my coordinates at runtime. Also, doing so will allow me to give various ranges that can be color coded differently and whatnot.

So, I pulled the CSV pieces out and add in my coordinates manually… and the does nothing. Nada.

Here is what I’m trying.

var data = [{
  x: [34, 41, 28, 22, 15, 26],
  y: [5, -2, 14, -9, 15, -12],
  z: [5, 7, 4, 8, -7, 1],
        mode: 'markers',
        type: 'scatter3d',
        marker: {
          color: 'rgb(10, 100, 240)',
          size: 2
        }
    },{
        alphahull: 7,
        opacity: 0.1,
        type: 'mesh3d',
  x: [34, 41, 28, 22, 15, 26],
  y: [5, -2, 14, -9, 15, -12],
  z: [5, 7, 4, 8, -7, 1],
    }];



    var layout = {
        autosize: true,
        height: 1200,
        scene: {
            aspectratio: {
                x: 1,
                y: 1,
                z: 1
            },
            camera: {
                center: {
                    x: 0,
                    y: 0,
                    z: 0
                },
                eye: {
                    x: 1.25,
                    y: 1.25,
                    z: 1.25
                },
                up: {
                    x: 0,
                    y: 0,
                    z: 1
                }
            },
            xaxis: {
                type: 'linear',
                zeroline: false
            },
            yaxis: {
                type: 'linear',
                zeroline: false
            },
            zaxis: {
                type: 'linear',
                zeroline: false
            }
        },
        title: 'My Test',
        width: 1600
    };

    Plotly.newPlot('myDiv', data, layout);

If anyone can point out where I’m being stupid, I’d really appreciate it.

2

This demo works fine.