{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 114,
   "id": "dd17bccd-9274-4772-8716-606011cb066d",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "--2023-10-15 21:47:29--  https://service.pdok.nl/cbs/gebiedsindelingen/2017/wfs/v1_0?request=GetFeature&service=WFS&version=2.0.0&typeName=gemeente_gegeneraliseerd&outputFormat=json\n",
      "Resolving service.pdok.nl (service.pdok.nl)... 2603:1020:201:10::2e, 51.138.23.105\n",
      "Connecting to service.pdok.nl (service.pdok.nl)|2603:1020:201:10::2e|:443... connected.\n",
      "HTTP request sent, awaiting response... 200 OK\n",
      "Length: 1931885 (1.8M) [application/json]\n",
      "Saving to: 'data/nld.geojson'\n",
      "\n",
      "data/nld.geojson    100%[===================>]   1.84M  2.22MB/s    in 0.8s    \n",
      "\n",
      "2023-10-15 21:47:30 (2.22 MB/s) - 'data/nld.geojson' saved [1931885/1931885]\n",
      "\n"
     ]
    }
   ],
   "source": [
    "#!wget 'https://service.pdok.nl/cbs/gebiedsindelingen/2017/wfs/v1_0?request=GetFeature&service=WFS&version=2.0.0&typeName=gemeente_gegeneraliseerd&outputFormat=json' -O data/nld.geojson"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "8e707d4d-63e2-436d-b490-ab5d7f673f05",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "(function(root) {\n",
       "  function now() {\n",
       "    return new Date();\n",
       "  }\n",
       "\n",
       "  var force = true;\n",
       "  var py_version = '3.2.2'.replace('rc', '-rc.').replace('.dev', '-dev.');\n",
       "  var is_dev = py_version.indexOf(\"+\") !== -1 || py_version.indexOf(\"-\") !== -1;\n",
       "  var reloading = false;\n",
       "  var Bokeh = root.Bokeh;\n",
       "  var bokeh_loaded = Bokeh != null && (Bokeh.version === py_version || (Bokeh.versions !== undefined && Bokeh.versions.has(py_version)));\n",
       "\n",
       "  if (typeof (root._bokeh_timeout) === \"undefined\" || force) {\n",
       "    root._bokeh_timeout = Date.now() + 5000;\n",
       "    root._bokeh_failed_load = false;\n",
       "  }\n",
       "\n",
       "  function run_callbacks() {\n",
       "    try {\n",
       "      root._bokeh_onload_callbacks.forEach(function(callback) {\n",
       "        if (callback != null)\n",
       "          callback();\n",
       "      });\n",
       "    } finally {\n",
       "      delete root._bokeh_onload_callbacks;\n",
       "    }\n",
       "    console.debug(\"Bokeh: all callbacks have finished\");\n",
       "  }\n",
       "\n",
       "  function load_libs(css_urls, js_urls, js_modules, js_exports, callback) {\n",
       "    if (css_urls == null) css_urls = [];\n",
       "    if (js_urls == null) js_urls = [];\n",
       "    if (js_modules == null) js_modules = [];\n",
       "    if (js_exports == null) js_exports = {};\n",
       "\n",
       "    root._bokeh_onload_callbacks.push(callback);\n",
       "\n",
       "    if (root._bokeh_is_loading > 0) {\n",
       "      console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n",
       "      return null;\n",
       "    }\n",
       "    if (js_urls.length === 0 && js_modules.length === 0 && Object.keys(js_exports).length === 0) {\n",
       "      run_callbacks();\n",
       "      return null;\n",
       "    }\n",
       "    if (!reloading) {\n",
       "      console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n",
       "    }\n",
       "\n",
       "    function on_load() {\n",
       "      root._bokeh_is_loading--;\n",
       "      if (root._bokeh_is_loading === 0) {\n",
       "        console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n",
       "        run_callbacks()\n",
       "      }\n",
       "    }\n",
       "    window._bokeh_on_load = on_load\n",
       "\n",
       "    function on_error() {\n",
       "      console.error(\"failed to load \" + url);\n",
       "    }\n",
       "\n",
       "    var skip = [];\n",
       "    if (window.requirejs) {\n",
       "      window.requirejs.config({'packages': {}, 'paths': {'jspanel': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/jspanel', 'jspanel-modal': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/modal/jspanel.modal', 'jspanel-tooltip': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/tooltip/jspanel.tooltip', 'jspanel-hint': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/hint/jspanel.hint', 'jspanel-layout': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/layout/jspanel.layout', 'jspanel-contextmenu': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/contextmenu/jspanel.contextmenu', 'jspanel-dock': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/dock/jspanel.dock', 'gridstack': 'https://cdn.jsdelivr.net/npm/gridstack@7.2.3/dist/gridstack-all', 'notyf': 'https://cdn.jsdelivr.net/npm/notyf@3/notyf.min'}, 'shim': {'jspanel': {'exports': 'jsPanel'}, 'gridstack': {'exports': 'GridStack'}}});\n",
       "      require([\"jspanel\"], function(jsPanel) {\n",
       "\twindow.jsPanel = jsPanel\n",
       "\ton_load()\n",
       "      })\n",
       "      require([\"jspanel-modal\"], function() {\n",
       "\ton_load()\n",
       "      })\n",
       "      require([\"jspanel-tooltip\"], function() {\n",
       "\ton_load()\n",
       "      })\n",
       "      require([\"jspanel-hint\"], function() {\n",
       "\ton_load()\n",
       "      })\n",
       "      require([\"jspanel-layout\"], function() {\n",
       "\ton_load()\n",
       "      })\n",
       "      require([\"jspanel-contextmenu\"], function() {\n",
       "\ton_load()\n",
       "      })\n",
       "      require([\"jspanel-dock\"], function() {\n",
       "\ton_load()\n",
       "      })\n",
       "      require([\"gridstack\"], function(GridStack) {\n",
       "\twindow.GridStack = GridStack\n",
       "\ton_load()\n",
       "      })\n",
       "      require([\"notyf\"], function() {\n",
       "\ton_load()\n",
       "      })\n",
       "      root._bokeh_is_loading = css_urls.length + 9;\n",
       "    } else {\n",
       "      root._bokeh_is_loading = css_urls.length + js_urls.length + js_modules.length + Object.keys(js_exports).length;\n",
       "    }\n",
       "\n",
       "    var existing_stylesheets = []\n",
       "    var links = document.getElementsByTagName('link')\n",
       "    for (var i = 0; i < links.length; i++) {\n",
       "      var link = links[i]\n",
       "      if (link.href != null) {\n",
       "\texisting_stylesheets.push(link.href)\n",
       "      }\n",
       "    }\n",
       "    for (var i = 0; i < css_urls.length; i++) {\n",
       "      var url = css_urls[i];\n",
       "      if (existing_stylesheets.indexOf(url) !== -1) {\n",
       "\ton_load()\n",
       "\tcontinue;\n",
       "      }\n",
       "      const element = document.createElement(\"link\");\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error;\n",
       "      element.rel = \"stylesheet\";\n",
       "      element.type = \"text/css\";\n",
       "      element.href = url;\n",
       "      console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n",
       "      document.body.appendChild(element);\n",
       "    }    if (((window['jsPanel'] !== undefined) && (!(window['jsPanel'] instanceof HTMLElement))) || window.requirejs) {\n",
       "      var urls = ['https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/jspanel.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/modal/jspanel.modal.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/tooltip/jspanel.tooltip.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/hint/jspanel.hint.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/layout/jspanel.layout.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/contextmenu/jspanel.contextmenu.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/dock/jspanel.dock.js'];\n",
       "      for (var i = 0; i < urls.length; i++) {\n",
       "        skip.push(urls[i])\n",
       "      }\n",
       "    }    if (((window['GridStack'] !== undefined) && (!(window['GridStack'] instanceof HTMLElement))) || window.requirejs) {\n",
       "      var urls = ['https://cdn.holoviz.org/panel/1.2.3/dist/bundled/gridstack/gridstack@7.2.3/dist/gridstack-all.js'];\n",
       "      for (var i = 0; i < urls.length; i++) {\n",
       "        skip.push(urls[i])\n",
       "      }\n",
       "    }    if (((window['Notyf'] !== undefined) && (!(window['Notyf'] instanceof HTMLElement))) || window.requirejs) {\n",
       "      var urls = ['https://cdn.holoviz.org/panel/1.2.3/dist/bundled/notificationarea/notyf@3/notyf.min.js'];\n",
       "      for (var i = 0; i < urls.length; i++) {\n",
       "        skip.push(urls[i])\n",
       "      }\n",
       "    }    var existing_scripts = []\n",
       "    var scripts = document.getElementsByTagName('script')\n",
       "    for (var i = 0; i < scripts.length; i++) {\n",
       "      var script = scripts[i]\n",
       "      if (script.src != null) {\n",
       "\texisting_scripts.push(script.src)\n",
       "      }\n",
       "    }\n",
       "    for (var i = 0; i < js_urls.length; i++) {\n",
       "      var url = js_urls[i];\n",
       "      if (skip.indexOf(url) !== -1 || existing_scripts.indexOf(url) !== -1) {\n",
       "\tif (!window.requirejs) {\n",
       "\t  on_load();\n",
       "\t}\n",
       "\tcontinue;\n",
       "      }\n",
       "      var element = document.createElement('script');\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error;\n",
       "      element.async = false;\n",
       "      element.src = url;\n",
       "      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n",
       "      document.head.appendChild(element);\n",
       "    }\n",
       "    for (var i = 0; i < js_modules.length; i++) {\n",
       "      var url = js_modules[i];\n",
       "      if (skip.indexOf(url) !== -1 || existing_scripts.indexOf(url) !== -1) {\n",
       "\tif (!window.requirejs) {\n",
       "\t  on_load();\n",
       "\t}\n",
       "\tcontinue;\n",
       "      }\n",
       "      var element = document.createElement('script');\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error;\n",
       "      element.async = false;\n",
       "      element.src = url;\n",
       "      element.type = \"module\";\n",
       "      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n",
       "      document.head.appendChild(element);\n",
       "    }\n",
       "    for (const name in js_exports) {\n",
       "      var url = js_exports[name];\n",
       "      if (skip.indexOf(url) >= 0 || root[name] != null) {\n",
       "\tif (!window.requirejs) {\n",
       "\t  on_load();\n",
       "\t}\n",
       "\tcontinue;\n",
       "      }\n",
       "      var element = document.createElement('script');\n",
       "      element.onerror = on_error;\n",
       "      element.async = false;\n",
       "      element.type = \"module\";\n",
       "      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n",
       "      element.textContent = `\n",
       "      import ${name} from \"${url}\"\n",
       "      window.${name} = ${name}\n",
       "      window._bokeh_on_load()\n",
       "      `\n",
       "      document.head.appendChild(element);\n",
       "    }\n",
       "    if (!js_urls.length && !js_modules.length) {\n",
       "      on_load()\n",
       "    }\n",
       "  };\n",
       "\n",
       "  function inject_raw_css(css) {\n",
       "    const element = document.createElement(\"style\");\n",
       "    element.appendChild(document.createTextNode(css));\n",
       "    document.body.appendChild(element);\n",
       "  }\n",
       "\n",
       "  var js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-3.2.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-gl-3.2.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.2.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.2.2.min.js\", \"https://cdn.holoviz.org/panel/1.2.3/dist/panel.min.js\"];\n",
       "  var js_modules = [];\n",
       "  var js_exports = {};\n",
       "  var css_urls = [];\n",
       "  var inline_js = [    function(Bokeh) {\n",
       "      Bokeh.set_log_level(\"info\");\n",
       "    },\n",
       "function(Bokeh) {} // ensure no trailing comma for IE\n",
       "  ];\n",
       "\n",
       "  function run_inline_js() {\n",
       "    if ((root.Bokeh !== undefined) || (force === true)) {\n",
       "      for (var i = 0; i < inline_js.length; i++) {\n",
       "        inline_js[i].call(root, root.Bokeh);\n",
       "      }\n",
       "      // Cache old bokeh versions\n",
       "      if (Bokeh != undefined && !reloading) {\n",
       "\tvar NewBokeh = root.Bokeh;\n",
       "\tif (Bokeh.versions === undefined) {\n",
       "\t  Bokeh.versions = new Map();\n",
       "\t}\n",
       "\tif (NewBokeh.version !== Bokeh.version) {\n",
       "\t  Bokeh.versions.set(NewBokeh.version, NewBokeh)\n",
       "\t}\n",
       "\troot.Bokeh = Bokeh;\n",
       "      }} else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(run_inline_js, 100);\n",
       "    } else if (!root._bokeh_failed_load) {\n",
       "      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n",
       "      root._bokeh_failed_load = true;\n",
       "    }\n",
       "    root._bokeh_is_initializing = false\n",
       "  }\n",
       "\n",
       "  function load_or_wait() {\n",
       "    // Implement a backoff loop that tries to ensure we do not load multiple\n",
       "    // versions of Bokeh and its dependencies at the same time.\n",
       "    // In recent versions we use the root._bokeh_is_initializing flag\n",
       "    // to determine whether there is an ongoing attempt to initialize\n",
       "    // bokeh, however for backward compatibility we also try to ensure\n",
       "    // that we do not start loading a newer (Panel>=1.0 and Bokeh>3) version\n",
       "    // before older versions are fully initialized.\n",
       "    if (root._bokeh_is_initializing && Date.now() > root._bokeh_timeout) {\n",
       "      root._bokeh_is_initializing = false;\n",
       "      root._bokeh_onload_callbacks = undefined;\n",
       "      console.log(\"Bokeh: BokehJS was loaded multiple times but one version failed to initialize.\");\n",
       "      load_or_wait();\n",
       "    } else if (root._bokeh_is_initializing || (typeof root._bokeh_is_initializing === \"undefined\" && root._bokeh_onload_callbacks !== undefined)) {\n",
       "      setTimeout(load_or_wait, 100);\n",
       "    } else {\n",
       "      Bokeh = root.Bokeh;\n",
       "      bokeh_loaded = Bokeh != null && (Bokeh.version === py_version || (Bokeh.versions !== undefined && Bokeh.versions.has(py_version)));\n",
       "      root._bokeh_is_initializing = true\n",
       "      root._bokeh_onload_callbacks = []\n",
       "      if (!reloading && (!bokeh_loaded || is_dev)) {\n",
       "\troot.Bokeh = undefined;\n",
       "      }\n",
       "      load_libs(css_urls, js_urls, js_modules, js_exports, function() {\n",
       "\tconsole.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n",
       "\trun_inline_js();\n",
       "      });\n",
       "    }\n",
       "  }\n",
       "  // Give older versions of the autoload script a head-start to ensure\n",
       "  // they initialize before we start loading newer version.\n",
       "  setTimeout(load_or_wait, 100)\n",
       "}(window));"
      ],
      "application/vnd.holoviews_load.v0+json": "(function(root) {\n  function now() {\n    return new Date();\n  }\n\n  var force = true;\n  var py_version = '3.2.2'.replace('rc', '-rc.').replace('.dev', '-dev.');\n  var is_dev = py_version.indexOf(\"+\") !== -1 || py_version.indexOf(\"-\") !== -1;\n  var reloading = false;\n  var Bokeh = root.Bokeh;\n  var bokeh_loaded = Bokeh != null && (Bokeh.version === py_version || (Bokeh.versions !== undefined && Bokeh.versions.has(py_version)));\n\n  if (typeof (root._bokeh_timeout) === \"undefined\" || force) {\n    root._bokeh_timeout = Date.now() + 5000;\n    root._bokeh_failed_load = false;\n  }\n\n  function run_callbacks() {\n    try {\n      root._bokeh_onload_callbacks.forEach(function(callback) {\n        if (callback != null)\n          callback();\n      });\n    } finally {\n      delete root._bokeh_onload_callbacks;\n    }\n    console.debug(\"Bokeh: all callbacks have finished\");\n  }\n\n  function load_libs(css_urls, js_urls, js_modules, js_exports, callback) {\n    if (css_urls == null) css_urls = [];\n    if (js_urls == null) js_urls = [];\n    if (js_modules == null) js_modules = [];\n    if (js_exports == null) js_exports = {};\n\n    root._bokeh_onload_callbacks.push(callback);\n\n    if (root._bokeh_is_loading > 0) {\n      console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n      return null;\n    }\n    if (js_urls.length === 0 && js_modules.length === 0 && Object.keys(js_exports).length === 0) {\n      run_callbacks();\n      return null;\n    }\n    if (!reloading) {\n      console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n    }\n\n    function on_load() {\n      root._bokeh_is_loading--;\n      if (root._bokeh_is_loading === 0) {\n        console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n        run_callbacks()\n      }\n    }\n    window._bokeh_on_load = on_load\n\n    function on_error() {\n      console.error(\"failed to load \" + url);\n    }\n\n    var skip = [];\n    if (window.requirejs) {\n      window.requirejs.config({'packages': {}, 'paths': {'jspanel': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/jspanel', 'jspanel-modal': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/modal/jspanel.modal', 'jspanel-tooltip': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/tooltip/jspanel.tooltip', 'jspanel-hint': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/hint/jspanel.hint', 'jspanel-layout': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/layout/jspanel.layout', 'jspanel-contextmenu': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/contextmenu/jspanel.contextmenu', 'jspanel-dock': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/dock/jspanel.dock', 'gridstack': 'https://cdn.jsdelivr.net/npm/gridstack@7.2.3/dist/gridstack-all', 'notyf': 'https://cdn.jsdelivr.net/npm/notyf@3/notyf.min'}, 'shim': {'jspanel': {'exports': 'jsPanel'}, 'gridstack': {'exports': 'GridStack'}}});\n      require([\"jspanel\"], function(jsPanel) {\n\twindow.jsPanel = jsPanel\n\ton_load()\n      })\n      require([\"jspanel-modal\"], function() {\n\ton_load()\n      })\n      require([\"jspanel-tooltip\"], function() {\n\ton_load()\n      })\n      require([\"jspanel-hint\"], function() {\n\ton_load()\n      })\n      require([\"jspanel-layout\"], function() {\n\ton_load()\n      })\n      require([\"jspanel-contextmenu\"], function() {\n\ton_load()\n      })\n      require([\"jspanel-dock\"], function() {\n\ton_load()\n      })\n      require([\"gridstack\"], function(GridStack) {\n\twindow.GridStack = GridStack\n\ton_load()\n      })\n      require([\"notyf\"], function() {\n\ton_load()\n      })\n      root._bokeh_is_loading = css_urls.length + 9;\n    } else {\n      root._bokeh_is_loading = css_urls.length + js_urls.length + js_modules.length + Object.keys(js_exports).length;\n    }\n\n    var existing_stylesheets = []\n    var links = document.getElementsByTagName('link')\n    for (var i = 0; i < links.length; i++) {\n      var link = links[i]\n      if (link.href != null) {\n\texisting_stylesheets.push(link.href)\n      }\n    }\n    for (var i = 0; i < css_urls.length; i++) {\n      var url = css_urls[i];\n      if (existing_stylesheets.indexOf(url) !== -1) {\n\ton_load()\n\tcontinue;\n      }\n      const element = document.createElement(\"link\");\n      element.onload = on_load;\n      element.onerror = on_error;\n      element.rel = \"stylesheet\";\n      element.type = \"text/css\";\n      element.href = url;\n      console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n      document.body.appendChild(element);\n    }    if (((window['jsPanel'] !== undefined) && (!(window['jsPanel'] instanceof HTMLElement))) || window.requirejs) {\n      var urls = ['https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/jspanel.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/modal/jspanel.modal.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/tooltip/jspanel.tooltip.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/hint/jspanel.hint.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/layout/jspanel.layout.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/contextmenu/jspanel.contextmenu.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/dock/jspanel.dock.js'];\n      for (var i = 0; i < urls.length; i++) {\n        skip.push(urls[i])\n      }\n    }    if (((window['GridStack'] !== undefined) && (!(window['GridStack'] instanceof HTMLElement))) || window.requirejs) {\n      var urls = ['https://cdn.holoviz.org/panel/1.2.3/dist/bundled/gridstack/gridstack@7.2.3/dist/gridstack-all.js'];\n      for (var i = 0; i < urls.length; i++) {\n        skip.push(urls[i])\n      }\n    }    if (((window['Notyf'] !== undefined) && (!(window['Notyf'] instanceof HTMLElement))) || window.requirejs) {\n      var urls = ['https://cdn.holoviz.org/panel/1.2.3/dist/bundled/notificationarea/notyf@3/notyf.min.js'];\n      for (var i = 0; i < urls.length; i++) {\n        skip.push(urls[i])\n      }\n    }    var existing_scripts = []\n    var scripts = document.getElementsByTagName('script')\n    for (var i = 0; i < scripts.length; i++) {\n      var script = scripts[i]\n      if (script.src != null) {\n\texisting_scripts.push(script.src)\n      }\n    }\n    for (var i = 0; i < js_urls.length; i++) {\n      var url = js_urls[i];\n      if (skip.indexOf(url) !== -1 || existing_scripts.indexOf(url) !== -1) {\n\tif (!window.requirejs) {\n\t  on_load();\n\t}\n\tcontinue;\n      }\n      var element = document.createElement('script');\n      element.onload = on_load;\n      element.onerror = on_error;\n      element.async = false;\n      element.src = url;\n      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n      document.head.appendChild(element);\n    }\n    for (var i = 0; i < js_modules.length; i++) {\n      var url = js_modules[i];\n      if (skip.indexOf(url) !== -1 || existing_scripts.indexOf(url) !== -1) {\n\tif (!window.requirejs) {\n\t  on_load();\n\t}\n\tcontinue;\n      }\n      var element = document.createElement('script');\n      element.onload = on_load;\n      element.onerror = on_error;\n      element.async = false;\n      element.src = url;\n      element.type = \"module\";\n      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n      document.head.appendChild(element);\n    }\n    for (const name in js_exports) {\n      var url = js_exports[name];\n      if (skip.indexOf(url) >= 0 || root[name] != null) {\n\tif (!window.requirejs) {\n\t  on_load();\n\t}\n\tcontinue;\n      }\n      var element = document.createElement('script');\n      element.onerror = on_error;\n      element.async = false;\n      element.type = \"module\";\n      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n      element.textContent = `\n      import ${name} from \"${url}\"\n      window.${name} = ${name}\n      window._bokeh_on_load()\n      `\n      document.head.appendChild(element);\n    }\n    if (!js_urls.length && !js_modules.length) {\n      on_load()\n    }\n  };\n\n  function inject_raw_css(css) {\n    const element = document.createElement(\"style\");\n    element.appendChild(document.createTextNode(css));\n    document.body.appendChild(element);\n  }\n\n  var js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-3.2.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-gl-3.2.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.2.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.2.2.min.js\", \"https://cdn.holoviz.org/panel/1.2.3/dist/panel.min.js\"];\n  var js_modules = [];\n  var js_exports = {};\n  var css_urls = [];\n  var inline_js = [    function(Bokeh) {\n      Bokeh.set_log_level(\"info\");\n    },\nfunction(Bokeh) {} // ensure no trailing comma for IE\n  ];\n\n  function run_inline_js() {\n    if ((root.Bokeh !== undefined) || (force === true)) {\n      for (var i = 0; i < inline_js.length; i++) {\n        inline_js[i].call(root, root.Bokeh);\n      }\n      // Cache old bokeh versions\n      if (Bokeh != undefined && !reloading) {\n\tvar NewBokeh = root.Bokeh;\n\tif (Bokeh.versions === undefined) {\n\t  Bokeh.versions = new Map();\n\t}\n\tif (NewBokeh.version !== Bokeh.version) {\n\t  Bokeh.versions.set(NewBokeh.version, NewBokeh)\n\t}\n\troot.Bokeh = Bokeh;\n      }} else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(run_inline_js, 100);\n    } else if (!root._bokeh_failed_load) {\n      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n      root._bokeh_failed_load = true;\n    }\n    root._bokeh_is_initializing = false\n  }\n\n  function load_or_wait() {\n    // Implement a backoff loop that tries to ensure we do not load multiple\n    // versions of Bokeh and its dependencies at the same time.\n    // In recent versions we use the root._bokeh_is_initializing flag\n    // to determine whether there is an ongoing attempt to initialize\n    // bokeh, however for backward compatibility we also try to ensure\n    // that we do not start loading a newer (Panel>=1.0 and Bokeh>3) version\n    // before older versions are fully initialized.\n    if (root._bokeh_is_initializing && Date.now() > root._bokeh_timeout) {\n      root._bokeh_is_initializing = false;\n      root._bokeh_onload_callbacks = undefined;\n      console.log(\"Bokeh: BokehJS was loaded multiple times but one version failed to initialize.\");\n      load_or_wait();\n    } else if (root._bokeh_is_initializing || (typeof root._bokeh_is_initializing === \"undefined\" && root._bokeh_onload_callbacks !== undefined)) {\n      setTimeout(load_or_wait, 100);\n    } else {\n      Bokeh = root.Bokeh;\n      bokeh_loaded = Bokeh != null && (Bokeh.version === py_version || (Bokeh.versions !== undefined && Bokeh.versions.has(py_version)));\n      root._bokeh_is_initializing = true\n      root._bokeh_onload_callbacks = []\n      if (!reloading && (!bokeh_loaded || is_dev)) {\n\troot.Bokeh = undefined;\n      }\n      load_libs(css_urls, js_urls, js_modules, js_exports, function() {\n\tconsole.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n\trun_inline_js();\n      });\n    }\n  }\n  // Give older versions of the autoload script a head-start to ensure\n  // they initialize before we start loading newer version.\n  setTimeout(load_or_wait, 100)\n}(window));"
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "if ((window.PyViz === undefined) || (window.PyViz instanceof HTMLElement)) {\n",
       "  window.PyViz = {comms: {}, comm_status:{}, kernels:{}, receivers: {}, plot_index: []}\n",
       "}\n",
       "\n",
       "\n",
       "    function JupyterCommManager() {\n",
       "    }\n",
       "\n",
       "    JupyterCommManager.prototype.register_target = function(plot_id, comm_id, msg_handler) {\n",
       "      if (window.comm_manager || ((window.Jupyter !== undefined) && (Jupyter.notebook.kernel != null))) {\n",
       "        var comm_manager = window.comm_manager || Jupyter.notebook.kernel.comm_manager;\n",
       "        comm_manager.register_target(comm_id, function(comm) {\n",
       "          comm.on_msg(msg_handler);\n",
       "        });\n",
       "      } else if ((plot_id in window.PyViz.kernels) && (window.PyViz.kernels[plot_id])) {\n",
       "        window.PyViz.kernels[plot_id].registerCommTarget(comm_id, function(comm) {\n",
       "          comm.onMsg = msg_handler;\n",
       "        });\n",
       "      } else if (typeof google != 'undefined' && google.colab.kernel != null) {\n",
       "        google.colab.kernel.comms.registerTarget(comm_id, (comm) => {\n",
       "          var messages = comm.messages[Symbol.asyncIterator]();\n",
       "          function processIteratorResult(result) {\n",
       "            var message = result.value;\n",
       "            console.log(message)\n",
       "            var content = {data: message.data, comm_id};\n",
       "            var buffers = []\n",
       "            for (var buffer of message.buffers || []) {\n",
       "              buffers.push(new DataView(buffer))\n",
       "            }\n",
       "            var metadata = message.metadata || {};\n",
       "            var msg = {content, buffers, metadata}\n",
       "            msg_handler(msg);\n",
       "            return messages.next().then(processIteratorResult);\n",
       "          }\n",
       "          return messages.next().then(processIteratorResult);\n",
       "        })\n",
       "      }\n",
       "    }\n",
       "\n",
       "    JupyterCommManager.prototype.get_client_comm = function(plot_id, comm_id, msg_handler) {\n",
       "      if (comm_id in window.PyViz.comms) {\n",
       "        return window.PyViz.comms[comm_id];\n",
       "      } else if (window.comm_manager || ((window.Jupyter !== undefined) && (Jupyter.notebook.kernel != null))) {\n",
       "        var comm_manager = window.comm_manager || Jupyter.notebook.kernel.comm_manager;\n",
       "        var comm = comm_manager.new_comm(comm_id, {}, {}, {}, comm_id);\n",
       "        if (msg_handler) {\n",
       "          comm.on_msg(msg_handler);\n",
       "        }\n",
       "      } else if ((plot_id in window.PyViz.kernels) && (window.PyViz.kernels[plot_id])) {\n",
       "        var comm = window.PyViz.kernels[plot_id].connectToComm(comm_id);\n",
       "        comm.open();\n",
       "        if (msg_handler) {\n",
       "          comm.onMsg = msg_handler;\n",
       "        }\n",
       "      } else if (typeof google != 'undefined' && google.colab.kernel != null) {\n",
       "        var comm_promise = google.colab.kernel.comms.open(comm_id)\n",
       "        comm_promise.then((comm) => {\n",
       "          window.PyViz.comms[comm_id] = comm;\n",
       "          if (msg_handler) {\n",
       "            var messages = comm.messages[Symbol.asyncIterator]();\n",
       "            function processIteratorResult(result) {\n",
       "              var message = result.value;\n",
       "              var content = {data: message.data};\n",
       "              var metadata = message.metadata || {comm_id};\n",
       "              var msg = {content, metadata}\n",
       "              msg_handler(msg);\n",
       "              return messages.next().then(processIteratorResult);\n",
       "            }\n",
       "            return messages.next().then(processIteratorResult);\n",
       "          }\n",
       "        }) \n",
       "        var sendClosure = (data, metadata, buffers, disposeOnDone) => {\n",
       "          return comm_promise.then((comm) => {\n",
       "            comm.send(data, metadata, buffers, disposeOnDone);\n",
       "          });\n",
       "        };\n",
       "        var comm = {\n",
       "          send: sendClosure\n",
       "        };\n",
       "      }\n",
       "      window.PyViz.comms[comm_id] = comm;\n",
       "      return comm;\n",
       "    }\n",
       "    window.PyViz.comm_manager = new JupyterCommManager();\n",
       "    \n",
       "\n",
       "\n",
       "var JS_MIME_TYPE = 'application/javascript';\n",
       "var HTML_MIME_TYPE = 'text/html';\n",
       "var EXEC_MIME_TYPE = 'application/vnd.holoviews_exec.v0+json';\n",
       "var CLASS_NAME = 'output';\n",
       "\n",
       "/**\n",
       " * Render data to the DOM node\n",
       " */\n",
       "function render(props, node) {\n",
       "  var div = document.createElement(\"div\");\n",
       "  var script = document.createElement(\"script\");\n",
       "  node.appendChild(div);\n",
       "  node.appendChild(script);\n",
       "}\n",
       "\n",
       "/**\n",
       " * Handle when a new output is added\n",
       " */\n",
       "function handle_add_output(event, handle) {\n",
       "  var output_area = handle.output_area;\n",
       "  var output = handle.output;\n",
       "  if ((output.data == undefined) || (!output.data.hasOwnProperty(EXEC_MIME_TYPE))) {\n",
       "    return\n",
       "  }\n",
       "  var id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n",
       "  var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n",
       "  if (id !== undefined) {\n",
       "    var nchildren = toinsert.length;\n",
       "    var html_node = toinsert[nchildren-1].children[0];\n",
       "    html_node.innerHTML = output.data[HTML_MIME_TYPE];\n",
       "    var scripts = [];\n",
       "    var nodelist = html_node.querySelectorAll(\"script\");\n",
       "    for (var i in nodelist) {\n",
       "      if (nodelist.hasOwnProperty(i)) {\n",
       "        scripts.push(nodelist[i])\n",
       "      }\n",
       "    }\n",
       "\n",
       "    scripts.forEach( function (oldScript) {\n",
       "      var newScript = document.createElement(\"script\");\n",
       "      var attrs = [];\n",
       "      var nodemap = oldScript.attributes;\n",
       "      for (var j in nodemap) {\n",
       "        if (nodemap.hasOwnProperty(j)) {\n",
       "          attrs.push(nodemap[j])\n",
       "        }\n",
       "      }\n",
       "      attrs.forEach(function(attr) { newScript.setAttribute(attr.name, attr.value) });\n",
       "      newScript.appendChild(document.createTextNode(oldScript.innerHTML));\n",
       "      oldScript.parentNode.replaceChild(newScript, oldScript);\n",
       "    });\n",
       "    if (JS_MIME_TYPE in output.data) {\n",
       "      toinsert[nchildren-1].children[1].textContent = output.data[JS_MIME_TYPE];\n",
       "    }\n",
       "    output_area._hv_plot_id = id;\n",
       "    if ((window.Bokeh !== undefined) && (id in Bokeh.index)) {\n",
       "      window.PyViz.plot_index[id] = Bokeh.index[id];\n",
       "    } else {\n",
       "      window.PyViz.plot_index[id] = null;\n",
       "    }\n",
       "  } else if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n",
       "    var bk_div = document.createElement(\"div\");\n",
       "    bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n",
       "    var script_attrs = bk_div.children[0].attributes;\n",
       "    for (var i = 0; i < script_attrs.length; i++) {\n",
       "      toinsert[toinsert.length - 1].childNodes[1].setAttribute(script_attrs[i].name, script_attrs[i].value);\n",
       "    }\n",
       "    // store reference to server id on output_area\n",
       "    output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n",
       "  }\n",
       "}\n",
       "\n",
       "/**\n",
       " * Handle when an output is cleared or removed\n",
       " */\n",
       "function handle_clear_output(event, handle) {\n",
       "  var id = handle.cell.output_area._hv_plot_id;\n",
       "  var server_id = handle.cell.output_area._bokeh_server_id;\n",
       "  if (((id === undefined) || !(id in PyViz.plot_index)) && (server_id !== undefined)) { return; }\n",
       "  var comm = window.PyViz.comm_manager.get_client_comm(\"hv-extension-comm\", \"hv-extension-comm\", function () {});\n",
       "  if (server_id !== null) {\n",
       "    comm.send({event_type: 'server_delete', 'id': server_id});\n",
       "    return;\n",
       "  } else if (comm !== null) {\n",
       "    comm.send({event_type: 'delete', 'id': id});\n",
       "  }\n",
       "  delete PyViz.plot_index[id];\n",
       "  if ((window.Bokeh !== undefined) & (id in window.Bokeh.index)) {\n",
       "    var doc = window.Bokeh.index[id].model.document\n",
       "    doc.clear();\n",
       "    const i = window.Bokeh.documents.indexOf(doc);\n",
       "    if (i > -1) {\n",
       "      window.Bokeh.documents.splice(i, 1);\n",
       "    }\n",
       "  }\n",
       "}\n",
       "\n",
       "/**\n",
       " * Handle kernel restart event\n",
       " */\n",
       "function handle_kernel_cleanup(event, handle) {\n",
       "  delete PyViz.comms[\"hv-extension-comm\"];\n",
       "  window.PyViz.plot_index = {}\n",
       "}\n",
       "\n",
       "/**\n",
       " * Handle update_display_data messages\n",
       " */\n",
       "function handle_update_output(event, handle) {\n",
       "  handle_clear_output(event, {cell: {output_area: handle.output_area}})\n",
       "  handle_add_output(event, handle)\n",
       "}\n",
       "\n",
       "function register_renderer(events, OutputArea) {\n",
       "  function append_mime(data, metadata, element) {\n",
       "    // create a DOM node to render to\n",
       "    var toinsert = this.create_output_subarea(\n",
       "    metadata,\n",
       "    CLASS_NAME,\n",
       "    EXEC_MIME_TYPE\n",
       "    );\n",
       "    this.keyboard_manager.register_events(toinsert);\n",
       "    // Render to node\n",
       "    var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n",
       "    render(props, toinsert[0]);\n",
       "    element.append(toinsert);\n",
       "    return toinsert\n",
       "  }\n",
       "\n",
       "  events.on('output_added.OutputArea', handle_add_output);\n",
       "  events.on('output_updated.OutputArea', handle_update_output);\n",
       "  events.on('clear_output.CodeCell', handle_clear_output);\n",
       "  events.on('delete.Cell', handle_clear_output);\n",
       "  events.on('kernel_ready.Kernel', handle_kernel_cleanup);\n",
       "\n",
       "  OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n",
       "    safe: true,\n",
       "    index: 0\n",
       "  });\n",
       "}\n",
       "\n",
       "if (window.Jupyter !== undefined) {\n",
       "  try {\n",
       "    var events = require('base/js/events');\n",
       "    var OutputArea = require('notebook/js/outputarea').OutputArea;\n",
       "    if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n",
       "      register_renderer(events, OutputArea);\n",
       "    }\n",
       "  } catch(err) {\n",
       "  }\n",
       "}\n"
      ],
      "application/vnd.holoviews_load.v0+json": "\nif ((window.PyViz === undefined) || (window.PyViz instanceof HTMLElement)) {\n  window.PyViz = {comms: {}, comm_status:{}, kernels:{}, receivers: {}, plot_index: []}\n}\n\n\n    function JupyterCommManager() {\n    }\n\n    JupyterCommManager.prototype.register_target = function(plot_id, comm_id, msg_handler) {\n      if (window.comm_manager || ((window.Jupyter !== undefined) && (Jupyter.notebook.kernel != null))) {\n        var comm_manager = window.comm_manager || Jupyter.notebook.kernel.comm_manager;\n        comm_manager.register_target(comm_id, function(comm) {\n          comm.on_msg(msg_handler);\n        });\n      } else if ((plot_id in window.PyViz.kernels) && (window.PyViz.kernels[plot_id])) {\n        window.PyViz.kernels[plot_id].registerCommTarget(comm_id, function(comm) {\n          comm.onMsg = msg_handler;\n        });\n      } else if (typeof google != 'undefined' && google.colab.kernel != null) {\n        google.colab.kernel.comms.registerTarget(comm_id, (comm) => {\n          var messages = comm.messages[Symbol.asyncIterator]();\n          function processIteratorResult(result) {\n            var message = result.value;\n            console.log(message)\n            var content = {data: message.data, comm_id};\n            var buffers = []\n            for (var buffer of message.buffers || []) {\n              buffers.push(new DataView(buffer))\n            }\n            var metadata = message.metadata || {};\n            var msg = {content, buffers, metadata}\n            msg_handler(msg);\n            return messages.next().then(processIteratorResult);\n          }\n          return messages.next().then(processIteratorResult);\n        })\n      }\n    }\n\n    JupyterCommManager.prototype.get_client_comm = function(plot_id, comm_id, msg_handler) {\n      if (comm_id in window.PyViz.comms) {\n        return window.PyViz.comms[comm_id];\n      } else if (window.comm_manager || ((window.Jupyter !== undefined) && (Jupyter.notebook.kernel != null))) {\n        var comm_manager = window.comm_manager || Jupyter.notebook.kernel.comm_manager;\n        var comm = comm_manager.new_comm(comm_id, {}, {}, {}, comm_id);\n        if (msg_handler) {\n          comm.on_msg(msg_handler);\n        }\n      } else if ((plot_id in window.PyViz.kernels) && (window.PyViz.kernels[plot_id])) {\n        var comm = window.PyViz.kernels[plot_id].connectToComm(comm_id);\n        comm.open();\n        if (msg_handler) {\n          comm.onMsg = msg_handler;\n        }\n      } else if (typeof google != 'undefined' && google.colab.kernel != null) {\n        var comm_promise = google.colab.kernel.comms.open(comm_id)\n        comm_promise.then((comm) => {\n          window.PyViz.comms[comm_id] = comm;\n          if (msg_handler) {\n            var messages = comm.messages[Symbol.asyncIterator]();\n            function processIteratorResult(result) {\n              var message = result.value;\n              var content = {data: message.data};\n              var metadata = message.metadata || {comm_id};\n              var msg = {content, metadata}\n              msg_handler(msg);\n              return messages.next().then(processIteratorResult);\n            }\n            return messages.next().then(processIteratorResult);\n          }\n        }) \n        var sendClosure = (data, metadata, buffers, disposeOnDone) => {\n          return comm_promise.then((comm) => {\n            comm.send(data, metadata, buffers, disposeOnDone);\n          });\n        };\n        var comm = {\n          send: sendClosure\n        };\n      }\n      window.PyViz.comms[comm_id] = comm;\n      return comm;\n    }\n    window.PyViz.comm_manager = new JupyterCommManager();\n    \n\n\nvar JS_MIME_TYPE = 'application/javascript';\nvar HTML_MIME_TYPE = 'text/html';\nvar EXEC_MIME_TYPE = 'application/vnd.holoviews_exec.v0+json';\nvar CLASS_NAME = 'output';\n\n/**\n * Render data to the DOM node\n */\nfunction render(props, node) {\n  var div = document.createElement(\"div\");\n  var script = document.createElement(\"script\");\n  node.appendChild(div);\n  node.appendChild(script);\n}\n\n/**\n * Handle when a new output is added\n */\nfunction handle_add_output(event, handle) {\n  var output_area = handle.output_area;\n  var output = handle.output;\n  if ((output.data == undefined) || (!output.data.hasOwnProperty(EXEC_MIME_TYPE))) {\n    return\n  }\n  var id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n  var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n  if (id !== undefined) {\n    var nchildren = toinsert.length;\n    var html_node = toinsert[nchildren-1].children[0];\n    html_node.innerHTML = output.data[HTML_MIME_TYPE];\n    var scripts = [];\n    var nodelist = html_node.querySelectorAll(\"script\");\n    for (var i in nodelist) {\n      if (nodelist.hasOwnProperty(i)) {\n        scripts.push(nodelist[i])\n      }\n    }\n\n    scripts.forEach( function (oldScript) {\n      var newScript = document.createElement(\"script\");\n      var attrs = [];\n      var nodemap = oldScript.attributes;\n      for (var j in nodemap) {\n        if (nodemap.hasOwnProperty(j)) {\n          attrs.push(nodemap[j])\n        }\n      }\n      attrs.forEach(function(attr) { newScript.setAttribute(attr.name, attr.value) });\n      newScript.appendChild(document.createTextNode(oldScript.innerHTML));\n      oldScript.parentNode.replaceChild(newScript, oldScript);\n    });\n    if (JS_MIME_TYPE in output.data) {\n      toinsert[nchildren-1].children[1].textContent = output.data[JS_MIME_TYPE];\n    }\n    output_area._hv_plot_id = id;\n    if ((window.Bokeh !== undefined) && (id in Bokeh.index)) {\n      window.PyViz.plot_index[id] = Bokeh.index[id];\n    } else {\n      window.PyViz.plot_index[id] = null;\n    }\n  } else if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n    var bk_div = document.createElement(\"div\");\n    bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n    var script_attrs = bk_div.children[0].attributes;\n    for (var i = 0; i < script_attrs.length; i++) {\n      toinsert[toinsert.length - 1].childNodes[1].setAttribute(script_attrs[i].name, script_attrs[i].value);\n    }\n    // store reference to server id on output_area\n    output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n  }\n}\n\n/**\n * Handle when an output is cleared or removed\n */\nfunction handle_clear_output(event, handle) {\n  var id = handle.cell.output_area._hv_plot_id;\n  var server_id = handle.cell.output_area._bokeh_server_id;\n  if (((id === undefined) || !(id in PyViz.plot_index)) && (server_id !== undefined)) { return; }\n  var comm = window.PyViz.comm_manager.get_client_comm(\"hv-extension-comm\", \"hv-extension-comm\", function () {});\n  if (server_id !== null) {\n    comm.send({event_type: 'server_delete', 'id': server_id});\n    return;\n  } else if (comm !== null) {\n    comm.send({event_type: 'delete', 'id': id});\n  }\n  delete PyViz.plot_index[id];\n  if ((window.Bokeh !== undefined) & (id in window.Bokeh.index)) {\n    var doc = window.Bokeh.index[id].model.document\n    doc.clear();\n    const i = window.Bokeh.documents.indexOf(doc);\n    if (i > -1) {\n      window.Bokeh.documents.splice(i, 1);\n    }\n  }\n}\n\n/**\n * Handle kernel restart event\n */\nfunction handle_kernel_cleanup(event, handle) {\n  delete PyViz.comms[\"hv-extension-comm\"];\n  window.PyViz.plot_index = {}\n}\n\n/**\n * Handle update_display_data messages\n */\nfunction handle_update_output(event, handle) {\n  handle_clear_output(event, {cell: {output_area: handle.output_area}})\n  handle_add_output(event, handle)\n}\n\nfunction register_renderer(events, OutputArea) {\n  function append_mime(data, metadata, element) {\n    // create a DOM node to render to\n    var toinsert = this.create_output_subarea(\n    metadata,\n    CLASS_NAME,\n    EXEC_MIME_TYPE\n    );\n    this.keyboard_manager.register_events(toinsert);\n    // Render to node\n    var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n    render(props, toinsert[0]);\n    element.append(toinsert);\n    return toinsert\n  }\n\n  events.on('output_added.OutputArea', handle_add_output);\n  events.on('output_updated.OutputArea', handle_update_output);\n  events.on('clear_output.CodeCell', handle_clear_output);\n  events.on('delete.Cell', handle_clear_output);\n  events.on('kernel_ready.Kernel', handle_kernel_cleanup);\n\n  OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n    safe: true,\n    index: 0\n  });\n}\n\nif (window.Jupyter !== undefined) {\n  try {\n    var events = require('base/js/events');\n    var OutputArea = require('notebook/js/outputarea').OutputArea;\n    if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n      register_renderer(events, OutputArea);\n    }\n  } catch(err) {\n  }\n}\n"
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<style>*[data-root-id],\n",
       "*[data-root-id] > * {\n",
       "  box-sizing: border-box;\n",
       "  font-family: var(--jp-ui-font-family);\n",
       "  font-size: var(--jp-ui-font-size1);\n",
       "  color: var(--vscode-editor-foreground, var(--jp-ui-font-color1));\n",
       "}\n",
       "\n",
       "/* Override VSCode background color */\n",
       ".cell-output-ipywidget-background:has(\n",
       "    > .cell-output-ipywidget-background > .lm-Widget > *[data-root-id]\n",
       "  ),\n",
       ".cell-output-ipywidget-background:has(> .lm-Widget > *[data-root-id]) {\n",
       "  background-color: transparent !important;\n",
       "}\n",
       "</style>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "(function(root) {\n",
       "  function now() {\n",
       "    return new Date();\n",
       "  }\n",
       "\n",
       "  var force = true;\n",
       "  var py_version = '3.2.2'.replace('rc', '-rc.').replace('.dev', '-dev.');\n",
       "  var is_dev = py_version.indexOf(\"+\") !== -1 || py_version.indexOf(\"-\") !== -1;\n",
       "  var reloading = true;\n",
       "  var Bokeh = root.Bokeh;\n",
       "  var bokeh_loaded = Bokeh != null && (Bokeh.version === py_version || (Bokeh.versions !== undefined && Bokeh.versions.has(py_version)));\n",
       "\n",
       "  if (typeof (root._bokeh_timeout) === \"undefined\" || force) {\n",
       "    root._bokeh_timeout = Date.now() + 5000;\n",
       "    root._bokeh_failed_load = false;\n",
       "  }\n",
       "\n",
       "  function run_callbacks() {\n",
       "    try {\n",
       "      root._bokeh_onload_callbacks.forEach(function(callback) {\n",
       "        if (callback != null)\n",
       "          callback();\n",
       "      });\n",
       "    } finally {\n",
       "      delete root._bokeh_onload_callbacks;\n",
       "    }\n",
       "    console.debug(\"Bokeh: all callbacks have finished\");\n",
       "  }\n",
       "\n",
       "  function load_libs(css_urls, js_urls, js_modules, js_exports, callback) {\n",
       "    if (css_urls == null) css_urls = [];\n",
       "    if (js_urls == null) js_urls = [];\n",
       "    if (js_modules == null) js_modules = [];\n",
       "    if (js_exports == null) js_exports = {};\n",
       "\n",
       "    root._bokeh_onload_callbacks.push(callback);\n",
       "\n",
       "    if (root._bokeh_is_loading > 0) {\n",
       "      console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n",
       "      return null;\n",
       "    }\n",
       "    if (js_urls.length === 0 && js_modules.length === 0 && Object.keys(js_exports).length === 0) {\n",
       "      run_callbacks();\n",
       "      return null;\n",
       "    }\n",
       "    if (!reloading) {\n",
       "      console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n",
       "    }\n",
       "\n",
       "    function on_load() {\n",
       "      root._bokeh_is_loading--;\n",
       "      if (root._bokeh_is_loading === 0) {\n",
       "        console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n",
       "        run_callbacks()\n",
       "      }\n",
       "    }\n",
       "    window._bokeh_on_load = on_load\n",
       "\n",
       "    function on_error() {\n",
       "      console.error(\"failed to load \" + url);\n",
       "    }\n",
       "\n",
       "    var skip = [];\n",
       "    if (window.requirejs) {\n",
       "      window.requirejs.config({'packages': {}, 'paths': {'jspanel': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/jspanel', 'jspanel-modal': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/modal/jspanel.modal', 'jspanel-tooltip': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/tooltip/jspanel.tooltip', 'jspanel-hint': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/hint/jspanel.hint', 'jspanel-layout': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/layout/jspanel.layout', 'jspanel-contextmenu': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/contextmenu/jspanel.contextmenu', 'jspanel-dock': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/dock/jspanel.dock', 'gridstack': 'https://cdn.jsdelivr.net/npm/gridstack@7.2.3/dist/gridstack-all', 'notyf': 'https://cdn.jsdelivr.net/npm/notyf@3/notyf.min'}, 'shim': {'jspanel': {'exports': 'jsPanel'}, 'gridstack': {'exports': 'GridStack'}}});\n",
       "      require([\"jspanel\"], function(jsPanel) {\n",
       "\twindow.jsPanel = jsPanel\n",
       "\ton_load()\n",
       "      })\n",
       "      require([\"jspanel-modal\"], function() {\n",
       "\ton_load()\n",
       "      })\n",
       "      require([\"jspanel-tooltip\"], function() {\n",
       "\ton_load()\n",
       "      })\n",
       "      require([\"jspanel-hint\"], function() {\n",
       "\ton_load()\n",
       "      })\n",
       "      require([\"jspanel-layout\"], function() {\n",
       "\ton_load()\n",
       "      })\n",
       "      require([\"jspanel-contextmenu\"], function() {\n",
       "\ton_load()\n",
       "      })\n",
       "      require([\"jspanel-dock\"], function() {\n",
       "\ton_load()\n",
       "      })\n",
       "      require([\"gridstack\"], function(GridStack) {\n",
       "\twindow.GridStack = GridStack\n",
       "\ton_load()\n",
       "      })\n",
       "      require([\"notyf\"], function() {\n",
       "\ton_load()\n",
       "      })\n",
       "      root._bokeh_is_loading = css_urls.length + 9;\n",
       "    } else {\n",
       "      root._bokeh_is_loading = css_urls.length + js_urls.length + js_modules.length + Object.keys(js_exports).length;\n",
       "    }\n",
       "\n",
       "    var existing_stylesheets = []\n",
       "    var links = document.getElementsByTagName('link')\n",
       "    for (var i = 0; i < links.length; i++) {\n",
       "      var link = links[i]\n",
       "      if (link.href != null) {\n",
       "\texisting_stylesheets.push(link.href)\n",
       "      }\n",
       "    }\n",
       "    for (var i = 0; i < css_urls.length; i++) {\n",
       "      var url = css_urls[i];\n",
       "      if (existing_stylesheets.indexOf(url) !== -1) {\n",
       "\ton_load()\n",
       "\tcontinue;\n",
       "      }\n",
       "      const element = document.createElement(\"link\");\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error;\n",
       "      element.rel = \"stylesheet\";\n",
       "      element.type = \"text/css\";\n",
       "      element.href = url;\n",
       "      console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n",
       "      document.body.appendChild(element);\n",
       "    }    if (((window['jsPanel'] !== undefined) && (!(window['jsPanel'] instanceof HTMLElement))) || window.requirejs) {\n",
       "      var urls = ['https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/jspanel.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/modal/jspanel.modal.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/tooltip/jspanel.tooltip.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/hint/jspanel.hint.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/layout/jspanel.layout.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/contextmenu/jspanel.contextmenu.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/dock/jspanel.dock.js'];\n",
       "      for (var i = 0; i < urls.length; i++) {\n",
       "        skip.push(urls[i])\n",
       "      }\n",
       "    }    if (((window['GridStack'] !== undefined) && (!(window['GridStack'] instanceof HTMLElement))) || window.requirejs) {\n",
       "      var urls = ['https://cdn.holoviz.org/panel/1.2.3/dist/bundled/gridstack/gridstack@7.2.3/dist/gridstack-all.js'];\n",
       "      for (var i = 0; i < urls.length; i++) {\n",
       "        skip.push(urls[i])\n",
       "      }\n",
       "    }    if (((window['Notyf'] !== undefined) && (!(window['Notyf'] instanceof HTMLElement))) || window.requirejs) {\n",
       "      var urls = ['https://cdn.holoviz.org/panel/1.2.3/dist/bundled/notificationarea/notyf@3/notyf.min.js'];\n",
       "      for (var i = 0; i < urls.length; i++) {\n",
       "        skip.push(urls[i])\n",
       "      }\n",
       "    }    var existing_scripts = []\n",
       "    var scripts = document.getElementsByTagName('script')\n",
       "    for (var i = 0; i < scripts.length; i++) {\n",
       "      var script = scripts[i]\n",
       "      if (script.src != null) {\n",
       "\texisting_scripts.push(script.src)\n",
       "      }\n",
       "    }\n",
       "    for (var i = 0; i < js_urls.length; i++) {\n",
       "      var url = js_urls[i];\n",
       "      if (skip.indexOf(url) !== -1 || existing_scripts.indexOf(url) !== -1) {\n",
       "\tif (!window.requirejs) {\n",
       "\t  on_load();\n",
       "\t}\n",
       "\tcontinue;\n",
       "      }\n",
       "      var element = document.createElement('script');\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error;\n",
       "      element.async = false;\n",
       "      element.src = url;\n",
       "      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n",
       "      document.head.appendChild(element);\n",
       "    }\n",
       "    for (var i = 0; i < js_modules.length; i++) {\n",
       "      var url = js_modules[i];\n",
       "      if (skip.indexOf(url) !== -1 || existing_scripts.indexOf(url) !== -1) {\n",
       "\tif (!window.requirejs) {\n",
       "\t  on_load();\n",
       "\t}\n",
       "\tcontinue;\n",
       "      }\n",
       "      var element = document.createElement('script');\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error;\n",
       "      element.async = false;\n",
       "      element.src = url;\n",
       "      element.type = \"module\";\n",
       "      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n",
       "      document.head.appendChild(element);\n",
       "    }\n",
       "    for (const name in js_exports) {\n",
       "      var url = js_exports[name];\n",
       "      if (skip.indexOf(url) >= 0 || root[name] != null) {\n",
       "\tif (!window.requirejs) {\n",
       "\t  on_load();\n",
       "\t}\n",
       "\tcontinue;\n",
       "      }\n",
       "      var element = document.createElement('script');\n",
       "      element.onerror = on_error;\n",
       "      element.async = false;\n",
       "      element.type = \"module\";\n",
       "      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n",
       "      element.textContent = `\n",
       "      import ${name} from \"${url}\"\n",
       "      window.${name} = ${name}\n",
       "      window._bokeh_on_load()\n",
       "      `\n",
       "      document.head.appendChild(element);\n",
       "    }\n",
       "    if (!js_urls.length && !js_modules.length) {\n",
       "      on_load()\n",
       "    }\n",
       "  };\n",
       "\n",
       "  function inject_raw_css(css) {\n",
       "    const element = document.createElement(\"style\");\n",
       "    element.appendChild(document.createTextNode(css));\n",
       "    document.body.appendChild(element);\n",
       "  }\n",
       "\n",
       "  var js_urls = [];\n",
       "  var js_modules = [];\n",
       "  var js_exports = {};\n",
       "  var css_urls = [];\n",
       "  var inline_js = [    function(Bokeh) {\n",
       "      Bokeh.set_log_level(\"info\");\n",
       "    },\n",
       "function(Bokeh) {} // ensure no trailing comma for IE\n",
       "  ];\n",
       "\n",
       "  function run_inline_js() {\n",
       "    if ((root.Bokeh !== undefined) || (force === true)) {\n",
       "      for (var i = 0; i < inline_js.length; i++) {\n",
       "        inline_js[i].call(root, root.Bokeh);\n",
       "      }\n",
       "      // Cache old bokeh versions\n",
       "      if (Bokeh != undefined && !reloading) {\n",
       "\tvar NewBokeh = root.Bokeh;\n",
       "\tif (Bokeh.versions === undefined) {\n",
       "\t  Bokeh.versions = new Map();\n",
       "\t}\n",
       "\tif (NewBokeh.version !== Bokeh.version) {\n",
       "\t  Bokeh.versions.set(NewBokeh.version, NewBokeh)\n",
       "\t}\n",
       "\troot.Bokeh = Bokeh;\n",
       "      }} else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(run_inline_js, 100);\n",
       "    } else if (!root._bokeh_failed_load) {\n",
       "      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n",
       "      root._bokeh_failed_load = true;\n",
       "    }\n",
       "    root._bokeh_is_initializing = false\n",
       "  }\n",
       "\n",
       "  function load_or_wait() {\n",
       "    // Implement a backoff loop that tries to ensure we do not load multiple\n",
       "    // versions of Bokeh and its dependencies at the same time.\n",
       "    // In recent versions we use the root._bokeh_is_initializing flag\n",
       "    // to determine whether there is an ongoing attempt to initialize\n",
       "    // bokeh, however for backward compatibility we also try to ensure\n",
       "    // that we do not start loading a newer (Panel>=1.0 and Bokeh>3) version\n",
       "    // before older versions are fully initialized.\n",
       "    if (root._bokeh_is_initializing && Date.now() > root._bokeh_timeout) {\n",
       "      root._bokeh_is_initializing = false;\n",
       "      root._bokeh_onload_callbacks = undefined;\n",
       "      console.log(\"Bokeh: BokehJS was loaded multiple times but one version failed to initialize.\");\n",
       "      load_or_wait();\n",
       "    } else if (root._bokeh_is_initializing || (typeof root._bokeh_is_initializing === \"undefined\" && root._bokeh_onload_callbacks !== undefined)) {\n",
       "      setTimeout(load_or_wait, 100);\n",
       "    } else {\n",
       "      Bokeh = root.Bokeh;\n",
       "      bokeh_loaded = Bokeh != null && (Bokeh.version === py_version || (Bokeh.versions !== undefined && Bokeh.versions.has(py_version)));\n",
       "      root._bokeh_is_initializing = true\n",
       "      root._bokeh_onload_callbacks = []\n",
       "      if (!reloading && (!bokeh_loaded || is_dev)) {\n",
       "\troot.Bokeh = undefined;\n",
       "      }\n",
       "      load_libs(css_urls, js_urls, js_modules, js_exports, function() {\n",
       "\tconsole.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n",
       "\trun_inline_js();\n",
       "      });\n",
       "    }\n",
       "  }\n",
       "  // Give older versions of the autoload script a head-start to ensure\n",
       "  // they initialize before we start loading newer version.\n",
       "  setTimeout(load_or_wait, 100)\n",
       "}(window));"
      ],
      "application/vnd.holoviews_load.v0+json": "(function(root) {\n  function now() {\n    return new Date();\n  }\n\n  var force = true;\n  var py_version = '3.2.2'.replace('rc', '-rc.').replace('.dev', '-dev.');\n  var is_dev = py_version.indexOf(\"+\") !== -1 || py_version.indexOf(\"-\") !== -1;\n  var reloading = true;\n  var Bokeh = root.Bokeh;\n  var bokeh_loaded = Bokeh != null && (Bokeh.version === py_version || (Bokeh.versions !== undefined && Bokeh.versions.has(py_version)));\n\n  if (typeof (root._bokeh_timeout) === \"undefined\" || force) {\n    root._bokeh_timeout = Date.now() + 5000;\n    root._bokeh_failed_load = false;\n  }\n\n  function run_callbacks() {\n    try {\n      root._bokeh_onload_callbacks.forEach(function(callback) {\n        if (callback != null)\n          callback();\n      });\n    } finally {\n      delete root._bokeh_onload_callbacks;\n    }\n    console.debug(\"Bokeh: all callbacks have finished\");\n  }\n\n  function load_libs(css_urls, js_urls, js_modules, js_exports, callback) {\n    if (css_urls == null) css_urls = [];\n    if (js_urls == null) js_urls = [];\n    if (js_modules == null) js_modules = [];\n    if (js_exports == null) js_exports = {};\n\n    root._bokeh_onload_callbacks.push(callback);\n\n    if (root._bokeh_is_loading > 0) {\n      console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n      return null;\n    }\n    if (js_urls.length === 0 && js_modules.length === 0 && Object.keys(js_exports).length === 0) {\n      run_callbacks();\n      return null;\n    }\n    if (!reloading) {\n      console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n    }\n\n    function on_load() {\n      root._bokeh_is_loading--;\n      if (root._bokeh_is_loading === 0) {\n        console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n        run_callbacks()\n      }\n    }\n    window._bokeh_on_load = on_load\n\n    function on_error() {\n      console.error(\"failed to load \" + url);\n    }\n\n    var skip = [];\n    if (window.requirejs) {\n      window.requirejs.config({'packages': {}, 'paths': {'jspanel': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/jspanel', 'jspanel-modal': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/modal/jspanel.modal', 'jspanel-tooltip': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/tooltip/jspanel.tooltip', 'jspanel-hint': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/hint/jspanel.hint', 'jspanel-layout': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/layout/jspanel.layout', 'jspanel-contextmenu': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/contextmenu/jspanel.contextmenu', 'jspanel-dock': 'https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/dock/jspanel.dock', 'gridstack': 'https://cdn.jsdelivr.net/npm/gridstack@7.2.3/dist/gridstack-all', 'notyf': 'https://cdn.jsdelivr.net/npm/notyf@3/notyf.min'}, 'shim': {'jspanel': {'exports': 'jsPanel'}, 'gridstack': {'exports': 'GridStack'}}});\n      require([\"jspanel\"], function(jsPanel) {\n\twindow.jsPanel = jsPanel\n\ton_load()\n      })\n      require([\"jspanel-modal\"], function() {\n\ton_load()\n      })\n      require([\"jspanel-tooltip\"], function() {\n\ton_load()\n      })\n      require([\"jspanel-hint\"], function() {\n\ton_load()\n      })\n      require([\"jspanel-layout\"], function() {\n\ton_load()\n      })\n      require([\"jspanel-contextmenu\"], function() {\n\ton_load()\n      })\n      require([\"jspanel-dock\"], function() {\n\ton_load()\n      })\n      require([\"gridstack\"], function(GridStack) {\n\twindow.GridStack = GridStack\n\ton_load()\n      })\n      require([\"notyf\"], function() {\n\ton_load()\n      })\n      root._bokeh_is_loading = css_urls.length + 9;\n    } else {\n      root._bokeh_is_loading = css_urls.length + js_urls.length + js_modules.length + Object.keys(js_exports).length;\n    }\n\n    var existing_stylesheets = []\n    var links = document.getElementsByTagName('link')\n    for (var i = 0; i < links.length; i++) {\n      var link = links[i]\n      if (link.href != null) {\n\texisting_stylesheets.push(link.href)\n      }\n    }\n    for (var i = 0; i < css_urls.length; i++) {\n      var url = css_urls[i];\n      if (existing_stylesheets.indexOf(url) !== -1) {\n\ton_load()\n\tcontinue;\n      }\n      const element = document.createElement(\"link\");\n      element.onload = on_load;\n      element.onerror = on_error;\n      element.rel = \"stylesheet\";\n      element.type = \"text/css\";\n      element.href = url;\n      console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n      document.body.appendChild(element);\n    }    if (((window['jsPanel'] !== undefined) && (!(window['jsPanel'] instanceof HTMLElement))) || window.requirejs) {\n      var urls = ['https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/jspanel.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/modal/jspanel.modal.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/tooltip/jspanel.tooltip.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/hint/jspanel.hint.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/layout/jspanel.layout.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/contextmenu/jspanel.contextmenu.js', 'https://cdn.holoviz.org/panel/1.2.3/dist/bundled/floatpanel/jspanel4@4.12.0/dist/extensions/dock/jspanel.dock.js'];\n      for (var i = 0; i < urls.length; i++) {\n        skip.push(urls[i])\n      }\n    }    if (((window['GridStack'] !== undefined) && (!(window['GridStack'] instanceof HTMLElement))) || window.requirejs) {\n      var urls = ['https://cdn.holoviz.org/panel/1.2.3/dist/bundled/gridstack/gridstack@7.2.3/dist/gridstack-all.js'];\n      for (var i = 0; i < urls.length; i++) {\n        skip.push(urls[i])\n      }\n    }    if (((window['Notyf'] !== undefined) && (!(window['Notyf'] instanceof HTMLElement))) || window.requirejs) {\n      var urls = ['https://cdn.holoviz.org/panel/1.2.3/dist/bundled/notificationarea/notyf@3/notyf.min.js'];\n      for (var i = 0; i < urls.length; i++) {\n        skip.push(urls[i])\n      }\n    }    var existing_scripts = []\n    var scripts = document.getElementsByTagName('script')\n    for (var i = 0; i < scripts.length; i++) {\n      var script = scripts[i]\n      if (script.src != null) {\n\texisting_scripts.push(script.src)\n      }\n    }\n    for (var i = 0; i < js_urls.length; i++) {\n      var url = js_urls[i];\n      if (skip.indexOf(url) !== -1 || existing_scripts.indexOf(url) !== -1) {\n\tif (!window.requirejs) {\n\t  on_load();\n\t}\n\tcontinue;\n      }\n      var element = document.createElement('script');\n      element.onload = on_load;\n      element.onerror = on_error;\n      element.async = false;\n      element.src = url;\n      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n      document.head.appendChild(element);\n    }\n    for (var i = 0; i < js_modules.length; i++) {\n      var url = js_modules[i];\n      if (skip.indexOf(url) !== -1 || existing_scripts.indexOf(url) !== -1) {\n\tif (!window.requirejs) {\n\t  on_load();\n\t}\n\tcontinue;\n      }\n      var element = document.createElement('script');\n      element.onload = on_load;\n      element.onerror = on_error;\n      element.async = false;\n      element.src = url;\n      element.type = \"module\";\n      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n      document.head.appendChild(element);\n    }\n    for (const name in js_exports) {\n      var url = js_exports[name];\n      if (skip.indexOf(url) >= 0 || root[name] != null) {\n\tif (!window.requirejs) {\n\t  on_load();\n\t}\n\tcontinue;\n      }\n      var element = document.createElement('script');\n      element.onerror = on_error;\n      element.async = false;\n      element.type = \"module\";\n      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n      element.textContent = `\n      import ${name} from \"${url}\"\n      window.${name} = ${name}\n      window._bokeh_on_load()\n      `\n      document.head.appendChild(element);\n    }\n    if (!js_urls.length && !js_modules.length) {\n      on_load()\n    }\n  };\n\n  function inject_raw_css(css) {\n    const element = document.createElement(\"style\");\n    element.appendChild(document.createTextNode(css));\n    document.body.appendChild(element);\n  }\n\n  var js_urls = [];\n  var js_modules = [];\n  var js_exports = {};\n  var css_urls = [];\n  var inline_js = [    function(Bokeh) {\n      Bokeh.set_log_level(\"info\");\n    },\nfunction(Bokeh) {} // ensure no trailing comma for IE\n  ];\n\n  function run_inline_js() {\n    if ((root.Bokeh !== undefined) || (force === true)) {\n      for (var i = 0; i < inline_js.length; i++) {\n        inline_js[i].call(root, root.Bokeh);\n      }\n      // Cache old bokeh versions\n      if (Bokeh != undefined && !reloading) {\n\tvar NewBokeh = root.Bokeh;\n\tif (Bokeh.versions === undefined) {\n\t  Bokeh.versions = new Map();\n\t}\n\tif (NewBokeh.version !== Bokeh.version) {\n\t  Bokeh.versions.set(NewBokeh.version, NewBokeh)\n\t}\n\troot.Bokeh = Bokeh;\n      }} else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(run_inline_js, 100);\n    } else if (!root._bokeh_failed_load) {\n      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n      root._bokeh_failed_load = true;\n    }\n    root._bokeh_is_initializing = false\n  }\n\n  function load_or_wait() {\n    // Implement a backoff loop that tries to ensure we do not load multiple\n    // versions of Bokeh and its dependencies at the same time.\n    // In recent versions we use the root._bokeh_is_initializing flag\n    // to determine whether there is an ongoing attempt to initialize\n    // bokeh, however for backward compatibility we also try to ensure\n    // that we do not start loading a newer (Panel>=1.0 and Bokeh>3) version\n    // before older versions are fully initialized.\n    if (root._bokeh_is_initializing && Date.now() > root._bokeh_timeout) {\n      root._bokeh_is_initializing = false;\n      root._bokeh_onload_callbacks = undefined;\n      console.log(\"Bokeh: BokehJS was loaded multiple times but one version failed to initialize.\");\n      load_or_wait();\n    } else if (root._bokeh_is_initializing || (typeof root._bokeh_is_initializing === \"undefined\" && root._bokeh_onload_callbacks !== undefined)) {\n      setTimeout(load_or_wait, 100);\n    } else {\n      Bokeh = root.Bokeh;\n      bokeh_loaded = Bokeh != null && (Bokeh.version === py_version || (Bokeh.versions !== undefined && Bokeh.versions.has(py_version)));\n      root._bokeh_is_initializing = true\n      root._bokeh_onload_callbacks = []\n      if (!reloading && (!bokeh_loaded || is_dev)) {\n\troot.Bokeh = undefined;\n      }\n      load_libs(css_urls, js_urls, js_modules, js_exports, function() {\n\tconsole.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n\trun_inline_js();\n      });\n    }\n  }\n  // Give older versions of the autoload script a head-start to ensure\n  // they initialize before we start loading newer version.\n  setTimeout(load_or_wait, 100)\n}(window));"
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "if ((window.PyViz === undefined) || (window.PyViz instanceof HTMLElement)) {\n",
       "  window.PyViz = {comms: {}, comm_status:{}, kernels:{}, receivers: {}, plot_index: []}\n",
       "}\n",
       "\n",
       "\n",
       "    function JupyterCommManager() {\n",
       "    }\n",
       "\n",
       "    JupyterCommManager.prototype.register_target = function(plot_id, comm_id, msg_handler) {\n",
       "      if (window.comm_manager || ((window.Jupyter !== undefined) && (Jupyter.notebook.kernel != null))) {\n",
       "        var comm_manager = window.comm_manager || Jupyter.notebook.kernel.comm_manager;\n",
       "        comm_manager.register_target(comm_id, function(comm) {\n",
       "          comm.on_msg(msg_handler);\n",
       "        });\n",
       "      } else if ((plot_id in window.PyViz.kernels) && (window.PyViz.kernels[plot_id])) {\n",
       "        window.PyViz.kernels[plot_id].registerCommTarget(comm_id, function(comm) {\n",
       "          comm.onMsg = msg_handler;\n",
       "        });\n",
       "      } else if (typeof google != 'undefined' && google.colab.kernel != null) {\n",
       "        google.colab.kernel.comms.registerTarget(comm_id, (comm) => {\n",
       "          var messages = comm.messages[Symbol.asyncIterator]();\n",
       "          function processIteratorResult(result) {\n",
       "            var message = result.value;\n",
       "            console.log(message)\n",
       "            var content = {data: message.data, comm_id};\n",
       "            var buffers = []\n",
       "            for (var buffer of message.buffers || []) {\n",
       "              buffers.push(new DataView(buffer))\n",
       "            }\n",
       "            var metadata = message.metadata || {};\n",
       "            var msg = {content, buffers, metadata}\n",
       "            msg_handler(msg);\n",
       "            return messages.next().then(processIteratorResult);\n",
       "          }\n",
       "          return messages.next().then(processIteratorResult);\n",
       "        })\n",
       "      }\n",
       "    }\n",
       "\n",
       "    JupyterCommManager.prototype.get_client_comm = function(plot_id, comm_id, msg_handler) {\n",
       "      if (comm_id in window.PyViz.comms) {\n",
       "        return window.PyViz.comms[comm_id];\n",
       "      } else if (window.comm_manager || ((window.Jupyter !== undefined) && (Jupyter.notebook.kernel != null))) {\n",
       "        var comm_manager = window.comm_manager || Jupyter.notebook.kernel.comm_manager;\n",
       "        var comm = comm_manager.new_comm(comm_id, {}, {}, {}, comm_id);\n",
       "        if (msg_handler) {\n",
       "          comm.on_msg(msg_handler);\n",
       "        }\n",
       "      } else if ((plot_id in window.PyViz.kernels) && (window.PyViz.kernels[plot_id])) {\n",
       "        var comm = window.PyViz.kernels[plot_id].connectToComm(comm_id);\n",
       "        comm.open();\n",
       "        if (msg_handler) {\n",
       "          comm.onMsg = msg_handler;\n",
       "        }\n",
       "      } else if (typeof google != 'undefined' && google.colab.kernel != null) {\n",
       "        var comm_promise = google.colab.kernel.comms.open(comm_id)\n",
       "        comm_promise.then((comm) => {\n",
       "          window.PyViz.comms[comm_id] = comm;\n",
       "          if (msg_handler) {\n",
       "            var messages = comm.messages[Symbol.asyncIterator]();\n",
       "            function processIteratorResult(result) {\n",
       "              var message = result.value;\n",
       "              var content = {data: message.data};\n",
       "              var metadata = message.metadata || {comm_id};\n",
       "              var msg = {content, metadata}\n",
       "              msg_handler(msg);\n",
       "              return messages.next().then(processIteratorResult);\n",
       "            }\n",
       "            return messages.next().then(processIteratorResult);\n",
       "          }\n",
       "        }) \n",
       "        var sendClosure = (data, metadata, buffers, disposeOnDone) => {\n",
       "          return comm_promise.then((comm) => {\n",
       "            comm.send(data, metadata, buffers, disposeOnDone);\n",
       "          });\n",
       "        };\n",
       "        var comm = {\n",
       "          send: sendClosure\n",
       "        };\n",
       "      }\n",
       "      window.PyViz.comms[comm_id] = comm;\n",
       "      return comm;\n",
       "    }\n",
       "    window.PyViz.comm_manager = new JupyterCommManager();\n",
       "    \n",
       "\n",
       "\n",
       "var JS_MIME_TYPE = 'application/javascript';\n",
       "var HTML_MIME_TYPE = 'text/html';\n",
       "var EXEC_MIME_TYPE = 'application/vnd.holoviews_exec.v0+json';\n",
       "var CLASS_NAME = 'output';\n",
       "\n",
       "/**\n",
       " * Render data to the DOM node\n",
       " */\n",
       "function render(props, node) {\n",
       "  var div = document.createElement(\"div\");\n",
       "  var script = document.createElement(\"script\");\n",
       "  node.appendChild(div);\n",
       "  node.appendChild(script);\n",
       "}\n",
       "\n",
       "/**\n",
       " * Handle when a new output is added\n",
       " */\n",
       "function handle_add_output(event, handle) {\n",
       "  var output_area = handle.output_area;\n",
       "  var output = handle.output;\n",
       "  if ((output.data == undefined) || (!output.data.hasOwnProperty(EXEC_MIME_TYPE))) {\n",
       "    return\n",
       "  }\n",
       "  var id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n",
       "  var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n",
       "  if (id !== undefined) {\n",
       "    var nchildren = toinsert.length;\n",
       "    var html_node = toinsert[nchildren-1].children[0];\n",
       "    html_node.innerHTML = output.data[HTML_MIME_TYPE];\n",
       "    var scripts = [];\n",
       "    var nodelist = html_node.querySelectorAll(\"script\");\n",
       "    for (var i in nodelist) {\n",
       "      if (nodelist.hasOwnProperty(i)) {\n",
       "        scripts.push(nodelist[i])\n",
       "      }\n",
       "    }\n",
       "\n",
       "    scripts.forEach( function (oldScript) {\n",
       "      var newScript = document.createElement(\"script\");\n",
       "      var attrs = [];\n",
       "      var nodemap = oldScript.attributes;\n",
       "      for (var j in nodemap) {\n",
       "        if (nodemap.hasOwnProperty(j)) {\n",
       "          attrs.push(nodemap[j])\n",
       "        }\n",
       "      }\n",
       "      attrs.forEach(function(attr) { newScript.setAttribute(attr.name, attr.value) });\n",
       "      newScript.appendChild(document.createTextNode(oldScript.innerHTML));\n",
       "      oldScript.parentNode.replaceChild(newScript, oldScript);\n",
       "    });\n",
       "    if (JS_MIME_TYPE in output.data) {\n",
       "      toinsert[nchildren-1].children[1].textContent = output.data[JS_MIME_TYPE];\n",
       "    }\n",
       "    output_area._hv_plot_id = id;\n",
       "    if ((window.Bokeh !== undefined) && (id in Bokeh.index)) {\n",
       "      window.PyViz.plot_index[id] = Bokeh.index[id];\n",
       "    } else {\n",
       "      window.PyViz.plot_index[id] = null;\n",
       "    }\n",
       "  } else if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n",
       "    var bk_div = document.createElement(\"div\");\n",
       "    bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n",
       "    var script_attrs = bk_div.children[0].attributes;\n",
       "    for (var i = 0; i < script_attrs.length; i++) {\n",
       "      toinsert[toinsert.length - 1].childNodes[1].setAttribute(script_attrs[i].name, script_attrs[i].value);\n",
       "    }\n",
       "    // store reference to server id on output_area\n",
       "    output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n",
       "  }\n",
       "}\n",
       "\n",
       "/**\n",
       " * Handle when an output is cleared or removed\n",
       " */\n",
       "function handle_clear_output(event, handle) {\n",
       "  var id = handle.cell.output_area._hv_plot_id;\n",
       "  var server_id = handle.cell.output_area._bokeh_server_id;\n",
       "  if (((id === undefined) || !(id in PyViz.plot_index)) && (server_id !== undefined)) { return; }\n",
       "  var comm = window.PyViz.comm_manager.get_client_comm(\"hv-extension-comm\", \"hv-extension-comm\", function () {});\n",
       "  if (server_id !== null) {\n",
       "    comm.send({event_type: 'server_delete', 'id': server_id});\n",
       "    return;\n",
       "  } else if (comm !== null) {\n",
       "    comm.send({event_type: 'delete', 'id': id});\n",
       "  }\n",
       "  delete PyViz.plot_index[id];\n",
       "  if ((window.Bokeh !== undefined) & (id in window.Bokeh.index)) {\n",
       "    var doc = window.Bokeh.index[id].model.document\n",
       "    doc.clear();\n",
       "    const i = window.Bokeh.documents.indexOf(doc);\n",
       "    if (i > -1) {\n",
       "      window.Bokeh.documents.splice(i, 1);\n",
       "    }\n",
       "  }\n",
       "}\n",
       "\n",
       "/**\n",
       " * Handle kernel restart event\n",
       " */\n",
       "function handle_kernel_cleanup(event, handle) {\n",
       "  delete PyViz.comms[\"hv-extension-comm\"];\n",
       "  window.PyViz.plot_index = {}\n",
       "}\n",
       "\n",
       "/**\n",
       " * Handle update_display_data messages\n",
       " */\n",
       "function handle_update_output(event, handle) {\n",
       "  handle_clear_output(event, {cell: {output_area: handle.output_area}})\n",
       "  handle_add_output(event, handle)\n",
       "}\n",
       "\n",
       "function register_renderer(events, OutputArea) {\n",
       "  function append_mime(data, metadata, element) {\n",
       "    // create a DOM node to render to\n",
       "    var toinsert = this.create_output_subarea(\n",
       "    metadata,\n",
       "    CLASS_NAME,\n",
       "    EXEC_MIME_TYPE\n",
       "    );\n",
       "    this.keyboard_manager.register_events(toinsert);\n",
       "    // Render to node\n",
       "    var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n",
       "    render(props, toinsert[0]);\n",
       "    element.append(toinsert);\n",
       "    return toinsert\n",
       "  }\n",
       "\n",
       "  events.on('output_added.OutputArea', handle_add_output);\n",
       "  events.on('output_updated.OutputArea', handle_update_output);\n",
       "  events.on('clear_output.CodeCell', handle_clear_output);\n",
       "  events.on('delete.Cell', handle_clear_output);\n",
       "  events.on('kernel_ready.Kernel', handle_kernel_cleanup);\n",
       "\n",
       "  OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n",
       "    safe: true,\n",
       "    index: 0\n",
       "  });\n",
       "}\n",
       "\n",
       "if (window.Jupyter !== undefined) {\n",
       "  try {\n",
       "    var events = require('base/js/events');\n",
       "    var OutputArea = require('notebook/js/outputarea').OutputArea;\n",
       "    if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n",
       "      register_renderer(events, OutputArea);\n",
       "    }\n",
       "  } catch(err) {\n",
       "  }\n",
       "}\n"
      ],
      "application/vnd.holoviews_load.v0+json": "\nif ((window.PyViz === undefined) || (window.PyViz instanceof HTMLElement)) {\n  window.PyViz = {comms: {}, comm_status:{}, kernels:{}, receivers: {}, plot_index: []}\n}\n\n\n    function JupyterCommManager() {\n    }\n\n    JupyterCommManager.prototype.register_target = function(plot_id, comm_id, msg_handler) {\n      if (window.comm_manager || ((window.Jupyter !== undefined) && (Jupyter.notebook.kernel != null))) {\n        var comm_manager = window.comm_manager || Jupyter.notebook.kernel.comm_manager;\n        comm_manager.register_target(comm_id, function(comm) {\n          comm.on_msg(msg_handler);\n        });\n      } else if ((plot_id in window.PyViz.kernels) && (window.PyViz.kernels[plot_id])) {\n        window.PyViz.kernels[plot_id].registerCommTarget(comm_id, function(comm) {\n          comm.onMsg = msg_handler;\n        });\n      } else if (typeof google != 'undefined' && google.colab.kernel != null) {\n        google.colab.kernel.comms.registerTarget(comm_id, (comm) => {\n          var messages = comm.messages[Symbol.asyncIterator]();\n          function processIteratorResult(result) {\n            var message = result.value;\n            console.log(message)\n            var content = {data: message.data, comm_id};\n            var buffers = []\n            for (var buffer of message.buffers || []) {\n              buffers.push(new DataView(buffer))\n            }\n            var metadata = message.metadata || {};\n            var msg = {content, buffers, metadata}\n            msg_handler(msg);\n            return messages.next().then(processIteratorResult);\n          }\n          return messages.next().then(processIteratorResult);\n        })\n      }\n    }\n\n    JupyterCommManager.prototype.get_client_comm = function(plot_id, comm_id, msg_handler) {\n      if (comm_id in window.PyViz.comms) {\n        return window.PyViz.comms[comm_id];\n      } else if (window.comm_manager || ((window.Jupyter !== undefined) && (Jupyter.notebook.kernel != null))) {\n        var comm_manager = window.comm_manager || Jupyter.notebook.kernel.comm_manager;\n        var comm = comm_manager.new_comm(comm_id, {}, {}, {}, comm_id);\n        if (msg_handler) {\n          comm.on_msg(msg_handler);\n        }\n      } else if ((plot_id in window.PyViz.kernels) && (window.PyViz.kernels[plot_id])) {\n        var comm = window.PyViz.kernels[plot_id].connectToComm(comm_id);\n        comm.open();\n        if (msg_handler) {\n          comm.onMsg = msg_handler;\n        }\n      } else if (typeof google != 'undefined' && google.colab.kernel != null) {\n        var comm_promise = google.colab.kernel.comms.open(comm_id)\n        comm_promise.then((comm) => {\n          window.PyViz.comms[comm_id] = comm;\n          if (msg_handler) {\n            var messages = comm.messages[Symbol.asyncIterator]();\n            function processIteratorResult(result) {\n              var message = result.value;\n              var content = {data: message.data};\n              var metadata = message.metadata || {comm_id};\n              var msg = {content, metadata}\n              msg_handler(msg);\n              return messages.next().then(processIteratorResult);\n            }\n            return messages.next().then(processIteratorResult);\n          }\n        }) \n        var sendClosure = (data, metadata, buffers, disposeOnDone) => {\n          return comm_promise.then((comm) => {\n            comm.send(data, metadata, buffers, disposeOnDone);\n          });\n        };\n        var comm = {\n          send: sendClosure\n        };\n      }\n      window.PyViz.comms[comm_id] = comm;\n      return comm;\n    }\n    window.PyViz.comm_manager = new JupyterCommManager();\n    \n\n\nvar JS_MIME_TYPE = 'application/javascript';\nvar HTML_MIME_TYPE = 'text/html';\nvar EXEC_MIME_TYPE = 'application/vnd.holoviews_exec.v0+json';\nvar CLASS_NAME = 'output';\n\n/**\n * Render data to the DOM node\n */\nfunction render(props, node) {\n  var div = document.createElement(\"div\");\n  var script = document.createElement(\"script\");\n  node.appendChild(div);\n  node.appendChild(script);\n}\n\n/**\n * Handle when a new output is added\n */\nfunction handle_add_output(event, handle) {\n  var output_area = handle.output_area;\n  var output = handle.output;\n  if ((output.data == undefined) || (!output.data.hasOwnProperty(EXEC_MIME_TYPE))) {\n    return\n  }\n  var id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n  var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n  if (id !== undefined) {\n    var nchildren = toinsert.length;\n    var html_node = toinsert[nchildren-1].children[0];\n    html_node.innerHTML = output.data[HTML_MIME_TYPE];\n    var scripts = [];\n    var nodelist = html_node.querySelectorAll(\"script\");\n    for (var i in nodelist) {\n      if (nodelist.hasOwnProperty(i)) {\n        scripts.push(nodelist[i])\n      }\n    }\n\n    scripts.forEach( function (oldScript) {\n      var newScript = document.createElement(\"script\");\n      var attrs = [];\n      var nodemap = oldScript.attributes;\n      for (var j in nodemap) {\n        if (nodemap.hasOwnProperty(j)) {\n          attrs.push(nodemap[j])\n        }\n      }\n      attrs.forEach(function(attr) { newScript.setAttribute(attr.name, attr.value) });\n      newScript.appendChild(document.createTextNode(oldScript.innerHTML));\n      oldScript.parentNode.replaceChild(newScript, oldScript);\n    });\n    if (JS_MIME_TYPE in output.data) {\n      toinsert[nchildren-1].children[1].textContent = output.data[JS_MIME_TYPE];\n    }\n    output_area._hv_plot_id = id;\n    if ((window.Bokeh !== undefined) && (id in Bokeh.index)) {\n      window.PyViz.plot_index[id] = Bokeh.index[id];\n    } else {\n      window.PyViz.plot_index[id] = null;\n    }\n  } else if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n    var bk_div = document.createElement(\"div\");\n    bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n    var script_attrs = bk_div.children[0].attributes;\n    for (var i = 0; i < script_attrs.length; i++) {\n      toinsert[toinsert.length - 1].childNodes[1].setAttribute(script_attrs[i].name, script_attrs[i].value);\n    }\n    // store reference to server id on output_area\n    output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n  }\n}\n\n/**\n * Handle when an output is cleared or removed\n */\nfunction handle_clear_output(event, handle) {\n  var id = handle.cell.output_area._hv_plot_id;\n  var server_id = handle.cell.output_area._bokeh_server_id;\n  if (((id === undefined) || !(id in PyViz.plot_index)) && (server_id !== undefined)) { return; }\n  var comm = window.PyViz.comm_manager.get_client_comm(\"hv-extension-comm\", \"hv-extension-comm\", function () {});\n  if (server_id !== null) {\n    comm.send({event_type: 'server_delete', 'id': server_id});\n    return;\n  } else if (comm !== null) {\n    comm.send({event_type: 'delete', 'id': id});\n  }\n  delete PyViz.plot_index[id];\n  if ((window.Bokeh !== undefined) & (id in window.Bokeh.index)) {\n    var doc = window.Bokeh.index[id].model.document\n    doc.clear();\n    const i = window.Bokeh.documents.indexOf(doc);\n    if (i > -1) {\n      window.Bokeh.documents.splice(i, 1);\n    }\n  }\n}\n\n/**\n * Handle kernel restart event\n */\nfunction handle_kernel_cleanup(event, handle) {\n  delete PyViz.comms[\"hv-extension-comm\"];\n  window.PyViz.plot_index = {}\n}\n\n/**\n * Handle update_display_data messages\n */\nfunction handle_update_output(event, handle) {\n  handle_clear_output(event, {cell: {output_area: handle.output_area}})\n  handle_add_output(event, handle)\n}\n\nfunction register_renderer(events, OutputArea) {\n  function append_mime(data, metadata, element) {\n    // create a DOM node to render to\n    var toinsert = this.create_output_subarea(\n    metadata,\n    CLASS_NAME,\n    EXEC_MIME_TYPE\n    );\n    this.keyboard_manager.register_events(toinsert);\n    // Render to node\n    var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n    render(props, toinsert[0]);\n    element.append(toinsert);\n    return toinsert\n  }\n\n  events.on('output_added.OutputArea', handle_add_output);\n  events.on('output_updated.OutputArea', handle_update_output);\n  events.on('clear_output.CodeCell', handle_clear_output);\n  events.on('delete.Cell', handle_clear_output);\n  events.on('kernel_ready.Kernel', handle_kernel_cleanup);\n\n  OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n    safe: true,\n    index: 0\n  });\n}\n\nif (window.Jupyter !== undefined) {\n  try {\n    var events = require('base/js/events');\n    var OutputArea = require('notebook/js/outputarea').OutputArea;\n    if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n      register_renderer(events, OutputArea);\n    }\n  } catch(err) {\n  }\n}\n"
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<style>*[data-root-id],\n",
       "*[data-root-id] > * {\n",
       "  box-sizing: border-box;\n",
       "  font-family: var(--jp-ui-font-family);\n",
       "  font-size: var(--jp-ui-font-size1);\n",
       "  color: var(--vscode-editor-foreground, var(--jp-ui-font-color1));\n",
       "}\n",
       "\n",
       "/* Override VSCode background color */\n",
       ".cell-output-ipywidget-background:has(\n",
       "    > .cell-output-ipywidget-background > .lm-Widget > *[data-root-id]\n",
       "  ),\n",
       ".cell-output-ipywidget-background:has(> .lm-Widget > *[data-root-id]) {\n",
       "  background-color: transparent !important;\n",
       "}\n",
       "</style>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {},
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.holoviews_exec.v0+json": "",
      "text/html": [
       "<div id='0d9f6260-7717-4736-95e6-03f03f36b6f3'>\n",
       "  <div id=\"e8359a5a-e698-415b-8011-2ab2de1f0261\" data-root-id=\"0d9f6260-7717-4736-95e6-03f03f36b6f3\" style=\"display: contents;\"></div>\n",
       "</div>\n",
       "<script type=\"application/javascript\">(function(root) {\n",
       "  var docs_json = {\"f06fd846-12d3-4bf4-a310-107494cbd4b8\":{\"version\":\"3.2.2\",\"title\":\"Bokeh Application\",\"roots\":[{\"type\":\"object\",\"name\":\"panel.models.tabs.Tabs\",\"id\":\"0d9f6260-7717-4736-95e6-03f03f36b6f3\",\"attributes\":{\"stylesheets\":[\"\\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\\n  background-image: url(\\\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\\\");\\n  background-size: auto calc(min(50%, 400px));\\n}\",{\"type\":\"object\",\"name\":\"ImportedStyleSheet\",\"id\":\"ad9654a9-319e-428f-8316-4efac35e1d4e\",\"attributes\":{\"url\":\"https://cdn.holoviz.org/panel/1.2.3/dist/css/loading.css\"}},{\"type\":\"object\",\"name\":\"ImportedStyleSheet\",\"id\":\"02fe86c8-dd24-41d8-a200-dc2f880e13e8\",\"attributes\":{\"url\":\"https://cdn.holoviz.org/panel/1.2.3/dist/bundled/theme/default.css\"}},{\"type\":\"object\",\"name\":\"ImportedStyleSheet\",\"id\":\"9c004d91-c98b-4470-a9fb-3a13a5763655\",\"attributes\":{\"url\":\"https://cdn.holoviz.org/panel/1.2.3/dist/bundled/theme/native.css\"}}],\"margin\":0,\"align\":\"start\",\"tabs\":[{\"type\":\"object\",\"name\":\"TabPanel\",\"id\":\"211e9b53-c272-4e74-9892-5bfb14c9c5ec\",\"attributes\":{\"name\":\"Column00870\",\"title\":\"Stage 1\",\"child\":{\"type\":\"object\",\"name\":\"panel.models.layout.Column\",\"id\":\"3266a530-a820-47c1-a247-fb3372372cb9\",\"attributes\":{\"name\":\"Column00870\",\"stylesheets\":[\"\\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\\n  background-image: url(\\\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\\\");\\n  background-size: auto calc(min(50%, 400px));\\n}\",{\"id\":\"ad9654a9-319e-428f-8316-4efac35e1d4e\"},{\"type\":\"object\",\"name\":\"ImportedStyleSheet\",\"id\":\"71326e87-9811-4a65-8368-9f4d2a812a5e\",\"attributes\":{\"url\":\"https://cdn.holoviz.org/panel/1.2.3/dist/css/listpanel.css\"}},{\"id\":\"02fe86c8-dd24-41d8-a200-dc2f880e13e8\"},{\"id\":\"9c004d91-c98b-4470-a9fb-3a13a5763655\"}],\"margin\":0,\"align\":\"end\",\"children\":[{\"type\":\"object\",\"name\":\"panel.models.markup.HTML\",\"id\":\"4dc8f4db-3297-40f4-ab06-81b8b74eed1c\",\"attributes\":{\"css_classes\":[\"markdown\"],\"stylesheets\":[\"\\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\\n  background-image: url(\\\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\\\");\\n  background-size: auto calc(min(50%, 400px));\\n}\",{\"id\":\"ad9654a9-319e-428f-8316-4efac35e1d4e\"},{\"type\":\"object\",\"name\":\"ImportedStyleSheet\",\"id\":\"0809c5cd-90ff-4f1c-b4b2-0a569a75deb7\",\"attributes\":{\"url\":\"https://cdn.holoviz.org/panel/1.2.3/dist/css/markdown.css\"}},{\"id\":\"02fe86c8-dd24-41d8-a200-dc2f880e13e8\"},{\"id\":\"9c004d91-c98b-4470-a9fb-3a13a5763655\"}],\"width\":500,\"min_width\":500,\"margin\":[5,10],\"align\":\"start\",\"text\":\"&lt;h1 id=&quot;welcome-to-the-app&quot;&gt;Welcome to the app. &lt;a class=&quot;header-anchor&quot; href=&quot;#welcome-to-the-app&quot;&gt;\\u00b6&lt;/a&gt;&lt;/h1&gt;\\n&lt;p&gt;Visualization of SICSS data&lt;/p&gt;\\n\"}},{\"type\":\"object\",\"name\":\"PasswordInput\",\"id\":\"5d0d2ca9-bab8-4eda-9877-c66cb4e15355\",\"attributes\":{\"stylesheets\":[\"\\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\\n  background-image: url(\\\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\\\");\\n  background-size: auto calc(min(50%, 400px));\\n}\",{\"id\":\"ad9654a9-319e-428f-8316-4efac35e1d4e\"},{\"id\":\"02fe86c8-dd24-41d8-a200-dc2f880e13e8\"},{\"id\":\"9c004d91-c98b-4470-a9fb-3a13a5763655\"}],\"width\":300,\"min_width\":300,\"margin\":[5,10],\"align\":\"start\",\"title\":\"Enter the password to decode the data\",\"placeholder\":\"Password here\",\"max_length\":5000}},{\"type\":\"object\",\"name\":\"Button\",\"id\":\"8e560bf8-f4ad-45e3-a665-b6df107f946f\",\"attributes\":{\"button_type\":\"primary\",\"subscribed_events\":{\"type\":\"set\",\"entries\":[\"button_click\"]},\"css_classes\":[\"solid\"],\"stylesheets\":[\"\\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\\n  background-image: url(\\\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\\\");\\n  background-size: auto calc(min(50%, 400px));\\n}\",{\"id\":\"ad9654a9-319e-428f-8316-4efac35e1d4e\"},{\"type\":\"object\",\"name\":\"ImportedStyleSheet\",\"id\":\"50696d74-2d3f-4c0d-8f06-2d3e7cfce592\",\"attributes\":{\"url\":\"https://cdn.holoviz.org/panel/1.2.3/dist/css/button.css\"}},{\"id\":\"02fe86c8-dd24-41d8-a200-dc2f880e13e8\"},{\"id\":\"9c004d91-c98b-4470-a9fb-3a13a5763655\"}],\"margin\":[5,10],\"align\":\"start\",\"label\":\"Submit\"}},{\"type\":\"object\",\"name\":\"panel.models.markup.HTML\",\"id\":\"fc9fe5b6-8927-4ef1-9cff-44b3d5a3f5d4\",\"attributes\":{\"css_classes\":[\"markdown\"],\"stylesheets\":[\"\\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\\n  background-image: url(\\\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\\\");\\n  background-size: auto calc(min(50%, 400px));\\n}\",{\"id\":\"ad9654a9-319e-428f-8316-4efac35e1d4e\"},{\"id\":\"0809c5cd-90ff-4f1c-b4b2-0a569a75deb7\"},{\"id\":\"02fe86c8-dd24-41d8-a200-dc2f880e13e8\"},{\"id\":\"9c004d91-c98b-4470-a9fb-3a13a5763655\"}],\"width\":300,\"min_width\":300,\"margin\":[5,10],\"align\":\"start\"}}]}}}},{\"type\":\"object\",\"name\":\"TabPanel\",\"id\":\"53cf9340-8ff3-47e1-ae5b-3b72a3757368\",\"attributes\":{\"name\":\"Column00879\",\"title\":\"Data View\",\"child\":{\"type\":\"object\",\"name\":\"panel.models.layout.Column\",\"id\":\"bccf97a5-cc80-4c15-8515-7d081f653aab\",\"attributes\":{\"name\":\"Column00879\",\"stylesheets\":[\"\\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\\n  background-image: url(\\\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\\\");\\n  background-size: auto calc(min(50%, 400px));\\n}\",{\"id\":\"ad9654a9-319e-428f-8316-4efac35e1d4e\"},{\"id\":\"71326e87-9811-4a65-8368-9f4d2a812a5e\"},{\"id\":\"02fe86c8-dd24-41d8-a200-dc2f880e13e8\"},{\"id\":\"9c004d91-c98b-4470-a9fb-3a13a5763655\"}],\"margin\":0,\"align\":\"start\",\"children\":[{\"type\":\"object\",\"name\":\"panel.models.markup.HTML\",\"id\":\"b546aee2-b6c8-47de-a2cb-fcd4ddd90270\",\"attributes\":{\"css_classes\":[\"markdown\"],\"stylesheets\":[\"\\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\\n  background-image: url(\\\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\\\");\\n  background-size: auto calc(min(50%, 400px));\\n}\",{\"id\":\"ad9654a9-319e-428f-8316-4efac35e1d4e\"},{\"id\":\"0809c5cd-90ff-4f1c-b4b2-0a569a75deb7\"},{\"id\":\"02fe86c8-dd24-41d8-a200-dc2f880e13e8\"},{\"id\":\"9c004d91-c98b-4470-a9fb-3a13a5763655\"}],\"margin\":[5,10],\"align\":\"start\"}}]}}}}]}},{\"type\":\"object\",\"name\":\"panel.models.comm_manager.CommManager\",\"id\":\"8e47686f-471b-4041-bd4b-13999c85391d\",\"attributes\":{\"plot_id\":\"0d9f6260-7717-4736-95e6-03f03f36b6f3\",\"comm_id\":\"141bd55600154290b386a044c87c1311\",\"client_comm_id\":\"1dedad145b8842a3982e061eb7821f98\"}},{\"type\":\"object\",\"name\":\"panel.models.location.Location\",\"id\":\"1bc8f4f8-6845-459b-8708-0c9c3c5aed1b\",\"attributes\":{\"reload\":false}}],\"defs\":[{\"type\":\"model\",\"name\":\"ReactiveHTML1\"},{\"type\":\"model\",\"name\":\"FlexBox1\",\"properties\":[{\"name\":\"align_content\",\"kind\":\"Any\",\"default\":\"flex-start\"},{\"name\":\"align_items\",\"kind\":\"Any\",\"default\":\"flex-start\"},{\"name\":\"flex_direction\",\"kind\":\"Any\",\"default\":\"row\"},{\"name\":\"flex_wrap\",\"kind\":\"Any\",\"default\":\"wrap\"},{\"name\":\"justify_content\",\"kind\":\"Any\",\"default\":\"flex-start\"}]},{\"type\":\"model\",\"name\":\"FloatPanel1\",\"properties\":[{\"name\":\"config\",\"kind\":\"Any\",\"default\":{\"type\":\"map\"}},{\"name\":\"contained\",\"kind\":\"Any\",\"default\":true},{\"name\":\"position\",\"kind\":\"Any\",\"default\":\"right-top\"},{\"name\":\"offsetx\",\"kind\":\"Any\",\"default\":null},{\"name\":\"offsety\",\"kind\":\"Any\",\"default\":null},{\"name\":\"theme\",\"kind\":\"Any\",\"default\":\"primary\"},{\"name\":\"status\",\"kind\":\"Any\",\"default\":\"normalized\"}]},{\"type\":\"model\",\"name\":\"GridStack1\",\"properties\":[{\"name\":\"mode\",\"kind\":\"Any\",\"default\":\"warn\"},{\"name\":\"ncols\",\"kind\":\"Any\",\"default\":null},{\"name\":\"nrows\",\"kind\":\"Any\",\"default\":null},{\"name\":\"allow_resize\",\"kind\":\"Any\",\"default\":true},{\"name\":\"allow_drag\",\"kind\":\"Any\",\"default\":true},{\"name\":\"state\",\"kind\":\"Any\",\"default\":[]}]},{\"type\":\"model\",\"name\":\"drag1\",\"properties\":[{\"name\":\"slider_width\",\"kind\":\"Any\",\"default\":5},{\"name\":\"slider_color\",\"kind\":\"Any\",\"default\":\"black\"},{\"name\":\"value\",\"kind\":\"Any\",\"default\":50}]},{\"type\":\"model\",\"name\":\"click1\",\"properties\":[{\"name\":\"terminal_output\",\"kind\":\"Any\",\"default\":\"\"},{\"name\":\"debug_name\",\"kind\":\"Any\",\"default\":\"\"},{\"name\":\"clears\",\"kind\":\"Any\",\"default\":0}]},{\"type\":\"model\",\"name\":\"FastWrapper1\",\"properties\":[{\"name\":\"object\",\"kind\":\"Any\",\"default\":null},{\"name\":\"style\",\"kind\":\"Any\",\"default\":null}]},{\"type\":\"model\",\"name\":\"NotificationAreaBase1\",\"properties\":[{\"name\":\"js_events\",\"kind\":\"Any\",\"default\":{\"type\":\"map\"}},{\"name\":\"position\",\"kind\":\"Any\",\"default\":\"bottom-right\"},{\"name\":\"_clear\",\"kind\":\"Any\",\"default\":0}]},{\"type\":\"model\",\"name\":\"NotificationArea1\",\"properties\":[{\"name\":\"js_events\",\"kind\":\"Any\",\"default\":{\"type\":\"map\"}},{\"name\":\"notifications\",\"kind\":\"Any\",\"default\":[]},{\"name\":\"position\",\"kind\":\"Any\",\"default\":\"bottom-right\"},{\"name\":\"_clear\",\"kind\":\"Any\",\"default\":0},{\"name\":\"types\",\"kind\":\"Any\",\"default\":[{\"type\":\"map\",\"entries\":[[\"type\",\"warning\"],[\"background\",\"#ffc107\"],[\"icon\",{\"type\":\"map\",\"entries\":[[\"className\",\"fas fa-exclamation-triangle\"],[\"tagName\",\"i\"],[\"color\",\"white\"]]}]]},{\"type\":\"map\",\"entries\":[[\"type\",\"info\"],[\"background\",\"#007bff\"],[\"icon\",{\"type\":\"map\",\"entries\":[[\"className\",\"fas fa-info-circle\"],[\"tagName\",\"i\"],[\"color\",\"white\"]]}]]}]}]},{\"type\":\"model\",\"name\":\"Notification\",\"properties\":[{\"name\":\"background\",\"kind\":\"Any\",\"default\":null},{\"name\":\"duration\",\"kind\":\"Any\",\"default\":3000},{\"name\":\"icon\",\"kind\":\"Any\",\"default\":null},{\"name\":\"message\",\"kind\":\"Any\",\"default\":\"\"},{\"name\":\"notification_type\",\"kind\":\"Any\",\"default\":null},{\"name\":\"_destroyed\",\"kind\":\"Any\",\"default\":false}]},{\"type\":\"model\",\"name\":\"TemplateActions1\",\"properties\":[{\"name\":\"open_modal\",\"kind\":\"Any\",\"default\":0},{\"name\":\"close_modal\",\"kind\":\"Any\",\"default\":0}]},{\"type\":\"model\",\"name\":\"BootstrapTemplateActions1\",\"properties\":[{\"name\":\"open_modal\",\"kind\":\"Any\",\"default\":0},{\"name\":\"close_modal\",\"kind\":\"Any\",\"default\":0}]},{\"type\":\"model\",\"name\":\"MaterialTemplateActions1\",\"properties\":[{\"name\":\"open_modal\",\"kind\":\"Any\",\"default\":0},{\"name\":\"close_modal\",\"kind\":\"Any\",\"default\":0}]}]}};\n",
       "  var render_items = [{\"docid\":\"f06fd846-12d3-4bf4-a310-107494cbd4b8\",\"roots\":{\"0d9f6260-7717-4736-95e6-03f03f36b6f3\":\"e8359a5a-e698-415b-8011-2ab2de1f0261\"},\"root_ids\":[\"0d9f6260-7717-4736-95e6-03f03f36b6f3\"]}];\n",
       "  var docs = Object.values(docs_json)\n",
       "  if (!docs) {\n",
       "    return\n",
       "  }\n",
       "  const py_version = docs[0].version.replace('rc', '-rc.').replace('.dev', '-dev.')\n",
       "  const is_dev = py_version.indexOf(\"+\") !== -1 || py_version.indexOf(\"-\") !== -1\n",
       "  function embed_document(root) {\n",
       "    var Bokeh = get_bokeh(root)\n",
       "    Bokeh.embed.embed_items_notebook(docs_json, render_items);\n",
       "    for (const render_item of render_items) {\n",
       "      for (const root_id of render_item.root_ids) {\n",
       "\tconst id_el = document.getElementById(root_id)\n",
       "\tif (id_el.children.length && (id_el.children[0].className === 'bk-root')) {\n",
       "\t  const root_el = id_el.children[0]\n",
       "\t  root_el.id = root_el.id + '-rendered'\n",
       "\t}\n",
       "      }\n",
       "    }\n",
       "  }\n",
       "  function get_bokeh(root) {\n",
       "    if (root.Bokeh === undefined) {\n",
       "      return null\n",
       "    } else if (root.Bokeh.version !== py_version && !is_dev) {\n",
       "      if (root.Bokeh.versions === undefined || !root.Bokeh.versions.has(py_version)) {\n",
       "\treturn null\n",
       "      }\n",
       "      return root.Bokeh.versions.get(py_version);\n",
       "    } else if (root.Bokeh.version === py_version) {\n",
       "      return root.Bokeh\n",
       "    }\n",
       "    return null\n",
       "  }\n",
       "  function is_loaded(root) {\n",
       "    var Bokeh = get_bokeh(root)\n",
       "    return (Bokeh != null && Bokeh.Panel !== undefined)\n",
       "  }\n",
       "  if (is_loaded(root)) {\n",
       "    embed_document(root);\n",
       "  } else {\n",
       "    var attempts = 0;\n",
       "    var timer = setInterval(function(root) {\n",
       "      if (is_loaded(root)) {\n",
       "        clearInterval(timer);\n",
       "        embed_document(root);\n",
       "      } else if (document.readyState == \"complete\") {\n",
       "        attempts++;\n",
       "        if (attempts > 200) {\n",
       "          clearInterval(timer);\n",
       "\t  var Bokeh = get_bokeh(root)\n",
       "\t  if (Bokeh == null || Bokeh.Panel == null) {\n",
       "            console.warn(\"Panel: ERROR: Unable to run Panel code because Bokeh or Panel library is missing\");\n",
       "\t  } else {\n",
       "\t    console.warn(\"Panel: WARNING: Attempting to render but not all required libraries could be resolved.\")\n",
       "\t    embed_document(root)\n",
       "\t  }\n",
       "        }\n",
       "      }\n",
       "    }, 25, root)\n",
       "  }\n",
       "})(window);</script>"
      ],
      "text/plain": [
       "Tabs\n",
       "    [0] Column(align='end')\n",
       "        [0] Markdown(str, width=500)\n",
       "        [1] PasswordInput(name='Enter the password t..., placeholder='Password here')\n",
       "        [2] Button(button_type='primary', name='Submit')\n",
       "        [3] Markdown(str, width=300)\n",
       "    [1] Column\n",
       "        [0] Markdown(str)"
      ]
     },
     "execution_count": 1,
     "metadata": {
      "application/vnd.holoviews_exec.v0+json": {
       "id": "0d9f6260-7717-4736-95e6-03f03f36b6f3"
      }
     },
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import panel as pn\n",
    "import hvplot.pandas\n",
    "pn.extension()\n",
    "\n",
    "from numpy import mean\n",
    "import pandas as pd\n",
    "import geopandas as gp\n",
    "import base64\n",
    "import io\n",
    "from cryptography.fernet import Fernet\n",
    "from cryptography.hazmat.primitives import hashes\n",
    "from cryptography.hazmat.primitives.kdf.pbkdf2 import PBKDF2HMAC\n",
    "from cryptography.hazmat.backends import default_backend\n",
    "import cartopy.crs as ccrs\n",
    "\n",
    "def decrypt_file(password):\n",
    "    \"\"\"\n",
    "    Decrypt a given file using a provided password.\n",
    "    \n",
    "    Args:\n",
    "        file_name (str): Path to the encrypted file.\n",
    "        password (str): Password for decryption.\n",
    "        \n",
    "    Returns:\n",
    "        pd.DataFrame: Decrypted data as a pandas DataFrame.\n",
    "    \"\"\"\n",
    "    \n",
    "    url = \"http://javier.science/panel_sicss_results/data/eval_data_cleaned.tsv.crypt\"\n",
    "    response = requests.get(url)\n",
    "    file_data = response.content\n",
    "\n",
    "    # Extract the salt and encrypted data\n",
    "    salt, encrypted_data = file_data[:16], file_data[16:]\n",
    "\n",
    "    # Key derivation\n",
    "    kdf = PBKDF2HMAC(\n",
    "        algorithm=hashes.SHA256(),\n",
    "        length=32,\n",
    "        salt=salt,\n",
    "        iterations=100000,\n",
    "        backend=default_backend()\n",
    "    )\n",
    "    key = base64.urlsafe_b64encode(kdf.derive(password.encode()))\n",
    "    cipher_suite = Fernet(key)\n",
    "\n",
    "    # Decrypting the data\n",
    "    decrypted_data = cipher_suite.decrypt(encrypted_data)\n",
    "    return pd.read_csv(io.StringIO(decrypted_data.decode('utf-8')))\n",
    "\n",
    "\n",
    "def create_data(pass_):\n",
    "    \"\"\"\n",
    "    Create dataframes for visualization and analysis.\n",
    "    \n",
    "    Args:\n",
    "        pass_ (str): Password for decrypting the data file.\n",
    "        \n",
    "    Returns:\n",
    "        tuple: df (aggregated data) and df_gemeente (to be visualized).\n",
    "    \"\"\"\n",
    "    df = decrypt_file(pass_).drop_duplicates()\n",
    "    \n",
    "    # Filter for full population\n",
    "    df[\"Full population\"] = (\n",
    "        (df[\"Gender\"] == \"All\") &\n",
    "        (df[\"Age\"] == \"All\") &\n",
    "        (df[\"Previous children\"] == \"All\") &\n",
    "        (df[\"Background\"] == \"All\") &\n",
    "        (df[\"Education\"] == \"All\")\n",
    "    )\n",
    "    \n",
    "    # Data to be visualized\n",
    "    df_gemeente = df[df[\"Gemeente\"] != \"All\"]\n",
    "    df_gemeente[\"statcode\"] = (\n",
    "        \"GM\" + df_gemeente[\"Gemeente\"].astype(float).astype(int).astype(str).str.zfill(4)\n",
    "    )  # same as geopandas file\n",
    "    df_g = gp.read_file(\"http://javier.science/panel_sicss_results/data/nld.geojson\")\n",
    "    df_g[\"geometry\"] = df_g[\"geometry\"].simplify(500)\n",
    "    df_gemeente = pd.merge(df_g, df_gemeente)\n",
    "\n",
    "    # Aggregated data\n",
    "    df = df[df[\"Gemeente\"] == \"All\"]\n",
    "    \n",
    "    # Additional filtering\n",
    "    for var in {\"Gender\", \"Age\", \"Previous children\", \"Background\", \"Education\"}:\n",
    "        df_gemeente[f\"{var}_neg\"] = True\n",
    "        for var2 in {\"Gender\", \"Age\", \"Previous children\", \"Background\", \"Education\"} - {var}:\n",
    "            df_gemeente.loc[df_gemeente[var2] != \"All\", f\"{var}_neg\"] = False\n",
    "    df_gemeente[\"Full population_neg\"] = True\n",
    "\n",
    "    return df, df_gemeente\n",
    "\n",
    "\n",
    "def plots(df, df_gemeente):\n",
    "    \"\"\"\n",
    "    Create interactive plots using Panel and hvPlot.\n",
    "    \n",
    "    Args:\n",
    "        df (pd.DataFrame): Aggregated data.\n",
    "        df_gemeente (pd.DataFrame): Data to be visualized.\n",
    "        \n",
    "    Returns:\n",
    "        pn.layout.Row: Layout for visualization.\n",
    "    \"\"\"\n",
    "    # Define widgets for interactivity\n",
    "    group_select = pn.widgets.Select(\n",
    "        name='Grouping Variable',\n",
    "        options=df_gemeente[\"group_name\"].unique().tolist(),\n",
    "        value=\"3_blinds\"\n",
    "    )\n",
    "    group_var_select = pn.widgets.RadioBoxGroup(\n",
    "        name='Grouping Variable',\n",
    "        options=[\"Full population\", \"Gender\", \"Age\", \"Previous children\", \"Background\", \"Education\"],\n",
    "        value='Full population'\n",
    "    )\n",
    "    subgroup_select = pn.widgets.Select(\n",
    "        name='Choose subgroup',\n",
    "        options=df_gemeente[group_var_select.value].unique().tolist(),\n",
    "        value='Full population'\n",
    "    )\n",
    "    \n",
    "    # Update function for dynamic options in subgroup_select widget\n",
    "    def update_subgroup(event):\n",
    "        subgroup_select.options = df_gemeente[event.new].unique().tolist()\n",
    "        subgroup_select.value = subgroup_select.options[0] if subgroup_select.options else None\n",
    "\n",
    "    # Watch for changes in group_var_select value\n",
    "    group_var_select.param.watch(update_subgroup, 'value')\n",
    "\n",
    "    widgets = pn.Column(group_select, pn.Row(group_var_select, subgroup_select))\n",
    "    \n",
    "    # Define helper functions for plots\n",
    "\n",
    "    def bounds(score):\n",
    "        \"\"\"Define the boundaries for colorbar in choropleth plot.\"\"\"\n",
    "        if len(score) == 0:\n",
    "            return (0, 1)\n",
    "        low = min(score[score > 0])\n",
    "        high = max(score)\n",
    "        mean_ = mean(score)\n",
    "        range_ = min(mean_ - low, high - mean_)\n",
    "        return (mean_ - range_, mean_ + range_)\n",
    "    \n",
    "    def plot_ch(group, grouping_variable, selection):\n",
    "        \"\"\"\n",
    "        Create a choropleth plot for gemeenten based on the F1 score.\n",
    "        \n",
    "        Args:\n",
    "            group (str): Selected group from the widget.\n",
    "            grouping_variable (str): Selected grouping variable from the widget.\n",
    "            selection (str): Subgroup selection from the widget.\n",
    "            \n",
    "        Returns:\n",
    "            hvplot.plotting.core.Polygons: Choropleth plot.\n",
    "        \"\"\"\n",
    "        # Filter the data based on user input\n",
    "        df_gemeent1 = df_gemeente.loc[\n",
    "            (df_gemeente[\"group_name\"] == group) &\n",
    "            (df_gemeente[grouping_variable] == selection) &\n",
    "            (df_gemeente[f\"{grouping_variable}_neg\"] == True)\n",
    "        ]\n",
    "\n",
    "        # Determine the plot title\n",
    "        if (selection == \"All\") or (grouping_variable == \"Full population\"):\n",
    "            title = f\"Prediction score (F1) in the different gemeenten of\\ngroup '{group}' for the full population\"\n",
    "        else:\n",
    "            title = f\"Prediction score (F1) in the different gemeenten of\\ngroup '{group}' for {grouping_variable} == {selection}\"\n",
    "\n",
    "        # Create choropleth using hvPlot\n",
    "        choropleth = df_gemeent1.hvplot.polygons(\n",
    "            geo=True,\n",
    "            title=title,\n",
    "            cmap=\"RdYlBu_r\",\n",
    "            c='f1_score',\n",
    "            crs=ccrs.epsg(\"28992\"),\n",
    "            hover_cols=[\"statcode\", \"statnaam\"],\n",
    "            width=850,\n",
    "            height=550,\n",
    "            colorbar=True,\n",
    "            line_color=\"white\",\n",
    "            line_width=0.5,\n",
    "            clim=bounds(df_gemeent1[\"f1_score\"]),  # Color limits for the colorbar\n",
    "            xaxis=None,\n",
    "            yaxis=None\n",
    "        )\n",
    "\n",
    "        return choropleth\n",
    "\n",
    "    def plot_s(group, grouping_variable):\n",
    "        \"\"\"\n",
    "        Create a scatter plot of Recall vs Precision.\n",
    "        \n",
    "        Args:\n",
    "            group (str): Selected group from the widget.\n",
    "            grouping_variable (str): Selected grouping variable from the widget.\n",
    "            \n",
    "        Returns:\n",
    "            hvplot.plotting.core.Scatter: Scatter plot.\n",
    "        \"\"\"\n",
    "        df_agg = df.copy()\n",
    "        tot_vars = {\"Gender\", \"Age\", \"Previous children\", \"Background\", \"Education\"} - {grouping_variable}\n",
    "\n",
    "        # Aggregate data based on selected grouping variable\n",
    "        for var in tot_vars:\n",
    "            df_agg = df_agg[df_agg[var] == \"All\"]\n",
    "\n",
    "        symbols = dict(zip(df[grouping_variable].unique(), [\"s\", \"^\", \"o\", \"d\", 'P', \"X\"]))\n",
    "\n",
    "        # Create scatter plot for all models excluding the selected group\n",
    "        sc = df_agg[df_agg[\"group_name\"] != group].hvplot.scatter(\n",
    "            y='precision',\n",
    "            x='recall',\n",
    "            by=grouping_variable,\n",
    "            hover_cols=[\"group_name\", \"Gender\", \"Age\", \"Previous children\", \"Background\", \"Education\"],\n",
    "            title=f\"Recall vs Precision for all models, grouped by {grouping_variable}\"\n",
    "        )\n",
    "\n",
    "        # Highlight the selected group in the scatter plot\n",
    "        sc_highlight = df_agg[df_agg[\"group_name\"] == group].hvplot.scatter(\n",
    "            y='precision',\n",
    "            x='recall',\n",
    "            color=\"k\",\n",
    "            marker=\"s\",\n",
    "            hover_cols=[\"group_name\", \"Gender\", \"Age\", \"Previous children\", \"Background\", \"Education\"],\n",
    "            legend=False\n",
    "        )\n",
    "\n",
    "        return sc * sc_highlight\n",
    "\n",
    "    \n",
    "    plot_ch_bound = pn.bind(plot_ch, group=group_select, grouping_variable=group_var_select, selection=subgroup_select)\n",
    "    plot_s_bound = pn.bind(plot_s, group=group_select, grouping_variable=group_var_select)\n",
    "    \n",
    "    layout = pn.Row(pn.Column(widgets, pn.Spacer(height=20), plot_s_bound), plot_ch_bound)\n",
    "    \n",
    "    return layout\n",
    "\n",
    "\n",
    "# Callback to execute when the password is submitted\n",
    "def submit_password(event):\n",
    "    \"\"\"\n",
    "    Callback function to handle password submission.\n",
    "    \n",
    "    Args:\n",
    "        event: The triggering event (button click in this case).\n",
    "    \"\"\"\n",
    "    password = pass_input.value\n",
    "    \n",
    "    # Switch to the Data View tab and show a loading message\n",
    "    tabs.active = 1\n",
    "    data_view.append(pn.pane.Markdown(\"Loading data\"))\n",
    "    \n",
    "    # Use the password to create the necessary data\n",
    "    df, df_gemeente = create_data(password)\n",
    "    \n",
    "    # Clear previous data views and display new data\n",
    "    data_view.clear()\n",
    "    data_view.append(plots(df, df_gemeente))\n",
    "\n",
    "    try:\n",
    "        # Get the entered password\n",
    "        password = pass_input.value\n",
    "        \n",
    "        # Switch to the Data View tab and show a loading message\n",
    "        tabs.active = 1\n",
    "        data_view.append(pn.pane.Markdown(\"Loading data\"))\n",
    "        \n",
    "        # Use the password to create the necessary data\n",
    "        df, df_gemeente = create_data(password)\n",
    "        \n",
    "        # Clear previous data views and display new data\n",
    "        data_view.clear()\n",
    "        data_view.append(plots(df, df_gemeente))\n",
    "        \n",
    "    except Exception as e:\n",
    "        # In case of any errors, switch back to the Stage 1 tab and display the error message\n",
    "        tabs.active = 0\n",
    "        error_message.object = f\"Error: {str(e)}\"\n",
    "\n",
    "\n",
    "# Display introductory information\n",
    "info = pn.pane.Markdown(\"\"\"\n",
    "# Welcome to the app.\n",
    "Visualization of SICSS data \n",
    "\"\"\", width=500)\n",
    "\n",
    "# Widget for password input\n",
    "pass_input = pn.widgets.PasswordInput(name='Enter the password to decode the data', placeholder='Password here')\n",
    "\n",
    "# Button to submit the password\n",
    "button = pn.widgets.Button(name='Submit', button_type='primary')\n",
    "button.on_click(submit_password)\n",
    "\n",
    "# Create an error message pane (initially empty)\n",
    "error_message = pn.pane.Markdown(\"\", width=300)\n",
    "\n",
    "# Define the layout for Stage 1\n",
    "stage1 = pn.Column(info, pass_input, button, error_message, align=\"end\")\n",
    "\n",
    "# Create the data view pane (initially empty)\n",
    "data_view = pn.Column(\n",
    "    pn.pane.Markdown(\"\")\n",
    ")\n",
    "\n",
    "# Tab layout to switch between Stage 1 and Data View\n",
    "tabs = pn.Tabs(\n",
    "    (\"Stage 1\", stage1),\n",
    "    (\"Data View\", data_view)\n",
    ")\n",
    "\n",
    "tabs.servable()\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "424917af-4068-4181-a75a-c2811bef7a75",
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Launching server at http://localhost:61286\n"
     ]
    },
    {
     "data": {
      "text/plain": [
       "<panel.io.server.Server at 0x14db7e650>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    },
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/var/folders/hx/nz98f65j615c4ygz7xt694700000gp/T/ipykernel_39626/2668854055.py:76: SettingWithCopyWarning: \n",
      "A value is trying to be set on a copy of a slice from a DataFrame.\n",
      "Try using .loc[row_indexer,col_indexer] = value instead\n",
      "\n",
      "See the caveats in the documentation: https://pandas.pydata.org/pandas-docs/stable/user_guide/indexing.html#returning-a-view-versus-a-copy\n",
      "  df_gemeente[\"statcode\"] = (\n",
      "/var/folders/hx/nz98f65j615c4ygz7xt694700000gp/T/ipykernel_39626/2668854055.py:76: SettingWithCopyWarning: \n",
      "A value is trying to be set on a copy of a slice from a DataFrame.\n",
      "Try using .loc[row_indexer,col_indexer] = value instead\n",
      "\n",
      "See the caveats in the documentation: https://pandas.pydata.org/pandas-docs/stable/user_guide/indexing.html#returning-a-view-versus-a-copy\n",
      "  df_gemeente[\"statcode\"] = (\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='d6025f97-e6b0-4fef-8e6c-b2d7cbe58a48'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='a2f80b6d-7e9f-43a2-b089-f7d8fe60858a'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='c3841041-05a9-436e-b4e5-f1d8ddabf22e'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='8cae7128-a581-4c83-b5b4-afff74af1da3'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='98d7425e-77b8-40fc-b68d-c9b3c39571e1'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='16cb40aa-20bd-4c1e-95ea-e91f4bac03bb'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='4924f4a4-6567-4f3f-8fec-03f86e6602cb'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='27310035-84b2-48b7-8ff2-b2390e6c7ed4'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='7ac29312-81d6-4711-b2ed-6533cbc40631'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='b946e565-c7fe-44c8-81fe-c169460430b9'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='9b1e1d87-edb2-4b37-9909-fc3256e337e7'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='24745116-ed66-4940-ab86-56cc6ed576f5'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='e89b7696-f1ba-4c1a-9163-df71dd32b795'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='dc62f2cb-f5cb-40fb-86da-28e522203c86'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='410dc7cc-b937-4aa7-9b4b-96dd49151f0b'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='222470f9-4255-4b2f-960a-404d22ef49bf'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='0b5f860a-5788-43e5-97b3-a2c5c715cc61'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='bfe9959f-cdf1-4c1d-8fcc-04efc4f86da0'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='cb356129-ef49-4f77-98ab-22f4a3a73435'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='c7d2a6fe-c10c-4ee7-8199-1e1b168b0600'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='b90ac208-8cda-44be-b9ad-16493e6dddb7'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='88bc12f6-e7e8-44bc-9642-e948527cd45d'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='d6966906-6966-470a-b058-85f1b0d5d872'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='aea72ed9-b8ea-4fad-ae1a-b7105bca0e22'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n",
      "WARNING:root:Dropping a patch because it contains a previously known reference (id='33d1e9db-97a1-4084-a64b-738df07a149f'). Most of the time this is harmless and usually a result of updating a model on one side of a communications channel while it was being removed on the other end.\n"
     ]
    }
   ],
   "source": [
    "import panel as pn\n",
    "import hvplot.pandas\n",
    "import requests\n",
    "from numpy import mean\n",
    "import pandas as pd\n",
    "import geopandas as gp\n",
    "import base64\n",
    "import io\n",
    "from cryptography.fernet import Fernet\n",
    "from cryptography.hazmat.primitives import hashes\n",
    "from cryptography.hazmat.primitives.kdf.pbkdf2 import PBKDF2HMAC\n",
    "from cryptography.hazmat.backends import default_backend\n",
    "from bokeh.models import GeoJSONDataSource, HoverTool, ColorBar\n",
    "from bokeh.palettes import brewer\n",
    "from bokeh.plotting import figure\n",
    "from bokeh.transform import linear_cmap\n",
    "\n",
    "def decrypt_file(password):\n",
    "    \"\"\"\n",
    "    Decrypt a given file using a provided password.\n",
    "    \n",
    "    Args:\n",
    "        file_name (str): Path to the encrypted file.\n",
    "        password (str): Password for decryption.\n",
    "        \n",
    "    Returns:\n",
    "        pd.DataFrame: Decrypted data as a pandas DataFrame.\n",
    "    \"\"\"\n",
    "    \n",
    "    url = \"http://javier.science/panel_sicss_results/data/eval_data_cleaned.tsv.crypt\"\n",
    "    response = requests.get(url)\n",
    "    file_data = response.content\n",
    "\n",
    "    # Extract the salt and encrypted data\n",
    "    salt, encrypted_data = file_data[:16], file_data[16:]\n",
    "\n",
    "    # Key derivation\n",
    "    kdf = PBKDF2HMAC(\n",
    "        algorithm=hashes.SHA256(),\n",
    "        length=32,\n",
    "        salt=salt,\n",
    "        iterations=100000,\n",
    "        backend=default_backend()\n",
    "    )\n",
    "    key = base64.urlsafe_b64encode(kdf.derive(password.encode()))\n",
    "    cipher_suite = Fernet(key)\n",
    "\n",
    "    # Decrypting the data\n",
    "    decrypted_data = cipher_suite.decrypt(encrypted_data)\n",
    "    return pd.read_csv(io.StringIO(decrypted_data.decode('utf-8')))\n",
    "\n",
    "\n",
    "def create_data(pass_):\n",
    "    \"\"\"\n",
    "    Create dataframes for visualization and analysis.\n",
    "    \n",
    "    Args:\n",
    "        pass_ (str): Password for decrypting the data file.\n",
    "        \n",
    "    Returns:\n",
    "        tuple: df (aggregated data) and df_gemeente (to be visualized).\n",
    "    \"\"\"\n",
    "    df = decrypt_file(pass_).drop_duplicates()\n",
    "    \n",
    "    # Filter for full population\n",
    "    df[\"Full population\"] = (\n",
    "        (df[\"Gender\"] == \"All\") &\n",
    "        (df[\"Age\"] == \"All\") &\n",
    "        (df[\"Previous children\"] == \"All\") &\n",
    "        (df[\"Background\"] == \"All\") &\n",
    "        (df[\"Education\"] == \"All\")\n",
    "    )\n",
    "    \n",
    "    # Data to be visualized\n",
    "    df_gemeente = df[df[\"Gemeente\"] != \"All\"]\n",
    "    df_gemeente[\"statcode\"] = (\n",
    "        \"GM\" + df_gemeente[\"Gemeente\"].astype(float).astype(int).astype(str).str.zfill(4)\n",
    "    )  # same as geopandas file\n",
    "    df_g = gp.read_file(\"http://javier.science/panel_sicss_results/data/nld.geojson\")\n",
    "    df_g[\"geometry\"] = df_g[\"geometry\"]\n",
    "    df_gemeente = pd.merge(df_g, df_gemeente)\n",
    "\n",
    "    # Aggregated data\n",
    "    df = df[df[\"Gemeente\"] == \"All\"]\n",
    "    \n",
    "    # Additional filtering\n",
    "    for var in {\"Gender\", \"Age\", \"Previous children\", \"Background\", \"Education\"}:\n",
    "        df_gemeente[f\"{var}_neg\"] = True\n",
    "        for var2 in {\"Gender\", \"Age\", \"Previous children\", \"Background\", \"Education\"} - {var}:\n",
    "            df_gemeente.loc[df_gemeente[var2] != \"All\", f\"{var}_neg\"] = False\n",
    "    df_gemeente[\"Full population_neg\"] = True\n",
    "\n",
    "    return df, df_gemeente\n",
    "\n",
    "\n",
    "def plots(df, df_gemeente):\n",
    "    \"\"\"\n",
    "    Create interactive plots using Panel and hvPlot.\n",
    "    \n",
    "    Args:\n",
    "        df (pd.DataFrame): Aggregated data.\n",
    "        df_gemeente (pd.DataFrame): Data to be visualized.\n",
    "        \n",
    "    Returns:\n",
    "        pn.layout.Row: Layout for visualization.\n",
    "    \"\"\"\n",
    "    # Define widgets for interactivity\n",
    "    group_select = pn.widgets.Select(\n",
    "        name='Grouping Variable',\n",
    "        options=df_gemeente[\"group_name\"].unique().tolist(),\n",
    "        value=\"3_blinds\"\n",
    "    )\n",
    "    group_var_select = pn.widgets.RadioBoxGroup(\n",
    "        name='Grouping Variable',\n",
    "        options=[\"Full population\", \"Gender\", \"Age\", \"Previous children\", \"Background\", \"Education\"],\n",
    "        value='Full population'\n",
    "    )\n",
    "    subgroup_select = pn.widgets.Select(\n",
    "        name='Choose subgroup',\n",
    "        options=df_gemeente[group_var_select.value].unique().tolist(),\n",
    "        value='Full population'\n",
    "    )\n",
    "    \n",
    "    # Update function for dynamic options in subgroup_select widget\n",
    "    def update_subgroup(event):\n",
    "        subgroup_select.options = df_gemeente[event.new].unique().tolist()\n",
    "        subgroup_select.value = subgroup_select.options[0] if subgroup_select.options else None\n",
    "\n",
    "    # Watch for changes in group_var_select value\n",
    "    group_var_select.param.watch(update_subgroup, 'value')\n",
    "\n",
    "    widgets = pn.Column(group_select, pn.Row(group_var_select, subgroup_select))\n",
    "    \n",
    "    # Define helper functions for plots\n",
    "\n",
    "    def bounds(score):\n",
    "        \"\"\"Define the boundaries for colorbar in choropleth plot.\"\"\"\n",
    "        if len(score) == 0:\n",
    "            return (0, 1)\n",
    "        low = min(score[score > 0])\n",
    "        high = max(score)\n",
    "        mean_ = mean(score)\n",
    "        range_ = min(mean_ - low, high - mean_)\n",
    "        return (mean_ - range_, mean_ + range_)\n",
    "    \n",
    "    def plot_ch(group, grouping_variable, selection):\n",
    "        \"\"\"\n",
    "        Create a choropleth plot for gemeenten based on the F1 score.\n",
    "        \n",
    "        Args:\n",
    "            group (str): Selected group from the widget.\n",
    "            grouping_variable (str): Selected grouping variable from the widget.\n",
    "            selection (str): Subgroup selection from the widget.\n",
    "            \n",
    "        Returns:\n",
    "            hvplot.plotting.core.Polygons: Choropleth plot.\n",
    "        \"\"\"\n",
    "        # Filter the data based on user input\n",
    "        df_gemeent1 = df_gemeente.loc[\n",
    "            (df_gemeente[\"group_name\"] == group) &\n",
    "            (df_gemeente[grouping_variable] == selection) &\n",
    "            (df_gemeente[f\"{grouping_variable}_neg\"] == True)\n",
    "        ]\n",
    "\n",
    "        # Determine the plot title\n",
    "        if (selection == \"All\") or (grouping_variable == \"Full population\"):\n",
    "            title = f\"Prediction score (F1) in the different gemeenten of\\ngroup '{group}' for the full population\"\n",
    "        else:\n",
    "            title = f\"Prediction score (F1) in the different gemeenten of\\ngroup '{group}' for {grouping_variable} == {selection}\"\n",
    "        \n",
    "        \n",
    "        # Convert the merged data into GeoJSONDataSource for Bokeh\n",
    "        geo_source = GeoJSONDataSource(geojson=df_gemeent1.to_json())\n",
    "        low, high = bounds(df_gemeent1[\"f1_score\"])\n",
    "        # Create a mapper for coloring the data points on the map\n",
    "        mapper = linear_cmap(field_name='f1_score', palette=brewer['RdYlBu'][8], low=low, high=high, nan_color=\"lightgray\")\n",
    "        \n",
    "\n",
    "        # Create the figure and add the map using patches\n",
    "        p = figure(title=title, tools='pan, wheel_zoom, reset, save')\n",
    "        p.patches('xs', 'ys', source=geo_source, fill_color=mapper, line_color='black', line_width=0.5, fill_alpha=1)\n",
    "        \n",
    "        # Add hover functionality\n",
    "        hover = HoverTool()\n",
    "        hover.tooltips = [(\"Region\", \"@statnaam\"), (\"Code\", \"@statcode\"), (\"F1 score\", \"@f1_score\")]\n",
    "        p.add_tools(hover)\n",
    "        \n",
    "        # Add the ColorBar\n",
    "        color_bar = ColorBar(color_mapper=mapper['transform'], width=8, location=(0,0))\n",
    "        p.add_layout(color_bar, 'right')\n",
    "\n",
    "\n",
    "        # Hide the axes\n",
    "        p.xaxis.visible = False\n",
    "        p.yaxis.visible = False\n",
    "        p.xgrid.visible = False\n",
    "        p.ygrid.visible = False\n",
    "        \n",
    "        return p\n",
    "        \n",
    "    def plot_s(group, grouping_variable):\n",
    "        \"\"\"\n",
    "        Create a scatter plot of Recall vs Precision.\n",
    "        \n",
    "        Args:\n",
    "            group (str): Selected group from the widget.\n",
    "            grouping_variable (str): Selected grouping variable from the widget.\n",
    "            \n",
    "        Returns:\n",
    "            hvplot.plotting.core.Scatter: Scatter plot.\n",
    "        \"\"\"\n",
    "        df_agg = df.copy()\n",
    "        tot_vars = {\"Gender\", \"Age\", \"Previous children\", \"Background\", \"Education\"} - {grouping_variable}\n",
    "\n",
    "        # Aggregate data based on selected grouping variable\n",
    "        for var in tot_vars:\n",
    "            df_agg = df_agg[df_agg[var] == \"All\"]\n",
    "\n",
    "        symbols = dict(zip(df[grouping_variable].unique(), [\"s\", \"^\", \"o\", \"d\", 'P', \"X\"]))\n",
    "\n",
    "        # Create scatter plot for all models excluding the selected group\n",
    "        sc = df_agg[df_agg[\"group_name\"] != group].hvplot.scatter(\n",
    "            y='precision',\n",
    "            x='recall',\n",
    "            by=grouping_variable,\n",
    "            hover_cols=[\"group_name\", \"Gender\", \"Age\", \"Previous children\", \"Background\", \"Education\"],\n",
    "            title=f\"Recall vs Precision for all models, grouped by {grouping_variable}\"\n",
    "        )\n",
    "\n",
    "        # Highlight the selected group in the scatter plot\n",
    "        sc_highlight = df_agg[df_agg[\"group_name\"] == group].hvplot.scatter(\n",
    "            y='precision',\n",
    "            x='recall',\n",
    "            color=\"k\",\n",
    "            marker=\"s\",\n",
    "            hover_cols=[\"group_name\", \"Gender\", \"Age\", \"Previous children\", \"Background\", \"Education\"],\n",
    "            legend=False\n",
    "        )\n",
    "\n",
    "        return sc * sc_highlight\n",
    "\n",
    "    \n",
    "    plot_ch_bound = pn.bind(plot_ch, group=group_select, grouping_variable=group_var_select, selection=subgroup_select)\n",
    "    plot_s_bound = pn.bind(plot_s, group=group_select, grouping_variable=group_var_select)\n",
    "    \n",
    "    layout = pn.Row(pn.Column(widgets, pn.Spacer(height=20), plot_s_bound), plot_ch_bound)\n",
    "    \n",
    "    return layout\n",
    "\n",
    "\n",
    "# Callback to execute when the password is submitted\n",
    "def submit_password(event):\n",
    "    \"\"\"\n",
    "    Callback function to handle password submission.\n",
    "    \n",
    "    Args:\n",
    "        event: The triggering event (button click in this case).\n",
    "    \"\"\"\n",
    "    password = pass_input.value\n",
    "    \n",
    "    # Switch to the Data View tab and show a loading message\n",
    "    tabs.active = 1\n",
    "    data_view.append(pn.pane.Markdown(\"Loading data\"))\n",
    "    \n",
    "    # Use the password to create the necessary data\n",
    "    df, df_gemeente = create_data(password)\n",
    "    \n",
    "    # Clear previous data views and display new data\n",
    "    data_view.clear()\n",
    "    data_view.append(plots(df, df_gemeente))\n",
    "\n",
    "    try:\n",
    "        # Get the entered password\n",
    "        password = pass_input.value\n",
    "        \n",
    "        # Switch to the Data View tab and show a loading message\n",
    "        tabs.active = 1\n",
    "        data_view.append(pn.pane.Markdown(\"Loading data\"))\n",
    "        \n",
    "        # Use the password to create the necessary data\n",
    "        df, df_gemeente = create_data(password)\n",
    "        \n",
    "        # Clear previous data views and display new data\n",
    "        data_view.clear()\n",
    "        data_view.append(plots(df, df_gemeente))\n",
    "        \n",
    "    except Exception as e:\n",
    "        # In case of any errors, switch back to the Stage 1 tab and display the error message\n",
    "        tabs.active = 0\n",
    "        error_message.object = f\"Error: {str(e)}\"\n",
    "\n",
    "\n",
    "# Display introductory information\n",
    "info = pn.pane.Markdown(\"\"\"\n",
    "# Welcome to the app.\n",
    "Visualization of SICSS data \n",
    "\"\"\", width=500)\n",
    "\n",
    "# Widget for password input\n",
    "pass_input = pn.widgets.PasswordInput(name='Enter the password to decode the data', placeholder='Password here')\n",
    "\n",
    "# Button to submit the password\n",
    "button = pn.widgets.Button(name='Submit', button_type='primary')\n",
    "button.on_click(submit_password)\n",
    "\n",
    "# Create an error message pane (initially empty)\n",
    "error_message = pn.pane.Markdown(\"\", width=300)\n",
    "\n",
    "# Define the layout for Stage 1\n",
    "stage1 = pn.Column(info, pass_input, button, error_message, align=\"end\")\n",
    "\n",
    "# Create the data view pane (initially empty)\n",
    "data_view = pn.Column(\n",
    "    pn.pane.Markdown(\"\")\n",
    ")\n",
    "\n",
    "# Tab layout to switch between Stage 1 and Data View\n",
    "tabs = pn.Tabs(\n",
    "    (\"Stage 1\", stage1),\n",
    "    (\"Data View\", data_view)\n",
    ")\n",
    "\n",
    "tabs.servable()\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "fbd2d51c-5461-43bc-b699-a7a5de9f383b",
   "metadata": {},
   "outputs": [
    {
     "ename": "NameError",
     "evalue": "name 'df' is not defined",
     "output_type": "error",
     "traceback": [
      "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
      "\u001b[0;31mNameError\u001b[0m                                 Traceback (most recent call last)",
      "Cell \u001b[0;32mIn[3], line 1\u001b[0m\n\u001b[0;32m----> 1\u001b[0m plots(\u001b[43mdf\u001b[49m, df_gemeente)\n",
      "\u001b[0;31mNameError\u001b[0m: name 'df' is not defined"
     ]
    }
   ],
   "source": [
    "plots(df, df_gemeente)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "33574e04-98fe-4bcb-a928-a64faa6f2e75",
   "metadata": {},
   "outputs": [],
   "source": [
    "John-Juicy4-Headfirst"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "794ad285-e32c-4a1d-b692-b058130af00a",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "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.11.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}