Problems with embedding plotly generated div into django app.

[CiaranWelsh]

I am using plotly to generate a 3d scatter graph to embed in a django website. I am having a couple of issues - they look buggy but I am unfamiliar with this tool so its also possible I'm just not using correctly.

The code

Here's the relevant section of my code. The code simply iterates over a pandas.groupby object to plot experimental factors a different colour.

        for label, df in pca_data.groupby(by=colour_by):
            trace = go.Scatter3d(
                x=numpy.array(df['pc1']),
                y=numpy.array(df['pc2']),
                z=numpy.array(df['pc3']),
                mode='markers',
                marker={
                    'color': col.__next__(),
                    'opacity': 0.75
                },
                name=label if isinstance(label, (str, int, float)) else reduce(lambda x, y: "{}_{}".format(x, y), label)
            )
            traces.append(trace)

        layout = go.Layout(
            margin=dict(l=0, r=0, b=0, t=0),
            height=600,
            xaxis={
                'title': 'PC1 ({}% variance explained)'.format(explained_var.iloc[0]),
            },
            yaxis={'title': 'PC2 ({}% variance explained'.format(explained_var.iloc[1])},
            legend={
                'font': {
                    'size': 20
                }

            }
            # zaxis={'title': 'PC3 ({}% variance explained'.format(explained_var.iloc[2])}
        )
        fig = go.Figure(data=traces, layout=layout)

        p = pyo.plot(
            figure_or_data=fig,
            output_type='div',
            auto_open=False,
            config={'displayModeBar': False}
        )

Problem 1: The Mode Bar

Using the `pyo.plot` with `output_type='file'` works as expected but when set to `div` as I need for embedding into a django site, the mode buttons are massive and all over the place. My only solution so far has been to suppress the mode bar. The other solution that kind of worked was to use css to set the height/width of `modebar-group` css classes - however, here we get some overlapping buttons. Heres a screen shot without the mode bar suppressed.

.

Problem 2: Axis labels

The (docs)[https://plot.ly/python/figure-labels/] suggest that axis labels should be given as in the above code snippet, however my axis labels remain unchanged. In addition, the zaxis argument into `go.Layout` raises an error, complaining that `zaxis` is not an argument for Layout, though docs seem to indicate this is the way its done.

Problem 3: error in chrome

When I look in Chrome developer tools, it seems that the code that is auto-generated by plotly contains an error. I'm not sure to what extent this error may be causing the others.

Here's the error

pca:73 Uncaught (in promise) Error: addFrames failure: frameList must be an Array of frame definitions[object Object]
    at Object.r.addFrames (pca:73)
    at pca:79

The full project can be obtained from (here)[https://github.com/CiaranWelsh/data_viz_with_django/tree/develop] on the develop branch. Run python manage.py runserver, navigate to the PCA page and press submit to reproduce the problems.

I am running the Python version 3.6.5 with the latest install of plotly and django.

[jonmmease]

Hi @CiaranWelsh , I'll try to take a look at Problems 1 and 3 soon, but I think problem 2 is a pretty quick fix.

The axes for 3D plots are located at layout.scene.xaxis, layout.scene.yaxis, layout.scene.zaxis rather than layout.xaxis and layout.yaxis for 2D axes.

[jonmmease]

I was able to reproduce Problem 3. This error should have been harmless, but it will be fixed in version 3.2 by #1152.

[jonmmease]

Ok @CiaranWelsh , I worked out what was going on.

The culprit was this rule in index_style.css:

svg {
    width: 100%;
    height: 100%;
}

The modebar buttons in Plotly.js are SVG images and so this rule was overriding their sizing. I fixed in by unsetting these values in pca_style.css

svg {
    width: unset;
    height: unset;
}

I also notice that the top of the legend was overlapping with the modebar a little, so I lowered it a bit by setting the figure.layout.legend.y property to 0.95 (1.0 represents the top of the figure).

Here's a PR with the changes CiaranWelsh/data_viz_with_django#1.

Have fun!

[CiaranWelsh]

@jonmmease My inexperience with web development shining through here. Thank you for taking a look and sorry for opening an 'undeserved' issue.

All the best,

Ciaran.