panel does not interact properly with plotly.express in jupyter notebook

[iDataist]

My jupyter lab extension list:

Versions of jupyter, plotly and panel:

In the current environment, panel and plotly work independently. However, the integration shown in the code below produced nothing. I also attached the screenshot of the jupyter notebook to show the output (blank). Panel integrates fine with hvplot.

import pandas as pd
import numpy as np
import panel as pn
from panel.interact import interact
import plotly.express as px
import hvplot.pandas
pn.extension("plotly")

# Create data
housing_transactions = pd.DataFrame(
    {
        "years": np.random.randint(2010, 2019, 100),
        "sales": np.random.randint(53, 500, 100),
        "foreclosures": np.random.randint(10, 147, 100),
    }
).sort_values(["years", "sales"])

# Create scatter plot
scatter_plot = px.scatter(
    housing_transactions,
    x="sales",
    y="foreclosures",
    color="years",
    title="Allegheny Sales/Foreclosures Correlation",
)

# Create bar plot
transactions_by_year = housing_transactions.groupby("years").sum().reset_index()
bar_plot = px.bar(
    transactions_by_year, x="years", y="sales", title="Alleghany Sales by Year"
)

# Create row
row = pn.Row(scatter_plot, bar_plot)
row

[pybokeh]

I am not able to reproduce, but I am not using a Windows machine. Unfortunately, the only Windows machine I have access to is my work machine, but since I am on furlough, I learned I am not allowed to use it. I think there is an issue with bokeh 2.0.1 for Windows users for non-rendering of non-holoviz visualizations. Which version of bokeh are you on? Try upgrading to version 2.0.2.

If you must stay on version 2.0.1, try this workaround per this issue which entails creating/setting an environment variable:

You can set BOKEH_RESOURCES=inline as an environment variable or if you don't wish to set an environment variable, you can set it within your script/notebook via:

from bokeh.settings import settings
settings.resources = 'cdn'
settings.resources = 'inline'

[iDataist]

Thank you, Daniel! I appreciate you taking time to look into this issue. I upgraded Bokeh to 2.0.2, but I saw the same outcome.

I'm also a bit confused. I used panel together with plotly.express. What role does Bokeh play in this? I did not have to import Bokeh in this project.

The reason why I'm doing the project in the PC is that I had difficulty installing plotly related libraries in Mac.

Any additional insights that you can provide on panel and its interaction with plotly.express would be greatly appreciated. I called the line below and it did not produce an error. But the two libraries do not seem to integrate properly.

pn.extension("plotly")

[pybokeh]

Hmm too bad upgrading bokeh didn't fix the issue.
Not sure what else to look at assuming you carefully followed the installation steps of plotly.

I noticed you imported interact and hvplot.pandas, but not actually using them both, but doubt that would be the cause of your problems. Try removing those 2 imports.

Per their FAQ:
Q: How does Panel relate to Bokeh?

A: Panel is built on infrastructure provided by Bokeh, specifically Bokeh’s model base classes, layouts, widgets, and (optionally) its server. But Panel does not require using any of Bokeh’s plotting support. This way you can make use of a solid, well supported low-level toolkit (Bokeh) to build apps and dashboards for your own plots from any supported library.

Conversely, what Panel adds on top of Bokeh is full bidirectional communication between Python and JavaScript both in a Jupyter session (classic notebook or Jupyter Lab) and in a standalone Bokeh server, making it trivial to move code between Jupyter and server contexts. It then uses this two-way “comms” support to provide reactive widgets, containers, and views that make it simple to put together widget-controlled objects accessible from either Python or JavaScript. Finally, Panel adds a large set of wrappers for common plot and image types so that they can easily be laid out into small apps or full dashboards.

[pybokeh]

Also noticed you're on older version of jupyter lab and older version of pyviz lab extension.

Here is my html page that works for me along with my jupyter labextensions list output:

JupyterLab v2.1.0
Known labextensions:
   app dir: /home/pybokeh/envs/jupyter/share/jupyter/lab
        @jupyter-widgets/jupyterlab-manager v2.0.0  enabled  OK
        @pyviz/jupyterlab_pyviz v1.0.1  enabled  OK
        jupyterlab-jupytext v1.2.1  enabled  OK

[philippjfr]

I can reproduce this issue, it seems to not render in JupyterLab but does work in classic notebook and when deployed on the server. I'll look into it.

[philippjfr]

