the_easiest_way_to_create_dashboard

Running

App Files Files Community

MarcSkovMadsen commited on Jan 8, 2024

Commit

19c6661

1 Parent(s): d0a54a3

Upload 2 files

Browse files

Files changed (2) hide show

index.html +372 -0
index.js +272 -0

index.html ADDED Viewed

	@@ -0,0 +1,372 @@

+<!DOCTYPE html>
+<html lang="en" >
+  <head>
+    <meta charset="utf-8">
+    <title>The easiest way to create a dashboard</title>
+    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.holoviz.org/panel/1.3.6/dist/images/apple-touch-icon.png">
+<link rel="icon" href="https://cdn.holoviz.org/panel/1.3.6/dist/images/favicon.ico" type=""><meta name="name" content="The easiest way to create a dashboard">    <style>
+      html, body {
+	display: flow-root;
+        box-sizing: border-box;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+    <link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/datatabulator/[email protected]/dist/css/tabulator_fast.min.css" type="text/css" />
+<style type="text/css">
+:host(.pn-loading),
+.pn-loading {
+  overflow: hidden;
+}
+:host(.pn-loading):before,
+.pn-loading:before {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  content: '';
+  z-index: 1000;
+  background-color: rgb(255, 255, 255, 0.5);
+  border-color: lightgray;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: auto 50%;
+  border-width: 1px;
+  cursor: progress;
+}
+:host(.pn-loading) .pn-loading-msg,
+.pn-loading .pn-loading-msg {
+  position: absolute;
+  top: 72%;
+  font-size: 2em;
+  color: black;
+  width: 100%;
+  text-align: center;
+}
+:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=");
+  background-size: auto calc(min(50%, 400px));
+}
+</style><script type="text/javascript" src="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/datatabulator/[email protected]/dist/js/tabulator.min.js"></script>
+<script type="text/javascript" src="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/datatabulator/luxon/build/global/luxon.min.js"></script>
+<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-3.3.2.min.js"></script>
+<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-3.3.2.min.js"></script>
+<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.3.2.min.js"></script>
+<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.3.2.min.js"></script>
+<script type="text/javascript" src="https://cdn.holoviz.org/panel/1.3.6/dist/panel.min.js"></script>
+<script type="text/javascript">
+  Bokeh.set_log_level("info");
+</script><!-- Template CSS -->
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
+<link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/theme/default.css">
+<link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/fastbasetemplate/fast.css">
+<link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/fastlisttemplate/fast_list_template.css">
+<style type="text/css">
+:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=");
+  background-size: auto calc(min(50%, 400px));
+}
+</style>
+<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
+<style>
+  :root {
+    --background-color: #ffffff;
+    --body-font: Open Sans, sans-serif;
+    --corner-radius: 3;
+    --header-background: #88d8b0;
+    --header-color: #ffffff;
+    --sidebar-width: 330px;
+  }
+  body {
+    color: #2B2B2B;
+    background-color: var(--background-color);
+    font-family: var(--body-font);
+  }
+  #header a {
+    color: currentColor;
+  }
+  #header-design-provider {
+    --neutral-fill-hover: var(--header-background);
+    --neutral-fill-rest: var(--header-background);
+    --neutral-foreground-rest: var(--header-color);
+    background: var(--header-background);
+    color: var(--header-color);
+  }
+  #sidebar {
+    min-width: var(--sidebar-width);
+    max-width: var(--sidebar-width);
+  }
+</style>
+<!-- Template JS -->
+<script src="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/fastbasetemplate/fast_template.js"></script>
+<script src="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/@microsoft/[email protected]/dist/fast-components.js" type="module"></script>
+<script src="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/fast/js/fast_design.js" type="module"></script>
+<!-- Fast Script -->
+<script type="text/javascript">
+document.addEventListener('DOMContentLoaded', (event) => {
+  const header_design = new window.fastDesignProvider("#header-design-provider");
+  const body_design = window.bodyDesign = new window.fastDesignProvider("#body-design-provider");
+  body_design.setLuminance(1.0);
+  body_design.setAccentColor("#88d8b0")
+  body_design.setNeutralColor("#000000");
+  header_design.setLuminance(1.0);
+  header_design.setAccentColor("#ffffff");
+  header_design.setNeutralColor("#ffffff");
+});
+</script>
+  </head>
+  <body class="pn-loading pn-arc">
+<fast-design-system-provider id="body-design-provider" use-defaults>
+  <div id="container">
+    <fast-design-system-provider id="header-design-provider">
+      <nav id="header" class="shadow" >
+	<span onclick="closeNav()" id="sidebar-button">
+	  <div class="pn-bar"></div>
+	  <div class="pn-bar"></div>
+	  <div class="pn-bar"></div>
+	</span>
+	<fast-tooltip anchor="sidebar-button" position="right">
+	  Toggle the Sidebar
+	</fast-tooltip>
+	<div class="app-header">
+	  <a class="title" href="" >The easiest way to create a dashboard</a>
+	</div>
+	<div id="header-items">
+	</div>
+	<div class="pn-toggle-theme">
+	  <fast-switch id="theme-switch" style="float: right;" onChange="toggleLightDarkTheme('default')" checked>
+	    <span slot="checked-message">
+              <svg class="theme-toggle-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"/></svg>
+	    </span>
+	    <span slot="unchecked-message">
+              <svg class="theme-toggle-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 2c-1.82 0-3.53.5-5 1.35C7.99 5.08 10 8.3 10 12s-2.01 6.92-5 8.65C6.47 21.5 8.18 22 10 22c5.52 0 10-4.48 10-10S15.52 2 10 2z"/></svg>
+	    </span>
+	  </fast-switch>
+	  <fast-tooltip anchor="theme-switch" position="bottom">
+	    Toggle the Theme
+	  </fast-tooltip>
+	</div>
+	<div class="pn-busy-container" id="busy-container">
+	  <div id="c782d72a-6832-412c-a60a-46aab1ba2d66" data-root-id="p1016" style="display: contents;"></div>
+	</div>
+	<fast-tooltip anchor="busy-container" position="left">
+	  Busy Indicator
+	</fast-tooltip>
+      </nav>
+    </fast-design-system-provider>
+    <div class="row" id="content">
+      <div class="sidenav " id="sidebar">
+	<ul class="nav flex-column">
+	  <div id="e33e4285-845f-4da7-ae9c-95060ffe746f" data-root-id="p1136" style="display: contents;"></div>
+	  <div id="df32b787-9286-4976-abd2-43562e85a7f0" data-root-id="p1139" style="display: contents;"></div>
+	  <div id="f41bb664-73df-4a71-9695-af32d1374a97" data-root-id="p1142" style="display: contents;"></div>
+	  <div id="ce806b22-555a-4ac5-b7a3-577bdf7908ed" data-root-id="p1145" style="display: contents;"></div>
+	  <div id="e247a985-568d-4956-8ed1-12c79cf78c54" data-root-id="p1148" style="display: contents;"></div>
+	</ul>
+      </div>
+      <div class="main" id="main">
+        <div class="card-margin stretch_width">
+	  <fast-card class="pn-wrapper">
+	    <span class="fullscreen-button" onclick="toggleFullScreen(this)">
+	      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
+		<path d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z"/>
+	      </svg>
+	    </span>
+	    <div id="f4222dbd-b9d5-4c01-9558-2834903307a1" data-root-id="p1017" style="display: contents;"></div>
+	  </fast-card>
+	</div>
+        <div class="card-margin stretch_width">
+	  <fast-card class="pn-wrapper">
+	    <span class="fullscreen-button" onclick="toggleFullScreen(this)">
+	      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
+		<path d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z"/>
+	      </svg>
+	    </span>
+	    <div id="b7fdfc1c-8c8f-4a65-a2b9-a00b8d605ef2" data-root-id="p1134" style="display: contents;"></div>
+	  </fast-card>
+	</div>
+      </div>
+      <fast-dialog id="pn-Modal" hidden>
+        <fast-button class="pn-modal-close" id="pn-closeModal">&times;</fast-button>
+	<div>
+	</div>
+      </fast-dialog>
+    </div>
+  </div>
+</fast-design-system-provider>
+<script type="text/javascript">
+</script>
+<script type="text/javascript">
+  function openNav() {
+    document.getElementById("sidebar").classList.remove("hidden");
+    document.getElementById("sidebar-button").onclick = closeNav;
+  }
+  function closeNav() {
+    document.getElementById("sidebar").classList.add("hidden");
+    document.getElementById("sidebar-button").onclick = openNav;
+  }
+  var modal = document.getElementById("pn-Modal");
+  var span = document.getElementById("pn-closeModal");
+  span.onclick = function() {
+    modal.style.display = "none";
+  }
+  window.onclick = function(event) {
+    if (event.target == modal) {
+      modal.style.display = "none";
+    }
+  }
+</script>
+<div id="a7e13da5-922b-4ac6-ab81-47fea6f75d1a" data-root-id="p1009" style="display: contents;"></div>
+<div id="fb035690-9903-4447-8224-f83afc4152ad" data-root-id="p1012" style="display: contents;"></div>
+<div id="e3b90b45-857a-40ad-93b5-1462446e862c" data-root-id="p1002" style="display: contents;"></div>
+<div id="c6b8852c-6dcc-4ac5-8534-fe6a348e6fe4" data-root-id="p1013" style="display: contents;"></div>
+    <script type="text/javascript">
+      const pyodideWorker = new Worker("./index.js");
+      pyodideWorker.busy = false
+      pyodideWorker.queue = []
+      function send_change(jsdoc, event) {
+        if (event.setter_id != null && event.setter_id == 'py') {
+          return
+        } else if (pyodideWorker.busy && event.model && event.attr) {
+          let events = []
+          for (const old_event of pyodideWorker.queue) {
+            if (!(old_event.model === event.model && old_event.attr === event.attr)) {
+              events.push(old_event)
+            }
+          }
+          events.push(event)
+          pyodideWorker.queue = events
+          return
+        }
+        const patch = jsdoc.create_json_patch([event])
+        pyodideWorker.busy = true
+        pyodideWorker.postMessage({type: 'patch', patch: patch})
+      }
+      pyodideWorker.onmessage = async (event) => {
+        const msg = event.data
+        const body = document.getElementsByTagName('body')[0]
+        const loading_msgs = document.getElementsByClassName('pn-loading-msg')
+        if (msg.type === 'idle') {
+          if (pyodideWorker.queue.length) {
+            const patch = pyodideWorker.jsdoc.create_json_patch(pyodideWorker.queue)
+            pyodideWorker.busy = true
+            pyodideWorker.queue = []
+            pyodideWorker.postMessage({type: 'patch', patch: patch})
+          } else {
+            pyodideWorker.busy = false
+          }
+        } else if (msg.type === 'status') {
+          let loading_msg
+          if (loading_msgs.length) {
+            loading_msg = loading_msgs[0]
+          } else if (body.classList.contains('pn-loading')) {
+            loading_msg = document.createElement('div')
+            loading_msg.classList.add('pn-loading-msg')
+            body.appendChild(loading_msg)
+          }
+          if (loading_msg != null) {
+            loading_msg.innerHTML = msg.msg
+          }
+        } else if (msg.type === 'render') {
+          const docs_json = JSON.parse(msg.docs_json)
+          const render_items = JSON.parse(msg.render_items)
+          const root_ids = JSON.parse(msg.root_ids)
+          // Remap roots in message to element IDs
+          const root_els = document.querySelectorAll('[data-root-id]')
+          const data_roots = []
+          for (const el of root_els) {
+             el.innerHTML = ''
+             data_roots.push([el.getAttribute('data-root-id'), el.id])
+          }
+          data_roots.sort((a, b) => a[0]<b[0] ? -1: 1)
+          const roots = {}
+          for (let i=0; i<data_roots.length; i++) {
+            roots[root_ids[i]] = data_roots[i][1]
+          }
+          render_items[0]['roots'] = roots
+          render_items[0]['root_ids'] = root_ids
+          // Embed content
+          const [views] = await Bokeh.embed.embed_items(docs_json, render_items)
+          // Remove loading spinner and message
+          body.classList.remove("pn-loading", "arc")
+          for (const loading_msg of loading_msgs) {
+            loading_msg.remove()
+          }
+          // Setup bi-directional syncing
+          pyodideWorker.jsdoc = jsdoc = [...views.roots.values()][0].model.document
+          jsdoc.on_change(send_change.bind(null, jsdoc), false)
+          pyodideWorker.postMessage({'type': 'rendered'})
+          pyodideWorker.postMessage({'type': 'location', location: JSON.stringify(window.location)})
+        } else if (msg.type === 'patch') {
+          pyodideWorker.jsdoc.apply_json_patch(msg.patch, msg.buffers, setter_id='py')
+        }
+      };
+    </script>
+    <script type="application/json" id="p1190">
+      {"17f176aa-cfcb-40ad-8a03-07569517267c":{"version":"3.3.2","title":"The easiest way to create a dashboard","roots":[{"type":"object","name":"panel.models.location.Location","id":"p1002","attributes":{"name":"location","reload":false}},{"type":"object","name":"panel.models.markup.HTML","id":"p1009","attributes":{"name":"js_area","stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1154","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},{"type":"object","name":"ImportedStyleSheet","id":"p1151","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/bundled/theme/fast.css"}}],"width":0,"height":0,"margin":0,"sizing_mode":"fixed","align":"start","disable_math":true}},{"type":"object","name":"panel.models.reactive_html.ReactiveHTML","id":"p1012","attributes":{"name":"actions","subscribed_events":{"type":"set","entries":["dom_event"]},"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1155","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},{"id":"p1151"}],"margin":0,"align":"start","data":{"type":"object","name":"TemplateActions1","id":"p1010","attributes":{"name":"TemplateActions01011"}},"scripts":{"type":"map","entries":[["open_modal",["document.getElementById(&amp;#x27;pn-Modal&amp;#x27;).style.display = &amp;#x27;block&amp;#x27;"]],["close_modal",["document.getElementById(&amp;#x27;pn-Modal&amp;#x27;).style.display = &amp;#x27;none&amp;#x27;"]]]}}},{"type":"object","name":"panel.models.browser.BrowserInfo","id":"p1013","attributes":{"name":"browser_info"}},{"type":"object","name":"panel.models.markup.HTML","id":"p1016","attributes":{"name":"busy_indicator","css_classes":["loader","light"],"stylesheets":[":host { --loading-spinner-size: 20px; }","\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1156","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},{"type":"object","name":"ImportedStyleSheet","id":"p1157","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loadingspinner.css"}},{"id":"p1151"}],"min_width":20,"min_height":20,"margin":[5,10],"align":"start"}},{"type":"object","name":"Row","id":"p1017","attributes":{"name":"main-139890291797520","tags":["main"],"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1006","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},{"type":"object","name":"ImportedStyleSheet","id":"p1007","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/listpanel.css"}},{"type":"object","name":"ImportedStyleSheet","id":"p1004","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/bundled/theme/default.css"}},{"type":"object","name":"ImportedStyleSheet","id":"p1005","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/bundled/theme/native.css"}}],"margin":0,"sizing_mode":"stretch_width","align":"start","children":[{"type":"object","name":"Figure","id":"p1031","attributes":{"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1158","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},{"id":"p1151"}],"width":null,"height":400,"margin":[5,10],"sizing_mode":"stretch_width","align":"start","x_range":{"type":"object","name":"Range1d","id":"p1018","attributes":{"tags":[[["mpg","mpg",null]],[]],"start":19.0,"end":44.6,"reset_start":19.0,"reset_end":44.6}},"y_range":{"type":"object","name":"Range1d","id":"p1019","attributes":{"tags":[[["hp","hp",null]],{"type":"map","entries":[["invert_yaxis",false],["autorange",false]]}],"start":48.625,"end":100.375,"reset_start":48.625,"reset_end":100.375}},"x_scale":{"type":"object","name":"LinearScale","id":"p1041"},"y_scale":{"type":"object","name":"LinearScale","id":"p1042"},"title":{"type":"object","name":"Title","id":"p1034","attributes":{"text_color":"#2B2B2B","text_font":"Open Sans, sans-serif","text_font_size":"1.15em"}},"outline_line_color":"#888888","outline_line_alpha":0.5,"outline_line_width":1,"renderers":[{"type":"object","name":"GlyphRenderer","id":"p1071","attributes":{"name":"Asia","data_source":{"type":"object","name":"ColumnDataSource","id":"p1062","attributes":{"selected":{"type":"object","name":"Selection","id":"p1063","attributes":{"indices":[],"line_indices":[]}},"selection_policy":{"type":"object","name":"UnionRenderers","id":"p1064"},"data":{"type":"map","entries":[["mpg",{"type":"ndarray","array":{"type":"bytes","data":"AAAAAAAANECamZmZmRk1QAAAAAAAADdAAAAAAAAAOEAAAAAAAAA5QAAAAAAAADpAAAAAAAAAO0AAAAAAAIA7QAAAAAAAADxAAAAAAAAAPUAAAAAAAIA9QM3MzMzMzD1AAAAAAAAAP0AAAAAAAIA/QAAAAAAAAEBAmpmZmZkZQEAzMzMzMzNAQAAAAAAAgEBAmpmZmZnZQEAAAAAAAABBQM3MzMzMjEFAAAAAAAAAQkDNzMzMzAxCQJqZmZmZ2UJAAAAAAAAAQ0DNzMzMzAxDQM3MzMzMjENAzczMzMxMRkA="},"shape":[28],"dtype":"float64","order":"little"}],["hp",{"type":"ndarray","array":{"type":"bytes","data":"AAAAAAAAVkAAAAAAAMBXQAAAAAAAQFhAAAAAAADwV0AAAAAAAMBXQAAAAAAAwFJAAAAAAAAAVkAAAAAAAMBXQAAAAAAAwFJAAAAAAADAUkAAAAAAAABRQAAAAAAAgFZAAAAAAABATUAAAAAAAABRQAAAAAAAAFNAAAAAAADAUkAAAAAAAGBSQAAAAAAAgEpAAAAAAADAUkAAAAAAAIBRQAAAAAAAAE5AAAAAAADAUkAAAAAAAABOQAAAAAAAAE9AAAAAAADAUEAAAAAAAABOQAAAAAAAAE1AAAAAAADAUEA="},"shape":[28],"dtype":"float64","order":"little"}],["origin",["Asia","Asia","Asia","Asia","Asia","Asia","Asia","Asia","Asia","Asia","Asia","Asia","Asia","Asia","Asia","Asia","Asia","Asia","Asia","Asia","Asia","Asia","Asia","Asia","Asia","Asia","Asia","Asia"]]]}}},"view":{"type":"object","name":"CDSView","id":"p1072","attributes":{"filter":{"type":"object","name":"AllIndices","id":"p1073"}}},"glyph":{"type":"object","name":"Line","id":"p1068","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"mpg"},"y":{"type":"field","field":"hp"},"line_color":"#ff6f69","line_width":6}},"selection_glyph":{"type":"object","name":"Line","id":"p1076","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"mpg"},"y":{"type":"field","field":"hp"},"line_color":"#ff6f69","line_width":6}},"nonselection_glyph":{"type":"object","name":"Line","id":"p1069","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"mpg"},"y":{"type":"field","field":"hp"},"line_color":"#ff6f69","line_alpha":0.1,"line_width":6}},"muted_glyph":{"type":"object","name":"Line","id":"p1070","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"mpg"},"y":{"type":"field","field":"hp"},"line_color":"#ff6f69","line_alpha":0.2,"line_width":6}}}},{"type":"object","name":"GlyphRenderer","id":"p1086","attributes":{"name":"Europe","data_source":{"type":"object","name":"ColumnDataSource","id":"p1077","attributes":{"selected":{"type":"object","name":"Selection","id":"p1078","attributes":{"indices":[],"line_indices":[]}},"selection_policy":{"type":"object","name":"UnionRenderers","id":"p1079"},"data":{"type":"map","entries":[["mpg",{"type":"ndarray","array":{"type":"bytes","data":"AAAAAAAANEAAAAAAAAA3QAAAAAAAADhAAAAAAAAAPUBmZmZmZiZBQA=="},"shape":[5],"dtype":"float64","order":"little"}],["hp",{"type":"ndarray","array":{"type":"bytes","data":"AAAAAADAVkAAAAAAAMBXQAAAAAAAgFZAAAAAAADAVEAAAAAAAIBTQA=="},"shape":[5],"dtype":"float64","order":"little"}],["origin",["Europe","Europe","Europe","Europe","Europe"]]]}}},"view":{"type":"object","name":"CDSView","id":"p1087","attributes":{"filter":{"type":"object","name":"AllIndices","id":"p1088"}}},"glyph":{"type":"object","name":"Line","id":"p1083","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"mpg"},"y":{"type":"field","field":"hp"},"line_color":"#ffcc5c","line_width":6}},"selection_glyph":{"type":"object","name":"Line","id":"p1090","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"mpg"},"y":{"type":"field","field":"hp"},"line_color":"#ffcc5c","line_width":6}},"nonselection_glyph":{"type":"object","name":"Line","id":"p1084","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"mpg"},"y":{"type":"field","field":"hp"},"line_color":"#ffcc5c","line_alpha":0.1,"line_width":6}},"muted_glyph":{"type":"object","name":"Line","id":"p1085","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"mpg"},"y":{"type":"field","field":"hp"},"line_color":"#ffcc5c","line_alpha":0.2,"line_width":6}}}},{"type":"object","name":"GlyphRenderer","id":"p1100","attributes":{"name":"North America","data_source":{"type":"object","name":"ColumnDataSource","id":"p1091","attributes":{"selected":{"type":"object","name":"Selection","id":"p1092","attributes":{"indices":[],"line_indices":[]}},"selection_policy":{"type":"object","name":"UnionRenderers","id":"p1093"},"data":{"type":"map","entries":[["mpg",{"type":"ndarray","array":{"type":"bytes","data":"AAAAAAAAM0AAAAAAAAA0QAAAAAAAADVAAAAAAAAANkDNzMzMzEw2QAAAAAAAADdAAAAAAAAAOEAAAAAAAIA4QAAAAAAAADlAmpmZmZkZOUAAAAAAAIA5QAAAAAAAADpAZmZmZmZmOkAAAAAAAIA6QAAAAAAAADtAAAAAAAAAPEAAAAAAAAA9QGZmZmZm5j1AAAAAAAAAPkAAAAAAAIA+QAAAAAAAAD9AzczMzMwMQEAAAAAAAABBQDMzMzMzM0FAzczMzMwMQkA="},"shape":[25],"dtype":"float64","order":"little"}],["hp",{"type":"ndarray","array":{"type":"bytes","data":"AAAAAABAVUAAAAAAAIBWQAAAAAAAwFNAAAAAAADAU0AAAAAAAABWQAAAAAAAwFRAAAAAAAAAV0AAAAAAAABOQAAAAAAAwFJAAAAAAAAAVkAAAAAAAEBWQAAAAAAAAFRAAAAAAAAAVkAAAAAAAABSQAAAAAAAAFZAAAAAAACwVUAAAAAAAABKQAAAAAAAQFBAAAAAAAAAUUAAAAAAAIBPQAAAAAAAgFRAAAAAAACAUUAAAAAAAABWQAAAAAAAQFBAAAAAAACAUEA="},"shape":[25],"dtype":"float64","order":"little"}],["origin",["North America","North America","North America","North America","North America","North America","North America","North America","North America","North America","North America","North America","North America","North America","North America","North America","North America","North America","North America","North America","North America","North America","North America","North America","North America"]]]}}},"view":{"type":"object","name":"CDSView","id":"p1101","attributes":{"filter":{"type":"object","name":"AllIndices","id":"p1102"}}},"glyph":{"type":"object","name":"Line","id":"p1097","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"mpg"},"y":{"type":"field","field":"hp"},"line_color":"#88d8b0","line_width":6}},"selection_glyph":{"type":"object","name":"Line","id":"p1104","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"mpg"},"y":{"type":"field","field":"hp"},"line_color":"#88d8b0","line_width":6}},"nonselection_glyph":{"type":"object","name":"Line","id":"p1098","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"mpg"},"y":{"type":"field","field":"hp"},"line_color":"#88d8b0","line_alpha":0.1,"line_width":6}},"muted_glyph":{"type":"object","name":"Line","id":"p1099","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"mpg"},"y":{"type":"field","field":"hp"},"line_color":"#88d8b0","line_alpha":0.2,"line_width":6}}}}],"toolbar":{"type":"object","name":"Toolbar","id":"p1040","attributes":{"tools":[{"type":"object","name":"WheelZoomTool","id":"p1023","attributes":{"tags":["hv_created"],"renderers":"auto","zoom_together":"none"}},{"type":"object","name":"HoverTool","id":"p1024","attributes":{"tags":["hv_created"],"renderers":[{"id":"p1071"},{"id":"p1086"},{"id":"p1100"}],"tooltips":[["origin","@{origin}"],["mpg","@{mpg}"],["hp","@{hp}"]]}},{"type":"object","name":"SaveTool","id":"p1053"},{"type":"object","name":"PanTool","id":"p1054"},{"type":"object","name":"BoxZoomTool","id":"p1055","attributes":{"overlay":{"type":"object","name":"BoxAnnotation","id":"p1056","attributes":{"syncable":false,"level":"overlay","visible":false,"left":{"type":"number","value":"nan"},"right":{"type":"number","value":"nan"},"top":{"type":"number","value":"nan"},"bottom":{"type":"number","value":"nan"},"left_units":"canvas","right_units":"canvas","top_units":"canvas","bottom_units":"canvas","line_color":"black","line_alpha":1.0,"line_width":2,"line_dash":[4,4],"fill_color":"lightgrey","fill_alpha":0.5}}}},{"type":"object","name":"ResetTool","id":"p1061"}],"active_drag":{"id":"p1054"},"active_scroll":{"id":"p1023"}}},"left":[{"type":"object","name":"LinearAxis","id":"p1048","attributes":{"ticker":{"type":"object","name":"BasicTicker","id":"p1049","attributes":{"mantissas":[1,2,5]}},"formatter":{"type":"object","name":"BasicTickFormatter","id":"p1050"},"axis_label":"hp","axis_label_standoff":10,"axis_label_text_color":"#2B2B2B","axis_label_text_font":"Open Sans, sans-serif","axis_label_text_font_size":"1.25em","axis_label_text_font_style":"normal","major_label_policy":{"type":"object","name":"AllLabels","id":"p1051"},"major_label_text_color":"#2B2B2B","major_label_text_font":"Open Sans, sans-serif","major_label_text_font_size":"1.025em","axis_line_color":"#2B2B2B","axis_line_alpha":0.1,"major_tick_line_color":"#2B2B2B","major_tick_line_alpha":0.5,"minor_tick_line_color":"#2B2B2B","minor_tick_line_alpha":0.25}}],"right":[{"type":"object","name":"Legend","id":"p1074","attributes":{"location":[0,0],"title":"origin","border_line_color":"#888888","border_line_alpha":0.5,"background_fill_color":"#F7F7F7","background_fill_alpha":0.25,"click_policy":"mute","label_text_color":"#2B2B2B","label_text_font":"Open Sans, sans-serif","label_text_font_size":"1.025em","label_standoff":8,"glyph_width":15,"spacing":8,"items":[{"type":"object","name":"LegendItem","id":"p1075","attributes":{"label":{"type":"value","value":"Asia"},"renderers":[{"id":"p1071"}]}},{"type":"object","name":"LegendItem","id":"p1089","attributes":{"label":{"type":"value","value":"Europe"},"renderers":[{"id":"p1086"}]}},{"type":"object","name":"LegendItem","id":"p1103","attributes":{"label":{"type":"value","value":"North America"},"renderers":[{"id":"p1100"}]}}]}}],"below":[{"type":"object","name":"LinearAxis","id":"p1043","attributes":{"ticker":{"type":"object","name":"BasicTicker","id":"p1044","attributes":{"mantissas":[1,2,5]}},"formatter":{"type":"object","name":"BasicTickFormatter","id":"p1045"},"axis_label":"mpg","axis_label_standoff":10,"axis_label_text_color":"#2B2B2B","axis_label_text_font":"Open Sans, sans-serif","axis_label_text_font_size":"1.25em","axis_label_text_font_style":"normal","major_label_policy":{"type":"object","name":"AllLabels","id":"p1046"},"major_label_text_color":"#2B2B2B","major_label_text_font":"Open Sans, sans-serif","major_label_text_font_size":"1.025em","axis_line_color":"#2B2B2B","axis_line_alpha":0.1,"major_tick_line_color":"#2B2B2B","major_tick_line_alpha":0.5,"minor_tick_line_color":"#2B2B2B","minor_tick_line_alpha":0.25}}],"center":[{"type":"object","name":"Grid","id":"p1047","attributes":{"axis":{"id":"p1043"},"grid_line_color":null,"grid_line_alpha":0.25}},{"type":"object","name":"Grid","id":"p1052","attributes":{"dimension":1,"axis":{"id":"p1048"},"grid_line_color":null,"grid_line_alpha":0.25}}],"background_fill_color":"#ffffff","border_fill_color":"#F7F7F7","border_fill_alpha":0,"min_border_top":10,"min_border_bottom":10,"min_border_left":10,"min_border_right":10,"output_backend":"webgl"}}]}},{"type":"object","name":"panel.models.tabulator.DataTabulator","id":"p1134","attributes":{"name":"main-139890291538768","tags":["main"],"subscribed_events":{"type":"set","entries":["cell-click","selection-change","table-edit"]},"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1160","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},{"type":"object","name":"ImportedStyleSheet","id":"p1161","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/bundled/font-awesome/css/all.min.css"}},{"id":"p1151"},{"type":"object","name":"ImportedStyleSheet","id":"p1159","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/bundled/datatabulator/[email protected]/dist/css/tabulator_fast.min.css"}}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","configuration":{"type":"map","entries":[["selectable",true],["columns",[{"type":"map","entries":[["field","index"],["sorter","number"]]},{"type":"map","entries":[["field","origin"]]},{"type":"map","entries":[["field","mpg"],["sorter","number"]]},{"type":"map","entries":[["field","hp"],["sorter","number"]]}]],["dataTree",false]]},"columns":[{"type":"object","name":"TableColumn","id":"p1113","attributes":{"field":"index","title":"index","width":0,"formatter":{"type":"object","name":"NumberFormatter","id":"p1112","attributes":{"text_align":"left"}},"editor":{"type":"object","name":"CellEditor","id":"p1111"}}},{"type":"object","name":"TableColumn","id":"p1118","attributes":{"field":"origin","title":"origin","width":0,"formatter":{"type":"object","name":"StringFormatter","id":"p1117"},"editor":{"type":"object","name":"StringEditor","id":"p1116"}}},{"type":"object","name":"TableColumn","id":"p1123","attributes":{"field":"mpg","title":"mpg","width":0,"formatter":{"type":"object","name":"NumberFormatter","id":"p1122","attributes":{"text_align":"right","format":"0,0.0[00000]"}},"editor":{"type":"object","name":"NumberEditor","id":"p1121"}}},{"type":"object","name":"TableColumn","id":"p1128","attributes":{"field":"hp","title":"hp","width":0,"formatter":{"type":"object","name":"NumberFormatter","id":"p1127","attributes":{"text_align":"right","format":"0,0.0[00000]"}},"editor":{"type":"object","name":"NumberEditor","id":"p1126"}}}],"indexes":["index"],"layout":"fit_data_table","source":{"type":"object","name":"ColumnDataSource","id":"p1131","attributes":{"selected":{"type":"object","name":"Selection","id":"p1132","attributes":{"indices":[],"line_indices":[]}},"selection_policy":{"type":"object","name":"UnionRenderers","id":"p1133"},"data":{"type":"map","entries":[["index",{"type":"ndarray","array":{"type":"bytes","data":"IQAAAAAAAAAiAAAAHAAAACMAAAABAAAAJAAAACUAAAAdAAAAAgAAAA=="},"shape":[10],"dtype":"int32","order":"little"}],["origin",{"type":"ndarray","array":["North America","Asia","North America","Europe","North America","Asia","North America","North America","Europe","Asia"],"shape":[10],"dtype":"object","order":"little"}],["mpg",{"type":"ndarray","array":{"type":"bytes","data":"AAAAAAAAM0AAAAAAAAA0QAAAAAAAADRAAAAAAAAANEAAAAAAAAA1QJqZmZmZGTVAAAAAAAAANkDNzMzMzEw2QAAAAAAAADdAAAAAAAAAN0A="},"shape":[10],"dtype":"float64","order":"little"}],["hp",{"type":"ndarray","array":{"type":"bytes","data":"AAAAAABAVUAAAAAAAABWQAAAAAAAgFZAAAAAAADAVkAAAAAAAMBTQAAAAAAAwFdAAAAAAADAU0AAAAAAAABWQAAAAAAAwFdAAAAAAABAWEA="},"shape":[10],"dtype":"float64","order":"little"}]]}}},"cell_styles":{"type":"map","entries":[["id","a80f3355f63745bdb70d58ff04c43e65"],["data",{"type":"map"}]]},"pagination":"remote","page":1,"page_size":10,"max_page":6,"select_mode":true,"selectable_rows":null}},{"type":"object","name":"Slider","id":"p1136","attributes":{"name":"nav-139890338564752","tags":["nav"],"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1162","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},{"id":"p1151"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","title":"Cylinders","start":4,"end":8,"value":4,"step":2}},{"type":"object","name":"panel.models.markup.HTML","id":"p1139","attributes":{"name":"nav-139890292094736","tags":["nav"],"css_classes":["markdown"],"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1163","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},{"type":"object","name":"ImportedStyleSheet","id":"p1164","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/markdown.css"}},{"id":"p1151"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","text":"&amp;lt;p&amp;gt;Manufacturers&amp;lt;/p&amp;gt;\n"}},{"type":"object","name":"panel.models.widgets.CheckboxButtonGroup","id":"p1142","attributes":{"button_type":"primary","name":"nav-139890351409936","tags":["nav"],"css_classes":["outline"],"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1165","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},{"type":"object","name":"ImportedStyleSheet","id":"p1166","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/button.css"}},{"id":"p1151"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","labels":["ford","chevrolet","honda","toyota","audi"],"active":[0,1,2,3,4]}},{"type":"object","name":"panel.models.markup.HTML","id":"p1145","attributes":{"name":"nav-139890291898384","tags":["nav"],"css_classes":["markdown"],"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1167","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},{"type":"object","name":"ImportedStyleSheet","id":"p1168","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/markdown.css"}},{"id":"p1151"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","text":"&amp;lt;p&amp;gt;Y axis&amp;lt;/p&amp;gt;\n"}},{"type":"object","name":"panel.models.widgets.RadioButtonGroup","id":"p1148","attributes":{"button_type":"primary","name":"nav-139890293454416","tags":["nav"],"css_classes":["outline"],"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1169","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},{"type":"object","name":"ImportedStyleSheet","id":"p1170","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/button.css"}},{"id":"p1151"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","labels":["hp","weight"],"active":0}}],"defs":[{"type":"model","name":"ReactiveHTML1"},{"type":"model","name":"FlexBox1","properties":[{"name":"align_content","kind":"Any","default":"flex-start"},{"name":"align_items","kind":"Any","default":"flex-start"},{"name":"flex_direction","kind":"Any","default":"row"},{"name":"flex_wrap","kind":"Any","default":"wrap"},{"name":"justify_content","kind":"Any","default":"flex-start"}]},{"type":"model","name":"FloatPanel1","properties":[{"name":"config","kind":"Any","default":{"type":"map"}},{"name":"contained","kind":"Any","default":true},{"name":"position","kind":"Any","default":"right-top"},{"name":"offsetx","kind":"Any","default":null},{"name":"offsety","kind":"Any","default":null},{"name":"theme","kind":"Any","default":"primary"},{"name":"status","kind":"Any","default":"normalized"}]},{"type":"model","name":"GridStack1","properties":[{"name":"mode","kind":"Any","default":"warn"},{"name":"ncols","kind":"Any","default":null},{"name":"nrows","kind":"Any","default":null},{"name":"allow_resize","kind":"Any","default":true},{"name":"allow_drag","kind":"Any","default":true},{"name":"state","kind":"Any","default":[]}]},{"type":"model","name":"drag1","properties":[{"name":"slider_width","kind":"Any","default":5},{"name":"slider_color","kind":"Any","default":"black"},{"name":"value","kind":"Any","default":50}]},{"type":"model","name":"click1","properties":[{"name":"terminal_output","kind":"Any","default":""},{"name":"debug_name","kind":"Any","default":""},{"name":"clears","kind":"Any","default":0}]},{"type":"model","name":"copy_to_clipboard1","properties":[{"name":"fill","kind":"Any","default":"none"},{"name":"value","kind":"Any","default":null}]},{"type":"model","name":"FastWrapper1","properties":[{"name":"object","kind":"Any","default":null},{"name":"style","kind":"Any","default":null}]},{"type":"model","name":"NotificationAreaBase1","properties":[{"name":"js_events","kind":"Any","default":{"type":"map"}},{"name":"position","kind":"Any","default":"bottom-right"},{"name":"_clear","kind":"Any","default":0}]},{"type":"model","name":"NotificationArea1","properties":[{"name":"js_events","kind":"Any","default":{"type":"map"}},{"name":"notifications","kind":"Any","default":[]},{"name":"position","kind":"Any","default":"bottom-right"},{"name":"_clear","kind":"Any","default":0},{"name":"types","kind":"Any","default":[{"type":"map","entries":[["type","warning"],["background","#ffc107"],["icon",{"type":"map","entries":[["className","fas fa-exclamation-triangle"],["tagName","i"],["color","white"]]}]]},{"type":"map","entries":[["type","info"],["background","#007bff"],["icon",{"type":"map","entries":[["className","fas fa-info-circle"],["tagName","i"],["color","white"]]}]]}]}]},{"type":"model","name":"Notification","properties":[{"name":"background","kind":"Any","default":null},{"name":"duration","kind":"Any","default":3000},{"name":"icon","kind":"Any","default":null},{"name":"message","kind":"Any","default":""},{"name":"notification_type","kind":"Any","default":null},{"name":"_destroyed","kind":"Any","default":false}]},{"type":"model","name":"TemplateActions1","properties":[{"name":"open_modal","kind":"Any","default":0},{"name":"close_modal","kind":"Any","default":0}]},{"type":"model","name":"BootstrapTemplateActions1","properties":[{"name":"open_modal","kind":"Any","default":0},{"name":"close_modal","kind":"Any","default":0}]},{"type":"model","name":"MaterialTemplateActions1","properties":[{"name":"open_modal","kind":"Any","default":0},{"name":"close_modal","kind":"Any","default":0}]}]}}
+    </script>
+    <script type="text/javascript">
+      (function() {
+        const fn = function() {
+          Bokeh.safely(function() {
+            (function(root) {
+              function embed_document(root) {
+              const docs_json = document.getElementById('p1190').textContent;
+              const render_items = [{"docid":"17f176aa-cfcb-40ad-8a03-07569517267c","roots":{"p1002":"e3b90b45-857a-40ad-93b5-1462446e862c","p1009":"a7e13da5-922b-4ac6-ab81-47fea6f75d1a","p1012":"fb035690-9903-4447-8224-f83afc4152ad","p1013":"c6b8852c-6dcc-4ac5-8534-fe6a348e6fe4","p1016":"c782d72a-6832-412c-a60a-46aab1ba2d66","p1017":"f4222dbd-b9d5-4c01-9558-2834903307a1","p1134":"b7fdfc1c-8c8f-4a65-a2b9-a00b8d605ef2","p1136":"e33e4285-845f-4da7-ae9c-95060ffe746f","p1139":"df32b787-9286-4976-abd2-43562e85a7f0","p1142":"f41bb664-73df-4a71-9695-af32d1374a97","p1145":"ce806b22-555a-4ac5-b7a3-577bdf7908ed","p1148":"e247a985-568d-4956-8ed1-12c79cf78c54"},"root_ids":["p1002","p1009","p1012","p1013","p1016","p1017","p1134","p1136","p1139","p1142","p1145","p1148"]}];
+              root.Bokeh.embed.embed_items(docs_json, render_items);
+              }
+              if (root.Bokeh !== undefined) {
+                embed_document(root);
+              } else {
+                let attempts = 0;
+                const timer = setInterval(function(root) {
+                  if (root.Bokeh !== undefined) {
+                    clearInterval(timer);
+                    embed_document(root);
+                  } else {
+                    attempts++;
+                    if (attempts > 100) {
+                      clearInterval(timer);
+                      console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
+                    }
+                  }
+                }, 10, root)
+              }
+            })(window);
+          });
+        };
+        if (document.readyState != "loading") fn();
+        else document.addEventListener("DOMContentLoaded", fn);
+      })();
+    </script>
+  </body>
+</html>

index.js ADDED Viewed

	@@ -0,0 +1,272 @@

+importScripts("https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js");
+function sendPatch(patch, buffers, msg_id) {
+  self.postMessage({
+    type: 'patch',
+    patch: patch,
+    buffers: buffers
+  })
+}
+async function startApplication() {
+  console.log("Loading pyodide!");
+  self.postMessage({type: 'status', msg: 'Loading pyodide'})
+  self.pyodide = await loadPyodide();
+  self.pyodide.globals.set("sendPatch", sendPatch);
+  console.log("Loaded!");
+  await self.pyodide.loadPackage("micropip");
+  const env_spec = ['https://cdn.holoviz.org/panel/wheels/bokeh-3.3.2-py3-none-any.whl', 'https://cdn.holoviz.org/panel/1.3.6/dist/wheels/panel-1.3.6-py3-none-any.whl', 'pyodide-http==0.2.1', 'holoviews', 'hvplot', 'param', 'pandas']
+  for (const pkg of env_spec) {
+    let pkg_name;
+    if (pkg.endsWith('.whl')) {
+      pkg_name = pkg.split('/').slice(-1)[0].split('-')[0]
+    } else {
+      pkg_name = pkg
+    }
+    self.postMessage({type: 'status', msg: `Installing ${pkg_name}`})
+    try {
+      await self.pyodide.runPythonAsync(`
+        import micropip
+        await micropip.install('${pkg}');
+      `);
+    } catch(e) {
+      console.log(e)
+      self.postMessage({
+	type: 'status',
+	msg: `Error while installing ${pkg_name}`
+      });
+    }
+  }
+  console.log("Packages loaded!");
+  self.postMessage({type: 'status', msg: 'Executing code'})
+  const code = `
+import asyncio
+from panel.io.pyodide import init_doc, write_doc
+init_doc()
+#!/usr/bin/env python
+# coding: utf-8
+# # The Easiest Way to Create an Interactive Dashboard in Python
+#
+# This notebook is an updated version of the original notebook supporting the blog post
+#
+# **[The Easiest Way to Create an Interactive Dashboard in Python](https://towardsdatascience.com/the-easiest-way-to-create-an-interactive-dashboard-in-python-77440f2511d1)**. Turn Pandas pipelines into a
+# dashboard using [\`param.rx\`](https://param.holoviz.org/user_guide/Reactive_Expressions.html) and [panel.ReactiveExpr](https://panel.holoviz.org/reference/panes/ReactiveExpr.html).
+#
+# by *Sophia Yang* and *Marc Skov Madsen*.
+#
+# ![Data App](https://github.com/sophiamyang/hvplot_interactive/blob/main/assets/easy-dataframe-dashboards.gif?raw=true)
+# ## Import and configure packages
+#
+# Please note that in **Colab** you will need to \`!pip install panel hvplot\`. In VS Code notebooks you will need to install \`!pip install panel hvplot jupyter_bokeh\`.
+# In[ ]:
+# !pip install panel==1.3.6 hvplot==0.9.1 # colab
+# !pip install panel==1.3.6 hvplot==0.9.1 jupyter_bokeh==3.0.7 # vscode
+# In[ ]:
+import param
+import panel as pn
+pn.extension('tabulator', sizing_mode="stretch_width")
+# In[ ]:
+import hvplot.pandas
+import holoviews as hv
+hv.extension('bokeh')
+# ## Define Color Palette
+# In[ ]:
+PALETTE = ["#ff6f69", "#ffcc5c", "#88d8b0", ]
+pn.Row(
+    pn.layout.HSpacer(height=50, styles={"background": PALETTE[0]}),
+    pn.layout.HSpacer(height=50, styles={"background": PALETTE[1]}),
+    pn.layout.HSpacer(height=50, styles={"background": PALETTE[2]}),
+)
+# ## Load Data
+# In[ ]:
+from bokeh.sampledata.autompg import autompg_clean as df
+df.head(3)
+# ## Define DataFrame Pipeline
+# In[ ]:
+def get_data(df, cylinders=4, mfr=['ford','chevrolet'], yaxis="hp"):
+    return (
+        df[
+            (df.cyl == cylinders) &
+            (df.mfr.isin(mfr))
+        ]
+        .groupby(['origin', 'mpg'])[yaxis].mean()
+        .to_frame()
+        .reset_index()
+        .sort_values(by='mpg')
+    )
+get_data(df).head(3)
+# ## Make DataFrame Pipeline Interactive
+# Define [Panel widgets](https://panel.holoviz.org/reference/index.html#widgets)
+# In[ ]:
+cylinders = pn.widgets.IntSlider(name='Cylinders', start=4, end=8, step=2)
+mfr = pn.widgets.ToggleGroup(
+    name='MFR',
+    options=['ford', 'chevrolet', 'honda', 'toyota', 'audi'],
+    value=['ford', 'chevrolet', 'honda', 'toyota', 'audi'],
+    button_type='primary', button_style="outline")
+yaxis = pn.widgets.RadioButtonGroup(
+    name='Y axis',
+    options=['hp', 'weight'],
+    button_type='primary', button_style="outline"
+)
+# Combine pipeline and widgets
+# In[ ]:
+ipipeline=param.rx(get_data)(df, cylinders, mfr, yaxis)
+ipipeline.head()
+# ## Pipe to Tabulator
+# In[ ]:
+itable = pn.widgets.Tabulator(ipipeline, pagination='remote', page_size=10)
+itable
+# Check out the [Tabulator Reference Guide](https://panel.holoviz.org/reference/widgets/Tabulator.html) for more inspiration.
+# ## Pipe to hvPlot and HoloViews
+# First we will create the interactive plot with [hvPlot](https://hvplot.holoviz.org/).
+# In[ ]:
+ihvplot = ipipeline.hvplot(x='mpg', y=yaxis, by='origin', color=PALETTE, line_width=6, height=400, responsive=True)
+ihvplot
+# The we will put it in a HoloViews pane
+# In[ ]:
+iplot = pn.pane.HoloViews(ihvplot)
+iplot
+# Check out the [HoloViews Reference Guide](https://panel.holoviz.org/reference/panes/HoloViews.html) for more inspiration
+# ## Layout using Template
+#
+# Here we use the [FastListTemplate](https://panel.holoviz.org/reference/templates/FastListTemplate.html#templates-gallery-fastlisttemplate).
+# In[ ]:
+template = pn.template.FastListTemplate(
+    title='The easiest way to create a dashboard',
+    sidebar=[cylinders, 'Manufacturers', mfr, 'Y axis' , yaxis],
+    main=[iplot, itable],
+    accent_base_color="#88d8b0",
+    header_background="#88d8b0",
+    # main_layout=None, # Use this if you want a gray sidebar and white main area
+)
+template.servable(); # Add semicolon because templates don't render well in a notebook
+# To *serve the notebook* run \`panel serve the_easiest_way_to_create_dashboard.ipynb\`.
+await write_doc()
+  `
+  try {
+    const [docs_json, render_items, root_ids] = await self.pyodide.runPythonAsync(code)
+    self.postMessage({
+      type: 'render',
+      docs_json: docs_json,
+      render_items: render_items,
+      root_ids: root_ids
+    })
+  } catch(e) {
+    const traceback = `${e}`
+    const tblines = traceback.split('\n')
+    self.postMessage({
+      type: 'status',
+      msg: tblines[tblines.length-2]
+    });
+    throw e
+  }
+}
+self.onmessage = async (event) => {
+  const msg = event.data
+  if (msg.type === 'rendered') {
+    self.pyodide.runPythonAsync(`
+    from panel.io.state import state
+    from panel.io.pyodide import _link_docs_worker
+    _link_docs_worker(state.curdoc, sendPatch, setter='js')
+    `)
+  } else if (msg.type === 'patch') {
+    self.pyodide.globals.set('patch', msg.patch)
+    self.pyodide.runPythonAsync(`
+    state.curdoc.apply_json_patch(patch.to_py(), setter='js')
+    `)
+    self.postMessage({type: 'idle'})
+  } else if (msg.type === 'location') {
+    self.pyodide.globals.set('location', msg.location)
+    self.pyodide.runPythonAsync(`
+    import json
+    from panel.io.state import state
+    from panel.util import edit_readonly
+    if state.location:
+        loc_data = json.loads(location)
+        with edit_readonly(state.location):
+            state.location.param.update({
+                k: v for k, v in loc_data.items() if k in state.location.param
+            })
+    `)
+  }
+}
+startApplication()