Lectures/L-Interactive_Visualization/01-Technology_FurtherReadings.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-09-30T20:08:17.653897Z",
     "start_time": "2020-09-30T20:08:17.647256Z"
    }
   },
   "outputs": [],
   "source": [
    "# from nbindex import floating\n",
    "# floating.tableofcontent()\n",
    "\n",
    "# If we uncomment these lines then it wiil load some code into this page that prevents bokeh to reveal the figure. \n",
    "#This the drawback of a platform that is meant for development."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<img src=\"https://matplotlib.org/mpl_examples/api/logo2.hires.png\" width=20%>\n",
    "\n",
    "**Matplotlib** is a Python 2D plotting library which produces publication quality figures in a variety of hardcopy formats across platforms. It creates and displays images as **pngs, jpgs** etc. and it is **not efficient**.\n",
    "\n",
    "Here is an output cell of a  sample image:"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "``` \n",
    "\"outputs\": [\n",
    "    {\n",
    "     \"data\": {\n",
    "      \"image/png\": \"iVBORw0KGgoAAAANSUhEUgAAAwEAAAFNCAYAAABYGmMrAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAADl0RVh\n",
    "0U29mdHdhcmUAbWF0cGxvdGxpYiB2ZXJzaW9uIDMuMC4yLCBodHRwOi8vbWF0cGxvdGxpYi5vcmcvOIA7rQAAIABJREFUeJzs3XecFdX9//HXBxBWAcGGDQOoqF\n",
    "gCAUSNbTXR2PGr8RdLItEk2I0xiSUmsSeamK+ab4qa2Hs3xpiCZTXYEBQbWBEVRUCauwLLLvv5/TFn4e7l3t2Zu3dvfT8fj91775QzZ87MnDln5pwZc3dERERER\n",
    "KR6dCt2BEREREREpLBUCRARERERqTKqBIiIiIiIVBl .....\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Pyviz.org \n",
    "\n",
    "This site collects a set of tools that are in some way related to each other and can be combined together.\n",
    "The colors show the similar technological basis\n",
    "\n",
    "<img src=\"https://rougier.github.io/python-visualization-landscape/landscape-colors.png\" width=70%>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Components of a web page\n",
    "\n",
    "<a href=\"https://www.1training.org/blog/html-css-javascript-web-development/\"><img src=\"https://www.10bestdesign.com/blog/content/images/2018/03/30.png\" width=60%>\n",
    "<img src=\"https://s3.eu-west-2.amazonaws.com/1training.org/wp-content/uploads/2017/10/18232806/6.png\" width=60%></a>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "\n",
    "### Bokeh\n",
    "\n",
    "is an *interactive visualization library* that targets modern web browsers for presentation. https://bokeh.pydata.org/en/latest/\n",
    "\n",
    "Let's see an example script:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-09-30T19:21:02.260005Z",
     "start_time": "2020-09-30T19:21:01.307623Z"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    <div class=\"bk-root\">\n",
       "        <a href=\"https://bokeh.org\" target=\"_blank\" class=\"bk-logo bk-logo-small bk-logo-notebook\"></a>\n",
       "        <span id=\"1001\">Loading BokehJS ...</span>\n",
       "    </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(root) {\n",
       "  function now() {\n",
       "    return new Date();\n",
       "  }\n",
       "\n",
       "  var force = true;\n",
       "\n",
       "  if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n",
       "    root._bokeh_onload_callbacks = [];\n",
       "    root._bokeh_is_loading = undefined;\n",
       "  }\n",
       "\n",
       "  var JS_MIME_TYPE = 'application/javascript';\n",
       "  var HTML_MIME_TYPE = 'text/html';\n",
       "  var EXEC_MIME_TYPE = 'application/vnd.bokehjs_exec.v0+json';\n",
       "  var CLASS_NAME = 'output_bokeh rendered_html';\n",
       "\n",
       "  /**\n",
       "   * Render data to the DOM node\n",
       "   */\n",
       "  function render(props, node) {\n",
       "    var script = document.createElement(\"script\");\n",
       "    node.appendChild(script);\n",
       "  }\n",
       "\n",
       "  /**\n",
       "   * Handle when an output is cleared or removed\n",
       "   */\n",
       "  function handleClearOutput(event, handle) {\n",
       "    var cell = handle.cell;\n",
       "\n",
       "    var id = cell.output_area._bokeh_element_id;\n",
       "    var server_id = cell.output_area._bokeh_server_id;\n",
       "    // Clean up Bokeh references\n",
       "    if (id != null && id in Bokeh.index) {\n",
       "      Bokeh.index[id].model.document.clear();\n",
       "      delete Bokeh.index[id];\n",
       "    }\n",
       "\n",
       "    if (server_id !== undefined) {\n",
       "      // Clean up Bokeh references\n",
       "      var cmd = \"from bokeh.io.state import curstate; print(curstate().uuid_to_server['\" + server_id + \"'].get_sessions()[0].document.roots[0]._id)\";\n",
       "      cell.notebook.kernel.execute(cmd, {\n",
       "        iopub: {\n",
       "          output: function(msg) {\n",
       "            var id = msg.content.text.trim();\n",
       "            if (id in Bokeh.index) {\n",
       "              Bokeh.index[id].model.document.clear();\n",
       "              delete Bokeh.index[id];\n",
       "            }\n",
       "          }\n",
       "        }\n",
       "      });\n",
       "      // Destroy server and session\n",
       "      var cmd = \"import bokeh.io.notebook as ion; ion.destroy_server('\" + server_id + \"')\";\n",
       "      cell.notebook.kernel.execute(cmd);\n",
       "    }\n",
       "  }\n",
       "\n",
       "  /**\n",
       "   * Handle when a new output is added\n",
       "   */\n",
       "  function handleAddOutput(event, handle) {\n",
       "    var output_area = handle.output_area;\n",
       "    var output = handle.output;\n",
       "\n",
       "    // limit handleAddOutput to display_data with EXEC_MIME_TYPE content only\n",
       "    if ((output.output_type != \"display_data\") || (!output.data.hasOwnProperty(EXEC_MIME_TYPE))) {\n",
       "      return\n",
       "    }\n",
       "\n",
       "    var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n",
       "\n",
       "    if (output.metadata[EXEC_MIME_TYPE][\"id\"] !== undefined) {\n",
       "      toinsert[toinsert.length - 1].firstChild.textContent = output.data[JS_MIME_TYPE];\n",
       "      // store reference to embed id on output_area\n",
       "      output_area._bokeh_element_id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n",
       "    }\n",
       "    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].firstChild.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",
       "  function register_renderer(events, OutputArea) {\n",
       "\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[toinsert.length - 1]);\n",
       "      element.append(toinsert);\n",
       "      return toinsert\n",
       "    }\n",
       "\n",
       "    /* Handle when an output is cleared or removed */\n",
       "    events.on('clear_output.CodeCell', handleClearOutput);\n",
       "    events.on('delete.Cell', handleClearOutput);\n",
       "\n",
       "    /* Handle when a new output is added */\n",
       "    events.on('output_added.OutputArea', handleAddOutput);\n",
       "\n",
       "    /**\n",
       "     * Register the mime type and append_mime function with output_area\n",
       "     */\n",
       "    OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n",
       "      /* Is output safe? */\n",
       "      safe: true,\n",
       "      /* Index of renderer in `output_area.display_order` */\n",
       "      index: 0\n",
       "    });\n",
       "  }\n",
       "\n",
       "  // register the mime type if in Jupyter Notebook environment and previously unregistered\n",
       "  if (root.Jupyter !== undefined) {\n",
       "    var events = require('base/js/events');\n",
       "    var OutputArea = require('notebook/js/outputarea').OutputArea;\n",
       "\n",
       "    if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n",
       "      register_renderer(events, OutputArea);\n",
       "    }\n",
       "  }\n",
       "\n",
       "  \n",
       "  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n",
       "    root._bokeh_timeout = Date.now() + 5000;\n",
       "    root._bokeh_failed_load = false;\n",
       "  }\n",
       "\n",
       "  var NB_LOAD_WARNING = {'data': {'text/html':\n",
       "     \"<div style='background-color: #fdd'>\\n\"+\n",
       "     \"<p>\\n\"+\n",
       "     \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n",
       "     \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n",
       "     \"</p>\\n\"+\n",
       "     \"<ul>\\n\"+\n",
       "     \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n",
       "     \"<li>use INLINE resources instead, as so:</li>\\n\"+\n",
       "     \"</ul>\\n\"+\n",
       "     \"<code>\\n\"+\n",
       "     \"from bokeh.resources import INLINE\\n\"+\n",
       "     \"output_notebook(resources=INLINE)\\n\"+\n",
       "     \"</code>\\n\"+\n",
       "     \"</div>\"}};\n",
       "\n",
       "  function display_loaded() {\n",
       "    var el = document.getElementById(\"1001\");\n",
       "    if (el != null) {\n",
       "      el.textContent = \"BokehJS is loading...\";\n",
       "    }\n",
       "    if (root.Bokeh !== undefined) {\n",
       "      if (el != null) {\n",
       "        el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n",
       "      }\n",
       "    } else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(display_loaded, 100)\n",
       "    }\n",
       "  }\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, callback) {\n",
       "    if (css_urls == null) css_urls = [];\n",
       "    if (js_urls == null) js_urls = [];\n",
       "\n",
       "    root._bokeh_onload_callbacks.push(callback);\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 == null || js_urls.length === 0) {\n",
       "      run_callbacks();\n",
       "      return null;\n",
       "    }\n",
       "    console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n",
       "    root._bokeh_is_loading = css_urls.length + js_urls.length;\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",
       "\n",
       "    function on_error() {\n",
       "      console.error(\"failed to load \" + url);\n",
       "    }\n",
       "\n",
       "    for (var i = 0; i < css_urls.length; i++) {\n",
       "      var url = css_urls[i];\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",
       "    }\n",
       "\n",
       "    for (var i = 0; i < js_urls.length; i++) {\n",
       "      var url = js_urls[i];\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",
       "  };var element = document.getElementById(\"1001\");\n",
       "  if (element == null) {\n",
       "    console.error(\"Bokeh: ERROR: autoload.js configured with elementid '1001' but no matching script tag was found. \")\n",
       "    return false;\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",
       "  \n",
       "  var js_urls = [\"https://cdn.pydata.org/bokeh/release/bokeh-1.4.0.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-widgets-1.4.0.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-tables-1.4.0.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-gl-1.4.0.min.js\"];\n",
       "  var css_urls = [];\n",
       "  \n",
       "\n",
       "  var inline_js = [\n",
       "    function(Bokeh) {\n",
       "      Bokeh.set_log_level(\"info\");\n",
       "    },\n",
       "    function(Bokeh) {\n",
       "    \n",
       "    \n",
       "    }\n",
       "  ];\n",
       "\n",
       "  function run_inline_js() {\n",
       "    \n",
       "    if (root.Bokeh !== undefined || force === true) {\n",
       "      \n",
       "    for (var i = 0; i < inline_js.length; i++) {\n",
       "      inline_js[i].call(root, root.Bokeh);\n",
       "    }\n",
       "    if (force === true) {\n",
       "        display_loaded();\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",
       "    } else if (force !== true) {\n",
       "      var cell = $(document.getElementById(\"1001\")).parents('.cell').data().cell;\n",
       "      cell.output_area.append_execute_result(NB_LOAD_WARNING)\n",
       "    }\n",
       "\n",
       "  }\n",
       "\n",
       "  if (root._bokeh_is_loading === 0) {\n",
       "    console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n",
       "    run_inline_js();\n",
       "  } else {\n",
       "    load_libs(css_urls, js_urls, function() {\n",
       "      console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n",
       "      run_inline_js();\n",
       "    });\n",
       "  }\n",
       "}(window));"
      ],
      "application/vnd.bokehjs_load.v0+json": "\n(function(root) {\n  function now() {\n    return new Date();\n  }\n\n  var force = true;\n\n  if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n    root._bokeh_onload_callbacks = [];\n    root._bokeh_is_loading = undefined;\n  }\n\n  \n\n  \n  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n    root._bokeh_timeout = Date.now() + 5000;\n    root._bokeh_failed_load = false;\n  }\n\n  var NB_LOAD_WARNING = {'data': {'text/html':\n     \"<div style='background-color: #fdd'>\\n\"+\n     \"<p>\\n\"+\n     \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n     \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n     \"</p>\\n\"+\n     \"<ul>\\n\"+\n     \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n     \"<li>use INLINE resources instead, as so:</li>\\n\"+\n     \"</ul>\\n\"+\n     \"<code>\\n\"+\n     \"from bokeh.resources import INLINE\\n\"+\n     \"output_notebook(resources=INLINE)\\n\"+\n     \"</code>\\n\"+\n     \"</div>\"}};\n\n  function display_loaded() {\n    var el = document.getElementById(\"1001\");\n    if (el != null) {\n      el.textContent = \"BokehJS is loading...\";\n    }\n    if (root.Bokeh !== undefined) {\n      if (el != null) {\n        el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n      }\n    } else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(display_loaded, 100)\n    }\n  }\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, callback) {\n    if (css_urls == null) css_urls = [];\n    if (js_urls == null) js_urls = [];\n\n    root._bokeh_onload_callbacks.push(callback);\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 == null || js_urls.length === 0) {\n      run_callbacks();\n      return null;\n    }\n    console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n    root._bokeh_is_loading = css_urls.length + js_urls.length;\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\n    function on_error() {\n      console.error(\"failed to load \" + url);\n    }\n\n    for (var i = 0; i < css_urls.length; i++) {\n      var url = css_urls[i];\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    }\n\n    for (var i = 0; i < js_urls.length; i++) {\n      var url = js_urls[i];\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  };var element = document.getElementById(\"1001\");\n  if (element == null) {\n    console.error(\"Bokeh: ERROR: autoload.js configured with elementid '1001' but no matching script tag was found. \")\n    return false;\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  \n  var js_urls = [\"https://cdn.pydata.org/bokeh/release/bokeh-1.4.0.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-widgets-1.4.0.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-tables-1.4.0.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-gl-1.4.0.min.js\"];\n  var css_urls = [];\n  \n\n  var inline_js = [\n    function(Bokeh) {\n      Bokeh.set_log_level(\"info\");\n    },\n    function(Bokeh) {\n    \n    \n    }\n  ];\n\n  function run_inline_js() {\n    \n    if (root.Bokeh !== undefined || force === true) {\n      \n    for (var i = 0; i < inline_js.length; i++) {\n      inline_js[i].call(root, root.Bokeh);\n    }\n    if (force === true) {\n        display_loaded();\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    } else if (force !== true) {\n      var cell = $(document.getElementById(\"1001\")).parents('.cell').data().cell;\n      cell.output_area.append_execute_result(NB_LOAD_WARNING)\n    }\n\n  }\n\n  if (root._bokeh_is_loading === 0) {\n    console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n    run_inline_js();\n  } else {\n    load_libs(css_urls, js_urls, function() {\n      console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n      run_inline_js();\n    });\n  }\n}(window));"
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "  <div class=\"bk-root\" id=\"eb6cc285-6325-47cf-b882-117fd0d27b09\" data-root-id=\"1002\"></div>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "(function(root) {\n",
       "  function embed_document(root) {\n",
       "    \n",
       "  var docs_json = {\"6e7c259b-d527-4cad-8b4c-15d4bfedbdb8\":{\"roots\":{\"references\":[{\"attributes\":{\"background_fill_color\":{\"value\":\"#440154\"},\"below\":[{\"id\":\"1013\",\"type\":\"LinearAxis\"}],\"center\":[{\"id\":\"1017\",\"type\":\"Grid\"},{\"id\":\"1022\",\"type\":\"Grid\"}],\"left\":[{\"id\":\"1018\",\"type\":\"LinearAxis\"}],\"match_aspect\":true,\"renderers\":[{\"id\":\"1034\",\"type\":\"GlyphRenderer\"},{\"id\":\"1039\",\"type\":\"GlyphRenderer\"}],\"title\":{\"id\":\"1003\",\"type\":\"Title\"},\"toolbar\":{\"id\":\"1025\",\"type\":\"Toolbar\"},\"x_range\":{\"id\":\"1005\",\"type\":\"DataRange1d\"},\"x_scale\":{\"id\":\"1009\",\"type\":\"LinearScale\"},\"y_range\":{\"id\":\"1007\",\"type\":\"DataRange1d\"},\"y_scale\":{\"id\":\"1011\",\"type\":\"LinearScale\"}},\"id\":\"1002\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{\"text\":\"Hexbin for 500 points\"},\"id\":\"1003\",\"type\":\"Title\"},{\"attributes\":{},\"id\":\"1049\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"data_source\":{\"id\":\"1029\",\"type\":\"ColumnDataSource\"},\"glyph\":{\"id\":\"1031\",\"type\":\"HexTile\"},\"hover_glyph\":{\"id\":\"1033\",\"type\":\"HexTile\"},\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"1032\",\"type\":\"HexTile\"},\"selection_glyph\":null,\"view\":{\"id\":\"1035\",\"type\":\"CDSView\"}},\"id\":\"1034\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"callback\":null},\"id\":\"1005\",\"type\":\"DataRange1d\"},{\"attributes\":{},\"id\":\"1050\",\"type\":\"Selection\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.8},\"fill_color\":{\"value\":\"pink\"},\"line_alpha\":{\"value\":0.8},\"line_color\":{\"value\":\"pink\"},\"q\":{\"field\":\"q\"},\"r\":{\"field\":\"r\"},\"size\":0.5},\"id\":\"1033\",\"type\":\"HexTile\"},{\"attributes\":{\"callback\":null},\"id\":\"1007\",\"type\":\"DataRange1d\"},{\"attributes\":{},\"id\":\"1051\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"callback\":null,\"data\":{\"c\":[1,1,1,1,1,3,2,1,3,3,1,1,1,2,1,3,3,1,1,1,1,1,2,5,2,6,9,2,3,4,1,5,4,7,12,5,5,6,5,1,1,2,2,3,8,7,7,8,4,5,1,1,1,5,4,9,11,16,13,11,7,4,1,1,2,6,4,10,14,10,7,6,3,3,2,1,3,1,2,6,10,3,9,8,7,1,3,2,1,1,2,2,4,7,2,11,6,8,1,2,2,7,6,7,1,9,2,3,2,1,3,4,3,7,2,1,2,1,3,1,2,1,1,1,2,3,1,1,1],\"q\":[-5,-5,-5,-3,-3,-3,-2,-2,-2,-2,-2,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,2,2,2,2,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,5,5,5,5,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,7,8,8,8,8,8,8,8,8,8,9,9,9,9,10,10,10,10,11,11,12],\"r\":[-1,1,5,-4,1,2,-1,1,2,3,4,-4,-3,-2,-1,0,1,2,3,4,-7,-5,-4,-3,-2,-1,0,1,2,3,-7,-5,-4,-3,-2,-1,0,1,2,4,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,4,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,2,-10,-8,-7,-6,-5,-4,-3,-2,-1,0,-8,-7,-6,-5,-4,-3,-1,0,2,-6,-5,-4,-3,-11,-8,-7,-6,-10,-6,-12]},\"selected\":{\"id\":\"1048\",\"type\":\"Selection\"},\"selection_policy\":{\"id\":\"1049\",\"type\":\"UnionRenderers\"}},\"id\":\"1029\",\"type\":\"ColumnDataSource\"},{\"attributes\":{},\"id\":\"1011\",\"type\":\"LinearScale\"},{\"attributes\":{\"formatter\":{\"id\":\"1045\",\"type\":\"BasicTickFormatter\"},\"ticker\":{\"id\":\"1014\",\"type\":\"BasicTicker\"}},\"id\":\"1013\",\"type\":\"LinearAxis\"},{\"attributes\":{},\"id\":\"1014\",\"type\":\"BasicTicker\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"#1f77b4\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"#1f77b4\"},\"q\":{\"field\":\"q\"},\"r\":{\"field\":\"r\"},\"size\":0.5},\"id\":\"1032\",\"type\":\"HexTile\"},{\"attributes\":{\"ticker\":{\"id\":\"1014\",\"type\":\"BasicTicker\"},\"visible\":false},\"id\":\"1017\",\"type\":\"Grid\"},{\"attributes\":{\"fill_color\":{\"field\":\"c\",\"transform\":{\"id\":\"1028\",\"type\":\"LinearColorMapper\"}},\"q\":{\"field\":\"q\"},\"r\":{\"field\":\"r\"},\"size\":0.5},\"id\":\"1031\",\"type\":\"HexTile\"},{\"attributes\":{\"formatter\":{\"id\":\"1047\",\"type\":\"BasicTickFormatter\"},\"ticker\":{\"id\":\"1019\",\"type\":\"BasicTicker\"}},\"id\":\"1018\",\"type\":\"LinearAxis\"},{\"attributes\":{\"callback\":null,\"point_policy\":\"follow_mouse\",\"renderers\":[{\"id\":\"1034\",\"type\":\"GlyphRenderer\"}],\"tooltips\":[[\"count\",\"@c\"],[\"(q,r)\",\"(@q, @r)\"]]},\"id\":\"1041\",\"type\":\"HoverTool\"},{\"attributes\":{},\"id\":\"1019\",\"type\":\"BasicTicker\"},{\"attributes\":{\"source\":{\"id\":\"1029\",\"type\":\"ColumnDataSource\"}},\"id\":\"1035\",\"type\":\"CDSView\"},{\"attributes\":{\"dimension\":1,\"ticker\":{\"id\":\"1019\",\"type\":\"BasicTicker\"},\"visible\":false},\"id\":\"1022\",\"type\":\"Grid\"},{\"attributes\":{\"fill_color\":{\"value\":\"white\"},\"line_color\":{\"value\":\"white\"},\"size\":{\"units\":\"screen\",\"value\":1},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"1037\",\"type\":\"Circle\"},{\"attributes\":{\"callback\":null,\"data\":{\"x\":{\"__ndarray__\":\"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\",\"dtype\":\"float64\",\"shape\":[500]},\"y\":{\"__ndarray__\":\"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\",\"dtype\":\"float64\",\"shape\":[500]}},\"selected\":{\"id\":\"1050\",\"type\":\"Selection\"},\"selection_policy\":{\"id\":\"1051\",\"type\":\"UnionRenderers\"}},\"id\":\"1036\",\"type\":\"ColumnDataSource\"},{\"attributes\":{},\"id\":\"1024\",\"type\":\"ResetTool\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_inspect\":\"auto\",\"active_multi\":null,\"active_scroll\":\"auto\",\"active_tap\":\"auto\",\"tools\":[{\"id\":\"1023\",\"type\":\"WheelZoomTool\"},{\"id\":\"1024\",\"type\":\"ResetTool\"},{\"id\":\"1041\",\"type\":\"HoverTool\"}]},\"id\":\"1025\",\"type\":\"Toolbar\"},{\"attributes\":{},\"id\":\"1023\",\"type\":\"WheelZoomTool\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"#1f77b4\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"#1f77b4\"},\"size\":{\"units\":\"screen\",\"value\":1},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"1038\",\"type\":\"Circle\"},{\"attributes\":{\"high\":16,\"low\":0,\"palette\":[\"#440154\",\"#440255\",\"#440357\",\"#450558\",\"#45065A\",\"#45085B\",\"#46095C\",\"#460B5E\",\"#460C5F\",\"#460E61\",\"#470F62\",\"#471163\",\"#471265\",\"#471466\",\"#471567\",\"#471669\",\"#47186A\",\"#48196B\",\"#481A6C\",\"#481C6E\",\"#481D6F\",\"#481E70\",\"#482071\",\"#482172\",\"#482273\",\"#482374\",\"#472575\",\"#472676\",\"#472777\",\"#472878\",\"#472A79\",\"#472B7A\",\"#472C7B\",\"#462D7C\",\"#462F7C\",\"#46307D\",\"#46317E\",\"#45327F\",\"#45347F\",\"#453580\",\"#453681\",\"#443781\",\"#443982\",\"#433A83\",\"#433B83\",\"#433C84\",\"#423D84\",\"#423E85\",\"#424085\",\"#414186\",\"#414286\",\"#404387\",\"#404487\",\"#3F4587\",\"#3F4788\",\"#3E4888\",\"#3E4989\",\"#3D4A89\",\"#3D4B89\",\"#3D4C89\",\"#3C4D8A\",\"#3C4E8A\",\"#3B508A\",\"#3B518A\",\"#3A528B\",\"#3A538B\",\"#39548B\",\"#39558B\",\"#38568B\",\"#38578C\",\"#37588C\",\"#37598C\",\"#365A8C\",\"#365B8C\",\"#355C8C\",\"#355D8C\",\"#345E8D\",\"#345F8D\",\"#33608D\",\"#33618D\",\"#32628D\",\"#32638D\",\"#31648D\",\"#31658D\",\"#31668D\",\"#30678D\",\"#30688D\",\"#2F698D\",\"#2F6A8D\",\"#2E6B8E\",\"#2E6C8E\",\"#2E6D8E\",\"#2D6E8E\",\"#2D6F8E\",\"#2C708E\",\"#2C718E\",\"#2C728E\",\"#2B738E\",\"#2B748E\",\"#2A758E\",\"#2A768E\",\"#2A778E\",\"#29788E\",\"#29798E\",\"#287A8E\",\"#287A8E\",\"#287B8E\",\"#277C8E\",\"#277D8E\",\"#277E8E\",\"#267F8E\",\"#26808E\",\"#26818E\",\"#25828E\",\"#25838D\",\"#24848D\",\"#24858D\",\"#24868D\",\"#23878D\",\"#23888D\",\"#23898D\",\"#22898D\",\"#228A8D\",\"#228B8D\",\"#218C8D\",\"#218D8C\",\"#218E8C\",\"#208F8C\",\"#20908C\",\"#20918C\",\"#1F928C\",\"#1F938B\",\"#1F948B\",\"#1F958B\",\"#1F968B\",\"#1E978A\",\"#1E988A\",\"#1E998A\",\"#1E998A\",\"#1E9A89\",\"#1E9B89\",\"#1E9C89\",\"#1E9D88\",\"#1E9E88\",\"#1E9F88\",\"#1EA087\",\"#1FA187\",\"#1FA286\",\"#1FA386\",\"#20A485\",\"#20A585\",\"#21A685\",\"#21A784\",\"#22A784\",\"#23A883\",\"#23A982\",\"#24AA82\",\"#25AB81\",\"#26AC81\",\"#27AD80\",\"#28AE7F\",\"#29AF7F\",\"#2AB07E\",\"#2BB17D\",\"#2CB17D\",\"#2EB27C\",\"#2FB37B\",\"#30B47A\",\"#32B57A\",\"#33B679\",\"#35B778\",\"#36B877\",\"#38B976\",\"#39B976\",\"#3BBA75\",\"#3DBB74\",\"#3EBC73\",\"#40BD72\",\"#42BE71\",\"#44BE70\",\"#45BF6F\",\"#47C06E\",\"#49C16D\",\"#4BC26C\",\"#4DC26B\",\"#4FC369\",\"#51C468\",\"#53C567\",\"#55C666\",\"#57C665\",\"#59C764\",\"#5BC862\",\"#5EC961\",\"#60C960\",\"#62CA5F\",\"#64CB5D\",\"#67CC5C\",\"#69CC5B\",\"#6BCD59\",\"#6DCE58\",\"#70CE56\",\"#72CF55\",\"#74D054\",\"#77D052\",\"#79D151\",\"#7CD24F\",\"#7ED24E\",\"#81D34C\",\"#83D34B\",\"#86D449\",\"#88D547\",\"#8BD546\",\"#8DD644\",\"#90D643\",\"#92D741\",\"#95D73F\",\"#97D83E\",\"#9AD83C\",\"#9DD93A\",\"#9FD938\",\"#A2DA37\",\"#A5DA35\",\"#A7DB33\",\"#AADB32\",\"#ADDC30\",\"#AFDC2E\",\"#B2DD2C\",\"#B5DD2B\",\"#B7DD29\",\"#BADE27\",\"#BDDE26\",\"#BFDF24\",\"#C2DF22\",\"#C5DF21\",\"#C7E01F\",\"#CAE01E\",\"#CDE01D\",\"#CFE11C\",\"#D2E11B\",\"#D4E11A\",\"#D7E219\",\"#DAE218\",\"#DCE218\",\"#DFE318\",\"#E1E318\",\"#E4E318\",\"#E7E419\",\"#E9E419\",\"#ECE41A\",\"#EEE51B\",\"#F1E51C\",\"#F3E51E\",\"#F6E61F\",\"#F8E621\",\"#FAE622\",\"#FDE724\"]},\"id\":\"1028\",\"type\":\"LinearColorMapper\"},{\"attributes\":{\"data_source\":{\"id\":\"1036\",\"type\":\"ColumnDataSource\"},\"glyph\":{\"id\":\"1037\",\"type\":\"Circle\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"1038\",\"type\":\"Circle\"},\"selection_glyph\":null,\"view\":{\"id\":\"1040\",\"type\":\"CDSView\"}},\"id\":\"1039\",\"type\":\"GlyphRenderer\"},{\"attributes\":{},\"id\":\"1047\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"source\":{\"id\":\"1036\",\"type\":\"ColumnDataSource\"}},\"id\":\"1040\",\"type\":\"CDSView\"},{\"attributes\":{},\"id\":\"1045\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{},\"id\":\"1009\",\"type\":\"LinearScale\"},{\"attributes\":{},\"id\":\"1048\",\"type\":\"Selection\"}],\"root_ids\":[\"1002\"]},\"title\":\"Bokeh Application\",\"version\":\"1.4.0\"}};\n",
       "  var render_items = [{\"docid\":\"6e7c259b-d527-4cad-8b4c-15d4bfedbdb8\",\"roots\":{\"1002\":\"eb6cc285-6325-47cf-b882-117fd0d27b09\"}}];\n",
       "  root.Bokeh.embed.embed_items_notebook(docs_json, render_items);\n",
       "\n",
       "  }\n",
       "  if (root.Bokeh !== undefined) {\n",
       "    embed_document(root);\n",
       "  } else {\n",
       "    var attempts = 0;\n",
       "    var timer = setInterval(function(root) {\n",
       "      if (root.Bokeh !== undefined) {\n",
       "        clearInterval(timer);\n",
       "        embed_document(root);\n",
       "      } else {\n",
       "        attempts++;\n",
       "        if (attempts > 100) {\n",
       "          clearInterval(timer);\n",
       "          console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n",
       "        }\n",
       "      }\n",
       "    }, 10, root)\n",
       "  }\n",
       "})(window);"
      ],
      "application/vnd.bokehjs_exec.v0+json": ""
     },
     "metadata": {
      "application/vnd.bokehjs_exec.v0+json": {
       "id": "1002"
      }
     },
     "output_type": "display_data"
    }
   ],
   "source": [
    "import numpy as np\n",
    "\n",
    "## Load bokeh modules\n",
    "\n",
    "# functions for creating outputs\n",
    "from bokeh.io import output_file, show, output_notebook\n",
    "\n",
    "# figure creating library\n",
    "from bokeh.plotting import figure\n",
    "\n",
    "# Interactivity tools\n",
    "from bokeh.models import HoverTool\n",
    "\n",
    "## create output either in this notebooks output cell or in a separate html file\n",
    "## either way then result is going to be some html + javascript code \n",
    "# output_file(\"hexbin.html\")\n",
    "output_notebook()\n",
    "\n",
    "# generate data\n",
    "n = 500\n",
    "x = 2 + 2*np.random.standard_normal(n)\n",
    "y = 2 + 2*np.random.standard_normal(n)\n",
    "\n",
    "# create an empty figure with some non default settings\n",
    "p = figure(title=\"Hexbin for 500 points\", match_aspect=True,\n",
    "           tools=\"wheel_zoom,reset\", background_fill_color='#440154')\n",
    "\n",
    "# add grid to the figure\n",
    "p.grid.visible = False\n",
    "\n",
    "# create a hexbin, which is a 2d pseudocolor histogram on a hexagonal lattice\n",
    "r, bins = p.hexbin(x, y, size=0.5, hover_color=\"pink\", hover_alpha=0.8)\n",
    "\n",
    "# add small circles that show each datapoint\n",
    "p.circle(x, y, color=\"white\", size=1)\n",
    "\n",
    "# add interactivity tools: mouse hovering over the data\n",
    "p.add_tools(HoverTool(\n",
    "    tooltips=[(\"count\", \"@c\"), (\"(q,r)\", \"(@q, @r)\")],\n",
    "    mode=\"mouse\", point_policy=\"follow_mouse\", renderers=[r]\n",
    "))\n",
    "\n",
    "\n",
    "# create output\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Let's have a look at the output cells\n",
    "\n",
    "* importing the library introduces new Js functions\n",
    "\n",
    "```\n",
    " \"outputs\": [\n",
    "    {\n",
    "     \"data\": {\n",
    "      \"application/javascript\": [\n",
    "       \"\\n\",\n",
    "       \"(function(root) {\\n\",\n",
    "       \"  function now() {\\n\",\n",
    "       \"    return new Date();\\n\",\n",
    "       \"  }\\n\",\n",
    "       \"\\n\",\n",
    "       \"  var force = true;\\n\",\n",
    "       \"\\n\",\n",
    "```\n",
    "\n",
    "* The outputs are javascript codes, that contain html and css as well:\n",
    "\n",
    "```\n",
    "\"outputs\": [\n",
    "    {\n",
    "     \"data\": {\n",
    "      \"application/javascript\": [\n",
    "       \"// Ugly hack - see HoloViews #2574 for more information\\n\",\n",
    "       \"if (!(document.getElementById('1734')) && !(document.getElementById('_anim_img1734'))) {\\n\",\n",
    "       \"  console.log(\\\"Creating DOM nodes dynamically for assumed nbconvert export. To generate clean HTML output set HV_D\n",
    "OC_HTML as an environment variable.\\\")\\n\",\n",
    "       \"  var htmlObject = document.createElement('div');\\n\",\n",
    "       \"  htmlObject.innerHTML =\n",
    "       \"  <div class=\\\"bk-root\\\" id=\\\"d70afa8e-dad5-447b-86dd-dc6647948442\\\" data-root-id=\\\"1734\\\"></div>\\n\",\n",
    "       \"`;\\n\",\n",
    "       \"  var scriptTags = document.getElementsByTagName('script');\\n\",.....\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Dashboards\n",
    "\n",
    "Once we have figures, and interactivity tools (buttons, sliders etc) then we can build a dashboard."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Dashboard creating tools\n",
    "\n",
    "* Plotly and R-shiny has it's own framework for this\n",
    "* It is possible to build a dashboard/application with Bokeh, but there are higher level tools for that"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Higher level tools for building dashboards"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* [Panel](https://panel.pyviz.org/)\n",
    "<img src=\"https://panel.pyviz.org/_static/logo_stacked.png\" width=13%>\n",
    "\n",
    "Panel is an open-source Python library that lets you create custom interactive web apps and dashboards by connecting user-defined widgets to plots, images, tables, or text."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* [Voila](https://github.com/voila-dashboards/voila)\n",
    "<img src=\"https://raw.githubusercontent.com/voila-dashboards/voila/master/docs/source/voila-logo.svg\" width=\"25%\"/>\n",
    "\n",
    "Voilà turns Jupyter notebooks into standalone web applications.\n",
    "\n",
    "Unlike the usual HTML-converted notebooks, each user connecting to the Voilà tornado application gets a dedicated Jupyter kernel which can execute the callbacks to changes in Jupyter interactive widgets.\n",
    "\n",
    "    By default, Voilà disallows execute requests from the front-end, preventing execution of arbitrary code.\n",
    "    By default, Voilà runs with the strip_source option, which strips out the input cells from the rendered notebook."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### [Plotly](https://plotly.com/)\n",
    "\n",
    "<img src=\"https://images.prismic.io/plotly-marketing-website/db073c29-5cee-4f13-9adf-46dd136f45f4_ezgif.com-video-to-gif+%2811%29.gif?auto=compress,format\" />\n",
    "\n",
    "* Both in python and R\n",
    "* Example notebooks for plotly: \n",
    "   * [Plotly with Jupyterlab Viewer](03a-Plotly_labviewer_example.ipynb) (you need to switch to Jupyterlab)\n",
    "   * [Plotly dash server](03b-Plotly_dash_server_example.ipynb)\n",
    "   \n",
    "### Reading:\n",
    "* [Dashboard with plotly](https://medium.com/swlh/how-to-create-interactive-dashboards-in-python-4960f8f6b41b)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### [R shiny](https://shiny.rstudio.com/) \n",
    "\n",
    "<img src=\"https://shiny.rstudio.com/gallery/images/screenshots/superzip-example.png\">\n",
    "\n",
    "* for R language only, but python code/libraries can be imported as well\n",
    "* Examples: [Covid statistics](https://kooplex-veo.elte.hu/notebook/report-pkrisz5-covid19dashen---/report/), [Covid vaccines](https://kooplex-veo.elte.hu/shiny/pkrisz5/covidvac09/--/) and [Covid modelling](https://kooplex-veo.elte.hu/shiny/pkrisz5/covidshinymodel1/--/)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Javascript notebook - Observable\n",
    "\n",
    "If you are into javascript then try it\n",
    "\n",
    "https://observablehq.com/\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Jupyter books\n",
    "\n",
    "https://executablebooks.org/en/latest/\n",
    "\n",
    "Not a notebook but a book"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Anvil\n",
    "[*Build a Dashboard with Python*](https://anvil.works/learn/examples/dashboard)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Further Readings\n",
    "* [How do we know when a visualization is good?](https://medium.com/multiple-views-visualization-research-explained/how-do-we-know-when-a-visualization-is-good-c894b5194b62)\n",
    "\n",
    "* [Shiny vs dash a side by side comparison](https://www.rkingdc.com/blog/2019/3/6/shiny-vs-dash-a-side-by-side-comparison)\n",
    "\n",
    "* [5 Visualisations to Level Up Your Data Story](https://towardsdatascience.com/5-visualisations-to-level-up-your-data-story-e131759c2f41)\n",
    "\n",
    "* [Walkthrough: Mapping Basics with bokeh and GeoPandas in Python](https://towardsdatascience.com/walkthrough-mapping-basics-with-bokeh-and-geopandas-in-python-43f40aa5b7e9)\n",
    "\n",
    "* [Interactive Geospatial Data Visualization with Geoviews in Python](https://towardsdatascience.com/interactive-geospatial-data-visualization-with-geoviews-in-python-7d5335c8efd1)\n",
    "\n",
    "* [Plotly dashboards](https://towardsdatascience.com/plotly-dashboards-in-python-28a3bb83702c)\n",
    "* [Setting up Streamlit for development](https://towardsdatascience.com/how-to-create-stunning-web-apps-for-your-data-science-projects-c7791102134e)\n",
    "*[The Easiest Way to Make Beautiful Interactive Visualizations With Pandas](https://towardsdatascience.com/the-easiest-way-to-make-beautiful-interactive-visualizations-with-pandas-cdf6d5e91757)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.8"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}