Interactive-Football-Pitch.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# voila-interactive-football-pitch\n",
    "This is a example widget served by `jupyter voila`. It combines `qgrid` and `bqplot` to create an interactive football pitch widget.\n",
    "## Features\n",
    "- Selected players on the pitch are highlighted in qgrid.\n",
    "- Selected players selected in qgrid are marked on the pitch.\n",
    "- Players are moveable on the pitch and their position is updated in qgrid."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "import os\n",
    "import ipywidgets as widgets\n",
    "\n",
    "from bqplot import *\n",
    "import numpy as np\n",
    "import pandas as pd\n",
    "import qgrid"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "# create DataFrame for team data\n",
    "columns = ['name', 'id', 'x', 'y']\n",
    "\n",
    "tottenham_players = [\n",
    "    ['Lloris', 1, 0.1, 0.5],\n",
    "    ['Trippier', 2, 0.2, 0.25],\n",
    "    ['Alderweireld', 4, 0.2, 0.4],\n",
    "    ['Vertonghen', 5, 0.2, 0.6],\n",
    "    ['D. Rose', 3, 0.2, 0.75],\n",
    "    ['Sissoko', 17, 0.3, 0.4],\n",
    "    ['Winks', 8, 0.3, 0.6], \n",
    "    ['Eriksen', 23, 0.4, 0.25],\n",
    "    ['Alli', 20, 0.4, 0.5],\n",
    "    ['Son', 7, 0.4, 0.75],\n",
    "    ['H. Kane', 10, 0.45, 0.5]\n",
    "]\n",
    "\n",
    "temp_tottenham = pd.DataFrame.from_records(tottenham_players, columns=columns)\n",
    "temp_tottenham['team'] = 'Tottenham Hotspur'\n",
    "temp_tottenham['jersey'] = 'Blue'\n",
    "\n",
    "liverpool_players = [\n",
    "    ['Alisson', 13, 0.9, 0.5],\n",
    "    ['Alexander-Arnold', 66, 0.8, 0.75],\n",
    "    ['Matip', 32, 0.8, 0.6],\n",
    "    ['van Dijk', 4, 0.8, 0.4],\n",
    "    ['Robertson', 26, 0.8, 0.25],\n",
    "    ['J. Henderson', 14, 0.7, 0.7],\n",
    "    ['Fabinho', 3, 0.7, 0.5],\n",
    "    ['Wijnaldum', 5, 0.7, 0.3],\n",
    "    ['Salah', 11, 0.6, 0.75],\n",
    "    ['Roberto Firmino', 9, 0.6, 0.5],\n",
    "    ['Mané', 10, 0.6, 0.25] \n",
    "]\n",
    "\n",
    "temp_liverpool = pd.DataFrame.from_records(liverpool_players, columns=columns)\n",
    "temp_liverpool['team'] = 'FC Liverpool'\n",
    "temp_liverpool['jersey'] = 'Red'\n",
    "\n",
    "teams = pd.concat([temp_tottenham, temp_liverpool], axis=0, ignore_index=True)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Define bqplot Image mark\n",
    "\n",
    "# read pitch image\n",
    "image_path = os.path.abspath('pitch.png')\n",
    "\n",
    "with open(image_path, 'rb') as f:\n",
    "    raw_image = f.read()\n",
    "ipyimage = widgets.Image(value=raw_image, format='png')\n",
    "\n",
    "scales_image = {'x': LinearScale(), 'y': LinearScale()}\n",
    "axes_options = {'x': {'visible': False}, 'y': {'visible': False}}\n",
    "\n",
    "image = Image(image=ipyimage, scales=scales_image, axes_options=axes_options)\n",
    "# Full screen\n",
    "image.x = [0, 1]\n",
    "image.y = [0, 1]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Define qgrid widget\n",
    "qgrid.set_grid_option('maxVisibleRows', 10)\n",
    "col_opts = { \n",
    "    'editable': False,\n",
    "}\n",
    "\n",
    "def on_row_selected(change):\n",
    "    \"\"\"callback for row selection: update selected points in scatter plot\"\"\"\n",
    "    filtered_df = qgrid_widget.get_changed_df()           \n",
    "    team_scatter.selected = filtered_df.iloc[change.new].index.tolist()\n",
    "    \n",
    "        \n",
    "qgrid_widget = qgrid.show_grid(teams, show_toolbar=False, column_options=col_opts)\n",
    "qgrid_widget.observe(on_row_selected, names=['_selected_rows'])\n",
    "qgrid_widget.layout = widgets.Layout(width='920px')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Define scatter plot for team data\n",
    "scales={'x': LinearScale(min=0, max=1), 'y': LinearScale(min=0, max=1)}\n",
    "axes_options = {'x': {'visible': False}, 'y': {'visible': False}}\n",
    "\n",
    "team_scatter = Scatter(x=teams['x'], y=teams['y'],\n",
    "                    names=teams['name'],\n",
    "                    scales= scales, \n",
    "                    default_size=128,\n",
    "                    interactions={'click': 'select'},\n",
    "                    selected_style={'opacity': 1.0, 'stroke': 'Black'},\n",
    "                    unselected_style={'opacity': 0.6},\n",
    "                    axes_options=axes_options)\n",
    "team_scatter.colors = teams['jersey'].values.tolist()\n",
    "team_scatter.enable_move = True\n",
    "\n",
    "# Callbacks\n",
    "def change_callback(change):\n",
    "    qgrid_widget.change_selection(change.new)\n",
    "        \n",
    "def callback_update_qgrid(name, cell):\n",
    "    new_x = round(cell['point']['x'], 2)\n",
    "    new_y = round(cell['point']['y'], 2)\n",
    "    \n",
    "    qgrid_widget.edit_cell(cell['index'], 'x', new_x)\n",
    "    qgrid_widget.edit_cell(cell['index'], 'y', new_y)\n",
    "    \n",
    "    \n",
    "team_scatter.observe(change_callback, names=['selected'])\n",
    "team_scatter.on_drag_end(callback_update_qgrid)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Define football pitch widget\n",
    "pitch_widget = Figure(marks=[image, team_scatter], padding_x=0, padding_y=0)\n",
    "pitch_app = widgets.VBox([pitch_widget, qgrid_widget])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Hack for increasing image size and keeping aspect ratio\n",
    "width = 506.7\n",
    "height = 346.7\n",
    "factor = 1.8\n",
    "pitch_widget.layout = widgets.Layout(width=f'{width*factor}px', height=f'{height*factor}px')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "8cba85dde3a44e71b191a347ab49e999",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "VBox(children=(Figure(fig_margin={'top': 60, 'bottom': 60, 'left': 60, 'right': 60}, layout=Layout(height='624…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "pitch_app"
   ]
  }
 ],
 "metadata": {
  "hide_input": false,
  "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.7.1"
  },
  "latex_envs": {
   "LaTeX_envs_menu_present": true,
   "autoclose": false,
   "autocomplete": true,
   "bibliofile": "biblio.bib",
   "cite_by": "apalike",
   "current_citInitial": 1,
   "eqLabelWithNumbers": true,
   "eqNumInitial": 1,
   "hotkeys": {
    "equation": "Ctrl-E",
    "itemize": "Ctrl-I"
   },
   "labels_anchors": false,
   "latex_user_defs": false,
   "report_style_numbering": false,
   "user_envs_cfg": false
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": true,
   "toc_window_display": true
  },
  "varInspector": {
   "cols": {
    "lenName": 16,
    "lenType": 16,
    "lenVar": 40
   },
   "kernels_config": {
    "python": {
     "delete_cmd_postfix": "",
     "delete_cmd_prefix": "del ",
     "library": "var_list.py",
     "varRefreshCmd": "print(var_dic_list())"
    },
    "r": {
     "delete_cmd_postfix": ") ",
     "delete_cmd_prefix": "rm(",
     "library": "var_list.r",
     "varRefreshCmd": "cat(var_dic_list()) "
    }
   },
   "types_to_exclude": [
    "module",
    "function",
    "builtin_function_or_method",
    "instance",
    "_Feature"
   ],
   "window_display": false
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {
     "04d900c35c79407e8f9f57c71a3ad338": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "AxisModel",
      "state": {
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "scale": "IPY_MODEL_80b4dfd4d32e46058d615a19c8ba4226",
       "side": "bottom",
       "tick_values": {
        "type": null,
        "values": null
       }
      }
     },
     "0622ba0d24e94ed4ba3aaab8df39c611": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "0d3e5819043a4b378d3af13648d5b3b4": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {
       "min_width": "125px"
      }
     },
     "1ec882db9cb841fb87f907d09cad0480": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "LinearScaleModel",
      "state": {
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "allow_padding": false,
       "max": 1,
       "min": 0,
       "stabilized": false
      }
     },
     "203eb5a03efa4105adfd9b853ac49b7b": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "32d48656fa234d86a504e3c01daa2a5c": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.0.0",
      "model_name": "ImageModel",
      "state": {
       "layout": "IPY_MODEL_b72fbd0d6a36449e8691540541a6d00b",
       "value": {}
      }
     },
     "3375f88558044daba7af8850d3f7d76e": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {
       "min_width": "125px"
      }
     },
     "3dbaf85a158048bb8afab96efcd647dd": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "ToolbarModel",
      "state": {
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "figure": "IPY_MODEL_4e6331271a734ad3831edadd5c59efad",
       "layout": "IPY_MODEL_203eb5a03efa4105adfd9b853ac49b7b"
      }
     },
     "456831a0b1e84a8a8165dba766473edf": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "LinearScaleModel",
      "state": {
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "max": 2,
       "min": -1,
       "stabilized": false
      }
     },
     "4db5e4b8cb6445dbb21323e987bd724d": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "LinearScaleModel",
      "state": {
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "stabilized": false
      }
     },
     "4e6331271a734ad3831edadd5c59efad": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "FigureModel",
      "state": {
       "_dom_classes": [],
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "axes": [
        "IPY_MODEL_ce3fef64c326403ba2d46dcc2ddb9c18",
        "IPY_MODEL_04d900c35c79407e8f9f57c71a3ad338"
       ],
       "layout": "IPY_MODEL_55514efc97d54c44974e0013a5f5cbc9",
       "marks": [
        "IPY_MODEL_f5ab5459a15d45debea50eb61d0687b8"
       ],
       "max_aspect_ratio": 6,
       "scale_x": "IPY_MODEL_e0aaf68043b742aa9f59eda5706cd6f7",
       "scale_y": "IPY_MODEL_b97d52c4b7f6463f8b4fbea61904a477"
      }
     },
     "51ee8a765fa4490693392782a05aeb28": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "LinearScaleModel",
      "state": {
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "max": 2,
       "min": -0.5,
       "stabilized": false
      }
     },
     "55514efc97d54c44974e0013a5f5cbc9": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {
       "min_width": "125px"
      }
     },
     "5bdf5d8c9b0341c381f23de4283276fe": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "FigureModel",
      "state": {
       "_dom_classes": [],
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "animation_duration": 1000,
       "axes": [
        "IPY_MODEL_d39498cdd2aa4cbb92d755f4d328d391",
        "IPY_MODEL_ca5e304f502441c6b80a3b3d05015a34"
       ],
       "layout": "IPY_MODEL_0d3e5819043a4b378d3af13648d5b3b4",
       "marks": [
        "IPY_MODEL_c8a4845b09b64b2482ef1f9f80ad1124",
        "IPY_MODEL_bb2c845b016f458ca3e6d2ce4edcc5ea"
       ],
       "max_aspect_ratio": 6,
       "padding_y": 0,
       "scale_x": "IPY_MODEL_e70a421702444d01ae2ae96b593d6872",
       "scale_y": "IPY_MODEL_f73f97656cff4b29a3ce2b0e1bad1dd8"
      }
     },
     "755fcbec00654317aa22d6da462e0c38": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "FigureModel",
      "state": {
       "_dom_classes": [],
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "layout": "IPY_MODEL_3375f88558044daba7af8850d3f7d76e",
       "marks": [
        "IPY_MODEL_aaf364707416448aa4d8006ec663eeea"
       ],
       "max_aspect_ratio": 6,
       "padding_y": 0,
       "scale_x": "IPY_MODEL_e15f595de79249869d36f9da368d6166",
       "scale_y": "IPY_MODEL_1ec882db9cb841fb87f907d09cad0480",
       "title": "Trees"
      }
     },
     "75c841d62d024c6399b50950e30ccd55": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "LinearScaleModel",
      "state": {
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "stabilized": false
      }
     },
     "80b4dfd4d32e46058d615a19c8ba4226": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "LinearScaleModel",
      "state": {
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "stabilized": false
      }
     },
     "929323256cec4ef0abe15110e9cb76fa": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "LinearScaleModel",
      "state": {
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "stabilized": false
      }
     },
     "aaf364707416448aa4d8006ec663eeea": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "ImageModel",
      "state": {
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "display_legend": false,
       "image": "IPY_MODEL_bfe77423b216444e9ca904519b4c3a9c",
       "scales": {
        "x": "IPY_MODEL_75c841d62d024c6399b50950e30ccd55",
        "y": "IPY_MODEL_929323256cec4ef0abe15110e9cb76fa"
       },
       "selected": [],
       "x": {
        "type": "float",
        "values": [
         0,
         1
        ]
       },
       "y": {
        "type": "float",
        "values": [
         0,
         1
        ]
       }
      }
     },
     "b2b338531df545928f6f8ce701fbf132": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "b72fbd0d6a36449e8691540541a6d00b": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "b97d52c4b7f6463f8b4fbea61904a477": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "LinearScaleModel",
      "state": {
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "allow_padding": false,
       "max": 1,
       "min": 0,
       "stabilized": false
      }
     },
     "bb2c845b016f458ca3e6d2ce4edcc5ea": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "LinesModel",
      "state": {
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "color": {
        "type": null,
        "values": null
       },
       "colors": [
        "red"
       ],
       "display_legend": false,
       "fill_colors": [],
       "labels": [
        "C1"
       ],
       "scales": {
        "x": "IPY_MODEL_456831a0b1e84a8a8165dba766473edf",
        "y": "IPY_MODEL_51ee8a765fa4490693392782a05aeb28"
       },
       "selected": [],
       "x": {
        "type": "float",
        "values": [
         0,
         1,
         1,
         0,
         0
        ]
       },
       "y": {
        "type": "float",
        "values": [
         0,
         0,
         1,
         1,
         0
        ]
       }
      }
     },
     "bfe77423b216444e9ca904519b4c3a9c": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.0.0",
      "model_name": "ImageModel",
      "state": {
       "format": "jpg",
       "layout": "IPY_MODEL_b2b338531df545928f6f8ce701fbf132",
       "value": {}
      }
     },
     "c8a4845b09b64b2482ef1f9f80ad1124": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "ImageModel",
      "state": {
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "display_legend": false,
       "image": "IPY_MODEL_bfe77423b216444e9ca904519b4c3a9c",
       "scales": {
        "x": "IPY_MODEL_456831a0b1e84a8a8165dba766473edf",
        "y": "IPY_MODEL_51ee8a765fa4490693392782a05aeb28"
       },
       "selected": [],
       "x": {
        "type": "float",
        "values": [
         -1,
         2
        ]
       },
       "y": {
        "type": "float",
        "values": [
         -0.5,
         2
        ]
       }
      }
     },
     "ca5e304f502441c6b80a3b3d05015a34": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "AxisModel",
      "state": {
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "orientation": "vertical",
       "scale": "IPY_MODEL_51ee8a765fa4490693392782a05aeb28",
       "side": "left",
       "tick_values": {
        "type": null,
        "values": null
       }
      }
     },
     "ce3fef64c326403ba2d46dcc2ddb9c18": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "AxisModel",
      "state": {
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "orientation": "vertical",
       "scale": "IPY_MODEL_4db5e4b8cb6445dbb21323e987bd724d",
       "side": "left",
       "tick_values": {
        "type": null,
        "values": null
       }
      }
     },
     "d39498cdd2aa4cbb92d755f4d328d391": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "AxisModel",
      "state": {
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "scale": "IPY_MODEL_456831a0b1e84a8a8165dba766473edf",
       "side": "bottom",
       "tick_values": {
        "type": null,
        "values": null
       }
      }
     },
     "e0aaf68043b742aa9f59eda5706cd6f7": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "LinearScaleModel",
      "state": {
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "allow_padding": false,
       "max": 1,
       "min": 0,
       "stabilized": false
      }
     },
     "e15f595de79249869d36f9da368d6166": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "LinearScaleModel",
      "state": {
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "allow_padding": false,
       "max": 1,
       "min": 0,
       "stabilized": false
      }
     },
     "e70a421702444d01ae2ae96b593d6872": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "LinearScaleModel",
      "state": {
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "allow_padding": false,
       "max": 1,
       "min": 0,
       "stabilized": false
      }
     },
     "f5ab5459a15d45debea50eb61d0687b8": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "ImageModel",
      "state": {
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "display_legend": false,
       "image": "IPY_MODEL_32d48656fa234d86a504e3c01daa2a5c",
       "scales": {
        "x": "IPY_MODEL_80b4dfd4d32e46058d615a19c8ba4226",
        "y": "IPY_MODEL_4db5e4b8cb6445dbb21323e987bd724d"
       },
       "selected": [],
       "x": {
        "type": "float",
        "values": [
         0,
         1
        ]
       },
       "y": {
        "type": "float",
        "values": [
         0,
         1
        ]
       }
      }
     },
     "f73f97656cff4b29a3ce2b0e1bad1dd8": {
      "model_module": "bqplot",
      "model_module_version": "^0.3.0",
      "model_name": "LinearScaleModel",
      "state": {
       "_model_module_version": "^0.3.0",
       "_view_module_version": "^0.3.0",
       "allow_padding": false,
       "max": 1,
       "min": 0,
       "stabilized": false
      }
     },
     "f920e644b9f44e64b7c6e9f9d0509dca": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.0.0",
      "model_name": "VBoxModel",
      "state": {
       "children": [
        "IPY_MODEL_4e6331271a734ad3831edadd5c59efad",
        "IPY_MODEL_3dbaf85a158048bb8afab96efcd647dd"
       ],
       "layout": "IPY_MODEL_0622ba0d24e94ed4ba3aaab8df39c611"
      }
     }
    },
    "version_major": 2,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}