Ah, this is very confusing, the issue is the hvplot.pandas import before pn.extension is run. If you change it around like this it should work:

import pandas as pd
import numpy as np
import panel as pn
from panel.interact import interact
import plotly.express as px
pn.extension("plotly")
import hvplot.pandas

This is because hvplot.pandas is trying to be helpful and is loading the extension itself. The problem with that is that once the extension is loaded additional dependencies like plotly cannot be loaded in a subsequent call. I'll think about how to fix this.

[iDataist]

Philipp: Thank you for your inputs! I removed import hvplot.pandas entirely, as well as from panel.interact import interact, and the output remained the same.

Daniel: I hesitated to upgrade the the jupyter labextension because I inherited the notebook and the previous owner specified the versions of the extensions. Let me upgrade my jupyter lab and see what happens.

[philippjfr]

Did you restart your kernel? In case that doesn't work try clearing the notebook and reload the page as well.

[pybokeh]

@philippjfr Ahhh yes that hvplot.pandas subtlety bit me as well. I just remembered reporting on this issue earlier this month at the holoviz discourse.

[iDataist]

@philippjfr and @pybokeh : Thanks again for your help with this issue. Yesterday, I upgraded jupyter. For reasons that I can't fathom, the kernel was lost. I created a new environment with the exact same versions of libraries, and made sure that import hvplot.pandas is after panel("plotly). I was able to run the programs smoothly. I truly appreciate your inputs! I would not have guessed this as the cause of the problem.

[philippjfr]

I would not have guessed this as the cause of the problem.

I don't think anyone could possibly be expected to realize this so we need to find some fix.

[iDataist]

Hi @philippjfr and @pybokeh,

I experienced something that was extremely bizarre. I made sure that import hvplot.pandas is after panel("plotly") in all my jupyter notebooks and they run smoothly a month ago.

I run the code again today. I did not change anything of my environment (the packages and extensions are the same). The row/column/tab objects no longer render correctly in my jupyter notebook.

What confused me the most was the unpredictability of the behavior. When I run the code, there were times when the objects were rendered correctly. But when I run it again, it would stop working.

Have you ever experienced anything like this before? This is beyond my comprehension.

Thanks,
Hui

[pybokeh]

@iDataist When you say no longer render correctly, do you actually mean nothing gets rendered at all? If nothing gets rendered at all, then it could be this issue which has been intermittent and baffling to me also. I am waiting on it to occur for me again so that I can provide diagnostic error output. It has occurred to me perhaps twice, but hard to recall if the times before was due to the hvplot.pandas import or not.

[iDataist]

@pybokeh , thank you so much for your prompt response! I looked into the issue that you mentioned. What I encountered seemed to be a different one. It appeared that the graphs are collapsed into one dimension. Please see the output here . I can also see the error message WARNING:param.PointPlot01698: title_format is deprecated. Please use title instead. I researched on the error message, but did not find any solution.

I reviewed one earlier message from you and updated my packages to new versions. But the problem remained. If you run the notebook on your system, do you see the same output?

JupyterLab v2.1.3
Known labextensions:
        @jupyter-widgets/jupyterlab-manager v2.0.0 enabled  ok
        @pyviz/jupyterlab_pyviz v1.0.4 enabled  ok
        jupyterlab-plotly v4.8.1 enabled  ok
        plotlywidget v4.8.1 enabled  ok

# Name                    Version                   Build  Channel
holoviz                   0.11.3                     py_0    pyviz
(pyviz) PS C:\Users\hwdgr> conda list hvplot
# packages in environment at C:\Users\hwdgr\Miniconda3\envs\pyviz:
#
# Name                    Version                   Build  Channel
hvplot                    0.5.2                      py_0    pyviz
(pyviz) PS C:\Users\hwdgr> conda list plotly
# packages in environment at C:\Users\hwdgr\Miniconda3\envs\pyviz:
#
# Name                    Version                   Build  Channel
plotly                    4.8.1                      py_0    plotly
(pyviz) PS C:\Users\hwdgr> conda list panel
# packages in environment at C:\Users\hwdgr\Miniconda3\envs\pyviz:
#
# Name                    Version                   Build  Channel
panel                     0.9.5                      py_0    pyviz
(pyviz) PS C:\Users\hwdgr> conda list pyviz
# packages in environment at C:\Users\hwdgr\Miniconda3\envs\pyviz:
#
# Name                    Version                   Build  Channel
pyviz                     0.10.3                     py_0    pyviz
pyviz_comms               0.7.4                      py_0    pyviz

[pybokeh]

@iDataist So you're not experiencing what is depicted in gioarma's 2nd screen shot in that issue (a thin or flat output cell)? That was that I was experiencing where I can only see just the top part of my chart because the output cell height was so short as in gioarma's 2nd screenshot. I looked at your notebook, but I just see a blank output cell, no flat or thin output cell. Can you also obtain the output from your browser's javascript console?

Sorry I don't have a mapbox api token. I can try to get one later and run your notebook. The warning about the title is just a deprecation warning and shouldn't affect rendering of your desired output. I also still get that warning and my charts still render. Per this GH issue, that warning will go away with the next release of hvplot.

[iDataist]

@pybokeh , thanks for the follow-up! The issue I experienced is similar but slightly different. There are a few screenshots I generated from the output. Please see the links below. I saw a narrow window as an output, which is similar to gioarma's. However, I also saw two triangles on the right side. And I can scroll up and down and see glimpse of bits and pieces of the graph in this narrow window. I hope that it can be resolved from the next release of hvplot. Do you happen to know the timing of the release? Do I need to upgrade hvplot?

https://drive.google.com/file/d/16Op5adw5zyyLHIDgGs4VmYzc9btulwaj/view?usp=sharing
https://drive.google.com/file/d/1KLvTlqVq4O74wRJC1_swazK__q-X_2ba/view?usp=sharing

Below are the messages from the developer console. Let me know if they are what you are looking for.

Starting application in workspace: "/lab"
VM399:44 Bokeh: BokehJS not loaded, scheduling load and callback at Sat May 30 2020 20:00:37 GMT-0500 (Central Daylight Time)
VM399:93 Bokeh: injecting script tag for BokehJS library:  https://code.jquery.com/jquery-3.4.1.min.js
VM399:93 Bokeh: injecting script tag for BokehJS library:  https://cdn.plot.ly/plotly-latest.min.js
VM401:44 Bokeh: BokehJS not loaded, scheduling load and callback at Sat May 30 2020 20:00:37 GMT-0500 (Central Daylight Time)
VM401:92 Bokeh: injecting script tag for BokehJS library:  https://code.jquery.com/jquery-3.4.1.min.js
VM401:92 Bokeh: injecting script tag for BokehJS library:  https://cdn.plot.ly/plotly-latest.min.js
VM399:50 Bokeh: all BokehJS libraries/stylesheets loaded
VM401:1168 Bokeh: BokehJS plotting callback run at Sat May 30 2020 20:00:38 GMT-0500 (Central Daylight Time)
VM401:359 [bokeh] setting log level to: 'info'
VM399:28 Bokeh: all callbacks have finished
renderer.js:68 Kernel not found, could not register comm target  0ac68a64f52f4e6dafa8b6c225e373d4
renderer.js:75 Kernel not found, could not connect to comm target  a2e3d5d13c814232aa9f3d628417701a
VM401:283 [bokeh] document idle at 567 ms
renderer.js:68 Kernel not found, could not register comm target  274a882f84b443d58a32a3d64df8aa37
renderer.js:75 Kernel not found, could not connect to comm target  2cb58ef0cec343ca8ecc7f5b34b699bd
VM401:283 [bokeh] document idle at 334 ms
renderer.js:68 Kernel not found, could not register comm target  aaa80678e1d44933a888ad642e2c5581
renderer.js:75 Kernel not found, could not connect to comm target  91cbc79dba424f82934610ac88a19c49
VM401:283 [bokeh] document idle at 381 ms
2default.js:50 Starting WebSocket: ws://localhost:8888/api/kernels/e7928c46-abc5-468c-b0fd-df8a73a0ae1a
default.js:1197 Kernel: starting (e7928c46-abc5-468c-b0fd-df8a73a0ae1a)
default.js:1197 Kernel: restarting (e7928c46-abc5-468c-b0fd-df8a73a0ae1a)
VM399:44 Bokeh: BokehJS not loaded, scheduling load and callback at Sat May 30 2020 20:00:53 GMT-0500 (Central Daylight Time)
VM399:93 Bokeh: injecting script tag for BokehJS library:  https://code.jquery.com/jquery-3.4.1.min.js
VM399:50 Bokeh: all BokehJS libraries/stylesheets loaded
VM399:1169 Bokeh: BokehJS plotting callback run at Sat May 30 2020 20:00:53 GMT-0500 (Central Daylight Time)
VM401:359 [bokeh] setting log level to: 'info'
VM399:28 Bokeh: all callbacks have finished
VM401:44 Bokeh: BokehJS not loaded, scheduling load and callback at Sat May 30 2020 20:00:56 GMT-0500 (Central Daylight Time)
VM401:92 Bokeh: injecting script tag for BokehJS library:  https://code.jquery.com/jquery-3.4.1.min.js
VM401:50 Bokeh: all BokehJS libraries/stylesheets loaded
VM401:1168 Bokeh: BokehJS plotting callback run at Sat May 30 2020 20:00:56 GMT-0500 (Central Daylight Time)
VM401:359 [bokeh] setting log level to: 'info'
VM401:28 Bokeh: all callbacks have finished
VM401:283 [bokeh] document idle at 172 ms
VM401:283 [bokeh] document idle at 173 ms
VM401:283 [bokeh] document idle at 143 ms
VM752:44 Bokeh: BokehJS not loaded, scheduling load and callback at Sat May 30 2020 20:01:19 GMT-0500 (Central Daylight Time)
VM752:93 Bokeh: injecting script tag for BokehJS library:  https://code.jquery.com/jquery-3.4.1.min.js
VM754:44 Bokeh: BokehJS not loaded, scheduling load and callback at Sat May 30 2020 20:01:19 GMT-0500 (Central Daylight Time)
VM754:92 Bokeh: injecting script tag for BokehJS library:  https://code.jquery.com/jquery-3.4.1.min.js
renderer.js:68 Kernel not found, could not register comm target  c93091ef60bd445592cfcadc0d8c0991
renderer.js:75 Kernel not found, could not connect to comm target  9334acd1bf4c417d842132ed709384f8
VM401:283 [bokeh] document idle at 1952 ms
VM752:50 Bokeh: all BokehJS libraries/stylesheets loaded
VM754:1168 Bokeh: BokehJS plotting callback run at Sat May 30 2020 20:01:21 GMT-0500 (Central Daylight Time)
VM401:359 [bokeh] setting log level to: 'info'
VM752:28 Bokeh: all callbacks have finished
default.js:50 Starting WebSocket: ws://localhost:8888/api/kernels/f556b959-8061-43c3-b7dc-f6b1d3c4b03b
default.js:1197 Kernel: starting (f556b959-8061-43c3-b7dc-f6b1d3c4b03b)
default.js:1197 Kernel: restarting (f556b959-8061-43c3-b7dc-f6b1d3c4b03b)
VM752:44 Bokeh: BokehJS not loaded, scheduling load and callback at Sat May 30 2020 20:01:35 GMT-0500 (Central Daylight Time)
VM752:93 Bokeh: injecting script tag for BokehJS library:  https://code.jquery.com/jquery-3.4.1.min.js
VM752:50 Bokeh: all BokehJS libraries/stylesheets loaded
VM752:1169 Bokeh: BokehJS plotting callback run at Sat May 30 2020 20:01:35 GMT-0500 (Central Daylight Time)
VM401:359 [bokeh] setting log level to: 'info'
VM752:28 Bokeh: all callbacks have finished
VM754:44 Bokeh: BokehJS not loaded, scheduling load and callback at Sat May 30 2020 20:01:37 GMT-0500 (Central Daylight Time)
VM754:92 Bokeh: injecting script tag for BokehJS library:  https://code.jquery.com/jquery-3.4.1.min.js
VM754:50 Bokeh: all BokehJS libraries/stylesheets loaded
VM754:1168 Bokeh: BokehJS plotting callback run at Sat May 30 2020 20:01:37 GMT-0500 (Central Daylight Time)
VM401:359 [bokeh] setting log level to: 'info'
VM754:28 Bokeh: all callbacks have finished
VM401:283 [bokeh] document idle at 932 ms
VM769:44 Bokeh: BokehJS not loaded, scheduling load and callback at Sat May 30 2020 20:01:59 GMT-0500 (Central Daylight Time)
VM769:93 Bokeh: injecting script tag for BokehJS library:  https://code.jquery.com/jquery-3.4.1.min.js
VM771:44 Bokeh: BokehJS not loaded, scheduling load and callback at Sat May 30 2020 20:01:59 GMT-0500 (Central Daylight Time)
VM771:92 Bokeh: injecting script tag for BokehJS library:  https://code.jquery.com/jquery-3.4.1.min.js
renderer.js:68 Kernel not found, could not register comm target  6042f5ce7b4d4e31b1ce11789cb29e70
renderer.js:75 Kernel not found, could not connect to comm target  1881b603e0194fe69b3557f748c96817
cdn.plot.ly/plotly-latest.min.js:61 ERROR: No valid mapbox style found, please set `mapbox.style` to one of:
open-street-map, white-bg, carto-positron, carto-darkmatter, stamen-terrain, stamen-toner, stamen-watercolor
or register a Mapbox access token to use a Mapbox-served style.
o @ cdn.plot.ly/plotly-latest.min.js:61
cdn.plot.ly/plotly-latest.min.js:61 Uncaught (in promise) Error: No valid mapbox style found, please set `mapbox.style` to one of:
open-street-map, white-bg, carto-positron, carto-darkmatter, stamen-terrain, stamen-toner, stamen-watercolor
or register a Mapbox access token to use a Mapbox-served style.
    at cdn.plot.ly/plotly-latest.min.js:61
    at Object.r.plot (cdn.plot.ly/plotly-latest.min.js:61)
    at r.drawData (cdn.plot.ly/plotly-latest.min.js:61)
    at Object.l.syncOrAsync (cdn.plot.ly/plotly-latest.min.js:61)
    at Object.r.plot (cdn.plot.ly/plotly-latest.min.js:61)
    at Object.r.newPlot (cdn.plot.ly/plotly-latest.min.js:61)
    at Object.r.react (cdn.plot.ly/plotly-latest.min.js:61)
    at u.plot (<anonymous>:1117:2066)
    at u.render (<anonymous>:1117:1752)
    at u.render (<anonymous>:554:1836)
VM769:50 Bokeh: all BokehJS libraries/stylesheets loaded
VM771:1168 Bokeh: BokehJS plotting callback run at Sat May 30 2020 20:02:00 GMT-0500 (Central Daylight Time)
VM401:359 [bokeh] setting log level to: 'info'
VM769:28 Bokeh: all callbacks have finished
default.js:50 Starting WebSocket: ws://localhost:8888/api/kernels/3e821c22-d333-414c-b30a-33bc890fc039
default.js:1197 Kernel: starting (3e821c22-d333-414c-b30a-33bc890fc039)
default.js:1197 Kernel: restarting (3e821c22-d333-414c-b30a-33bc890fc039)
VM769:44 Bokeh: BokehJS not loaded, scheduling load and callback at Sat May 30 2020 20:02:13 GMT-0500 (Central Daylight Time)
VM769:93 Bokeh: injecting script tag for BokehJS library:  https://code.jquery.com/jquery-3.4.1.min.js
VM769:50 Bokeh: all BokehJS libraries/stylesheets loaded
VM769:1169 Bokeh: BokehJS plotting callback run at Sat May 30 2020 20:02:13 GMT-0500 (Central Daylight Time)
VM401:359 [bokeh] setting log level to: 'info'
VM769:28 Bokeh: all callbacks have finished
VM771:44 Bokeh: BokehJS not loaded, scheduling load and callback at Sat May 30 2020 20:02:16 GMT-0500 (Central Daylight Time)
VM771:92 Bokeh: injecting script tag for BokehJS library:  https://code.jquery.com/jquery-3.4.1.min.js
VM771:50 Bokeh: all BokehJS libraries/stylesheets loaded
VM771:1168 Bokeh: BokehJS plotting callback run at Sat May 30 2020 20:02:16 GMT-0500 (Central Daylight Time)
VM401:359 [bokeh] setting log level to: 'info'
VM771:28 Bokeh: all callbacks have finished
cdn.plot.ly/plotly-latest.min.js:61 ERROR: No valid mapbox style found, please set `mapbox.style` to one of:
open-street-map, white-bg, carto-positron, carto-darkmatter, stamen-terrain, stamen-toner, stamen-watercolor
or register a Mapbox access token to use a Mapbox-served style.
o @ cdn.plot.ly/plotly-latest.min.js:61
cdn.plot.ly/plotly-latest.min.js:61 Uncaught (in promise) Error: No valid mapbox style found, please set `mapbox.style` to one of:
open-street-map, white-bg, carto-positron, carto-darkmatter, stamen-terrain, stamen-toner, stamen-watercolor
or register a Mapbox access token to use a Mapbox-served style.
    at cdn.plot.ly/plotly-latest.min.js:61
    at Object.r.plot (cdn.plot.ly/plotly-latest.min.js:61)
    at r.drawData (cdn.plot.ly/plotly-latest.min.js:61)
    at Object.l.syncOrAsync (cdn.plot.ly/plotly-latest.min.js:61)
    at Object.r.plot (cdn.plot.ly/plotly-latest.min.js:61)
    at Object.r.newPlot (cdn.plot.ly/plotly-latest.min.js:61)
    at Object.r.react (cdn.plot.ly/plotly-latest.min.js:61)
    at u.plot (<anonymous>:1117:2066)
    at u.render (<anonymous>:1117:1752)
    at u.render (<anonymous>:554:1836)
2vendors~main.f09f37ea341fc0d58de8.js:2 Uncaught (in promise) TypeError: Cannot read property 'sessionContext' of null
    at r.get comm [as comm] (vendors~main.f09f37ea341fc0d58de8.js:2)
    at l._disposePlot (vendors~main.f09f37ea341fc0d58de8.js:2)
    at l.dispose (vendors~main.f09f37ea341fc0d58de8.js:2)
    at t.dispose (vendors~main.f09f37ea341fc0d58de8.js:2)
    at t.e.dispose (vendors~main.f09f37ea341fc0d58de8.js:2)
    at t.dispose (vendors~main.f09f37ea341fc0d58de8.js:2)
    at k.e.dispose (vendors~main.f09f37ea341fc0d58de8.js:2)
    at k.dispose (vendors~main.f09f37ea341fc0d58de8.js:2)
    at t.dispose (vendors~main.f09f37ea341fc0d58de8.js:2)
    at t.e.dispose (vendors~main.f09f37ea341fc0d58de8.js:2)
VM778:44 Bokeh: BokehJS not loaded, scheduling load and callback at Sat May 30 2020 20:02:40 GMT-0500 (Central Daylight Time)
VM778:93 Bokeh: injecting script tag for BokehJS library:  https://code.jquery.com/jquery-3.4.1.min.js
VM780:44 Bokeh: BokehJS not loaded, scheduling load and callback at Sat May 30 2020 20:02:40 GMT-0500 (Central Daylight Time)
VM780:92 Bokeh: injecting script tag for BokehJS library:  https://code.jquery.com/jquery-3.4.1.min.js
renderer.js:68 Kernel not found, could not register comm target  c0430d69855d454a9c315ba7eac98dd1
renderer.js:75 Kernel not found, could not connect to comm target  2224d9e1560e4adf9aeffcdee05c3845
cdn.plot.ly/plotly-latest.min.js:61 ERROR: No valid mapbox style found, please set `mapbox.style` to one of:
open-street-map, white-bg, carto-positron, carto-darkmatter, stamen-terrain, stamen-toner, stamen-watercolor
or register a Mapbox access token to use a Mapbox-served style.
o @ cdn.plot.ly/plotly-latest.min.js:61
cdn.plot.ly/plotly-latest.min.js:61 Uncaught (in promise) Error: No valid mapbox style found, please set `mapbox.style` to one of:
open-street-map, white-bg, carto-positron, carto-darkmatter, stamen-terrain, stamen-toner, stamen-watercolor
or register a Mapbox access token to use a Mapbox-served style.
    at cdn.plot.ly/plotly-latest.min.js:61
    at Object.r.plot (cdn.plot.ly/plotly-latest.min.js:61)
    at r.drawData (cdn.plot.ly/plotly-latest.min.js:61)
    at Object.l.syncOrAsync (cdn.plot.ly/plotly-latest.min.js:61)
    at Object.r.plot (cdn.plot.ly/plotly-latest.min.js:61)
    at Object.r.newPlot (cdn.plot.ly/plotly-latest.min.js:61)
    at Object.r.react (cdn.plot.ly/plotly-latest.min.js:61)
    at u.plot (<anonymous>:1117:2066)
    at u.render (<anonymous>:1117:1752)
    at u.render (<anonymous>:554:1836)
