In [13]:

import plotly.graph_objs as go
from ipywidgets import Image, Layout
import os

image_data = {}
for img_filename in os.listdir('/home/michael/plotly/repos/plotly_ipywidget_notebooks/notebooks/data/cars/images'):
    model_year = img_filename.split('.')[0]
    with open(f"/home/michael/plotly/repos/plotly_ipywidget_notebooks/notebooks/data/cars/images/{img_filename}", "rb") as f:
        b = f.read()
        image_data[model_year] = b

Image(value=image_data['2012_Chevrolet_Camaro_Coupe'])

Image(value=b'\xff\xd8\xff\xe0\x00\x10JFIF\x00\x01\x01\x00\x00\x01\x00\x01\x00\x00\xff\xdb\x00C\x00\x08\x06\x0…

In [18]:

import pandas as pd
import plotly.graph_objs as go
import plotly.offline as py
import numpy as np
from ipywidgets import interactive, HBox, VBox
py.init_notebook_mode()

df = pd.read_csv('https://raw.githubusercontent.com/jonmmease/plotly_ipywidget_notebooks/master/notebooks/data/cars/cars.csv')

f = go.FigureWidget([go.Scatter(y = df['City mpg'], x = df['Torque'], mode = 'markers')])
scatter = f.data[0]
N = len(df)
scatter.x = scatter.x + np.random.rand(N)/10 *(df['City mpg'].max() - df['City mpg'].min())
scatter.y = scatter.y + np.random.rand(N)/10 *(df['City mpg'].max() - df['City mpg'].min())
scatter.marker.opacity = 0.5

In [19]:

image = Image(value=image_data['2012_Chevrolet_Camaro_Coupe'],
              layout = Layout(height='252px', width='400px'))

In [20]:

VBox((f,image))

VBox(children=(FigureWidget({
    'data': [{'marker': {'opacity': 0.5},
              'mode': 'markers',
     …

In [23]:

def hover_fn(trace, points, state):

    ind = points.point_inds[0]    
    # Update image widget
    model_year = cars_df['Model Year'][ind].replace(' ', '_')
    image.value = image_data[model_year]

scatter.on_hover(hover_fn)

In [ ]: