blank iplot in Jupyter Notebooks #1448

michaelsweeney · 2019-03-04T16:39:20Z

I've been having a persistent but intermittent issue with iplot in Juypyter notebooks where the plots are blank, but space is taken up in the Jupyter notebook output for them. It seems to happen most often in notebooks with large amounts of data and frequent replotting within the notebook.

it seems like there at least a few other people with the same issue, across multiple versions of both Jupyter Notebooks and Plotly, but I haven't seen a definitive solution or explanation other than restarting computer/notebook, which does not always work in my case.

For what it's worth, in my current Jupyter notebook I'm plotting a simple scatter plot and getting a blank layout:

xs = [0, 1, 2, 3, 4]
ys = [4, 3, 2, 1, 0]
trace = go.Scatter(
    x = xs,
    y = ys,
    mode = 'markers'
)
data = [trace]
py.iplot(data)

And here is the JS console output:


main.min.js:33264 actions jupyter-notebook:find-and-replace does not exist, still binding it in case it will be defined later...
MenuBar.bind_events @ main.min.js:33264
main.min.js:12429 load_extensions Arguments(2)
main.min.js:12406 Loading extension: export_embedded/main
:8888/nbextensions/export_embedded/main.js?v=20190304112619:22 Notebook version 5.1.0 or higher required for this extension
main.min.js:24777 Session: kernel_created (f1932fce-d600-4f9e-a9d9-f8b88e8ba223)
main.min.js:23933 Starting WebSockets: ws://localhost:8888/api/kernels/6fbd3818-f86b-4d80-92dd-34b08ff15ea0
:8888/static/plotly.js?v=20190304112619:1 Failed to load resource: the server responded with a status of 404 (Not Found)
require.js:140 Uncaught Error: Script error for "plotly"
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:165)
    at HTMLScriptElement.onScriptError (require.js:1732)
main.min.js:12406 Loading extension: jupyter-js-widgets/extension
main.min.js:23577 Kernel: kernel_connected (6fbd3818-f86b-4d80-92dd-34b08ff15ea0)
main.min.js:23577 Kernel: kernel_ready (6fbd3818-f86b-4d80-92dd-34b08ff15ea0)
2Belmont%20HVAC%20Vis.ipynb:1 Uncaught TypeError: Cannot read property 'Plots' of undefined
    at eval (eval at globalEval (main.min.js:4), <anonymous>:1:61)

The text was updated successfully, but these errors were encountered:

nicolaskruchten · 2019-03-04T17:49:39Z

Aha ok I'm not the only one seeing this after all @jonmmease :)

I'm also struggling to replicate it reliably though... Any insights you might have @michaelsweeney about how to trigger it would be super helpful in tracking it down.

michaelsweeney · 2019-03-04T18:02:20Z

yea, the only thing that seems to trigger it is when i'm plotting a lot of high-data-point plots and re-plotting them frequently throughout the day. And once the issue happens it seems to stay for some amount of time, even if I restart my computer, clear cache, restart Notebook, etc.

One thing to note is that py.plot does work in this case and I can view the html file of the figure in a separate tab with no problem.

Other than that, I haven't really identified any particular moment that causes it, but it does seem to happen at the exact moment that I call over my boss to show him the amazing plot I just made :-) maybe Plotly can smell fear?

nicolaskruchten · 2019-03-04T18:36:15Z

I think your last comment got cut off there :)

nicolaskruchten · 2019-03-04T18:36:47Z

What I've found is that if I "restart and clear output" then the problem persists BUT if I then refresh the page altogether it jolts out of the problematic state.

michaelsweeney · 2019-03-04T19:03:41Z

interesting, i don't believe that was working for me, i may not have tried literally 'refreshing' the notebook but only closing and reopening in a new instance of chrome. i'll give it a shot next time the problem comes up and report back.

jonmmease · 2019-03-05T13:47:41Z

Thanks for the report and info @michaelsweeney. I haven't been able to reproduce it yet, but here are some working notes:

This line is particularly suspicious

:8888/static/plotly.js?v=20190304112619:1 Failed to load resource: the server responded with a status of 404 (Not Found)

The plotly.js bundle is not served from the notebook server as a static resource in the classic notebook. So the requirejs system on the frontend shouldn't be looking there.

The init_notebook_mode() logic is responsible registering the location of the plotly.js bundle for use in the notebook

plotly.py/plotly/offline/offline.py

Lines 268 to 303 in b3dbceb

    
           if connected: 
        
               # Inject plotly.js into the output cell 
        
               script_inject = ( 
        
                   '{win_config}' 
        
                   '{mathjax_config}' 
        
                   '<script>' 
        
                   'requirejs.config({{' 
        
                   'paths: {{ ' 
        
                   # Note we omit the extension .js because require will include it. 
        
                   '\'plotly\': [\'https://cdn.plot.ly/plotly-latest.min\']}},' 
        
                   '}});' 
        
                   'if(!window._Plotly) {{' 
        
                   'require([\'plotly\'],' 
        
                   'function(plotly) {{window._Plotly=plotly;}});' 
        
                   '}}' 
        
                   '</script>' 
        
               ).format(win_config=_window_plotly_config, 
        
                        mathjax_config=_mathjax_config) 
        
           else: 
        
               # Inject plotly.js into the output cell 
        
               script_inject = ( 
        
                   '{win_config}' 
        
                   '{mathjax_config}' 
        
                   '<script type=\'text/javascript\'>' 
        
                   'if(!window._Plotly){{' 
        
                   'define(\'plotly\', function(require, exports, module) {{' 
        
                   '{script}' 
        
                   '}});' 
        
                   'require([\'plotly\'], function(Plotly) {{' 
        
                   'window._Plotly = Plotly;' 
        
                   '}});' 
        
                   '}}' 
        
                   '</script>' 
        
                   '').format(script=get_plotlyjs(), 
        
                              win_config=_window_plotly_config, 
        
                              mathjax_config=_mathjax_config)

If I force iplot to execute without running init_notebook_mode(),

import plotly
from plotly.offline import iplot
plotly.offline.offline.__PLOTLY_OFFLINE_INITIALIZED = True
...
iplot(data)

I get blank space where the plot should be and this JavaScript console error

Error: Script error for "plotly"
http://requirejs.org/docs/errors.html#scripterror require.js:168:17

    makeError http://localhost:8888/static/components/requirejs/require.js?v=951f856e81496aaeec2e71a1c2c0d51f:168 onScriptError http://localhost:8888/static/components/requirejs/require.js?v=951f856e81496aaeec2e71a1c2c0d51f:1735

So in my mind the puzzle here is, what is causing require to look for plotly.js as a static resource?

jonmmease · 2019-03-05T13:56:59Z

@michaelsweeney @nicolaskruchten

The next time you get stuck in this state, could you try running the following in the browser JavaScript console and report the output?

require(["plotly"], function(Plotly) {console.log(Plotly)})

When things are working correctly I get an output like

require(["plotly"], function(Plotly) {console.log(Plotly)})
function localRequire()
Object { version: "1.44.3", register: register(), plot: plot(), newPlot: newPlot(), restyle: F(), relayout: q(), redraw: redraw(), update: J(), react: react(), extendTraces: t(), … }

Based on the error message above, when in the bad state I'm expecting this to 404.

Update 1: Also, please check the value of

window._Plotly

in the JavaScript console. When things are working, this should return something like

Object { version: "1.44.3", register: register(), plot: plot(), newPlot: newPlot(), restyle: F(), relayout: q(), redraw: redraw(), update: J(), react: react(), extendTraces: t(), … }

Update 2: If it turns out that require(["plotly"], function(Plotly) {console.log(Plotly)}) results in an error but window._Plotly still returns the plotly.js library successfully then I think I can update the iplot logic to work around the requirejs error.

michaelsweeney · 2019-03-05T16:09:21Z

Ok, here's what I get during the error:

Console Input:
require(["plotly"], function(Plotly) {console.log(Plotly)})

Console Output:

ƒ localRequire(deps, callback, errback) {
                    var id, map, requireMod;

                    if (options.enableBuildCallback && callback && isFunction(callback)) {
                      …

Also, confirmed that refreshing the browser works for me. Pretty dumb to not try first before restarting Chrome/Jupyter, but it's good that it at least worked this time.

jonmmease · 2019-03-05T16:16:56Z

Huh, I don't recognize anything in

ƒ localRequire(deps, callback, errback) {
                    var id, map, requireMod;

                    if (options.enableBuildCallback && callback && isFunction(callback)) {
                      …

Was that the end of the output? What do you get when the notebook is in a working state? Could you also look at window._Plotly when things get stuck again?

michaelsweeney · 2019-03-05T16:28:52Z

it's working now, and i see the below. and apologies because i'm not very conversant in JS or HTML (dash has been my first attempt at a front-end design) -- how can I look at window.__Plotly?

main.min.js:33264 actions jupyter-notebook:find-and-replace does not exist, still binding it in case it will be defined later...
MenuBar.bind_events @ main.min.js:33264
MenuBar @ main.min.js:33019
(anonymous) @ main.min.js:36509
execCb @ require.js:1690
check @ require.js:865
(anonymous) @ require.js:1140
(anonymous) @ require.js:131
(anonymous) @ require.js:1190
each @ require.js:56
emit @ require.js:1189
check @ require.js:940
enable @ require.js:1177
init @ require.js:783
callGetModule @ require.js:1204
completeLoad @ require.js:1583
onScriptLoad @ require.js:1711
main.min.js:12429 load_extensions Arguments(2)
main.min.js:24777 Session: kernel_created (956a0ddd-cacc-45db-a440-848537c9ad0a)
main.min.js:23933 Starting WebSockets: ws://localhost:8888/api/kernels/5517497a-2946-4cb5-b92e-0952e19bea62
main.min.js:12406 Loading extension: export_embedded/main
:8888/nbextensions/export_embedded/main.js?v=20190305110212:22 Notebook version 5.1.0 or higher required for this extension
main.min.js:23577 Kernel: kernel_connected (5517497a-2946-4cb5-b92e-0952e19bea62)
main.min.js:23577 Kernel: kernel_ready (5517497a-2946-4cb5-b92e-0952e19bea62)
main.min.js:12406 Loading extension: jupyter-js-widgets/extension

jonmmease · 2019-03-05T17:08:25Z

how can I look at window._Plotly?

If you open the browser developer tools console, you should be able to type in your own command.
Then type in:

>> window._Plotly

And see what the result is. If things aren't working you may see the result as undefined.

michaelsweeney · 2019-03-05T17:22:38Z

gotcha, thanks.

so when it's working, I see:

window._Plotly
{version: "1.42.5", register: ƒ, plot: ƒ, newPlot: ƒ, restyle: ƒ, …}
Fx: {moduleType: "component", name: "fx", constants: {…}, schema: {…}, attributes: {…}, …}
Icons: {undo: {…}, home: {…}, camera-retro: {…}, zoombox: {…}, pan: {…}, …}
PlotSchema: {IS_SUBPLOT_OBJ: "_isSubplotObj", IS_LINKED_TO_ARRAY: "_isLinkedToArray", DEPRECATED: "_deprecated", UNDERSCORE_ATTRS: Array(4), get: ƒ, …}
Plots: {modules: {…}, allCategories: {…}, allTypes: Array(35), subplotsRegistry: {…}, transformsRegistry: {…}, …}
Queue: {add: ƒ, startSequence: ƒ, stopSequence: ƒ, undo: ƒ, redo: ƒ, …}
Snapshot: {getDelay: ƒ, getRedrawFunc: ƒ, clone: ƒ, toSVG: ƒ, svgToImg: ƒ, …}
addFrames: ƒ (t,e,r)
addTraces: ƒ t(e,n,i)
animate: ƒ (t,e,r)
d3: {version: "3.5.17", ascending: ƒ, descending: ƒ, min: ƒ, max: ƒ, …}
deleteFrames: ƒ (t,e)
deleteTraces: ƒ t(e,n)
downloadImage: ƒ (t,e)
extendTraces: ƒ t(e,n,i,a)
makeTemplate: ƒ (t)
moveTraces: ƒ t(e,n,i)
newPlot: ƒ (t,e,n,i)
plot: ƒ (t,e,i,a)
prependTraces: ƒ t(e,n,i,a)
purge: ƒ (t)
react: ƒ (t,e,n,i)
redraw: ƒ (t)
register: ƒ (t)
relayout: ƒ t(e,r,n)
restyle: ƒ t(e,n,i,a)
setPlotConfig: ƒ (t)
toImage: ƒ (t,e)
update: ƒ t(e,n,i,a)
validate: ƒ (t,e)
validateTemplate: ƒ (t,e)
version: "1.42.5"
__proto__: Object

And when it's not working, I see:

window._Plotly
undefined

michaelsweeney · 2019-03-05T22:13:21Z

update: refreshing browser no longer works as a work-around for me.

jonmmease · 2019-03-05T22:40:56Z

Thanks for the info @michaelsweeney . window._Plotly going to undefined is really strange, the init_notebook_mode logic should be initializing this, and nothing I know of should be clearing it out 🤔

Do I understand correctly that you have a notebook open that works initially, and then stays open for a while without the browser being refreshed and without the kernel being restarting and then the error behavior begins?

@nicolaskruchten could you provide the output of

>> require(["plotly"], function(Plotly) {console.log(Plotly)})

and

>> window._Plotly

in both the working and non-working states? Thanks!

michaelsweeney · 2019-03-05T23:20:22Z

yes, that's correct. i'll have the notebook open, nothing is refreshed, and suddenly plots start showing blank and then this 'broken state' continues for some indeterminate amount of time that doesn't seem to respond to any refreshes or restarts.

thanks so much for looking into it!

jonmmease · 2019-03-05T23:24:26Z

I don't know if it's important, but do you tend to rerun init_notebook_mode() multiple times during the session? It should be fine to do this, but perhaps something is going wrong there.

jonmmease · 2019-03-05T23:47:38Z

Another question. Are you using init_notebook_mode() or init_notebook_mode(connected=True)?

jonmmease · 2019-03-06T12:02:10Z

Hi @michaelsweeney,

I added a workaround in #1452 that I'm hoping will make it possible to recover from the error-state by just running init_notebook_mode again. See the PR for some more details.

If you're able, it would be great if you could you try installing the dev build and giving it a spin.

pip install https://10634-14579099-gh.circle-artifacts.com/0/dist/plotly-3.6.1%2B6.g555034b3.tar.gz

I expect that you'll hit the same problem as before. But when you do, instead of restarting the kernel or refreshing the browser just run init_notebook_mode() again and hopefully that will get the notebook back on track 🤞 Thanks!

michaelsweeney · 2019-03-06T15:07:29Z

great, thanks! and just to check, i should be running 'init_notebook_mode()' and not 'init_notebook_mode(connected=True)'?

i'll keep you posted on further developments. appreciate the quick attention!!

jonmmease · 2019-03-06T17:29:02Z

Yes, init_notebook_mode(). Is that what you were already doing or were you using connected=True?

michaelsweeney · 2019-03-06T18:06:37Z

I’ve been using connected=true, in offline mode, per “Generating Offline Graphs within Jupyter Notebook”

https://plot.ly/python/offline/

michaelsweeney · 2019-03-13T16:30:38Z

update: the work-around worked. thanks!!

jonmmease · 2019-03-15T21:46:16Z

Thanks for reporting back @michaelsweeney, glad the work around is working for you. I'm going to close this issue for now, but if anyone else experiences this issue and is able to reproduce it please let us know.

kenahoo · 2019-08-12T20:36:17Z

@jonmmease I'm experiencing this issue, but it's not intermittent. I can never get a plotly plot to show up in a Jupyter R notebook, I get a blank space instead. Not sure what's different about my setup than other people's.

My Help->About says:

Server Information:
You are using Jupyter notebook.

The version of the notebook server is: 5.4.1
The server is running on this version of Python:
Python 3.6.8 |Anaconda, Inc.| (default, Dec 29 2018, 19:04:46) 
[GCC 4.2.1 Compatible Clang 4.0.1 (tags/RELEASE_401/final)]

Current Kernel Information:
R version 3.6.0 (2019-04-26)

In the Javascript console:

> window._Plotly
undefined
> require(["plotly"], function(Plotly) {console.log(Plotly)})
ƒ localRequire(deps, callback, errback) {
                    var id, map, requireMod;

                    if (options.enableBuildCallback && callback && isFunction(callback)) {
                      …

GET http://localhost:8888/static/plotly.js?v=20190812145015 net::ERR_ABORTED 404 (Not Found)
  | req.load | @ | require.js?v=6da8be3…721e76c6d4afce:1952
  | load | @ | require.js?v=6da8be3…721e76c6d4afce:1679
  | load | @ | require.js?v=6da8be3…e721e76c6d4afce:829
  | fetch | @ | require.js?v=6da8be3…e721e76c6d4afce:819
  | check | @ | require.js?v=6da8be3…e721e76c6d4afce:851
  | enable | @ | require.js?v=6da8be3…721e76c6d4afce:1177
  | enable | @ | require.js?v=6da8be3…721e76c6d4afce:1550
  | (anonymous) | @ | require.js?v=6da8be3…721e76c6d4afce:1162
  | (anonymous) | @ | require.js?v=6da8be3…e721e76c6d4afce:131
  | each | @ | require.js?v=6da8be3…5e721e76c6d4afce:56
  | enable | @ | require.js?v=6da8be3…721e76c6d4afce:1114
  | init | @ | require.js?v=6da8be3…e721e76c6d4afce:783
  | (anonymous) | @ | require.js?v=6da8be3…721e76c6d4afce:1453
  | setTimeout (async) |   |  
  | req.nextTick | @ | require.js?v=6da8be3…721e76c6d4afce:1809
  | localRequire | @ | require.js?v=6da8be3…721e76c6d4afce:1442
  | requirejs | @ | require.js?v=6da8be3…721e76c6d4afce:1791
  | (anonymous) | @ | VM270:1

The full URL behind all those require.js chunks in the stack trace is http://localhost:8888/static/components/requirejs/require.js?v=6da8be361b9ee26c5e721e76c6d4afce.

jonmmease · 2019-08-12T21:00:49Z

Hi @kenahoo, if you're working plotly from R then you'll want to check with the R project over at https://github.com/ropensci/plotly.

kenahoo · 2019-08-12T22:13:30Z

Oops, sorry, I was reading a bunch of different threads and apparently I posted on the wrong one!

WinstonDodson · 2019-08-19T15:02:28Z

I had the same problem with plotly not displaying in a notebook in Kaggle.

Due to my use of qgrid, I need to run the notebook, then fresh the browser and then run the notebook again in order for qgrid to properly display the df.

I later added an interactive plotly display to the notebook. When I opened the notebook and ran it the plotly display displayed properly but, as usual, the qgrid didn't. I then refreshed the notebook and the qgrid displayed properly but the plotly display didn't. I searched and found this page

https://plot.ly/python/renderers/

I then changed the "fig.show()" line in my code to "fig.show(renderer="notebook")"

And this fixed my issue.

From reading the many good examples of troubleshooting above (all of which surpass my abilities) and then the plotly page above I would guess that the problem arises when the plotly API tries to automatically detect the best renderer to use. And so, when this is manually set to 'notebook' it solves this issue.

I hope that this helps and look forward to any feedback.

Tswankwa · 2020-02-04T23:15:23Z

Have you added the line:

init_notebook_mode(connected = True)

nicolaskruchten · 2020-02-05T03:45:45Z

Please note that as of version 4 which came out in July 2019, init_notebook_mode no longer does anything, and fig.show() is all that is needed to display figures "offline".

nicolaskruchten · 2020-03-31T18:40:08Z

I've locked this issue for now: if anyone encounters rendering issues in the future please check out our troubleshooting guide at https://plotly.com/python/troubleshooting/ and if that doesn't help, please feel free to open a new issue :)

michaelsweeney closed this as completed Mar 4, 2019

nicolaskruchten reopened this Mar 4, 2019

jonmmease mentioned this issue Mar 6, 2019

Allow init_notebook_mode to redefine/reinitialize plotly.js each time it's run #1452

Merged

jonmmease closed this as completed Mar 15, 2019

This comment has been minimized.

Sign in to view

plotly locked and limited conversation to collaborators Mar 31, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

blank iplot in Jupyter Notebooks #1448

blank iplot in Jupyter Notebooks #1448

michaelsweeney commented Mar 4, 2019

nicolaskruchten commented Mar 4, 2019

michaelsweeney commented Mar 4, 2019 •

edited

Loading

nicolaskruchten commented Mar 4, 2019

nicolaskruchten commented Mar 4, 2019

michaelsweeney commented Mar 4, 2019

jonmmease commented Mar 5, 2019

jonmmease commented Mar 5, 2019 •

edited

Loading

michaelsweeney commented Mar 5, 2019

jonmmease commented Mar 5, 2019

michaelsweeney commented Mar 5, 2019

jonmmease commented Mar 5, 2019

michaelsweeney commented Mar 5, 2019

michaelsweeney commented Mar 5, 2019

jonmmease commented Mar 5, 2019

michaelsweeney commented Mar 5, 2019

jonmmease commented Mar 5, 2019

jonmmease commented Mar 5, 2019

jonmmease commented Mar 6, 2019

michaelsweeney commented Mar 6, 2019

jonmmease commented Mar 6, 2019

michaelsweeney commented Mar 6, 2019

michaelsweeney commented Mar 13, 2019

jonmmease commented Mar 15, 2019

kenahoo commented Aug 12, 2019

jonmmease commented Aug 12, 2019

kenahoo commented Aug 12, 2019

WinstonDodson commented Aug 19, 2019

Tswankwa commented Feb 4, 2020

nicolaskruchten commented Feb 5, 2020

This comment has been minimized.

This comment has been minimized.

nicolaskruchten commented Mar 31, 2020

blank iplot in Jupyter Notebooks #1448

blank iplot in Jupyter Notebooks #1448

Comments

michaelsweeney commented Mar 4, 2019

nicolaskruchten commented Mar 4, 2019

michaelsweeney commented Mar 4, 2019 • edited Loading

nicolaskruchten commented Mar 4, 2019

nicolaskruchten commented Mar 4, 2019

michaelsweeney commented Mar 4, 2019

jonmmease commented Mar 5, 2019

jonmmease commented Mar 5, 2019 • edited Loading

michaelsweeney commented Mar 5, 2019

jonmmease commented Mar 5, 2019

michaelsweeney commented Mar 5, 2019

jonmmease commented Mar 5, 2019

michaelsweeney commented Mar 5, 2019

michaelsweeney commented Mar 5, 2019

jonmmease commented Mar 5, 2019

michaelsweeney commented Mar 5, 2019

jonmmease commented Mar 5, 2019

jonmmease commented Mar 5, 2019

jonmmease commented Mar 6, 2019

michaelsweeney commented Mar 6, 2019

jonmmease commented Mar 6, 2019

michaelsweeney commented Mar 6, 2019

michaelsweeney commented Mar 13, 2019

jonmmease commented Mar 15, 2019

kenahoo commented Aug 12, 2019

jonmmease commented Aug 12, 2019

kenahoo commented Aug 12, 2019

WinstonDodson commented Aug 19, 2019

Tswankwa commented Feb 4, 2020

nicolaskruchten commented Feb 5, 2020

This comment has been minimized.

This comment has been minimized.

nicolaskruchten commented Mar 31, 2020

michaelsweeney commented Mar 4, 2019 •

edited

Loading

jonmmease commented Mar 5, 2019 •

edited

Loading