Improve 3D scatter plot example visualization

[jxu]

The example from https://plotly.com/javascript/3d-scatter-plots/ is not a good visualization just because there is so much being plotted and the points are so large, which makes it even more difficult to estimate density. Setting lower opacity and smaller circles makes it much easier to see the structure of the data, which is already challenging for any kind of 3D plot. This can be tweaked depending on what we aim to showcase in the data.

New traces

var trace1 = {
    x:unpack(rows, 'x1'), y: unpack(rows, 'y1'), z: unpack(rows, 'z1'),
    mode: 'markers',
    marker: {
        size: 2,
        opacity: 0.5},
    type: 'scatter3d'
};

var trace2 = {
    x:unpack(rows, 'x2'), y: unpack(rows, 'y2'), z: unpack(rows, 'z2'),
    mode: 'markers',
    marker: {
        color: 'rgb(127, 127, 127)',
        size: 4,
        symbol: 'circle',
        line: {
        color: 'rgb(204, 204, 204)',
        width: 1},
        opacity: 0.8},
    type: 'scatter3d'};

New scatter plot

[nicolaskruchten]

You're right this would be nicer. Feel free to submit a PR to this repo with this kind of change :) For any given page you can click on "suggest an edit" in the top-right of the page to find the appropriate file(s) to edit in a PR. In this case it's https://github.com/plotly/graphing-library-docs/blob/master/_posts/plotly_js/3d/3d-scatter/2015-04-09-simple-3d-scatter.html

[jxu]

Maybe the visualization is even better by not increasing the size of gray points but instead using a color that pops out like red