Blank plotly 3D plots

[yuchaz]

Description:

I followed this tutorial to plot the 3D scatter plot. But seems like it cannot render 3D plots properly.

As shown on the figure above, the hover text is properly displayed but no data points are shown.

However, when I tried to do 2D line chart, it render properly.

Steps to Reproduce:

1. Copy the code of "Basic 3D Scatter Plot" in 3D Scatter Plots in Python
2. Run, 3D scatter plot does not work properly.
3. Copy the code of "Simple Line Plot" in Line Charts in Python
4. Run, line chart will be rendered properly.

Versions:

Mac OS 10.12.6
Atom : 1.22.1
Electron: 1.6.15
Chrome : 56.0.2924.87
Node : 7.4.0

plotly: 2.2.2

Logs:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-swz/ljTjUNUGwUQTCdL2vZS/ni77MS56012RAz3iLBk='), or a nonce ('nonce-...') is required to enable inline execution.

This error is shown when I run plotly.offline.init_notebook_mode(). But same error appeared when I plotted the 2D line plots therefore I think it might not related to the issue.

[lgeiger]

This looks like a CSS issue.

[lgeiger]

I haven't tested it, but I'm pretty confident that this line introduces the problem:

hydrogen/styles/hydrogen.less

Lines 46 to 48 in 09bacb3

	svg:first-child {
	background-color: white;
	}

[yuchaz]

By canceling the background-color in developer tool, it solve this problem. Thanks a lot :)

Is there any workaround I can use to solve this problem without opening the dev tool? (e.g. adding some snippets when starting up or somethings). Sorry for not really familiar with CSS syntax.

Thank you!

[lgeiger]

We should better scope

hydrogen/styles/hydrogen.less

Lines 46 to 48 in 09bacb3

	svg:first-child {
	background-color: white;
	}

This line is mostly there to ensure a white background for SVG plots rendered with matplotlib or similar but unfortunately breaks plotly 3D plots.
Personally I'd be OK with removing this line at the cost of not having a white background for matplotlib SVG plots.

I'm going to label this as a good first issue if someone wants to dig into it and find a better solution.

[rgbkrk]

This line is mostly there to ensure a white background for SVG plots rendered with matplotlib or similar but unfortunately breaks plotly 3D plots.
Personally I'd be OK with removing this line at the cost of not having a white background for matplotlib SVG plots.

Do matplotlib SVG plots come back as raw SVG? If so, I'd put a className on that transform (assuming no way to detect it's matplotlib) and then style it.