Improve 3D scatter plot example visualization

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

Start at the 3D scatter plot example linked in the issue and compare its current marker settings with the proposed trace snippets. Adjust the example to use smaller markers and lower opacity so the data structure and density are easier to see. Done means the updated example renders the clearer visualization shown in the attached screenshot.