Black Lives Matter. Please consider donating to Black Girls Code today.
Learn about the upcoming Dash Enterprise 4.0 release in the August 5th webinar with Chris Parmer, the Inventor of Dash.

Datashader FigureWidget Compatability

I was using plotly, mapbox, and ipywidgets for an interactive research dashboard with FigureWidget, as described in the documentation. Although I got the visualization working with Figure, I was unable to get it working with FigureWidget due to an error: “Can’t clean for JSON: <PIL.Image.Image image mode=RGBA size=50x50 at [memory address]>”.

I moved the notebook into a minimal anaconda jupyterlab environment and had the same issues. I’ve generated a small example to demonstrate the issue that I’m having.

import plotly.graph_objects as go

import pandas as pd

import datashader as ds
import datashader.transfer_functions as tf
data = [{"type":"scattermapbox"
        ,"lat":[39+(50/60)]
        ,"lon":[-98-(35/60)]}]
layout = {"mapbox":{"style":"open-street-map"
                   ,"center":{"lat":39+(50/60),"lon":-98-(35/60)}
                   ,"zoom":5}
         ,"margin":{"r":0,"t":0,"l":0,"b":0}}

fig = go.FigureWidget( data = data, layout = layout )
fig

These cells execute just fine. This demonstrates that there is nothing wrong with FigureWidgets in my environment. Now I generate the datashader tile, per the example in the documentation.

wichita = ( 37+(41/60)+(20/3600), -97-(20/60)-(10/3600) )
lincoln = ( 40+(48/60)+(32/3600), -96-(40/60)-(44/3600) )

sample_df = pd.DataFrame({"lat":[wichita[0],lincoln[0]], "lon":[wichita[1],lincoln[1]]})
test_canvas = ds.Canvas( plot_height = 50, plot_width = 50 )
test_lines = test_canvas.line( sample_df, x = "lat", y = "lon", agg = ds.any() )


coords_lat, coords_lon = test_lines.coords['lat'].values, test_lines.coords['lon'].values
# Corners of the image, which need to be passed to mapbox
coordinates = [[coords_lon[0], coords_lat[0]],
               [coords_lon[-1], coords_lat[0]],
               [coords_lon[-1], coords_lat[-1]],
               [coords_lon[0], coords_lat[-1]]]

test_img = tf.shade( test_lines )[::-1].to_pil()
data = [{"type":"scattermapbox"
        ,"lat":[39+(50/60)]
        ,"lon":[-98-(35/60)]}]
layout = {"mapbox":{"style":"open-street-map"
                   ,"center":{"lat":39+(50/60),"lon":-98-(35/60)}
                   ,"zoom":5
                   ,"layers":[{"sourcetype":"image"
                              ,"source": test_img
                              ,"coordinates": coordinates}]}
         ,"margin":{"r":0,"t":0,"l":0,"b":0}}

fig = go.Figure( data = data, layout = layout )
fig.show()

This code executes as well, showing that the datashader layer works just fine with Figure. The following cell throws an error for me, demonstrating the incompatibility with FigureWidget.

fig_widget = go.FigureWidget( data = data, layout = layout )
fig_widget

Thanks for the help.

Should I file this as an issue on GitHub instead? Is it reasonable to assume that the development team intends for Figures and FigureWidgets behave the same with the same input?