#!/usr/bin/env python
# coding: utf-8

# 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'])


# 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))


# 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[ ]: