Weird marker overlapping using Scatter3d and opacity < 1

📊 Plotly Python
1

Hi,
I’m encountering a strange issue for which I have found no solution after hours of search online :frowning_face: .

It’s easier to explain if I illustrate it with pictures. I have this 3D scatter plot with 6 different clusters.
As you can see from the picture below, they’re nicely grouped together and the red dots appear in front of everything else from this perspective. This is with no transparency used.

plot1

However, if I apply even a tiny bit of transparency, the perspective gets completely messed up. Dots that should be in front jump back, like the red dots, which are in this second picture almost hidden by the blue ones.

plot2

This is the code I used to create this plot, adapted on the iris dataset:

Code 
import plotly
import plotly.graph_objs as go
import numpy as np

from plotly.offline import iplot

plotly.offline.init_notebook_mode()

from sklearn import datasets
iris = datasets.load_iris()

data = iris.data
target = iris.target

colors = {'green':'#25FA73', 'yellow':'#DEC512', 'red':'#F43565', 'blue':'#6544E8', 'orange':'#FF7423',
          'black':'#101010'}

x = data[:, 0]
y = data[:, 1]
z = data[:, 2]

scalex = 1.0 / (x.max() - x.min())
scaley = 1.0 / (y.max() - y.min())
scalez = 1.0 / (z.max() - z.min())

data = []

for i in np.unique(target):
    trace = go.Scatter3d(
        x=(x*scalex)[target == i],
        y=(y*scaley)[target == i],
        z=(z*scalez)[target == i],
        mode='markers',
        marker=dict(
            color=list(colors.values())[i],
            size=6,
            opacity=0.9,
            line=dict(
                color='#282828',
                width=1
            )
        )
    )
    
    data.append(trace)
    
layout = go.Layout(margin=dict(l=0, r=0, b=0, t=0))

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

If you go ahead and run it, rotate the graph in order to put the green dots in front of everything else, you’ll see that they actually fall behind, which is really not convenient nor accurate. It looks like as if the dots that get plotted first fall behind those plotted last.

If you don’t want to run it, you can simply go at this link https://plot.ly/python/3d-scatter-plots/ , scroll to the bottom and rotate the graph up and down: you’ll see the exact same behaviour.

Any idea on how to fix this, if fixable at all? I’m losing my head around it.

PS: on a secondary note, it seems that 3d scatter markers can’t have line width higher than 1. Even if using a higher number, width doesn’t change, except in the legend.

2

Hi @wtfzambo,

The opacity ordering situation is a known issue in the plotly.js library. See https://github.com/plotly/plotly.js/issues/1267.

-Jon

1 Like
3

Aha!
@jmmease Thanks for providing the link, it looks like I’m out of luck :frowning: