{
"cells": [
{
"cell_type": "code",
"execution_count": 13,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "6f2325f11c7c413cb491f874a10c2457",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"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…"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"import plotly.graph_objs as go\n",
"from ipywidgets import Image, Layout\n",
"import os\n",
"\n",
"image_data = {}\n",
"for img_filename in os.listdir('/home/michael/plotly/repos/plotly_ipywidget_notebooks/notebooks/data/cars/images'):\n",
" model_year = img_filename.split('.')[0]\n",
" with open(f\"/home/michael/plotly/repos/plotly_ipywidget_notebooks/notebooks/data/cars/images/{img_filename}\", \"rb\") as f:\n",
" b = f.read()\n",
" image_data[model_year] = b\n",
"\n",
"Image(value=image_data['2012_Chevrolet_Camaro_Coupe'])"
]
},
{
"cell_type": "code",
"execution_count": 18,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
""
],
"text/vnd.plotly.v1+html": [
""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"import pandas as pd\n",
"import plotly.graph_objs as go\n",
"import plotly.offline as py\n",
"import numpy as np\n",
"from ipywidgets import interactive, HBox, VBox\n",
"py.init_notebook_mode()\n",
"\n",
"df = pd.read_csv('https://raw.githubusercontent.com/jonmmease/plotly_ipywidget_notebooks/master/notebooks/data/cars/cars.csv')\n",
"\n",
"f = go.FigureWidget([go.Scatter(y = df['City mpg'], x = df['Torque'], mode = 'markers')])\n",
"scatter = f.data[0]\n",
"N = len(df)\n",
"scatter.x = scatter.x + np.random.rand(N)/10 *(df['City mpg'].max() - df['City mpg'].min())\n",
"scatter.y = scatter.y + np.random.rand(N)/10 *(df['City mpg'].max() - df['City mpg'].min())\n",
"scatter.marker.opacity = 0.5"
]
},
{
"cell_type": "code",
"execution_count": 19,
"metadata": {},
"outputs": [],
"source": [
"image = Image(value=image_data['2012_Chevrolet_Camaro_Coupe'],\n",
" layout = Layout(height='252px', width='400px'))"
]
},
{
"cell_type": "code",
"execution_count": 20,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "21ecd620378b45b19d88b285be9160ca",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"VBox(children=(FigureWidget({\n",
" 'data': [{'marker': {'opacity': 0.5},\n",
" 'mode': 'markers',\n",
" …"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"VBox((f,image))"
]
},
{
"cell_type": "code",
"execution_count": 23,
"metadata": {},
"outputs": [],
"source": [
"def hover_fn(trace, points, state):\n",
"\n",
" ind = points.point_inds[0] \n",
" # Update image widget\n",
" model_year = cars_df['Model Year'][ind].replace(' ', '_')\n",
" image.value = image_data[model_year]\n",
"\n",
"scatter.on_hover(hover_fn)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.6.5"
}
},
"nbformat": 4,
"nbformat_minor": 2
}