VM778:50 Bokeh: all BokehJS libraries/stylesheets loaded
VM780:1168 Bokeh: BokehJS plotting callback run at Sat May 30 2020 20:02:41 GMT-0500 (Central Daylight Time)
VM401:359 [bokeh] setting log level to: 'info'
VM778:28 Bokeh: all callbacks have finished
default.js:50 Starting WebSocket: ws://localhost:8888/api/kernels/b0b3da2b-cd9b-41f9-8bfa-f8901d0ac61a
default.js:1197 Kernel: starting (b0b3da2b-cd9b-41f9-8bfa-f8901d0ac61a)
default.js:1197 Kernel: restarting (b0b3da2b-cd9b-41f9-8bfa-f8901d0ac61a)
VM778:44 Bokeh: BokehJS not loaded, scheduling load and callback at Sat May 30 2020 20:02:51 GMT-0500 (Central Daylight Time)
VM778:93 Bokeh: injecting script tag for BokehJS library:  https://code.jquery.com/jquery-3.4.1.min.js
VM778:50 Bokeh: all BokehJS libraries/stylesheets loaded
VM778:1169 Bokeh: BokehJS plotting callback run at Sat May 30 2020 20:02:51 GMT-0500 (Central Daylight Time)
VM401:359 [bokeh] setting log level to: 'info'
VM778:28 Bokeh: all callbacks have finished
VM780:44 Bokeh: BokehJS not loaded, scheduling load and callback at Sat May 30 2020 20:02:54 GMT-0500 (Central Daylight Time)
VM780:92 Bokeh: injecting script tag for BokehJS library:  https://code.jquery.com/jquery-3.4.1.min.js
VM780:50 Bokeh: all BokehJS libraries/stylesheets loaded
VM780:1168 Bokeh: BokehJS plotting callback run at Sat May 30 2020 20:02:54 GMT-0500 (Central Daylight Time)
VM401:359 [bokeh] setting log level to: 'info'
VM780:28 Bokeh: all callbacks have finished
cdn.plot.ly/plotly-latest.min.js:61 ERROR: No valid mapbox style found, please set `mapbox.style` to one of:
open-street-map, white-bg, carto-positron, carto-darkmatter, stamen-terrain, stamen-toner, stamen-watercolor
or register a Mapbox access token to use a Mapbox-served style.
o @ cdn.plot.ly/plotly-latest.min.js:61
cdn.plot.ly/plotly-latest.min.js:61 Uncaught (in promise) Error: No valid mapbox style found, please set `mapbox.style` to one of:
open-street-map, white-bg, carto-positron, carto-darkmatter, stamen-terrain, stamen-toner, stamen-watercolor
or register a Mapbox access token to use a Mapbox-served style.
    at cdn.plot.ly/plotly-latest.min.js:61
    at Object.r.plot (cdn.plot.ly/plotly-latest.min.js:61)
    at r.drawData (cdn.plot.ly/plotly-latest.min.js:61)
    at Object.l.syncOrAsync (cdn.plot.ly/plotly-latest.min.js:61)
    at Object.r.plot (cdn.plot.ly/plotly-latest.min.js:61)
    at Object.r.newPlot (cdn.plot.ly/plotly-latest.min.js:61)
    at Object.r.react (cdn.plot.ly/plotly-latest.min.js:61)
    at u.plot (<anonymous>:1117:2066)
    at u.render (<anonymous>:1117:1752)
    at u.render (<anonymous>:554:1836)
2lab:355 Uncaught TypeError: Cannot read property 'style' of undefined
    at u (<anonymous>:355:4159)
    at Object.n.unsized (<anonymous>:355:4926)
    at new r (<anonymous>:502:185)
    at new <anonymous> (<anonymous>:560:588)
    at p._update_layout (<anonymous>:560:584)
    at p.update_layout (<anonymous>:554:1916)
    at p.invalidate_layout (<anonymous>:554:2871)
    at <anonymous>:554:848
2vendors~main.f09f37ea341fc0d58de8.js:2 Connection lost, reconnecting in 0 seconds.
_reconnect @ vendors~main.f09f37ea341fc0d58de8.js:2
default.js:50 Starting WebSocket: ws://localhost:8888/api/kernels/3e821c22-d333-414c-b30a-33bc890fc039
default.js:50 Starting WebSocket: ws://localhost:8888/api/kernels/b0b3da2b-cd9b-41f9-8bfa-f8901d0ac61a
default.js:57 WebSocket connection to 'ws://localhost:8888/api/kernels/3e821c22-d333-414c-b30a-33bc890fc039/channels?session_id=f4ef2b25-3a2b-4fcd-8779-2341ac66fa3d&token=2ae8e3f20bd086f08697be82386d395e7dfe3b7366e577bb' failed: Error in connection establishment: net::ERR_NETWORK_IO_SUSPENDED
_createSocket @ vendors~main.f09f37ea341fc0d58de8.js:2
default.js:1162 Connection lost, reconnecting in 0 seconds.
_reconnect @ vendors~main.f09f37ea341fc0d58de8.js:2
default.js:57 WebSocket connection to 'ws://localhost:8888/api/kernels/b0b3da2b-cd9b-41f9-8bfa-f8901d0ac61a/channels?session_id=788e050a-6ef8-44f1-80f4-a10c00468d57&token=2ae8e3f20bd086f08697be82386d395e7dfe3b7366e577bb' failed: Error in connection establishment: net::ERR_NETWORK_IO_SUSPENDED
_createSocket @ vendors~main.f09f37ea341fc0d58de8.js:2
default.js:1162 Connection lost, reconnecting in 0 seconds.
_reconnect @ vendors~main.f09f37ea341fc0d58de8.js:2
default.js:50 Starting WebSocket: ws://localhost:8888/api/kernels/b0b3da2b-cd9b-41f9-8bfa-f8901d0ac61a
default.js:50 Starting WebSocket: ws://localhost:8888/api/kernels/3e821c22-d333-414c-b30a-33bc890fc039
default.js:57 WebSocket connection to 'ws://localhost:8888/api/kernels/b0b3da2b-cd9b-41f9-8bfa-f8901d0ac61a/channels?session_id=788e050a-6ef8-44f1-80f4-a10c00468d57&token=2ae8e3f20bd086f08697be82386d395e7dfe3b7366e577bb' failed: Error in connection establishment: net::ERR_NETWORK_IO_SUSPENDED
_createSocket @ vendors~main.f09f37ea341fc0d58de8.js:2
default.js:1162 Connection lost, reconnecting in 0 seconds.
_reconnect @ vendors~main.f09f37ea341fc0d58de8.js:2
default.js:57 WebSocket connection to 'ws://localhost:8888/api/kernels/3e821c22-d333-414c-b30a-33bc890fc039/channels?session_id=f4ef2b25-3a2b-4fcd-8779-2341ac66fa3d&token=2ae8e3f20bd086f08697be82386d395e7dfe3b7366e577bb' failed: Error in connection establishment: net::ERR_NETWORK_IO_SUSPENDED
_createSocket @ vendors~main.f09f37ea341fc0d58de8.js:2
vendors~main.f09f37ea341fc0d58de8.js:2 Connection lost, reconnecting in 2 seconds.
_reconnect @ vendors~main.f09f37ea341fc0d58de8.js:2
default.js:50 Starting WebSocket: ws://localhost:8888/api/kernels/b0b3da2b-cd9b-41f9-8bfa-f8901d0ac61a
default.js:50 Starting WebSocket: ws://localhost:8888/api/kernels/3e821c22-d333-414c-b30a-33bc890fc039
3lab:355 Uncaught TypeError: Cannot read property 'style' of undefined
    at u (<anonymous>:355:4159)
    at Object.n.unsized (<anonymous>:355:4926)
    at new r (<anonymous>:502:185)
    at new <anonymous> (<anonymous>:560:588)
    at p._update_layout (<anonymous>:560:584)
    at p.update_layout (<anonymous>:554:1916)
    at p.invalidate_layout (<anonymous>:554:2871)
    at <anonymous>:554:848
4lab:554 Uncaught TypeError: Cannot read property 'compute' of undefined
    at p.compute_layout (<anonymous>:554:2623)
    at p.resize_layout (<anonymous>:554:2824)
    at is_root._on_resize (<anonymous>:554:628)
4VM401:554 Uncaught TypeError: Cannot read property 'compute' of undefined
    at p.compute_layout (<anonymous>:554:2623)
    at p.resize_layout (<anonymous>:554:2824)
    at is_root._on_resize (<anonymous>:554:628)
compute_layout @ VM401:554
resize_layout @ VM401:554
is_root._on_resize @ VM401:554
9[Violation] Forced reflow while executing JavaScript took <N>ms
28VM401:554 Uncaught TypeError: Cannot read property 'compute' of undefined
    at p.compute_layout (<anonymous>:554:2623)
    at p.resize_layout (<anonymous>:554:2824)
    at is_root._on_resize (<anonymous>:554:628)
compute_layout @ VM401:554
resize_layout @ VM401:554
is_root._on_resize @ VM401:554

[scottandersen23]

You need to run in this order for it to work.

import panel as pn
pn.extension("plotly")
from panel.interact import interact
import pandas as pd
import numpy as np
import plotly.express as px
import hvplot.pandas
from pathlib import Path