Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬Register for the Oct 27 webinar.

How to define opacity per point for Scatter3D?

I would like to define the opacity per point for a Scatter3D plot. I’ve tried to do this by defining a rgba color per point, but the alpha component seems to be treated as white (example code below). Any suggestions? I found the following relevant stackoverflow questions ( one, two ) but no solutions were posted. Thanks!

import plotly
import plotly.graph_objs as go
import plotly.offline as off
plotly.offline.init_notebook_mode(connected=False)
import numpy as np

x_max = 2
num_bins = 20

linspace = np.linspace(-x_max, x_max, num_bins)
X, Y, Z = np.meshgrid(linspace, linspace, linspace)

gaussian = lambda x: np.exp(-np.sum(np.power(x, 2), 0, keepdims=False)/0.5)

coords = np.concatenate((np.expand_dims(X.flatten(), 0),
                         np.expand_dims(Y.flatten(), 0),
                         np.expand_dims(Z.flatten(), 0)), 0)

gaussian_coords = gaussian(coords)

color_scale = lambda x: 'rgba(255, 0, 0, {})'.format(np.round(x, 2))

half = int(20**3/2)

trace1 = go.Scatter3d(
    x=X.flatten()[:half],
    y=Y.flatten()[:half],
    z=Z.flatten()[:half],
    mode='markers',
    marker=dict(
        size=10,
        color = list(map(color_scale, 
                         gaussian_coords.flatten().tolist()[:half])),
        line=dict(width=0, color='rgba(0, 0, 0, 0)'),
        # opacity=0.5  # Toggle this to see the Gaussian shape more clearly
    )
)

data=[trace1]

layout=go.Layout(height=600, width=600)

fig=go.Figure(data=data, layout=layout)
off.iplot(fig)

Hi @blondegeek,

I see what you mean. I think the best thing to do is to open an issue with the plotly.js project at https://github.com/plotly/plotly.js/issues. Just include your example code and some screenshots of the odd behavior you’re seeing.

Thanks!
-Jon

Hi @jmmease,
Thanks for the reply. As per your advice, I’ve opened the issue here.
Tess

Hi @blondegeek,

I responded to the plotly.py issue with some info on the plotly.js issues that I opened as a result of your example.

As a side note, it looks like you’re trying to use scatter3d to do some form of 3d density rendering. You may be interested to keep an eye out for two new trace types that will be coming to plotly.py.

The first is isosurface, this one is already in plotly.js and will be released in plotly.py 3.6 pretty soon. See the Plotly.js PR https://github.com/plotly/plotly.js/pull/3438 and examples at https://codepen.io/MojtabaSamimi/pen/gZqvjR?editors=0010 for more info.

The second is a true volume 3d trace type. See the in progress plotly.js PR at https://github.com/plotly/plotly.js/pull/3488 and demos at https://codepen.io/MojtabaSamimi/pen/OdNGMZ?editors=0010. This won’t be in plotly.py 3.6.0, but hopefully it won’t be too much longer after that.

-Jon

Hi @jmmease,
I was indeed trying to approximate a 3D voxel image. Thanks for the head up on the upcoming trace types. Those will both be very useful to me.
Thank you again for your help!
Tess