Black Lives Matter. Please consider donating to Black Girls Code today.

Optimize exported html of 3D scatter plots

I use the plotly python api (Scatter3d) method to create 3D scatter plots. I love how plotly will export the generated graph into html and saves a temp file. I use the api in the offline mode.

The problem I have is when loading the saved html file (which is around 2-3 Mb with 100-200 points), after chrome renders the graph axis, the whole image freezes for a few seconds.

This is only noticed in certain computers.

  • I dont mind waiting for the loading but I would like the graph to be completely loaded once the axis appears. My client does not like the ‘freezing’ effect when he tries to move the 3d plot.
  • just using the python api, how can i make the exported html as lean and optimized as much as possible?
  • Changing the browser didn’t help. Are there any other workarounds when viewing the scatter plots?

Is there anything we can do to optimize the graphs and reduce the freezing observed at the start?
Are there 3D alternatives to scattergl and pointcloud?

Thanks,
TC

@thusithc WebGL performance can definitely be variable depending on the computer. Have you tried uploading this plot to plotly cloud? Plotly cloud handles the loading of the data and plotly.js in a more optimized way, so you may have better results than trying to save everything to an offline HTML file. With a paid plan you can share a private link to your graph.

You could also try a #dash app.

Otherwise I would try to upload an HTML file or Python script that demonstrates the issue so others can reproduce.

Hi jack,
Thanks for the reply. The code snippet I used to draw is as below. I would indeed try the plotly cloud.

def __get_trace(x, y, z, color='rgba(255, 182, 193, .9)', size=3, opacity=0.8):
    trace = go.Scatter3d(
        x=x,
        y=y,
        z=z,
        hoverinfo='skip',
        mode='markers',
        marker=dict(
            size=size,
            line=dict(
                color=color,  # set color equal to a variable
                width=0.5
            ),
            opacity=opacity
        )
    )
    return trace

def plot_multiple_scatter(array_list, size=3, opacity=0.8):
    '''
    array_list : list of Nx3 numpy arrays
    '''
    N = len(array_list)
    c = ['hsl(' + str(h) + ',50%' + ',50%)' for h in np.linspace(0, 360, N)]
    data = [__get_trace(a[:,0], a[:,1], a[:,2], c, size, opacity) for a in array_list]
    layout = go.Layout(
        margin=dict(
            l=0,
            r=0,
            b=0,
            t=0
        ),
        showlegend=False
    )
    fig = go.Figure(data=data, layout=layout)
    plotly.offline.plot(fig)
    return

Thanks,
Thusitha