How to draw separate lines in 3D scatter plot

plotly.js
1

I’d like to draw separate lines in the same plot, but I can’t figure out how to set the x, y and z coordinates?
This would be a solution, but ugly in programming. I also tried to give more variables at once (like: x: x1, x2 or x: [x1, x2]) without success.

var x1 = [0, 5, 5, 0, 0, 0, 5, 5, 0, 0];
var y1 = [0, 0, 5, 5, 0, 0, 0, 5, 5, 0];
var z1 = [0, 0, 0, 0, 0, 5, 5, 5, 5, 5];
var x2 = [5, 5];
var y2 = [0, 0];
var z2 = [0, 5];

        Plotly.plot('chart-div', [{
            type: 'scatter3d',
            mode: 'lines',
            x: x1,
            y: y1,
            z: z1,
            opacity: 1.0,
            line: {
                width: 2,
                color: 'blue',
                colorscale: 'Viridis'}
            }]
        );
        Plotly.plot('chart-div', [{
            type: 'scatter3d',
            mode: 'lines',
            x: x2,
            y: y2,
            z: z2,
            opacity: 1.0,
            line: {
                width: 2,
                color: 'blue',
                colorscale: 'Viridis'}
            }]
        );

I’d like to avoid code redundancy or wrapping Plotly.plot method in a function.

Thanks for any help in advanced!

2

Here’s how: http://codepen.io/etpinard/pen/YGbpyy

In plotly.js lingo, that’s plotting mulitple traces.

3

Thank you very much etienne!