Plotly figure not rendering in ipywidgets interact function (Google Colab)

Question

I am trying to use Plotly in conjunction with ipywidgets to update the data in the plot based on what someone would want displayed. So far I have the following,

import plotly
import plotly.express as px
import ipywidgets as widgets
import plotly.io as pio
pio.renderers.default = 'colab'

def plotfun(Complex_Name, Num_Beds):
  ### THIS FUNCTION CONTROLS THE INTERACTIVE PLOTTING ###

  # Get the Input into a format consistent with the data
  definer = {'1 Bedroom':'1 bed', '2 Bedroom':'2 beds', '3 Bedroom':'3 beds'}
  Num_Beds_def = definer.get(Num_Beds)

  # Get the dataframe for the specific complex and number of bedrooms
  Complex_df = existing[existing['Complex Name'] == Complex_Name]
  Complex_df = Complex_df[Complex_df['Number of Bedrooms'] == Num_Beds_def]

  # Change any 'Call for Rent' to 0 so it can be plotted
  Complex_df['Unit Prices'] = Complex_df['Unit Prices'].replace(['Call for Rent'],0)

  # Plot using Plotly
  fig = px.scatter(Complex_df,
          x = 'Date',
          y = 'Unit Prices',
          color = 'Unit Name',
          symbol = 'Unit Name',
          template = 'plotly_dark',  # Dark Mode
          title = '<b>' + Complex_Name + ' ' + Num_Beds + ' ' + 'Units' + '</b>',
          width = 1600,
          height = 700,
          hover_name="Unit Name",
          hover_data=['Square Feet', 'Unit Prices', 'Availibility Date', 'Number of Bathrooms'])

  # Set Range
  fig.update_yaxes(range = [1500,2800])

  #Aesthetics
  fig.update_layout(legend=dict(
      orientation="h",
      entrywidth=50,
      yanchor="bottom",
      y=1.02,
      xanchor="right",
      x=1,
      bgcolor="black",
      bordercolor="steelblue",
      borderwidth=0.5
  ))

  fig.update_layout(
  yaxis = dict(tickfont = dict(size=14),
              titlefont = dict(size = 18)
  ))

  return fig.show()

#Interact Object
interactive = widgets.interactive(plotfun,
                                      Complex_Name = widgets.RadioButtons(options= existing['Complex Name'].unique(),
                                                                          description='Complex Name:',
                                                                          disabled=False
                                                                          ),
                                      Num_Beds = widgets.RadioButtons(options= ['1 Bedroom', '2 Bedroom', '3 Bedroom'],
                                                                      description='Number of Bedrooms:',
                                                                      disabled=False
                                                                      ),
                                      )

#Interact Widgets Organization
controls = widgets.HBox(interactive.children[:-1], layout = widgets.Layout(flex_flow='row wrap'))
output = interactive.children[-1]
display(widgets.VBox([controls, output]))

However, when I run the code and try to swap through the options I am rendered with a 'blank' output. This can be seen below,

enter image description here

It 'makes space' for the plot but does not actually display it. I tried removing,

pio.renderers.default = 'colab'

and using,

return fig.show(renderer = 'colab')

This unfortunately produced the same issue. The most successful attempt I had (based on another answer I had found) was adding this function,

def enable_plotly_in_cell():
  import IPython
  from plotly.offline import init_notebook_mode
  display(IPython.core.display.HTML('''<script src="/static/components/requirejs/require.js"></script>'''))
  init_notebook_mode(connected=False)

to the top of the cell and using the following line inside of the plotting function.

enable_plotly_in_cell()

This method rarely will display an output, and only for certain options. It also struggles to switch between options.

plotly is version 5.13.1 ipywidgets is version 7.7.1

The output would ideally look something like this,

enter image description here

with the functionality of being able to switch the data the would be presented.

I am new to these libraries and maybe they arent the ideal ones to use. If so please feel free to let me know your thoughts or any possible solutions.

Thanks!

Answer 1

I'm a user of Google Colab and was experiencing the same behaviour with interactive_output.

The solution I've found, for now, is going back to version 5.10 of Plotly. You can do that by running:

pip install plotly==5.10

Hope that helps to anyone in the same situation 👍