Cool Tools/Jupter-DataTables.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "5b33d853",
   "metadata": {},
   "source": [
    "# Daily-Dose-of-Data-Science\n",
    "\n",
    "[Daily Dose of Data Science](https://avichawla.substack.com) is a publication on Substack that brings together intriguing frameworks, libraries, technologies, and tips that make the life cycle of a Data Science project effortless. \n",
    "\n",
    "Author: Avi Chawla\n",
    "\n",
    "[Medium](https://medium.com/@avi_chawla) | [LinkedIn](https://www.linkedin.com/in/avi-chawla/)\n",
    "\n",
    "# Stop Previewing Raw DataFrames. Instead, Use DataTables.\n",
    "\n",
    "Post Link: [Substack](https://avichawla.substack.com/p/stop-previewing-raw-dataframes-instead)\n",
    "\n",
    "LinkedIn Post: [LinkedIn]()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "e280f77b",
   "metadata": {
    "collapsed": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Requirement already satisfied: jupyter-datatables in /Users/avi/anaconda3/lib/python3.9/site-packages (0.3.9)\n",
      "Requirement already satisfied: pandas>=0.23.0 in /Users/avi/anaconda3/lib/python3.9/site-packages (from jupyter-datatables) (1.5.0)\n",
      "Requirement already satisfied: jupyter-require>=0.3.0 in /Users/avi/anaconda3/lib/python3.9/site-packages (from jupyter-datatables) (0.6.1)\n",
      "Requirement already satisfied: ipykernel in /Users/avi/anaconda3/lib/python3.9/site-packages (from jupyter-datatables) (6.9.1)\n",
      "Requirement already satisfied: scipy in /Users/avi/anaconda3/lib/python3.9/site-packages (from jupyter-datatables) (1.7.3)\n",
      "Requirement already satisfied: ipython in /Users/avi/anaconda3/lib/python3.9/site-packages (from jupyter-datatables) (8.2.0)\n",
      "Requirement already satisfied: jupyter-contrib-nbextensions in /Users/avi/anaconda3/lib/python3.9/site-packages (from jupyter-require>=0.3.0->jupyter-datatables) (0.5.1)\n",
      "Requirement already satisfied: csscompressor in /Users/avi/anaconda3/lib/python3.9/site-packages (from jupyter-require>=0.3.0->jupyter-datatables) (0.9.5)\n",
      "Requirement already satisfied: daiquiri in /Users/avi/anaconda3/lib/python3.9/site-packages (from jupyter-require>=0.3.0->jupyter-datatables) (3.2.1)\n",
      "Requirement already satisfied: jupyter-nbutils in /Users/avi/anaconda3/lib/python3.9/site-packages (from jupyter-require>=0.3.0->jupyter-datatables) (0.1.3)\n",
      "Requirement already satisfied: numpy>=1.20.3 in /Users/avi/anaconda3/lib/python3.9/site-packages (from pandas>=0.23.0->jupyter-datatables) (1.21.6)\n",
      "Requirement already satisfied: python-dateutil>=2.8.1 in /Users/avi/anaconda3/lib/python3.9/site-packages (from pandas>=0.23.0->jupyter-datatables) (2.8.2)\n",
      "Requirement already satisfied: pytz>=2020.1 in /Users/avi/anaconda3/lib/python3.9/site-packages (from pandas>=0.23.0->jupyter-datatables) (2021.3)\n",
      "Requirement already satisfied: six>=1.5 in /Users/avi/anaconda3/lib/python3.9/site-packages (from python-dateutil>=2.8.1->pandas>=0.23.0->jupyter-datatables) (1.16.0)\n",
      "Requirement already satisfied: python-json-logger in /Users/avi/anaconda3/lib/python3.9/site-packages (from daiquiri->jupyter-require>=0.3.0->jupyter-datatables) (2.0.4)\n",
      "Requirement already satisfied: appnope in /Users/avi/anaconda3/lib/python3.9/site-packages (from ipykernel->jupyter-datatables) (0.1.2)\n",
      "Requirement already satisfied: nest-asyncio in /Users/avi/anaconda3/lib/python3.9/site-packages (from ipykernel->jupyter-datatables) (1.5.5)\n",
      "Requirement already satisfied: debugpy<2.0,>=1.0.0 in /Users/avi/anaconda3/lib/python3.9/site-packages (from ipykernel->jupyter-datatables) (1.5.1)\n",
      "Requirement already satisfied: tornado<7.0,>=4.2 in /Users/avi/anaconda3/lib/python3.9/site-packages (from ipykernel->jupyter-datatables) (6.1)\n",
      "Requirement already satisfied: traitlets<6.0,>=5.1.0 in /Users/avi/anaconda3/lib/python3.9/site-packages (from ipykernel->jupyter-datatables) (5.1.1)\n",
      "Requirement already satisfied: jupyter-client<8.0 in /Users/avi/anaconda3/lib/python3.9/site-packages (from ipykernel->jupyter-datatables) (6.1.12)\n",
      "Requirement already satisfied: matplotlib-inline<0.2.0,>=0.1.0 in /Users/avi/anaconda3/lib/python3.9/site-packages (from ipykernel->jupyter-datatables) (0.1.2)\n",
      "Requirement already satisfied: pygments>=2.4.0 in /Users/avi/anaconda3/lib/python3.9/site-packages (from ipython->jupyter-datatables) (2.11.2)\n",
      "Requirement already satisfied: prompt-toolkit!=3.0.0,!=3.0.1,<3.1.0,>=2.0.0 in /Users/avi/anaconda3/lib/python3.9/site-packages (from ipython->jupyter-datatables) (3.0.20)\n",
      "Requirement already satisfied: setuptools>=18.5 in /Users/avi/anaconda3/lib/python3.9/site-packages (from ipython->jupyter-datatables) (61.2.0)\n",
      "Requirement already satisfied: stack-data in /Users/avi/anaconda3/lib/python3.9/site-packages (from ipython->jupyter-datatables) (0.2.0)\n",
      "Requirement already satisfied: pexpect>4.3 in /Users/avi/anaconda3/lib/python3.9/site-packages (from ipython->jupyter-datatables) (4.8.0)\n",
      "Requirement already satisfied: pickleshare in /Users/avi/anaconda3/lib/python3.9/site-packages (from ipython->jupyter-datatables) (0.7.5)\n",
      "Requirement already satisfied: decorator in /Users/avi/anaconda3/lib/python3.9/site-packages (from ipython->jupyter-datatables) (5.1.1)\n",
      "Requirement already satisfied: backcall in /Users/avi/anaconda3/lib/python3.9/site-packages (from ipython->jupyter-datatables) (0.2.0)\n",
      "Requirement already satisfied: jedi>=0.16 in /Users/avi/anaconda3/lib/python3.9/site-packages (from ipython->jupyter-datatables) (0.18.1)\n",
      "Requirement already satisfied: parso<0.9.0,>=0.8.0 in /Users/avi/anaconda3/lib/python3.9/site-packages (from jedi>=0.16->ipython->jupyter-datatables) (0.8.3)\n",
      "Requirement already satisfied: pyzmq>=13 in /Users/avi/anaconda3/lib/python3.9/site-packages (from jupyter-client<8.0->ipykernel->jupyter-datatables) (22.3.0)\n",
      "Requirement already satisfied: jupyter-core>=4.6.0 in /Users/avi/anaconda3/lib/python3.9/site-packages (from jupyter-client<8.0->ipykernel->jupyter-datatables) (4.9.2)\n",
      "Requirement already satisfied: ptyprocess>=0.5 in /Users/avi/anaconda3/lib/python3.9/site-packages (from pexpect>4.3->ipython->jupyter-datatables) (0.7.0)\n",
      "Requirement already satisfied: wcwidth in /Users/avi/anaconda3/lib/python3.9/site-packages (from prompt-toolkit!=3.0.0,!=3.0.1,<3.1.0,>=2.0.0->ipython->jupyter-datatables) (0.2.5)\n",
      "Requirement already satisfied: lxml in /Users/avi/anaconda3/lib/python3.9/site-packages (from jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (4.8.0)\n",
      "Requirement already satisfied: jupyter-latex-envs>=1.3.8 in /Users/avi/anaconda3/lib/python3.9/site-packages (from jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (1.4.6)\n",
      "Requirement already satisfied: jupyter-nbextensions-configurator>=0.4.0 in /Users/avi/anaconda3/lib/python3.9/site-packages (from jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (0.5.0)\n",
      "Requirement already satisfied: ipython-genutils in /Users/avi/anaconda3/lib/python3.9/site-packages (from jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (0.2.0)\n",
      "Requirement already satisfied: notebook>=4.0 in /Users/avi/anaconda3/lib/python3.9/site-packages (from jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (6.4.8)\n",
      "Requirement already satisfied: jupyter-highlight-selected-word>=0.1.1 in /Users/avi/anaconda3/lib/python3.9/site-packages (from jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (0.2.0)\n",
      "Requirement already satisfied: nbconvert>=4.2 in /Users/avi/anaconda3/lib/python3.9/site-packages (from jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (7.2.3)\n",
      "Requirement already satisfied: jupyter-contrib-core>=0.3.3 in /Users/avi/anaconda3/lib/python3.9/site-packages (from jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (0.4.0)\n",
      "Requirement already satisfied: pyyaml in /Users/avi/anaconda3/lib/python3.9/site-packages (from jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (5.4.1)\n",
      "Requirement already satisfied: beautifulsoup4 in /Users/avi/anaconda3/lib/python3.9/site-packages (from nbconvert>=4.2->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (4.11.1)\n",
      "Requirement already satisfied: mistune<3,>=2.0.3 in /Users/avi/anaconda3/lib/python3.9/site-packages (from nbconvert>=4.2->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (2.0.4)\n",
      "Requirement already satisfied: pandocfilters>=1.4.1 in /Users/avi/anaconda3/lib/python3.9/site-packages (from nbconvert>=4.2->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (1.5.0)\n",
      "Requirement already satisfied: importlib-metadata>=3.6 in /Users/avi/anaconda3/lib/python3.9/site-packages (from nbconvert>=4.2->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (4.11.3)\n",
      "Requirement already satisfied: markupsafe>=2.0 in /Users/avi/anaconda3/lib/python3.9/site-packages (from nbconvert>=4.2->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (2.0.1)\n",
      "Requirement already satisfied: defusedxml in /Users/avi/anaconda3/lib/python3.9/site-packages (from nbconvert>=4.2->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (0.7.1)\n",
      "Requirement already satisfied: bleach in /Users/avi/anaconda3/lib/python3.9/site-packages (from nbconvert>=4.2->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (4.1.0)\n",
      "Requirement already satisfied: packaging in /Users/avi/anaconda3/lib/python3.9/site-packages (from nbconvert>=4.2->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (21.3)\n"
     ]
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Requirement already satisfied: jinja2>=3.0 in /Users/avi/anaconda3/lib/python3.9/site-packages (from nbconvert>=4.2->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (3.0.0)\n",
      "Requirement already satisfied: jupyterlab-pygments in /Users/avi/anaconda3/lib/python3.9/site-packages (from nbconvert>=4.2->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (0.1.2)\n",
      "Requirement already satisfied: tinycss2 in /Users/avi/anaconda3/lib/python3.9/site-packages (from nbconvert>=4.2->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (1.2.1)\n",
      "Requirement already satisfied: nbformat>=5.1 in /Users/avi/anaconda3/lib/python3.9/site-packages (from nbconvert>=4.2->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (5.3.0)\n",
      "Requirement already satisfied: nbclient>=0.5.0 in /Users/avi/anaconda3/lib/python3.9/site-packages (from nbconvert>=4.2->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (0.5.13)\n",
      "Requirement already satisfied: zipp>=0.5 in /Users/avi/anaconda3/lib/python3.9/site-packages (from importlib-metadata>=3.6->nbconvert>=4.2->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (3.7.0)\n",
      "Requirement already satisfied: jsonschema>=2.6 in /Users/avi/anaconda3/lib/python3.9/site-packages (from nbformat>=5.1->nbconvert>=4.2->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (3.2.0)\n",
      "Requirement already satisfied: fastjsonschema in /Users/avi/anaconda3/lib/python3.9/site-packages (from nbformat>=5.1->nbconvert>=4.2->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (2.15.1)\n",
      "Requirement already satisfied: pyrsistent>=0.14.0 in /Users/avi/anaconda3/lib/python3.9/site-packages (from jsonschema>=2.6->nbformat>=5.1->nbconvert>=4.2->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (0.18.0)\n",
      "Requirement already satisfied: attrs>=17.4.0 in /Users/avi/anaconda3/lib/python3.9/site-packages (from jsonschema>=2.6->nbformat>=5.1->nbconvert>=4.2->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (21.4.0)\n",
      "Requirement already satisfied: Send2Trash>=1.8.0 in /Users/avi/anaconda3/lib/python3.9/site-packages (from notebook>=4.0->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (1.8.0)\n",
      "Requirement already satisfied: prometheus-client in /Users/avi/anaconda3/lib/python3.9/site-packages (from notebook>=4.0->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (0.13.1)\n",
      "Requirement already satisfied: argon2-cffi in /Users/avi/anaconda3/lib/python3.9/site-packages (from notebook>=4.0->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (21.3.0)\n",
      "Requirement already satisfied: terminado>=0.8.3 in /Users/avi/anaconda3/lib/python3.9/site-packages (from notebook>=4.0->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (0.13.1)\n",
      "Requirement already satisfied: argon2-cffi-bindings in /Users/avi/anaconda3/lib/python3.9/site-packages (from argon2-cffi->notebook>=4.0->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (21.2.0)\n",
      "Requirement already satisfied: cffi>=1.0.1 in /Users/avi/anaconda3/lib/python3.9/site-packages (from argon2-cffi-bindings->argon2-cffi->notebook>=4.0->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (1.15.0)\n",
      "Requirement already satisfied: pycparser in /Users/avi/anaconda3/lib/python3.9/site-packages (from cffi>=1.0.1->argon2-cffi-bindings->argon2-cffi->notebook>=4.0->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (2.21)\n",
      "Requirement already satisfied: soupsieve>1.2 in /Users/avi/anaconda3/lib/python3.9/site-packages (from beautifulsoup4->nbconvert>=4.2->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (2.3.1)\n",
      "Requirement already satisfied: webencodings in /Users/avi/anaconda3/lib/python3.9/site-packages (from bleach->nbconvert>=4.2->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (0.5.1)\n",
      "Requirement already satisfied: pyparsing!=3.0.5,>=2.0.2 in /Users/avi/anaconda3/lib/python3.9/site-packages (from packaging->nbconvert>=4.2->jupyter-contrib-nbextensions->jupyter-require>=0.3.0->jupyter-datatables) (3.0.4)\n",
      "Requirement already satisfied: asttokens in /Users/avi/anaconda3/lib/python3.9/site-packages (from stack-data->ipython->jupyter-datatables) (2.0.5)\n",
      "Requirement already satisfied: executing in /Users/avi/anaconda3/lib/python3.9/site-packages (from stack-data->ipython->jupyter-datatables) (0.8.3)\n",
      "Requirement already satisfied: pure-eval in /Users/avi/anaconda3/lib/python3.9/site-packages (from stack-data->ipython->jupyter-datatables) (0.2.2)\n"
     ]
    }
   ],
   "source": [
    "!pip install jupyter-datatables"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "988e3b50",
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "from jupyter_datatables import init_datatables_mode"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "edda4cf7",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "{ \n",
       "        'use strict';\n",
       "        \n",
       "        const href = \"https://cdn.datatables.net/v/dt/dt-1.10.18/af-2.3.3/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.css\";\n",
       "        const attributes = {'id': 'datatables.min.css'} || {};\n",
       "\n",
       "        if ( !$(`link[href*=\"${href}\"]`).length ) {\n",
       "            let link = document.createElement(\"link\");\n",
       "\n",
       "            link.rel = \"stylesheet\";\n",
       "            link.type = \"text/css\";\n",
       "            try {\n",
       "                link.href = requirejs.toUrl(href, 'css');\n",
       "            } catch (error) {\n",
       "                link.href = href;\n",
       "            }\n",
       "            \n",
       "            Object.entries(attributes)\n",
       "                .forEach( ([attr, val]) => $(link).attr(attr, val) );\n",
       "            \n",
       "            document.head.appendChild(link);\n",
       "        }\n",
       "     }"
      ],
      "text/plain": [
       "<JupyterRequire.display.SafeScript object>"
      ]
     },
     "metadata": {
      "finalized": true
     },
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "{ \n",
       "        'use strict'\n",
       "        \n",
       "        const style = `.dt-button.is-disabled{background-color:#fff;border-color:#dbdbdb;box-shadow:none;opacity:.5;cursor:not-allowed;pointer-events:none}.dt-chart-toolbar{text-align:left}.dt-chart-settings-container{background-color:#fff;border-bottom-left-radius:6px;border-bottom-right-radius:6px;border-top:2px solid #dbdbdb;box-shadow:0 8px 8px rgba(10,10,10,.1);font-size:.875rem;position:absolute;z-index:20}.dt-chart-settings{font-family:BlinkMacSystemFont,-apple-system,\"Segoe UI\",Roboto,Oxygen,Ubuntu,Cantarell,\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:1.10rem}.dt-chart-menu-label:first-child{margin-top:5px;margin-left:5px;font-size:.85em}table.dataTable{border-collapse:separate !important;border-spacing:0;clear:both;table-layout:auto !important}table.dataTable thead th,table.dataTable thead td{padding:10px 18px;border-bottom:thin solid #ddd}table.dataTable td.column-data-preview{padding:11px 7px}.dataTables_scrollBody{z-index:auto}.dataTables_scrollBody thead:not(.data-preview){visibility:collapse}.dataTables_wrapper.no-footer .dataTables_scrollBody{padding-bottom:20px;border-bottom:0}.dataTables_wrapper.no-footer div.dataTables_scrollBody>table{border-top:thin solid #ddd;border-bottom:thin solid #ddd}.dataTables_wrapper input{display:inline-block;padding:.375rem .75rem;height:calc(2.75rem + 5px);line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:thin solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.dataTables_wrapper label{margin-right:0 !important;margin-bottom:11px;box-sizing:border-box;white-space:nowrap}.dataTables_wrapper select{display:inline-block;padding:.375rem 2.75rem .375rem 1.75rem;height:calc(2.75rem + 5px);line-height:1.5;vertical-align:middle;background:#fff url(\"data:image/svg+xml;charset=utf8,%3Csvgxmlns='http://www.w3.org/2000/svg'viewBox='0045'%3E%3Cpathfill='%23343a40'd='M20L02h4zm05L03h4z'/%3E%3C/svg%3E\") no-repeat right .75rem center;background-size:auto 11px;border:thin solid #ced4da;border-radius:.25rem;-webkit-appearance:none;-moz-appearance:none}.dataTables_wrapper select.dtype{padding:0 1.75rem;font-size:9px;height:calc(1.25rem + 5px);background:#ffdd57;color:rgba(0,0,0,.7);border:0;border-radius:.25rem;text-transform:uppercase}`;\n",
       "        const attributes = {'id': 'jupyter-datatables-css'} || {};\n",
       "        \n",
       "        let id = attributes.id;\n",
       "        let elem_exists = id ? $(`style#${id}`).length > 0 : false;\n",
       "        \n",
       "        let e = elem_exists ? document.querySelector(`style#${id}`)\n",
       "                            : document.createElement(\"style\");\n",
       "        \n",
       "        $(e).text(`${style}`).attr('type', 'text/css');\n",
       "        \n",
       "        Object.entries(attributes)\n",
       "            .forEach( ([attr, val]) => $(e).attr(attr, val) );\n",
       "\n",
       "        if (!elem_exists) document.head.appendChild(e);\n",
       "     }"
      ],
      "text/plain": [
       "<JupyterRequire.display.SafeScript object>"
      ]
     },
     "metadata": {
      "finalized": true
     },
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "{ \n",
       "        'use strict';\n",
       "    \n",
       "        const script = `define('dt-config', ['underscore', 'moment'], function (_, moment) {\n",
       "\n",
       "  let mapDType = (dtypes, target) => _.object(_.zip(dtypes, new Array(dtypes.length).fill(target)))\n",
       "\n",
       "  $.fn.dataTable.defaults.dateDisplayFormat = 'YYYYMMDD'\n",
       "  $.fn.dataTable.defaults.formatDate = (t, format) => moment(t, format || $.fn.dataTable.defaults.dateDisplayFormat)\n",
       "\n",
       "  $.fn.dataTable.defaults.dTypeMap = {\n",
       "    ...mapDType(['int8', 'int16', 'int32', 'int64', 'float8', 'float16', 'float32', 'float64'], 'num'),\n",
       "    ...mapDType(['datetime8[ns]', 'datetime16[ns]', 'datetime32[ns]', 'datetime64[ns]'], 'date'),\n",
       "    ...mapDType(['timedelta8[ns]', 'timedelta16[ns]', 'timedelta32[ns]', 'timedelta64[ns]'], 'string'), // TODO: Custom type \\`timedelta\\`\n",
       "    ...mapDType(['object', 'string'], 'string'),\n",
       "    ...mapDType(['bool'], 'boolean'),\n",
       "    ...mapDType(['default'], 'num')\n",
       "  }\n",
       "\n",
       "  $.fn.dataTable.defaults.chartMap = {\n",
       "    boolean: ['CategoricalBar', 'Histogram'],\n",
       "    date: ['CategoricalBar', 'Histogram'],\n",
       "    num: ['Histogram', 'CategoricalBar', 'Bar', 'Line'],\n",
       "    string: ['CategoricalBar'],\n",
       "\n",
       "    undefined: ['Bar']\n",
       "  }\n",
       "\n",
       "  return $.fn.dataTable.defaults\n",
       "})\n",
       "`;\n",
       "        const attributes = {'id': 'dt-config-js'} || {};\n",
       "        \n",
       "        let id = attributes.id;\n",
       "        let elem_exists = id ? $(`script#${id}`).length > 0 : false;\n",
       "        \n",
       "        let e = elem_exists ? document.querySelector(`script#${id}`)\n",
       "                            : document.createElement(\"script\");\n",
       "        \n",
       "        $(e).text(`${script}`).attr('type', 'text/javascript');\n",
       "        \n",
       "        Object.entries(attributes)\n",
       "            .forEach( ([attr, val]) => $(e).attr(attr, val) );\n",
       "\n",
       "        if (!elem_exists) document.head.appendChild(e);\n",
       "     }"
      ],
      "text/plain": [
       "<JupyterRequire.display.SafeScript object>"
      ]
     },
     "metadata": {
      "finalized": true
     },
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "{ \n",
       "        'use strict';\n",
       "    \n",
       "        const script = `/**\n",
       " * Jupyter DataTables\n",
       " *\n",
       " * @module\n",
       " * @summary     Jupyter DataTables\n",
       " * @description Jupyter interactive pandas DataFrame representation leveraging pandas, DataTables and ChartJS.\n",
       " * @file        components.js\n",
       " * @author      Marek Cermak\n",
       " * @contact     macermak@redhat.com\n",
       " * @copyright   Copyright 2019 Marek Cermak <macermak@redhat.com>\n",
       " *\n",
       " * This source file is free software, available under the following license:\n",
       " *   MIT license\n",
       " *\n",
       " * This source file is distributed in the hope that it will be useful, but\n",
       " * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY\n",
       " * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.\n",
       " *\n",
       " * For details please refer to: https://github.com/CermakM/jupyter-datatables\n",
       " */\n",
       "\n",
       "define('dt-components', ['underscore'], function (_) {\n",
       "\n",
       "  _.templateSettings = {\n",
       "    escape: /\\{\\{%-([\\s\\S]+?)%\\}\\}/g,\n",
       "    evaluate: /\\{\\{%([\\s\\S]+?)%\\}\\}/g,\n",
       "    interpolate: /\\{\\{(.+?)\\}\\}/g\n",
       "  }\n",
       "\n",
       "\n",
       "  class DTContainer extends HTMLDivElement {\n",
       "    constructor() {\n",
       "      super()\n",
       "\n",
       "      this.attachShadow({ mode: 'open' })\n",
       "\n",
       "      // Bulma CSS\n",
       "      const bulmaStyle = document.createElement('style')\n",
       "      bulmaStyle.textContent = '@import url(https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css);'\n",
       "\n",
       "      this.shadowRoot.appendChild(bulmaStyle)\n",
       "\n",
       "      // Jupyter DataTables CSS\n",
       "      $(this.shadowRoot).append($('style#jupyter-datatables-css').clone())\n",
       "\n",
       "      // classes\n",
       "      this.classList.add('dt-container')\n",
       "    }\n",
       "\n",
       "    connectedCallback() {\n",
       "      // FontAwesome icons\n",
       "      const fas = document.querySelector('link[href*=\"fontawesome\"]')\n",
       "\n",
       "      if (fas) {\n",
       "        this.shadowRoot.appendChild(fas.cloneNode())\n",
       "      }\n",
       "    }\n",
       "\n",
       "    append(e) {\n",
       "      this.shadowRoot.append(e)\n",
       "    }\n",
       "\n",
       "    appendChild(node) {\n",
       "      this.shadowRoot.appendChild(node)\n",
       "    }\n",
       "  }\n",
       "\n",
       "\n",
       "  class DTChartList extends HTMLUListElement {\n",
       "    constructor() {\n",
       "      super()\n",
       "\n",
       "      for (const chartName in $.fn.dataTable.defaults.graphObjects) {\n",
       "        const li = document.createElement('li')\n",
       "        const a = document.createElement('a')\n",
       "\n",
       "        a.setAttribute('role', 'button')\n",
       "        a.setAttribute('aria-disabled', false)\n",
       "        a.setAttribute('aria-pressed', false)\n",
       "\n",
       "        a.setAttribute('data-chart_name', chartName)\n",
       "        a.setAttribute('data-label', 'button-chart-type')\n",
       "\n",
       "        a.style = 'text-transform: capitalize'\n",
       "        a.textContent = \\`\\${chartName} chart\\`\n",
       "\n",
       "        a.classList.add('dt-button')\n",
       "        a.classList.add('dt-chart-type')\n",
       "\n",
       "        li.appendChild(a)\n",
       "\n",
       "        this.appendChild(li)\n",
       "      }\n",
       "\n",
       "      this.classList.add('menu-list')\n",
       "      this.classList.add('dt-chart-list')\n",
       "    }\n",
       "  }\n",
       "\n",
       "  customElements.define('dt-container', DTContainer, { extends: 'div' })\n",
       "  customElements.define('dt-chart-list', DTChartList, { extends: 'ul' })\n",
       "\n",
       "\n",
       "  /* Templates */\n",
       "\n",
       "  const DTSettingsButtonComponentTemplate = _.template(\\`\n",
       "    <div class=\"button is-small dt-chart-settings-button\">\n",
       "        <figure class=\"bd-link-figure\">\n",
       "            <span class=\"icon\">\n",
       "                <i class=\"fas fa-ellipsis-v\"></i>\n",
       "            </span>\n",
       "\n",
       "        </figure>\n",
       "    </div>\n",
       "  \\`)\n",
       "\n",
       "  const DTSettingsComponentTemplate = _.template(\\`\n",
       "    <div class=\"menu dt-chart-settings\">\n",
       "        <p class=\"menu-label dt-chart-menu-label\">Charts</p>\n",
       "        <ul class=\"menu-list\">\n",
       "            <li>\n",
       "                <a>Kind</a>\n",
       "                <ul is=\"dt-chart-list\"></ul>\n",
       "            </li>\n",
       "        </ul>\n",
       "    </div>\n",
       "  \\`)\n",
       "\n",
       "  let createElementFromTemplate = function (template, context) {\n",
       "    let tmp = document.implementation.createHTMLDocument()\n",
       "    tmp.body.innerHTML = template(context)\n",
       "\n",
       "    return tmp.body.children[0]\n",
       "  }\n",
       "\n",
       "\n",
       "  return {\n",
       "    createElementFromTemplate: createElementFromTemplate,\n",
       "\n",
       "    DTChartList: DTChartList,\n",
       "    DTContainer: DTContainer,\n",
       "\n",
       "    templates: {\n",
       "      DTSettingsButtonComponentTemplate: DTSettingsButtonComponentTemplate,\n",
       "      DTSettingsComponentTemplate: DTSettingsComponentTemplate,\n",
       "    }\n",
       "  }\n",
       "})\n",
       "`;\n",
       "        const attributes = {'id': 'dt-components-js'} || {};\n",
       "        \n",
       "        let id = attributes.id;\n",
       "        let elem_exists = id ? $(`script#${id}`).length > 0 : false;\n",
       "        \n",
       "        let e = elem_exists ? document.querySelector(`script#${id}`)\n",
       "                            : document.createElement(\"script\");\n",
       "        \n",
       "        $(e).text(`${script}`).attr('type', 'text/javascript');\n",
       "        \n",
       "        Object.entries(attributes)\n",
       "            .forEach( ([attr, val]) => $(e).attr(attr, val) );\n",
       "\n",
       "        if (!elem_exists) document.head.appendChild(e);\n",
       "     }"
      ],
      "text/plain": [
       "<JupyterRequire.display.SafeScript object>"
      ]
     },
     "metadata": {
      "finalized": true
     },
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "{ \n",
       "        'use strict';\n",
       "    \n",
       "        const script = `/**\n",
       " * Jupyter DataTables\n",
       " *\n",
       " * @module\n",
       " * @summary     Jupyter DataTables\n",
       " * @description Jupyter interactive pandas DataFrame representation leveraging pandas, DataTables and ChartJS.\n",
       " * @file        graph-objects.js\n",
       " * @author      Marek Cermak\n",
       " * @contact     macermak@redhat.com\n",
       " * @copyright   Copyright 2019 Marek Cermak <macermak@redhat.com>\n",
       " *\n",
       " * This source file is free software, available under the following license:\n",
       " *   MIT license\n",
       " *\n",
       " * This source file is distributed in the hope that it will be useful, but\n",
       " * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY\n",
       " * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.\n",
       " *\n",
       " * For details please refer to: https://github.com/CermakM/jupyter-datatables\n",
       " */\n",
       "\n",
       "define('dt-graph-objects', ['moment', 'chartjs'], function (moment, chartjs) {\n",
       "  const d3 = Object.assign({}, require('d3'), require('d3-array')) // extend the d3 with d3-array\n",
       "\n",
       "  Chart.defaults.scale.gridLines.display = false\n",
       "\n",
       "  const layout = Chart.defaults.global.layout\n",
       "\n",
       "  layout.width = '167.5px'\n",
       "  layout.margin = 'auto'\n",
       "  layout.padding = { left: 2, right: 2, top: 5, bottom: 5 }\n",
       "\n",
       "  let Line = function (data, index, dtype) {\n",
       "    this.name = 'Line'\n",
       "\n",
       "    if (_.isUndefined(index)) {\n",
       "      index = [{\n",
       "        data: d3.range(0, data.length),\n",
       "        dtype: 'num',\n",
       "        level: 0\n",
       "      }]\n",
       "    }\n",
       "\n",
       "    index = index[0] // TODO: Handle multi-index\n",
       "\n",
       "    let labels = index.data\n",
       "\n",
       "    if (index.dtype === 'date') {\n",
       "      labels = labels.map(d => moment(d))\n",
       "    }\n",
       "\n",
       "    console.debug('Line plot data: ', data, 'labels: ', labels)\n",
       "\n",
       "    let canvas = $('<canvas>')\n",
       "      .attr('width', layout.width)\n",
       "      .css('margin', layout.margin)\n",
       "\n",
       "    let ctx = canvas.get(0).getContext('2d')\n",
       "\n",
       "    let chart = new Chart(ctx, {\n",
       "      type: 'line',\n",
       "      data: {\n",
       "        labels: labels,\n",
       "        datasets: [{\n",
       "          data: data,\n",
       "          backgroundColor: 'rgb(255, 99, 132, 0.6)',\n",
       "          borderColor: 'rgb(255, 99, 132)',\n",
       "          borderWidth: 1\n",
       "        }]\n",
       "      },\n",
       "      options: {\n",
       "        legend: {\n",
       "          display: false\n",
       "        },\n",
       "        scales: {\n",
       "          xAxes: [{\n",
       "            ...(index.dtype === 'date' ? { type: 'time' } : {}),\n",
       "            display: false\n",
       "          }],\n",
       "          yAxes: [{\n",
       "            display: false,\n",
       "            ticks: {\n",
       "              beginAtZero: true\n",
       "            }\n",
       "          }]\n",
       "        },\n",
       "        responsive: false\n",
       "      }\n",
       "    })\n",
       "\n",
       "    return chart\n",
       "  }\n",
       "\n",
       "  let Scatter = function (data, index, dtype) {\n",
       "    this.name = 'Scatter'\n",
       "\n",
       "    if (_.isUndefined(index)) {\n",
       "      index = [{\n",
       "        data: d3.range(0, data.length),\n",
       "        dtype: 'num',\n",
       "        level: 0\n",
       "      }]\n",
       "    }\n",
       "\n",
       "    index = index[0] // TODO: Handle multi-index\n",
       "\n",
       "    data = data.map((d, i) => {\n",
       "      return {\n",
       "        x: index.data[i],\n",
       "        y: d\n",
       "      }\n",
       "    })\n",
       "\n",
       "    console.debug('Scatter plot data: ', data)\n",
       "\n",
       "    let canvas = $('<canvas>')\n",
       "      .attr('width', layout.width)\n",
       "      .css('margin', layout.margin)\n",
       "\n",
       "    let ctx = canvas.get(0).getContext('2d')\n",
       "\n",
       "    let chart = new Chart(ctx, {\n",
       "      type: 'scatter',\n",
       "      data: {\n",
       "        datasets: [{\n",
       "          data: data,\n",
       "          backgroundColor: 'rgb(255, 99, 132, 0.6)',\n",
       "          borderColor: 'rgb(255, 99, 132)',\n",
       "          borderWidth: 1\n",
       "        }]\n",
       "      },\n",
       "      options: {\n",
       "        legend: {\n",
       "          display: false\n",
       "        },\n",
       "        scales: {\n",
       "          xAxes: [{\n",
       "            ...(index.dtype === 'date' ? { type: 'time' } : {}),\n",
       "            display: false\n",
       "          }],\n",
       "          yAxes: [{\n",
       "            display: false,\n",
       "            ticks: {\n",
       "              beginAtZero: true\n",
       "            }\n",
       "          }]\n",
       "        },\n",
       "        responsive: false\n",
       "      }\n",
       "    })\n",
       "\n",
       "    return chart\n",
       "  }\n",
       "\n",
       "  let Bar = function (data, index, dtype) {\n",
       "    this.name = 'Bar'\n",
       "\n",
       "    if (_.isUndefined(index)) {\n",
       "      index = [{\n",
       "        data: d3.range(0, data.length),\n",
       "        dtype: 'num',\n",
       "        level: 0\n",
       "      }]\n",
       "    }\n",
       "\n",
       "    index = index[0] // TODO: Handle multi-index\n",
       "\n",
       "    let labels = index.data\n",
       "\n",
       "    if (index.dtype === 'date') {\n",
       "      labels = labels.map(d => $.fn.dataTable.defaults.formatDate(d))\n",
       "    }\n",
       "\n",
       "    console.debug('Bar plot data: ', data, 'labels: ', labels)\n",
       "\n",
       "    let canvas = $('<canvas>')\n",
       "      .attr('width', layout.width)\n",
       "      .css('margin', layout.margin)\n",
       "\n",
       "    let ctx = canvas.get(0).getContext('2d')\n",
       "\n",
       "    let chart = new Chart(ctx, {\n",
       "      type: 'bar',\n",
       "      data: {\n",
       "        labels: labels,\n",
       "        datasets: [{\n",
       "          data: data,\n",
       "          backgroundColor: 'rgb(255, 99, 132)',\n",
       "          borderColor: 'rgb(255, 99, 132)',\n",
       "          borderWidth: 1\n",
       "        }]\n",
       "      },\n",
       "      options: {\n",
       "        legend: {\n",
       "          display: false\n",
       "        },\n",
       "        scales: {\n",
       "          xAxes: [{\n",
       "            ...(index.dtype === 'date' ? { type: 'time' } : {}),\n",
       "            display: false\n",
       "          }],\n",
       "          yAxes: [{\n",
       "            display: false,\n",
       "            ticks: {\n",
       "              beginAtZero: true\n",
       "            }\n",
       "          }]\n",
       "        },\n",
       "        responsive: false\n",
       "      }\n",
       "    })\n",
       "\n",
       "    return chart\n",
       "  }\n",
       "\n",
       "  let CategoricalBar = function (data, index, dtype) {\n",
       "    this.name = 'CategoricalBar'\n",
       "\n",
       "    const grouped = d3.nest()\n",
       "      .key(d => d)\n",
       "      .rollup(d => d.length)\n",
       "      .entries(data)\n",
       "\n",
       "    const values = grouped.map(d => d.value)\n",
       "    const labels = grouped.map(d => d.key)\n",
       "\n",
       "    index = [{ level: 0, data: labels, dtype: dtype }]\n",
       "    const chart = Bar(values, index, 'num')\n",
       "\n",
       "    // point mapping\n",
       "    chart.mapDataPoint = (p) => labels.indexOf(p.value)\n",
       "\n",
       "    return chart\n",
       "  }\n",
       "\n",
       "  let histBinFreedman = function (a) {\n",
       "    return 2 * (d3.quantile(a, 0.75) - d3.quantile(a, 0.25)) * Math.pow(a.length, -1 / 3)\n",
       "  }\n",
       "\n",
       "  let histBinSturges = function (a) {\n",
       "    return (a[a.length - 1] - a[0]) / (Math.log2(a.length) + 1)\n",
       "  }\n",
       "\n",
       "  let histBinAuto = function (a) {\n",
       "    const binWidthFreedman = histBinFreedman(a)\n",
       "    const binWidthSturges = histBinSturges(a)\n",
       "\n",
       "    return binWidthFreedman ? Math.min(binWidthFreedman, binWidthSturges) : binWidthSturges\n",
       "  }\n",
       "\n",
       "  let Histogram = function (data, index, dtype) {\n",
       "    this.name = 'Histogram'\n",
       "\n",
       "    // map to the Number data type and sort\n",
       "    data = Array.prototype.map.call(data, Number).sort(d3.ascending)\n",
       "\n",
       "    console.debug('Histogram data: ', data)\n",
       "\n",
       "    // automatically determine optimal number of bins\n",
       "    const nBins = Math.ceil((data[data.length - 1] - data[0]) / histBinAuto(data))\n",
       "\n",
       "    console.debug('Estimated number of bins: ', nBins)\n",
       "\n",
       "    let xScale = d3.scaleLinear()\n",
       "      .domain(d3.extent(data))\n",
       "      .nice()\n",
       "\n",
       "    let hist = d3.histogram()\n",
       "      .domain(xScale.domain())\n",
       "      .thresholds(xScale.ticks(nBins))\n",
       "\n",
       "    let bins = hist(data)\n",
       "\n",
       "    const histogramData = bins.map((d) => d.length)\n",
       "    const histogramLabels = bins.map((d) => d.x0)\n",
       "\n",
       "    index = [{ level: 0, data: histogramLabels, dtype: dtype }]\n",
       "\n",
       "    const chart = Bar(histogramData, index, 'num')\n",
       "\n",
       "    // point mapping\n",
       "    chart.mapDataPoint = (p) => d3.maxIndex(hist([p.value]))\n",
       "\n",
       "    return chart\n",
       "  }\n",
       "\n",
       "  return {\n",
       "    Bar: Bar,\n",
       "    CategoricalBar: CategoricalBar,\n",
       "    Histogram: Histogram,\n",
       "    Line: Line,\n",
       "    Scatter: Scatter\n",
       "  }\n",
       "})\n",
       "`;\n",
       "        const attributes = {'id': 'dt-graph-objects-js'} || {};\n",
       "        \n",
       "        let id = attributes.id;\n",
       "        let elem_exists = id ? $(`script#${id}`).length > 0 : false;\n",
       "        \n",
       "        let e = elem_exists ? document.querySelector(`script#${id}`)\n",
       "                            : document.createElement(\"script\");\n",
       "        \n",
       "        $(e).text(`${script}`).attr('type', 'text/javascript');\n",
       "        \n",
       "        Object.entries(attributes)\n",
       "            .forEach( ([attr, val]) => $(e).attr(attr, val) );\n",
       "\n",
       "        if (!elem_exists) document.head.appendChild(e);\n",
       "     }"
      ],
      "text/plain": [
       "<JupyterRequire.display.SafeScript object>"
      ]
     },
     "metadata": {
      "finalized": true
     },
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "{ \n",
       "        'use strict';\n",
       "    \n",
       "        const script = `/**\n",
       " * Jupyter DataTables\n",
       " *\n",
       " * @module\n",
       " * @summary     Jupyter DataTables\n",
       " * @description Jupyter interactive pandas DataFrame representation leveraging pandas, DataTables and ChartJS.\n",
       " * @file        toolbar.js\n",
       " * @author      Marek Cermak\n",
       " * @contact     macermak@redhat.com\n",
       " * @copyright   Copyright 2019 Marek Cermak <macermak@redhat.com>\n",
       " *\n",
       " * This source file is free software, available under the following license:\n",
       " *   MIT license\n",
       " *\n",
       " * This source file is distributed in the hope that it will be useful, but\n",
       " * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY\n",
       " * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.\n",
       " *\n",
       " * For details please refer to: https://github.com/CermakM/jupyter-datatables\n",
       " */\n",
       "\n",
       "define('dt-toolbar', ['dt-components'], function (components) {\n",
       "\n",
       "  const templates = components.templates\n",
       "\n",
       "  return class Toolbar {\n",
       "    constructor(chart, dtype) {\n",
       "      this.chart = chart\n",
       "      this.dtype = dtype\n",
       "\n",
       "      this.settings = components.createElementFromTemplate(templates.DTSettingsComponentTemplate)\n",
       "      this.settingsButton = components.createElementFromTemplate(templates.DTSettingsButtonComponentTemplate)\n",
       "\n",
       "      $(this.settingsButton).click(() => {\n",
       "        if (this.settingsContainer.style.display != 'none') {\n",
       "          // settings already visible, just toggle\n",
       "          $(this.settingsContainer).hide()\n",
       "        } else {\n",
       "          const offset = {}\n",
       "          const margin = { top: 20, left: 0 }\n",
       "\n",
       "          offset.top = $(this.settingsButton).offset().top - $(output_area.element).offset().top\n",
       "          offset.top = offset.top + margin.top\n",
       "\n",
       "          offset.left = $(this.settingsButton).offset().left - $(output_area.element).offset().left\n",
       "          offset.left = offset.left + margin.left\n",
       "\n",
       "          $(this.settingsContainer).css(offset).show()\n",
       "\n",
       "          if (!_.isUndefined(this.dtype)) {\n",
       "            const allowedChartTypes = $.fn.dataTable.defaults.chartMap[this.dtype]\n",
       "\n",
       "            $(this.settings).find('.dt-chart-type').each((i, e) => {\n",
       "              const chartName = e.dataset.chart_name\n",
       "\n",
       "              // check active chart type\n",
       "              $(e).toggleClass('is-active', chartName === chart.name)\n",
       "\n",
       "              // check which chart types are not allowed for the current dtype and disable them\n",
       "              if (!allowedChartTypes.includes(chartName)) {\n",
       "                $(e).addClass('is-disabled')\n",
       "                console.debug(\\`Chart type '\\${chartName}' is not allowed for dtype '\\${dtype}'\\`)\n",
       "              } else {\n",
       "                // in case dtype changes for some reason\n",
       "                $(e).removeClass('is-disabled')\n",
       "              }\n",
       "            })\n",
       "          }\n",
       "\n",
       "          // click anywhere else hides the settings\n",
       "          setTimeout(() => {\n",
       "            $(document).one('click', () => $(this.settingsContainer).hide())\n",
       "          }, 20)\n",
       "        }\n",
       "      })\n",
       "\n",
       "      this.settingsContainer = document.createElement('div', { is: 'dt-container' })\n",
       "      this.settingsContainer.classList.add('dt-chart-settings-container')\n",
       "\n",
       "      $(this.settingsContainer).append(this.settings)\n",
       "      $(this.settingsContainer).css({ position: 'absolute' })\n",
       "      $(this.settingsContainer).hide()\n",
       "\n",
       "      // Append to the output area to allow overlay\n",
       "      const output_area = Jupyter.notebook.get_executed_cell().output_area\n",
       "      $(output_area.element).append(this.settingsContainer)\n",
       "\n",
       "      this.container = document.createElement('div', { is: 'dt-container' })\n",
       "      this.container.classList.add('dt-chart-toolbar')\n",
       "\n",
       "      $(this.container).append(this.settingsButton)\n",
       "    }\n",
       "\n",
       "    empty() {\n",
       "      this.destroy(false)\n",
       "    }\n",
       "\n",
       "    destroy(container = true) {\n",
       "      this.settings.remove()\n",
       "      this.settingsButton.remove()\n",
       "      this.settingsContainer.remove()\n",
       "\n",
       "      // finally remove the toolbar container itself if \\`container\\` is specified\n",
       "      if (container) { this.container.remove() } else { $(this.container).empty() } // remove all children but leave the container\n",
       "    }\n",
       "\n",
       "    onClick(callback, selector) {\n",
       "      let selection = $(this.settings).find(selector)\n",
       "\n",
       "      if (selection.length <= 0) { throw new Error(\\`Selector '\\${selector}' dit not match any elements.\\`) }\n",
       "\n",
       "      selection.each((i, elt) => {\n",
       "        $(elt).click(e => {\n",
       "          e.preventDefault()\n",
       "\n",
       "          callback.call(elt, e, this.chart)\n",
       "        })\n",
       "      })\n",
       "    }\n",
       "  }\n",
       "\n",
       "})\n",
       "`;\n",
       "        const attributes = {'id': 'dt-toolbar-js'} || {};\n",
       "        \n",
       "        let id = attributes.id;\n",
       "        let elem_exists = id ? $(`script#${id}`).length > 0 : false;\n",
       "        \n",
       "        let e = elem_exists ? document.querySelector(`script#${id}`)\n",
       "                            : document.createElement(\"script\");\n",
       "        \n",
       "        $(e).text(`${script}`).attr('type', 'text/javascript');\n",
       "        \n",
       "        Object.entries(attributes)\n",
       "            .forEach( ([attr, val]) => $(e).attr(attr, val) );\n",
       "\n",
       "        if (!elem_exists) document.head.appendChild(e);\n",
       "     }"
      ],
      "text/plain": [
       "<JupyterRequire.display.SafeScript object>"
      ]
     },
     "metadata": {
      "finalized": true
     },
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "{ \n",
       "        'use strict';\n",
       "    \n",
       "        const script = `define('dt-tooltips', ['underscore'], function (_) {\n",
       "\n",
       "  let showTooltip = function (chart, pointIndex, datasetIndex = 0) {\n",
       "    if (chart.animating) return // chart is still in animation process\n",
       "\n",
       "    if (_.isUndefined(chart.tooltip._active)) { chart.tooltip._active = [] }\n",
       "\n",
       "    let activeElements = chart.tooltip._active\n",
       "    let requestedElement = chart.getDatasetMeta(datasetIndex).data[pointIndex]\n",
       "\n",
       "    for (var i = 0; i < activeElements.length; i++) {\n",
       "      if (requestedElement._index == activeElements[i]._index) { return }\n",
       "    }\n",
       "\n",
       "    activeElements.push(requestedElement)\n",
       "\n",
       "    chart.tooltip._active = activeElements\n",
       "    chart.tooltip.update(true)\n",
       "    chart.tooltip.pivot()\n",
       "    chart.draw()\n",
       "  }\n",
       "\n",
       "  let hideTooltip = function (chart, pointIndex, datasetIndex = 0) {\n",
       "    let activeElements = chart.tooltip._active\n",
       "    if (_.isUndefined(activeElements) || activeElements.length == 0) { return }\n",
       "\n",
       "    let requestedElement = chart.getDatasetMeta(datasetIndex).data[pointIndex]\n",
       "    for (var i = 0; i < activeElements.length; i++) {\n",
       "      if (requestedElement._index == activeElements[i]._index) {\n",
       "        activeElements.splice(i, 1)\n",
       "        break\n",
       "      }\n",
       "    }\n",
       "\n",
       "    chart.tooltip._active = activeElements\n",
       "    chart.tooltip.update(true)\n",
       "    chart.draw()\n",
       "  }\n",
       "\n",
       "  let hideAllTooltips = function (chart) {\n",
       "    let activeElements = chart.tooltip._active\n",
       "    if (_.isUndefined(activeElements) || activeElements.length == 0) { return }\n",
       "\n",
       "    activeElements = []\n",
       "\n",
       "    chart.tooltip._active = activeElements\n",
       "    chart.tooltip.update(true)\n",
       "    chart.draw()\n",
       "  }\n",
       "\n",
       "  return {\n",
       "    showTooltip: showTooltip,\n",
       "    hideTooltip: hideTooltip,\n",
       "\n",
       "    hideAllTooltips: hideAllTooltips\n",
       "  }\n",
       "})\n",
       "`;\n",
       "        const attributes = {'id': 'dt-tooltips-js'} || {};\n",
       "        \n",
       "        let id = attributes.id;\n",
       "        let elem_exists = id ? $(`script#${id}`).length > 0 : false;\n",
       "        \n",
       "        let e = elem_exists ? document.querySelector(`script#${id}`)\n",
       "                            : document.createElement(\"script\");\n",
       "        \n",
       "        $(e).text(`${script}`).attr('type', 'text/javascript');\n",
       "        \n",
       "        Object.entries(attributes)\n",
       "            .forEach( ([attr, val]) => $(e).attr(attr, val) );\n",
       "\n",
       "        if (!elem_exists) document.head.appendChild(e);\n",
       "     }"
      ],
      "text/plain": [
       "<JupyterRequire.display.SafeScript object>"
      ]
     },
     "metadata": {
      "finalized": true
     },
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "{ \n",
       "        'use strict';\n",
       "    \n",
       "        const script = `/**\n",
       " * Jupyter DataTables\n",
       " *\n",
       " * @module\n",
       " * @summary     Jupyter DataTables\n",
       " * @description Jupyter interactive pandas DataFrame representation leveraging pandas, DataTables and ChartJS.\n",
       " * @file        jupyter-datatables.js\n",
       " * @author      Marek Cermak\n",
       " * @contact     macermak@redhat.com\n",
       " * @copyright   Copyright 2019 Marek Cermak <macermak@redhat.com>\n",
       " *\n",
       " * This source file is free software, available under the following license:\n",
       " *   MIT license\n",
       " *\n",
       " * This source file is distributed in the hope that it will be useful, but\n",
       " * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY\n",
       " * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.\n",
       " *\n",
       " * For details please refer to: https://github.com/CermakM/jupyter-datatables\n",
       " */\n",
       "\n",
       "define('jupyter-datatables', [\n",
       "  'underscore',\n",
       "  'moment',\n",
       "  'dt-config',\n",
       "  'dt-components',\n",
       "  'dt-graph-objects',\n",
       "  'dt-toolbar',\n",
       "  'dt-tooltips',\n",
       "], function (_, moment, config, components, go, Toolbar, tooltips) {\n",
       "  require('datatables.net')\n",
       "\n",
       "  const d3 = require('d3')\n",
       "  const events = require('base/js/events')\n",
       "\n",
       "  config.graphObjects = Object(go)\n",
       "\n",
       "  $.fn.dataTable.Api.register('row.create()', function () {\n",
       "    let row = $(this.row(0).node())\n",
       "      .clone()\n",
       "      .removeClass()\n",
       "\n",
       "    row\n",
       "      .children()\n",
       "      .empty()\n",
       "\n",
       "    return row\n",
       "  })\n",
       "\n",
       "  /**\n",
       "\t * Boolean type detector\n",
       "\t */\n",
       "  $.fn.dataTable.ext.type.detect.unshift(function (data) {\n",
       "    const dtype = 'boolean'\n",
       "\n",
       "    if (_.isBoolean(data)) {\n",
       "      return dtype\n",
       "    } else if (_.isString(data)) {\n",
       "      return (/true|false/i).test(data.toLowerCase()) ? dtype : null\n",
       "    }\n",
       "\n",
       "    return null\n",
       "  })\n",
       "\n",
       "  let createDTypePreview = function (dtype) {\n",
       "    const dTypeContainer = $('<div>')\n",
       "      .attr('class', 'dtype-container')\n",
       "\n",
       "    // dtype element\n",
       "    const dTypeSelect = $('<select>')\n",
       "      .attr('role', 'option')\n",
       "      .attr('class', 'dtype')\n",
       "      .appendTo(dTypeContainer)\n",
       "\n",
       "    const dTypeOptions = [\n",
       "      $('<option>').attr('value', dtype).text(dtype)\n",
       "      // TODO: other options suitable for this column\n",
       "    ]\n",
       "\n",
       "    dTypeOptions.forEach((opt) => opt.appendTo(dTypeSelect))\n",
       "\n",
       "    return dTypeContainer\n",
       "  }\n",
       "\n",
       "  let createDataToolbar = function (chart, data, index, dtype) {\n",
       "    const toolbar = new Toolbar(chart, dtype)\n",
       "\n",
       "    setTimeout(() => {\n",
       "      toolbar.onClick(function (event, chart) {\n",
       "        if ($(event.target).hasClass('is-active')) {\n",
       "          event.preventDefault() // do not propagate\n",
       "\n",
       "          console.debug(\\`Chart '\\${chart.name}' is already set. Skipping chart update.\\`)\n",
       "          return\n",
       "        }\n",
       "\n",
       "        console.debug('Updating chart:', chart)\n",
       "\n",
       "        const go = this.dataset.chart_name\n",
       "\n",
       "        chart.toolbar.empty()\n",
       "        chart.destroy()\n",
       "\n",
       "        chart.container.replaceWith(createDataPreview(data, index, dtype, go))\n",
       "      }, 'a.dt-chart-type')\n",
       "    }, 100)\n",
       "\n",
       "    return toolbar\n",
       "  }\n",
       "\n",
       "  let createDataPreview = function (data, index, dtype, go) {\n",
       "    console.debug('Creating data preview.', data, index, dtype)\n",
       "\n",
       "    if (_.isUndefined(dtype)) { console.warn('Data type was not provided.') } else if (!_.has(config.chartMap, dtype)) { throw new Error(\\`Unknown dtype '\\${dtype}'.\\`) }\n",
       "\n",
       "    if (index.length > 1) {\n",
       "      console.warn('Multi-index is not supported yet. Picking the 0th level.')\n",
       "      // TODO: handle multi-index\n",
       "    }\n",
       "\n",
       "    let kind, GraphObject, chart\n",
       "\n",
       "    if (_.isUndefined(go)) {\n",
       "      console.warn('Graph object was not provided.')\n",
       "\n",
       "      for (let k of config.chartMap[dtype]) {\n",
       "        if (_.has(config.graphObjects, k)) {\n",
       "          kind = k\n",
       "          GraphObject = config.graphObjects[k]\n",
       "\n",
       "          chart = new GraphObject(data, index, dtype)\n",
       "          if (chart) { break }\n",
       "        }\n",
       "        console.warn('Unknown plot kind: ', k)\n",
       "      }\n",
       "\n",
       "      if (_.isUndefined(kind)) {\n",
       "        throw new Error(\n",
       "          \\`Unable to find graph object for dtype '\\${dtype}' in: \\${config.graphObjects}\\`\n",
       "        )\n",
       "      }\n",
       "    } else {\n",
       "      GraphObject = _.isString(go) ? config.graphObjects[go] : go\n",
       "      chart = new GraphObject(data, index, dtype)\n",
       "    }\n",
       "\n",
       "    // set chart name for future reference\n",
       "    chart.name = GraphObject.name\n",
       "\n",
       "    if (_.isUndefined(chart) || chart === null) {\n",
       "      throw new Error(\n",
       "        \\`Unable to produce graph object for dtype '\\${dtype}'\\`\n",
       "      )\n",
       "    }\n",
       "\n",
       "    registerChartEvents(chart)\n",
       "\n",
       "    console.debug('Data preview has been created: ', chart)\n",
       "\n",
       "    chart.toolbar = createDataToolbar(chart, data, index, dtype)\n",
       "    chart.container = $('<div/>', { class: 'dt-chart-container' })\n",
       "      .append(chart.toolbar.container)\n",
       "      .append(chart.canvas)\n",
       "\n",
       "    return chart.container\n",
       "  }\n",
       "\n",
       "  let createDataTable = function (table, options, buttons) {\n",
       "    return new Promise((resolve) => {\n",
       "      Object.assign(options, {\n",
       "        fnInitComplete: function (settings) {\n",
       "          let dt = settings.oInstance.api()\n",
       "\n",
       "          console.debug('dtype preview initialization.', settings)\n",
       "\n",
       "          let dTypePreviewRow = dt.row.create()\n",
       "            .removeAttr('aria-label')\n",
       "            .attr('class', 'dtype-preview')\n",
       "\n",
       "          dTypePreviewRow\n",
       "            .children().each((i, e) => {\n",
       "              if ($(e).is('th')) { return }\n",
       "\n",
       "              let dtype = settings.aoColumns[i].sType\n",
       "              let dTypePreview = createDTypePreview(dtype)\n",
       "\n",
       "              $(e)\n",
       "                .attr('class', 'column-dtype-preview dt-head-center')\n",
       "                .attr('aria-label', \\`dtype preview for column \\${i}\\`)\n",
       "                .append(dTypePreview)\n",
       "\n",
       "              // map dtype back to known format\n",
       "              // TODO: run type detectors instead of assuming 'num'\n",
       "              settings.aoColumns[i].sType = config.dTypeMap[dtype]\n",
       "            })\n",
       "\n",
       "          dTypePreviewRow.ready(() => {\n",
       "            $(settings.nTHead).append(dTypePreviewRow)\n",
       "          })\n",
       "\n",
       "          console.debug('Data preview initialization.', settings)\n",
       "\n",
       "          let dataPreviewRow = dt.row.create()\n",
       "            .removeAttr('aria-controls')\n",
       "            .removeAttr('aria-label')\n",
       "            .attr('class', 'column-data-preview')\n",
       "\n",
       "          let index = []\n",
       "\n",
       "          dataPreviewRow\n",
       "            .children().each((i, e) => {\n",
       "              let dtype = settings.aoColumns[i].sType\n",
       "              let data = dt.column(i).data().toArray()\n",
       "\n",
       "              if ($(e).is('th')) {\n",
       "                index.push({ data: data, dtype: dtype, level: i })\n",
       "                return\n",
       "              }\n",
       "\n",
       "              $(e)\n",
       "                .attr('class', 'column-data-preview')\n",
       "                .attr('role', 'figure')\n",
       "                .attr('aria-label', \\`data preview for column \\${i}\\`)\n",
       "\n",
       "              let dataPreview = createDataPreview(data, index, dtype)\n",
       "\n",
       "              $(e).append(dataPreview)\n",
       "            })\n",
       "\n",
       "          dataPreviewRow.ready(() => {\n",
       "            $(settings.nTHead).append(dataPreviewRow)\n",
       "          })\n",
       "\n",
       "          registerDataTableEvents(dt)\n",
       "\n",
       "          resolve(settings)\n",
       "        }\n",
       "      })\n",
       "\n",
       "      let dt = $(table).DataTable(options).columns.adjust()\n",
       "        .responsive.recalc()\n",
       "        .columns.adjust()\n",
       "      let btns = new $.fn.dataTable.Buttons(dt, {\n",
       "        buttons: buttons\n",
       "      })\n",
       "\n",
       "      events.one('output_appended.OutputArea', () => {\n",
       "        setTimeout(dt.columns.adjust, 50)\n",
       "      })\n",
       "\n",
       "      $(dt.table().container()).prepend(btns.container())\n",
       "    })\n",
       "  }\n",
       "\n",
       "  let registerChartEvents = function (chart) {\n",
       "    events.on('hide_all_tooltips.ChartJS', () => {\n",
       "      tooltips.hideAllTooltips(chart)\n",
       "    })\n",
       "\n",
       "    $(chart.canvas).on('show_tooltip.ChartJS', (e, d) => {\n",
       "      tooltips.hideAllTooltips(chart)\n",
       "\n",
       "      // Show tooltip on certain data point\n",
       "      const dataPoint = d.data\n",
       "\n",
       "      let datasetIndex\n",
       "      if (_.has(chart, 'mapDataPoint')) {\n",
       "        datasetIndex = chart.mapDataPoint(dataPoint)\n",
       "      } else { datasetIndex = chart.data.labels.indexOf(dataPoint.index) }\n",
       "\n",
       "      tooltips.showTooltip(chart, datasetIndex)\n",
       "    })\n",
       "  }\n",
       "\n",
       "  let registerDataTableEvents = function (dt) {\n",
       "\n",
       "    dt.on('mouseleave', 'tbody', function (e) {\n",
       "      events.trigger('hide_all_tooltips.ChartJS')\n",
       "    })\n",
       "\n",
       "    dt.on('mouseenter', 'td', function (e) {\n",
       "      let cell = dt.cell(this)\n",
       "      let idx = cell.index()\n",
       "\n",
       "      const dIndex = dt.row(idx.row).data()[0]\n",
       "      const dValue = dt.row(idx.row).data()[idx.column]\n",
       "\n",
       "      const canvas = $(dt.table().container())\n",
       "        .find('canvas')\n",
       "        .get(idx.column - 1)\n",
       "\n",
       "      $(canvas).trigger('show_tooltip.ChartJS', {\n",
       "        cell: cell,\n",
       "        data: {\n",
       "          index: dIndex,\n",
       "          value: dValue\n",
       "        }\n",
       "      })\n",
       "    })\n",
       "\n",
       "    events.on('before_finalize.JupyterRequire', function () {\n",
       "      const canvasElements = $('canvas')\n",
       "\n",
       "      console.log('Finalizing canvas elements...', canvasElements)\n",
       "      canvasElements.each((i, canvas) => {\n",
       "        const dataURL = canvas.toDataURL('image/png')\n",
       "        const canvasPNG = $('<img/>', { src: dataURL, class: 'dt-chart-image' }).get(0)\n",
       "\n",
       "        console.debug('\\tResulting image: ', canvasPNG)\n",
       "\n",
       "        canvas.replaceWith(canvasPNG)\n",
       "      })\n",
       "\n",
       "      console.debug('\\tDisabling buttons and search fields...')\n",
       "\n",
       "      $('a.paginate_button, .dt-button, input[type=search], .dataTables_length select')\n",
       "        .off('click')\n",
       "        .css('cursor', 'not-allowed')\n",
       "        .css('color', '#999')\n",
       "        .addClass('disabled')\n",
       "        .prop('disabled', true)\n",
       "\n",
       "      console.log('Canvas finalization completed successfully.')\n",
       "    })\n",
       "\n",
       "    // Focus search field event\n",
       "    $(document).on('focus', '.dataTables_filter input', function (e) {\n",
       "      setTimeout(() => {\n",
       "        let cell = Jupyter.notebook.get_selected_cell()\n",
       "        let oArea = cell.output_area\n",
       "\n",
       "        if (e.type === 'focusin') {\n",
       "          oArea.keyboard_manager.disable()\n",
       "        } else { oArea.keyboard_manager.enable() }\n",
       "      }, 50) // set timeout to let Jupyter select the cell\n",
       "    })\n",
       "\n",
       "    // Keyup search field event\n",
       "    $(document).on('keyup', '.dataTables_filter input', function (e) {\n",
       "      if ($(this).is(':focus') && e.key === 'Escape') {\n",
       "        let cell = Jupyter.notebook.get_selected_cell()\n",
       "        let oArea = cell.output_area\n",
       "\n",
       "        $(this).blur() // focus out of the search element\n",
       "\n",
       "        oArea.keyboard_manager.enable()\n",
       "\n",
       "        return events.trigger('select.Cell', { 'cell': cell })\n",
       "      }\n",
       "\n",
       "      return true\n",
       "    })\n",
       "  }\n",
       "\n",
       "  /**\n",
       "\t   * Create HTML table from raw String and append it to an element\n",
       "\t   *\n",
       "\t   * @param {String} html\n",
       "\t   * @param {Element} element\n",
       "\t   */\n",
       "  let appendTable = function (html, element) {\n",
       "    return new Promise((resolve) => {\n",
       "      const table = $.parseHTML(html)\n",
       "\n",
       "      $(table).ready(() => {\n",
       "        element.append(table)\n",
       "        resolve(table)\n",
       "      })\n",
       "    })\n",
       "  }\n",
       "\n",
       "  /**\n",
       "\t   * Create DataTable from raw string and append it to an element\n",
       "\t   */\n",
       "  return appendDataTable = async function (html, options, buttons, element) {\n",
       "    const table = await appendTable(html, element)\n",
       "\n",
       "    return createDataTable(table, options, buttons)\n",
       "  }\n",
       "})\n",
       "`;\n",
       "        const attributes = {'id': 'jupyter-datatables-js'} || {};\n",
       "        \n",
       "        let id = attributes.id;\n",
       "        let elem_exists = id ? $(`script#${id}`).length > 0 : false;\n",
       "        \n",
       "        let e = elem_exists ? document.querySelector(`script#${id}`)\n",
       "                            : document.createElement(\"script\");\n",
       "        \n",
       "        $(e).text(`${script}`).attr('type', 'text/javascript');\n",
       "        \n",
       "        Object.entries(attributes)\n",
       "            .forEach( ([attr, val]) => $(e).attr(attr, val) );\n",
       "\n",
       "        if (!elem_exists) document.head.appendChild(e);\n",
       "     }"
      ],
      "text/plain": [
       "<JupyterRequire.display.SafeScript object>"
      ]
     },
     "metadata": {
      "finalized": true
     },
     "output_type": "display_data"
    }
   ],
   "source": [
    "init_datatables_mode()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "c2fc5e8f",
   "metadata": {
    "require": [
     "base/js/events",
     "datatables.net",
     "d3",
     "chartjs",
     "dt-config",
     "dt-components",
     "dt-graph-objects",
     "dt-toolbar",
     "dt-tooltips",
     "jupyter-datatables"
    ]
   },
   "outputs": [
    {
     "data": {},
     "metadata": {
      "display": {
       "element": {
        "0": {},
        "length": 1
       }
      },
      "finalized": false,
      "frozen": true,
      "frozen_output": {
       "text/html": "<div id=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b_wrapper\" class=\"dataTables_wrapper no-footer\"><div class=\"dt-buttons\">   <button class=\"dt-button buttons-print\" tabindex=\"0\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" type=\"button\"><span>Print</span></button> <button class=\"dt-button buttons-csv buttons-html5\" tabindex=\"0\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" type=\"button\"><span>CSV</span></button> <button class=\"dt-button buttons-pdf buttons-html5\" tabindex=\"0\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" type=\"button\"><span>PDF</span></button> </div><div class=\"dataTables_length\" id=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b_length\"><label>Show <select name=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b_length\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" class=\"\"><option value=\"10\">10</option><option value=\"25\">25</option><option value=\"50\">50</option><option value=\"100\">100</option></select> entries</label></div><div id=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b_filter\" class=\"dataTables_filter\"><label>Search:<input type=\"search\" class=\"\" placeholder=\"\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\"></label></div><div class=\"dataTables_scroll\"><div class=\"dataTables_scrollHead\" style=\"overflow: hidden; position: relative; border: 0px; width: 100%;\"><div class=\"dataTables_scrollHeadInner\" style=\"box-sizing: content-box; width: 1814.23px; padding-right: 0px;\"><table border=\"1\" class=\"dataframe table cell-border nowrap dataTable no-footer\" role=\"grid\" style=\"margin-left: 0px; width: 1814.23px;\"><thead>\n    <tr style=\"text-align: right;\" role=\"row\"><th class=\"dt-body-center dt-head-center sorting\" tabindex=\"0\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" rowspan=\"1\" colspan=\"1\" style=\"width: 0px;\" aria-label=\": activate to sort column ascending\"></th><th class=\"dt-body-center dt-head-center sorting\" tabindex=\"0\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" rowspan=\"1\" colspan=\"1\" style=\"width: 145px;\" aria-label=\"Name: activate to sort column ascending\">Name</th><th class=\"dt-body-center dt-head-center sorting\" tabindex=\"0\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" rowspan=\"1\" colspan=\"1\" style=\"width: 173.734px;\" aria-label=\"Company_Name: activate to sort column ascending\">Company_Name</th><th class=\"dt-body-center dt-head-center sorting\" tabindex=\"0\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" rowspan=\"1\" colspan=\"1\" style=\"width: 265.5px;\" aria-label=\"Employee_Job_Title: activate to sort column ascending\">Employee_Job_Title</th><th class=\"dt-body-center dt-head-center sorting\" tabindex=\"0\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" rowspan=\"1\" colspan=\"1\" style=\"width: 145px;\" aria-label=\"Employee_City: activate to sort column ascending\">Employee_City</th><th class=\"dt-body-center dt-head-center sorting\" tabindex=\"0\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" rowspan=\"1\" colspan=\"1\" style=\"width: 145px;\" aria-label=\"Employee_Country: activate to sort column ascending\">Employee_Country</th><th class=\"dt-body-center dt-head-center sorting\" tabindex=\"0\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" rowspan=\"1\" colspan=\"1\" style=\"width: 145px;\" aria-label=\"Employee_Salary: activate to sort column ascending\">Employee_Salary</th><th class=\"dt-body-center dt-head-center sorting\" tabindex=\"0\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" rowspan=\"1\" colspan=\"1\" style=\"width: 145px;\" aria-label=\"Employment_Status: activate to sort column ascending\">Employment_Status</th><th class=\"dt-body-center dt-head-center sorting\" tabindex=\"0\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" rowspan=\"1\" colspan=\"1\" style=\"width: 145px;\" aria-label=\"Employee_Rating: activate to sort column ascending\">Employee_Rating</th><th class=\"dt-body-center dt-head-center sorting\" tabindex=\"0\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" rowspan=\"1\" colspan=\"1\" style=\"width: 145px;\" aria-label=\"Credits: activate to sort column ascending\">Credits</th></tr>\n  <tr role=\"row\" class=\"dtype-preview\">\n      <th class=\" dt-body-center dt-head-center\"></th>\n      <td class=\"column-dtype-preview dt-head-center\" aria-label=\"dtype preview for column 1\"><div class=\"dtype-container\"><select role=\"option\" class=\"dtype\"><option value=\"object\">object</option></select></div></td>\n      <td class=\"column-dtype-preview dt-head-center\" aria-label=\"dtype preview for column 2\"><div class=\"dtype-container\"><select role=\"option\" class=\"dtype\"><option value=\"object\">object</option></select></div></td>\n      <td class=\"column-dtype-preview dt-head-center\" aria-label=\"dtype preview for column 3\"><div class=\"dtype-container\"><select role=\"option\" class=\"dtype\"><option value=\"object\">object</option></select></div></td>\n      <td class=\"column-dtype-preview dt-head-center\" aria-label=\"dtype preview for column 4\"><div class=\"dtype-container\"><select role=\"option\" class=\"dtype\"><option value=\"object\">object</option></select></div></td>\n      <td class=\"column-dtype-preview dt-head-center\" aria-label=\"dtype preview for column 5\"><div class=\"dtype-container\"><select role=\"option\" class=\"dtype\"><option value=\"object\">object</option></select></div></td>\n      <td class=\"column-dtype-preview dt-head-center\" aria-label=\"dtype preview for column 6\"><div class=\"dtype-container\"><select role=\"option\" class=\"dtype\"><option value=\"int64\">int64</option></select></div></td>\n      <td class=\"column-dtype-preview dt-head-center\" aria-label=\"dtype preview for column 7\"><div class=\"dtype-container\"><select role=\"option\" class=\"dtype\"><option value=\"object\">object</option></select></div></td>\n      <td class=\"column-dtype-preview dt-head-center\" aria-label=\"dtype preview for column 8\"><div class=\"dtype-container\"><select role=\"option\" class=\"dtype\"><option value=\"float64\">float64</option></select></div></td>\n      <td class=\"column-dtype-preview dt-head-center\" aria-label=\"dtype preview for column 9\"><div class=\"dtype-container\"><select role=\"option\" class=\"dtype\"><option value=\"int64\">int64</option></select></div></td>\n    </tr><tr role=\"row\" class=\"column-data-preview\">\n      <th class=\" dt-body-center dt-head-center\"></th>\n      <td class=\"column-data-preview\" role=\"figure\" aria-label=\"data preview for column 1\"><div class=\"dt-chart-container\"><div is=\"dt-container\" class=\"dt-container dt-chart-toolbar\"></div><canvas width=\"167.5px\" height=\"83\" style=\"margin: auto; display: block;\"></canvas></div></td>\n      <td class=\"column-data-preview\" role=\"figure\" aria-label=\"data preview for column 2\"><div class=\"dt-chart-container\"><div is=\"dt-container\" class=\"dt-container dt-chart-toolbar\"></div><canvas width=\"167.5px\" height=\"83\" style=\"margin: auto; display: block;\"></canvas></div></td>\n      <td class=\"column-data-preview\" role=\"figure\" aria-label=\"data preview for column 3\"><div class=\"dt-chart-container\"><div is=\"dt-container\" class=\"dt-container dt-chart-toolbar\"></div><canvas width=\"167.5px\" height=\"83\" style=\"margin: auto; display: block;\"></canvas></div></td>\n      <td class=\"column-data-preview\" role=\"figure\" aria-label=\"data preview for column 4\"><div class=\"dt-chart-container\"><div is=\"dt-container\" class=\"dt-container dt-chart-toolbar\"></div><canvas width=\"167.5px\" height=\"83\" style=\"margin: auto; display: block;\"></canvas></div></td>\n      <td class=\"column-data-preview\" role=\"figure\" aria-label=\"data preview for column 5\"><div class=\"dt-chart-container\"><div is=\"dt-container\" class=\"dt-container dt-chart-toolbar\"></div><canvas width=\"167.5px\" height=\"83\" style=\"margin: auto; display: block;\"></canvas></div></td>\n      <td class=\"column-data-preview\" role=\"figure\" aria-label=\"data preview for column 6\"><div class=\"dt-chart-container\"><div is=\"dt-container\" class=\"dt-container dt-chart-toolbar\"></div><canvas width=\"167.5px\" height=\"83\" style=\"margin: auto; display: block;\"></canvas></div></td>\n      <td class=\"column-data-preview\" role=\"figure\" aria-label=\"data preview for column 7\"><div class=\"dt-chart-container\"><div is=\"dt-container\" class=\"dt-container dt-chart-toolbar\"></div><canvas width=\"167.5px\" height=\"83\" style=\"margin: auto; display: block;\"></canvas></div></td>\n      <td class=\"column-data-preview\" role=\"figure\" aria-label=\"data preview for column 8\"><div class=\"dt-chart-container\"><div is=\"dt-container\" class=\"dt-container dt-chart-toolbar\"></div><canvas width=\"167.5px\" height=\"83\" style=\"margin: auto; display: block;\"></canvas></div></td>\n      <td class=\"column-data-preview\" role=\"figure\" aria-label=\"data preview for column 9\"><div class=\"dt-chart-container\"><div is=\"dt-container\" class=\"dt-container dt-chart-toolbar\"></div><canvas width=\"167.5px\" height=\"83\" style=\"margin: auto; display: block;\"></canvas></div></td>\n    </tr></thead></table></div></div><div class=\"dataTables_scrollBody\" style=\"position: relative; overflow: auto; width: 100%;\"><table border=\"1\" class=\"dataframe table cell-border nowrap dataTable no-footer\" id=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" role=\"grid\" aria-describedby=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b_info\" style=\"width: 1936px;\"><thead>\n    <tr style=\"text-align: right; height: 12px;\" role=\"row\"><th class=\"dt-body-center dt-head-center sorting\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" rowspan=\"1\" colspan=\"1\" style=\"width: 0px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;\" aria-label=\": activate to sort column ascending\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\"></div></th><th class=\"dt-body-center dt-head-center sorting\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" rowspan=\"1\" colspan=\"1\" style=\"width: 145px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;\" aria-label=\"Name: activate to sort column ascending\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\">Name</div></th><th class=\"dt-body-center dt-head-center sorting\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" rowspan=\"1\" colspan=\"1\" style=\"width: 173.734px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;\" aria-label=\"Company_Name: activate to sort column ascending\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\">Company_Name</div></th><th class=\"dt-body-center dt-head-center sorting\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" rowspan=\"1\" colspan=\"1\" style=\"width: 265.5px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;\" aria-label=\"Employee_Job_Title: activate to sort column ascending\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\">Employee_Job_Title</div></th><th class=\"dt-body-center dt-head-center sorting\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" rowspan=\"1\" colspan=\"1\" style=\"width: 145px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;\" aria-label=\"Employee_City: activate to sort column ascending\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\">Employee_City</div></th><th class=\"dt-body-center dt-head-center sorting\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" rowspan=\"1\" colspan=\"1\" style=\"width: 145px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;\" aria-label=\"Employee_Country: activate to sort column ascending\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\">Employee_Country</div></th><th class=\"dt-body-center dt-head-center sorting\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" rowspan=\"1\" colspan=\"1\" style=\"width: 145px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;\" aria-label=\"Employee_Salary: activate to sort column ascending\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\">Employee_Salary</div></th><th class=\"dt-body-center dt-head-center sorting\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" rowspan=\"1\" colspan=\"1\" style=\"width: 145px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;\" aria-label=\"Employment_Status: activate to sort column ascending\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\">Employment_Status</div></th><th class=\"dt-body-center dt-head-center sorting\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" rowspan=\"1\" colspan=\"1\" style=\"width: 145px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;\" aria-label=\"Employee_Rating: activate to sort column ascending\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\">Employee_Rating</div></th><th class=\"dt-body-center dt-head-center sorting\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" rowspan=\"1\" colspan=\"1\" style=\"width: 145px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;\" aria-label=\"Credits: activate to sort column ascending\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\">Credits</div></th></tr>\n  <tr role=\"row\" class=\"dtype-preview\" style=\"height: 12px;\">\n      <th class=\" dt-body-center dt-head-center\" style=\"padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 0px;\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\"></div></th>\n      <td class=\"column-dtype-preview dt-head-center\" aria-label=\"dtype preview for column 1\" style=\"padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 145px;\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\"><div class=\"dtype-container\"><select role=\"option\" class=\"dtype\"><option value=\"object\">object</option></select></div></div></td>\n      <td class=\"column-dtype-preview dt-head-center\" aria-label=\"dtype preview for column 2\" style=\"padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 173.734px;\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\"><div class=\"dtype-container\"><select role=\"option\" class=\"dtype\"><option value=\"object\">object</option></select></div></div></td>\n      <td class=\"column-dtype-preview dt-head-center\" aria-label=\"dtype preview for column 3\" style=\"padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 265.5px;\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\"><div class=\"dtype-container\"><select role=\"option\" class=\"dtype\"><option value=\"object\">object</option></select></div></div></td>\n      <td class=\"column-dtype-preview dt-head-center\" aria-label=\"dtype preview for column 4\" style=\"padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 145px;\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\"><div class=\"dtype-container\"><select role=\"option\" class=\"dtype\"><option value=\"object\">object</option></select></div></div></td>\n      <td class=\"column-dtype-preview dt-head-center\" aria-label=\"dtype preview for column 5\" style=\"padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 145px;\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\"><div class=\"dtype-container\"><select role=\"option\" class=\"dtype\"><option value=\"object\">object</option></select></div></div></td>\n      <td class=\"column-dtype-preview dt-head-center\" aria-label=\"dtype preview for column 6\" style=\"padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 145px;\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\"><div class=\"dtype-container\"><select role=\"option\" class=\"dtype\"><option value=\"int64\">int64</option></select></div></div></td>\n      <td class=\"column-dtype-preview dt-head-center\" aria-label=\"dtype preview for column 7\" style=\"padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 145px;\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\"><div class=\"dtype-container\"><select role=\"option\" class=\"dtype\"><option value=\"object\">object</option></select></div></div></td>\n      <td class=\"column-dtype-preview dt-head-center\" aria-label=\"dtype preview for column 8\" style=\"padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 145px;\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\"><div class=\"dtype-container\"><select role=\"option\" class=\"dtype\"><option value=\"float64\">float64</option></select></div></div></td>\n      <td class=\"column-dtype-preview dt-head-center\" aria-label=\"dtype preview for column 9\" style=\"padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 145px;\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\"><div class=\"dtype-container\"><select role=\"option\" class=\"dtype\"><option value=\"int64\">int64</option></select></div></div></td>\n    </tr><tr role=\"row\" class=\"column-data-preview\" style=\"height: 12px;\">\n      <th class=\" dt-body-center dt-head-center\" style=\"width: 0px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\"></div></th>\n      <td class=\"column-data-preview\" role=\"figure\" aria-label=\"data preview for column 1\" style=\"width: 167px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\"><div class=\"dt-chart-container\"><div is=\"dt-container\" class=\"dt-container dt-chart-toolbar\"></div><canvas width=\"167.5px\" height=\"83\" style=\"margin: auto; display: block;\"></canvas></div></div></td>\n      <td class=\"column-data-preview\" role=\"figure\" aria-label=\"data preview for column 2\" style=\"width: 195.734px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\"><div class=\"dt-chart-container\"><div is=\"dt-container\" class=\"dt-container dt-chart-toolbar\"></div><canvas width=\"167.5px\" height=\"83\" style=\"margin: auto; display: block;\"></canvas></div></div></td>\n      <td class=\"column-data-preview\" role=\"figure\" aria-label=\"data preview for column 3\" style=\"width: 287.5px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\"><div class=\"dt-chart-container\"><div is=\"dt-container\" class=\"dt-container dt-chart-toolbar\"></div><canvas width=\"167.5px\" height=\"83\" style=\"margin: auto; display: block;\"></canvas></div></div></td>\n      <td class=\"column-data-preview\" role=\"figure\" aria-label=\"data preview for column 4\" style=\"width: 167px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\"><div class=\"dt-chart-container\"><div is=\"dt-container\" class=\"dt-container dt-chart-toolbar\"></div><canvas width=\"167.5px\" height=\"83\" style=\"margin: auto; display: block;\"></canvas></div></div></td>\n      <td class=\"column-data-preview\" role=\"figure\" aria-label=\"data preview for column 5\" style=\"width: 167px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\"><div class=\"dt-chart-container\"><div is=\"dt-container\" class=\"dt-container dt-chart-toolbar\"></div><canvas width=\"167.5px\" height=\"83\" style=\"margin: auto; display: block;\"></canvas></div></div></td>\n      <td class=\"column-data-preview\" role=\"figure\" aria-label=\"data preview for column 6\" style=\"width: 167px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\"><div class=\"dt-chart-container\"><div is=\"dt-container\" class=\"dt-container dt-chart-toolbar\"></div><canvas width=\"167.5px\" height=\"83\" style=\"margin: auto; display: block;\"></canvas></div></div></td>\n      <td class=\"column-data-preview\" role=\"figure\" aria-label=\"data preview for column 7\" style=\"width: 167px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\"><div class=\"dt-chart-container\"><div is=\"dt-container\" class=\"dt-container dt-chart-toolbar\"></div><canvas width=\"167.5px\" height=\"83\" style=\"margin: auto; display: block;\"></canvas></div></div></td>\n      <td class=\"column-data-preview\" role=\"figure\" aria-label=\"data preview for column 8\" style=\"width: 167px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\"><div class=\"dt-chart-container\"><div is=\"dt-container\" class=\"dt-container dt-chart-toolbar\"></div><canvas width=\"167.5px\" height=\"83\" style=\"margin: auto; display: block;\"></canvas></div></div></td>\n      <td class=\"column-data-preview\" role=\"figure\" aria-label=\"data preview for column 9\" style=\"width: 167px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;\"><div class=\"dataTables_sizing\" style=\"height: 0px; overflow: hidden;\"><div class=\"dt-chart-container\"><div is=\"dt-container\" class=\"dt-container dt-chart-toolbar\"></div><canvas width=\"167.5px\" height=\"83\" style=\"margin: auto; display: block;\"></canvas></div></div></td>\n    </tr></thead>\n  \n  <tbody>\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n  <tr role=\"row\" class=\"odd\">\n      <th class=\" dt-body-center dt-head-center\">0</th>\n      <td class=\" dt-body-center dt-head-center\">Johnny Maynard</td>\n      <td class=\" dt-body-center dt-head-center\">White, Mcclain and Cobb</td>\n      <td class=\" dt-body-center dt-head-center\">Equities trader</td>\n      <td class=\" dt-body-center dt-head-center\">New Cindychester</td>\n      <td class=\" dt-body-center dt-head-center\">Mongolia</td>\n      <td class=\" dt-body-center dt-head-center\">764340</td>\n      <td class=\" dt-body-center dt-head-center\">Full Time</td>\n      <td class=\" dt-body-center dt-head-center\">3.3</td>\n      <td class=\" dt-body-center dt-head-center\">1</td>\n    </tr><tr role=\"row\" class=\"even\">\n      <th class=\" dt-body-center dt-head-center\">1</th>\n      <td class=\" dt-body-center dt-head-center\">Michael Williams</td>\n      <td class=\" dt-body-center dt-head-center\">Scott Inc</td>\n      <td class=\" dt-body-center dt-head-center\">Patent examiner</td>\n      <td class=\" dt-body-center dt-head-center\">Ricardomouth</td>\n      <td class=\" dt-body-center dt-head-center\">Guinea-Bissau</td>\n      <td class=\" dt-body-center dt-head-center\">929230</td>\n      <td class=\" dt-body-center dt-head-center\">Full Time</td>\n      <td class=\" dt-body-center dt-head-center\">4.6</td>\n      <td class=\" dt-body-center dt-head-center\">4</td>\n    </tr><tr role=\"row\" class=\"odd\">\n      <th class=\" dt-body-center dt-head-center\">2</th>\n      <td class=\" dt-body-center dt-head-center\">Laura Flynn</td>\n      <td class=\" dt-body-center dt-head-center\">Andrade LLC</td>\n      <td class=\" dt-body-center dt-head-center\">Equities trader</td>\n      <td class=\" dt-body-center dt-head-center\">North Melissafurt</td>\n      <td class=\" dt-body-center dt-head-center\">Tonga</td>\n      <td class=\" dt-body-center dt-head-center\">606900</td>\n      <td class=\" dt-body-center dt-head-center\">Intern</td>\n      <td class=\" dt-body-center dt-head-center\">0.3</td>\n      <td class=\" dt-body-center dt-head-center\">3</td>\n    </tr><tr role=\"row\" class=\"even\">\n      <th class=\" dt-body-center dt-head-center\">3</th>\n      <td class=\" dt-body-center dt-head-center\">Stefanie Archer</td>\n      <td class=\" dt-body-center dt-head-center\">James and Sons</td>\n      <td class=\" dt-body-center dt-head-center\">Retail merchandiser</td>\n      <td class=\" dt-body-center dt-head-center\">Ricardomouth</td>\n      <td class=\" dt-body-center dt-head-center\">San Marino</td>\n      <td class=\" dt-body-center dt-head-center\">775380</td>\n      <td class=\" dt-body-center dt-head-center\">Full Time</td>\n      <td class=\" dt-body-center dt-head-center\">2.8</td>\n      <td class=\" dt-body-center dt-head-center\">5</td>\n    </tr><tr role=\"row\" class=\"odd\">\n      <th class=\" dt-body-center dt-head-center\">4</th>\n      <td class=\" dt-body-center dt-head-center\">Sierra Garcia</td>\n      <td class=\" dt-body-center dt-head-center\">Matthews Inc</td>\n      <td class=\" dt-body-center dt-head-center\">Armed forces logistics/support/administrative officer</td>\n      <td class=\" dt-body-center dt-head-center\">Whitakerbury</td>\n      <td class=\" dt-body-center dt-head-center\">Nepal</td>\n      <td class=\" dt-body-center dt-head-center\">944480</td>\n      <td class=\" dt-body-center dt-head-center\">Full Time</td>\n      <td class=\" dt-body-center dt-head-center\">4.5</td>\n      <td class=\" dt-body-center dt-head-center\">4</td>\n    </tr><tr role=\"row\" class=\"even\">\n      <th class=\" dt-body-center dt-head-center\">5</th>\n      <td class=\" dt-body-center dt-head-center\">Donna Miller</td>\n      <td class=\" dt-body-center dt-head-center\">Andrade LLC</td>\n      <td class=\" dt-body-center dt-head-center\">Garment/textile technologist</td>\n      <td class=\" dt-body-center dt-head-center\">West Jamesview</td>\n      <td class=\" dt-body-center dt-head-center\">Tonga</td>\n      <td class=\" dt-body-center dt-head-center\">428090</td>\n      <td class=\" dt-body-center dt-head-center\">Intern</td>\n      <td class=\" dt-body-center dt-head-center\">1.1</td>\n      <td class=\" dt-body-center dt-head-center\">4</td>\n    </tr><tr role=\"row\" class=\"odd\">\n      <th class=\" dt-body-center dt-head-center\">6</th>\n      <td class=\" dt-body-center dt-head-center\">Linda Rodriguez</td>\n      <td class=\" dt-body-center dt-head-center\">Marshall-Holloway</td>\n      <td class=\" dt-body-center dt-head-center\">Optometrist</td>\n      <td class=\" dt-body-center dt-head-center\">Whitakerbury</td>\n      <td class=\" dt-body-center dt-head-center\">Portugal</td>\n      <td class=\" dt-body-center dt-head-center\">645690</td>\n      <td class=\" dt-body-center dt-head-center\">Full Time</td>\n      <td class=\" dt-body-center dt-head-center\">4.7</td>\n      <td class=\" dt-body-center dt-head-center\">5</td>\n    </tr><tr role=\"row\" class=\"even\">\n      <th class=\" dt-body-center dt-head-center\">7</th>\n      <td class=\" dt-body-center dt-head-center\">Jonathan Gibson</td>\n      <td class=\" dt-body-center dt-head-center\">Scott Inc</td>\n      <td class=\" dt-body-center dt-head-center\">Naval architect</td>\n      <td class=\" dt-body-center dt-head-center\">Whiteside</td>\n      <td class=\" dt-body-center dt-head-center\">Libyan Arab Jamahiriya</td>\n      <td class=\" dt-body-center dt-head-center\">483210</td>\n      <td class=\" dt-body-center dt-head-center\">Intern</td>\n      <td class=\" dt-body-center dt-head-center\">3.4</td>\n      <td class=\" dt-body-center dt-head-center\">1</td>\n    </tr><tr role=\"row\" class=\"odd\">\n      <th class=\" dt-body-center dt-head-center\">8</th>\n      <td class=\" dt-body-center dt-head-center\">Karl Henry</td>\n      <td class=\" dt-body-center dt-head-center\">Campos, Reynolds and Mccormick</td>\n      <td class=\" dt-body-center dt-head-center\">Radiographer, therapeutic</td>\n      <td class=\" dt-body-center dt-head-center\">Whiteside</td>\n      <td class=\" dt-body-center dt-head-center\">Kyrgyz Republic</td>\n      <td class=\" dt-body-center dt-head-center\">586480</td>\n      <td class=\" dt-body-center dt-head-center\">Full Time</td>\n      <td class=\" dt-body-center dt-head-center\">3.7</td>\n      <td class=\" dt-body-center dt-head-center\">2</td>\n    </tr><tr role=\"row\" class=\"even\">\n      <th class=\" dt-body-center dt-head-center\">9</th>\n      <td class=\" dt-body-center dt-head-center\">Katherine Sims</td>\n      <td class=\" dt-body-center dt-head-center\">Baker, Allen and Edwards</td>\n      <td class=\" dt-body-center dt-head-center\">Regulatory affairs officer</td>\n      <td class=\" dt-body-center dt-head-center\">Kristaburgh</td>\n      <td class=\" dt-body-center dt-head-center\">Haiti</td>\n      <td class=\" dt-body-center dt-head-center\">712320</td>\n      <td class=\" dt-body-center dt-head-center\">Full Time</td>\n      <td class=\" dt-body-center dt-head-center\">3.0</td>\n      <td class=\" dt-body-center dt-head-center\">2</td>\n    </tr></tbody>\n</table></div></div><div class=\"dataTables_info\" id=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b_info\" role=\"status\" aria-live=\"polite\">Showing 1 to 10 of 1,000 entries</div><div class=\"dataTables_paginate paging_simple_numbers\" id=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b_paginate\"><a class=\"paginate_button previous disabled\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" data-dt-idx=\"0\" tabindex=\"0\" id=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b_previous\">Previous</a><span><a class=\"paginate_button current\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" data-dt-idx=\"1\" tabindex=\"0\">1</a><a class=\"paginate_button \" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" data-dt-idx=\"2\" tabindex=\"0\">2</a><a class=\"paginate_button \" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" data-dt-idx=\"3\" tabindex=\"0\">3</a><a class=\"paginate_button \" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" data-dt-idx=\"4\" tabindex=\"0\">4</a><a class=\"paginate_button \" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" data-dt-idx=\"5\" tabindex=\"0\">5</a><span class=\"ellipsis\">…</span><a class=\"paginate_button \" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" data-dt-idx=\"6\" tabindex=\"0\">100</a></span><a class=\"paginate_button next\" aria-controls=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b\" data-dt-idx=\"7\" tabindex=\"0\" id=\"7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b_next\">Next</a></div></div>",
       "text/plain": "<JupyterRequire.display.FrozenOutput object>"
      }
     },
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "{ \n",
       "    setTimeout(() => {\n",
       "        const table_id = '7ffd5dc2f345bdf0b5fc710bff18d73ad82a39099176c2150905ad34f9dcbb2b';\n",
       "        const table    = $(`#${table_id}_wrapper`);\n",
       "        \n",
       "        let scrollHead = table.find('div.dataTables_scrollHead');\n",
       "        let scrollBody = table.find('div.dataTables_scrollBody');\n",
       "        \n",
       "        $(scrollBody).on(\n",
       "            'scroll',\n",
       "            (e) => {\n",
       "                scrollHead.scrollLeft(scrollBody.scrollLeft());\n",
       "            },\n",
       "        );\n",
       "    }, 200);\n",
       "     }"
      ],
      "text/plain": [
       "<JupyterRequire.display.SafeScript object>"
      ]
     },
     "metadata": {
      "finalized": true
     },
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "    (function() {\n",
       "        const sample_size = Number(1000).toLocaleString();\n",
       "        const adjusted = Boolean('False' == 'True')\n",
       "\n",
       "        const total = Number(1000).toLocaleString();\n",
       "\n",
       "        element.append($('<p>').text(\n",
       "            `Sample size: ${sample_size} out of ${total} ${ adjusted ? \"(adjusted)\" : \"\" }`));\n",
       "    }());\n",
       "    "
      ],
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>Name</th>\n",
       "      <th>Company_Name</th>\n",
       "      <th>Employee_Job_Title</th>\n",
       "      <th>Employee_City</th>\n",
       "      <th>Employee_Country</th>\n",
       "      <th>Employee_Salary</th>\n",
       "      <th>Employment_Status</th>\n",
       "      <th>Employee_Rating</th>\n",
       "      <th>Credits</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>Johnny Maynard</td>\n",
       "      <td>White, Mcclain and Cobb</td>\n",
       "      <td>Equities trader</td>\n",
       "      <td>New Cindychester</td>\n",
       "      <td>Mongolia</td>\n",
       "      <td>764340</td>\n",
       "      <td>Full Time</td>\n",
       "      <td>3.3</td>\n",
       "      <td>1</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>Michael Williams</td>\n",
       "      <td>Scott Inc</td>\n",
       "      <td>Patent examiner</td>\n",
       "      <td>Ricardomouth</td>\n",
       "      <td>Guinea-Bissau</td>\n",
       "      <td>929230</td>\n",
       "      <td>Full Time</td>\n",
       "      <td>4.6</td>\n",
       "      <td>4</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>Laura Flynn</td>\n",
       "      <td>Andrade LLC</td>\n",
       "      <td>Equities trader</td>\n",
       "      <td>North Melissafurt</td>\n",
       "      <td>Tonga</td>\n",
       "      <td>606900</td>\n",
       "      <td>Intern</td>\n",
       "      <td>0.3</td>\n",
       "      <td>3</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>Stefanie Archer</td>\n",
       "      <td>James and Sons</td>\n",
       "      <td>Retail merchandiser</td>\n",
       "      <td>Ricardomouth</td>\n",
       "      <td>San Marino</td>\n",
       "      <td>775380</td>\n",
       "      <td>Full Time</td>\n",
       "      <td>2.8</td>\n",
       "      <td>5</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>Sierra Garcia</td>\n",
       "      <td>Matthews Inc</td>\n",
       "      <td>Armed forces logistics/support/administrative ...</td>\n",
       "      <td>Whitakerbury</td>\n",
       "      <td>Nepal</td>\n",
       "      <td>944480</td>\n",
       "      <td>Full Time</td>\n",
       "      <td>4.5</td>\n",
       "      <td>4</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>...</th>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>995</th>\n",
       "      <td>Mark Gordon</td>\n",
       "      <td>Baker, Allen and Edwards</td>\n",
       "      <td>Optometrist</td>\n",
       "      <td>Wardfort</td>\n",
       "      <td>Indonesia</td>\n",
       "      <td>516950</td>\n",
       "      <td>Full Time</td>\n",
       "      <td>4.5</td>\n",
       "      <td>4</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>996</th>\n",
       "      <td>Courtney Bell</td>\n",
       "      <td>Andrade LLC</td>\n",
       "      <td>Sales promotion account executive</td>\n",
       "      <td>Kristaburgh</td>\n",
       "      <td>Holy See (Vatican City State)</td>\n",
       "      <td>257400</td>\n",
       "      <td>Intern</td>\n",
       "      <td>2.8</td>\n",
       "      <td>3</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>997</th>\n",
       "      <td>Kathleen Lamb</td>\n",
       "      <td>Wallace, Smith and Shepard</td>\n",
       "      <td>Administrator</td>\n",
       "      <td>Kristaburgh</td>\n",
       "      <td>Afghanistan</td>\n",
       "      <td>861920</td>\n",
       "      <td>Full Time</td>\n",
       "      <td>1.2</td>\n",
       "      <td>2</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>998</th>\n",
       "      <td>Renee Davis</td>\n",
       "      <td>Nichols-James</td>\n",
       "      <td>Administrator</td>\n",
       "      <td>Aliciafort</td>\n",
       "      <td>Slovenia</td>\n",
       "      <td>848830</td>\n",
       "      <td>Full Time</td>\n",
       "      <td>5.0</td>\n",
       "      <td>3</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>999</th>\n",
       "      <td>Lindsey Sullivan</td>\n",
       "      <td>Baker, Allen and Edwards</td>\n",
       "      <td>Garment/textile technologist</td>\n",
       "      <td>North Melissafurt</td>\n",
       "      <td>Chile</td>\n",
       "      <td>504680</td>\n",
       "      <td>Full Time</td>\n",
       "      <td>0.1</td>\n",
       "      <td>2</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "<p>1000 rows × 9 columns</p>\n",
       "</div>"
      ],
      "text/plain": [
       "                 Name                Company_Name  \\\n",
       "0      Johnny Maynard     White, Mcclain and Cobb   \n",
       "1    Michael Williams                   Scott Inc   \n",
       "2         Laura Flynn                 Andrade LLC   \n",
       "3     Stefanie Archer              James and Sons   \n",
       "4       Sierra Garcia                Matthews Inc   \n",
       "..                ...                         ...   \n",
       "995       Mark Gordon    Baker, Allen and Edwards   \n",
       "996     Courtney Bell                 Andrade LLC   \n",
       "997     Kathleen Lamb  Wallace, Smith and Shepard   \n",
       "998       Renee Davis               Nichols-James   \n",
       "999  Lindsey Sullivan    Baker, Allen and Edwards   \n",
       "\n",
       "                                    Employee_Job_Title      Employee_City  \\\n",
       "0                                      Equities trader   New Cindychester   \n",
       "1                                      Patent examiner       Ricardomouth   \n",
       "2                                      Equities trader  North Melissafurt   \n",
       "3                                  Retail merchandiser       Ricardomouth   \n",
       "4    Armed forces logistics/support/administrative ...       Whitakerbury   \n",
       "..                                                 ...                ...   \n",
       "995                                        Optometrist           Wardfort   \n",
       "996                  Sales promotion account executive        Kristaburgh   \n",
       "997                                      Administrator        Kristaburgh   \n",
       "998                                      Administrator         Aliciafort   \n",
       "999                       Garment/textile technologist  North Melissafurt   \n",
       "\n",
       "                  Employee_Country  Employee_Salary Employment_Status  \\\n",
       "0                         Mongolia           764340         Full Time   \n",
       "1                    Guinea-Bissau           929230         Full Time   \n",
       "2                            Tonga           606900            Intern   \n",
       "3                       San Marino           775380         Full Time   \n",
       "4                            Nepal           944480         Full Time   \n",
       "..                             ...              ...               ...   \n",
       "995                      Indonesia           516950         Full Time   \n",
       "996  Holy See (Vatican City State)           257400            Intern   \n",
       "997                    Afghanistan           861920         Full Time   \n",
       "998                       Slovenia           848830         Full Time   \n",
       "999                          Chile           504680         Full Time   \n",
       "\n",
       "     Employee_Rating  Credits  \n",
       "0                3.3        1  \n",
       "1                4.6        4  \n",
       "2                0.3        3  \n",
       "3                2.8        5  \n",
       "4                4.5        4  \n",
       "..               ...      ...  \n",
       "995              4.5        4  \n",
       "996              2.8        3  \n",
       "997              1.2        2  \n",
       "998              5.0        3  \n",
       "999              0.1        2  \n",
       "\n",
       "[1000 rows x 9 columns]"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "pd.read_csv(\"../_Datasets/employee_dataset.csv\")"
   ]
  }
 ],
 "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.9.12"
  },
  "require": {
   "paths": {
    "buttons.colvis": "https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min",
    "buttons.flash": "https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min",
    "buttons.html5": "https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min",
    "buttons.print": "https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min",
    "chartjs": "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart",
    "d3": "https://d3js.org/d3.v5.min",
    "d3-array": "https://d3js.org/d3-array.v2.min",
    "datatables.net": "https://cdn.datatables.net/1.10.18/js/jquery.dataTables",
    "datatables.net-buttons": "https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min",
    "datatables.responsive": "https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min",
    "datatables.scroller": "https://cdn.datatables.net/scroller/2.0.0/js/dataTables.scroller.min",
    "datatables.select": "https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min",
    "jszip": "https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min",
    "moment": "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.0/moment",
    "pdfmake": "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min",
    "vfsfonts": "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts"
   },
   "shim": {
    "buttons.colvis": {
     "deps": [
      "jszip",
      "datatables.net-buttons"
     ]
    },
    "buttons.flash": {
     "deps": [
      "jszip",
      "datatables.net-buttons"
     ]
    },
    "buttons.html5": {
     "deps": [
      "jszip",
      "datatables.net-buttons"
     ]
    },
    "buttons.print": {
     "deps": [
      "jszip",
      "datatables.net-buttons"
     ]
    },
    "chartjs": {
     "deps": [
      "moment"
     ]
    },
    "datatables.net": {
     "exports": "$.fn.dataTable"
    },
    "datatables.net-buttons": {
     "deps": [
      "datatables.net"
     ]
    },
    "pdfmake": {
     "deps": [
      "datatables.net"
     ]
    },
    "vfsfonts": {
     "deps": [
      "datatables.net"
     ]
    }
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}