{ "cells": [ { "cell_type": "code", "execution_count": 1, "id": "0fdb14d6-64c7-49f2-b5e8-4d4ba13f1e97", "metadata": {}, "outputs": [], "source": [ "# from https://github.com/thu-vu92/python-dashboard-panel/blob/main/Interactive_dashboard.ipynb" ] }, { "cell_type": "code", "execution_count": 1, "id": "fe8c8425-561a-417d-b3a8-797da82f5009", "metadata": {}, "outputs": [], "source": [ "### this may work as a pyscript example later" ] }, { "cell_type": "code", "execution_count": 2, "id": "5bdcba62-bfaf-4ce9-b9aa-68283d75e1c1", "metadata": {}, "outputs": [ { "data": { "application/javascript": [ "(function(root) {\n", " function now() {\n", " return new Date();\n", " }\n", "\n", " var force = true;\n", "\n", " if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n", " root._bokeh_onload_callbacks = [];\n", " root._bokeh_is_loading = undefined;\n", " }\n", "\n", " if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n", " root._bokeh_timeout = Date.now() + 5000;\n", " root._bokeh_failed_load = false;\n", " }\n", "\n", " function run_callbacks() {\n", " try {\n", " root._bokeh_onload_callbacks.forEach(function(callback) {\n", " if (callback != null)\n", " callback();\n", " });\n", " } finally {\n", " delete root._bokeh_onload_callbacks\n", " }\n", " console.debug(\"Bokeh: all callbacks have finished\");\n", " }\n", "\n", " function load_libs(css_urls, js_urls, js_modules, callback) {\n", " if (css_urls == null) css_urls = [];\n", " if (js_urls == null) js_urls = [];\n", " if (js_modules == null) js_modules = [];\n", "\n", " root._bokeh_onload_callbacks.push(callback);\n", " if (root._bokeh_is_loading > 0) {\n", " console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n", " return null;\n", " }\n", " if (js_urls.length === 0 && js_modules.length === 0) {\n", " run_callbacks();\n", " return null;\n", " }\n", " console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n", "\n", " function on_load() {\n", " root._bokeh_is_loading--;\n", " if (root._bokeh_is_loading === 0) {\n", " console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n", " run_callbacks()\n", " }\n", " }\n", "\n", " function on_error() {\n", " console.error(\"failed to load \" + url);\n", " }\n", "\n", " for (var i = 0; i < css_urls.length; i++) {\n", " var url = css_urls[i];\n", " const element = document.createElement(\"link\");\n", " element.onload = on_load;\n", " element.onerror = on_error;\n", " element.rel = \"stylesheet\";\n", " element.type = \"text/css\";\n", " element.href = url;\n", " console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n", " document.body.appendChild(element);\n", " }\n", "\n", " var skip = [];\n", " if (window.requirejs) {\n", " window.requirejs.config({'packages': {}, 'paths': {'gridstack': 'https://cdn.jsdelivr.net/npm/gridstack@4.2.5/dist/gridstack-h5', 'notyf': 'https://cdn.jsdelivr.net/npm/notyf@3/notyf.min'}, 'shim': {'gridstack': {'exports': 'GridStack'}}});\n", " require([\"gridstack\"], function(GridStack) {\n", "\twindow.GridStack = GridStack\n", "\ton_load()\n", " })\n", " require([\"notyf\"], function() {\n", "\ton_load()\n", " })\n", " root._bokeh_is_loading = css_urls.length + 2;\n", " } else {\n", " root._bokeh_is_loading = css_urls.length + js_urls.length + js_modules.length;\n", " } if (((window['GridStack'] !== undefined) && (!(window['GridStack'] instanceof HTMLElement))) || window.requirejs) {\n", " var urls = ['https://cdn.jsdelivr.net/npm/gridstack@4.2.5/dist/gridstack-h5.js'];\n", " for (var i = 0; i < urls.length; i++) {\n", " skip.push(urls[i])\n", " }\n", " } if (((window['Notyf'] !== undefined) && (!(window['Notyf'] instanceof HTMLElement))) || window.requirejs) {\n", " var urls = ['https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js'];\n", " for (var i = 0; i < urls.length; i++) {\n", " skip.push(urls[i])\n", " }\n", " } for (var i = 0; i < js_urls.length; i++) {\n", " var url = js_urls[i];\n", " if (skip.indexOf(url) >= 0) {\n", "\tif (!window.requirejs) {\n", "\t on_load();\n", "\t}\n", "\tcontinue;\n", " }\n", " var element = document.createElement('script');\n", " element.onload = on_load;\n", " element.onerror = on_error;\n", " element.async = false;\n", " element.src = url;\n", " console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n", " document.head.appendChild(element);\n", " }\n", " for (var i = 0; i < js_modules.length; i++) {\n", " var url = js_modules[i];\n", " if (skip.indexOf(url) >= 0) {\n", "\tif (!window.requirejs) {\n", "\t on_load();\n", "\t}\n", "\tcontinue;\n", " }\n", " var element = document.createElement('script');\n", " element.onload = on_load;\n", " element.onerror = on_error;\n", " element.async = false;\n", " element.src = url;\n", " element.type = \"module\";\n", " console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n", " document.head.appendChild(element);\n", " }\n", " if (!js_urls.length && !js_modules.length) {\n", " on_load()\n", " }\n", " };\n", "\n", " function inject_raw_css(css) {\n", " const element = document.createElement(\"style\");\n", " element.appendChild(document.createTextNode(css));\n", " document.body.appendChild(element);\n", " }\n", "\n", " var js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.3.min.js\", \"https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js\", \"https://unpkg.com/@holoviz/panel@0.13.1/dist/panel.min.js\"];\n", " var js_modules = [];\n", " var css_urls = [\"https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css\", \"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css\", \"https://unpkg.com/@holoviz/panel@0.13.1/dist/css/alerts.css\", \"https://unpkg.com/@holoviz/panel@0.13.1/dist/css/card.css\", \"https://unpkg.com/@holoviz/panel@0.13.1/dist/css/dataframe.css\", \"https://unpkg.com/@holoviz/panel@0.13.1/dist/css/debugger.css\", \"https://unpkg.com/@holoviz/panel@0.13.1/dist/css/json.css\", \"https://unpkg.com/@holoviz/panel@0.13.1/dist/css/loading.css\", \"https://unpkg.com/@holoviz/panel@0.13.1/dist/css/markdown.css\", \"https://unpkg.com/@holoviz/panel@0.13.1/dist/css/widgets.css\"];\n", " var inline_js = [ function(Bokeh) {\n", " inject_raw_css(\"\\n .bk.pn-loading.arcs:before {\\n background-image: url(\\\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIj4gIDxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjMyIiBzdHJva2Utd2lkdGg9IjgiIHN0cm9rZT0iI2MzYzNjMyIgc3Ryb2tlLWRhc2hhcnJheT0iNTAuMjY1NDgyNDU3NDM2NjkgNTAuMjY1NDgyNDU3NDM2NjkiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+ICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIxcyIga2V5VGltZXM9IjA7MSIgdmFsdWVzPSIwIDUwIDUwOzM2MCA1MCA1MCI+PC9hbmltYXRlVHJhbnNmb3JtPiAgPC9jaXJjbGU+PC9zdmc+\\\");\\n background-size: auto calc(min(50%, 400px));\\n }\\n \");\n", " }, function(Bokeh) {\n", " Bokeh.set_log_level(\"info\");\n", " },\n", "function(Bokeh) {} // ensure no trailing comma for IE\n", " ];\n", "\n", " function run_inline_js() {\n", " if ((root.Bokeh !== undefined) || (force === true)) {\n", " for (var i = 0; i < inline_js.length; i++) {\n", " inline_js[i].call(root, root.Bokeh);\n", " }} else if (Date.now() < root._bokeh_timeout) {\n", " setTimeout(run_inline_js, 100);\n", " } else if (!root._bokeh_failed_load) {\n", " console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n", " root._bokeh_failed_load = true;\n", " }\n", " }\n", "\n", " if (root._bokeh_is_loading === 0) {\n", " console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n", " run_inline_js();\n", " } else {\n", " load_libs(css_urls, js_urls, js_modules, function() {\n", " console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n", " run_inline_js();\n", " });\n", " }\n", "}(window));" ], "application/vnd.holoviews_load.v0+json": "(function(root) {\n function now() {\n return new Date();\n }\n\n var force = true;\n\n if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n root._bokeh_onload_callbacks = [];\n root._bokeh_is_loading = undefined;\n }\n\n if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n root._bokeh_timeout = Date.now() + 5000;\n root._bokeh_failed_load = false;\n }\n\n function run_callbacks() {\n try {\n root._bokeh_onload_callbacks.forEach(function(callback) {\n if (callback != null)\n callback();\n });\n } finally {\n delete root._bokeh_onload_callbacks\n }\n console.debug(\"Bokeh: all callbacks have finished\");\n }\n\n function load_libs(css_urls, js_urls, js_modules, callback) {\n if (css_urls == null) css_urls = [];\n if (js_urls == null) js_urls = [];\n if (js_modules == null) js_modules = [];\n\n root._bokeh_onload_callbacks.push(callback);\n if (root._bokeh_is_loading > 0) {\n console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n return null;\n }\n if (js_urls.length === 0 && js_modules.length === 0) {\n run_callbacks();\n return null;\n }\n console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n\n function on_load() {\n root._bokeh_is_loading--;\n if (root._bokeh_is_loading === 0) {\n console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n run_callbacks()\n }\n }\n\n function on_error() {\n console.error(\"failed to load \" + url);\n }\n\n for (var i = 0; i < css_urls.length; i++) {\n var url = css_urls[i];\n const element = document.createElement(\"link\");\n element.onload = on_load;\n element.onerror = on_error;\n element.rel = \"stylesheet\";\n element.type = \"text/css\";\n element.href = url;\n console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n document.body.appendChild(element);\n }\n\n var skip = [];\n if (window.requirejs) {\n window.requirejs.config({'packages': {}, 'paths': {'gridstack': 'https://cdn.jsdelivr.net/npm/gridstack@4.2.5/dist/gridstack-h5', 'notyf': 'https://cdn.jsdelivr.net/npm/notyf@3/notyf.min'}, 'shim': {'gridstack': {'exports': 'GridStack'}}});\n require([\"gridstack\"], function(GridStack) {\n\twindow.GridStack = GridStack\n\ton_load()\n })\n require([\"notyf\"], function() {\n\ton_load()\n })\n root._bokeh_is_loading = css_urls.length + 2;\n } else {\n root._bokeh_is_loading = css_urls.length + js_urls.length + js_modules.length;\n } if (((window['GridStack'] !== undefined) && (!(window['GridStack'] instanceof HTMLElement))) || window.requirejs) {\n var urls = ['https://cdn.jsdelivr.net/npm/gridstack@4.2.5/dist/gridstack-h5.js'];\n for (var i = 0; i < urls.length; i++) {\n skip.push(urls[i])\n }\n } if (((window['Notyf'] !== undefined) && (!(window['Notyf'] instanceof HTMLElement))) || window.requirejs) {\n var urls = ['https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js'];\n for (var i = 0; i < urls.length; i++) {\n skip.push(urls[i])\n }\n } for (var i = 0; i < js_urls.length; i++) {\n var url = js_urls[i];\n if (skip.indexOf(url) >= 0) {\n\tif (!window.requirejs) {\n\t on_load();\n\t}\n\tcontinue;\n }\n var element = document.createElement('script');\n element.onload = on_load;\n element.onerror = on_error;\n element.async = false;\n element.src = url;\n console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n document.head.appendChild(element);\n }\n for (var i = 0; i < js_modules.length; i++) {\n var url = js_modules[i];\n if (skip.indexOf(url) >= 0) {\n\tif (!window.requirejs) {\n\t on_load();\n\t}\n\tcontinue;\n }\n var element = document.createElement('script');\n element.onload = on_load;\n element.onerror = on_error;\n element.async = false;\n element.src = url;\n element.type = \"module\";\n console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n document.head.appendChild(element);\n }\n if (!js_urls.length && !js_modules.length) {\n on_load()\n }\n };\n\n function inject_raw_css(css) {\n const element = document.createElement(\"style\");\n element.appendChild(document.createTextNode(css));\n document.body.appendChild(element);\n }\n\n var js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.3.min.js\", \"https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js\", \"https://unpkg.com/@holoviz/panel@0.13.1/dist/panel.min.js\"];\n var js_modules = [];\n var css_urls = [\"https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css\", \"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css\", \"https://unpkg.com/@holoviz/panel@0.13.1/dist/css/alerts.css\", \"https://unpkg.com/@holoviz/panel@0.13.1/dist/css/card.css\", \"https://unpkg.com/@holoviz/panel@0.13.1/dist/css/dataframe.css\", \"https://unpkg.com/@holoviz/panel@0.13.1/dist/css/debugger.css\", \"https://unpkg.com/@holoviz/panel@0.13.1/dist/css/json.css\", \"https://unpkg.com/@holoviz/panel@0.13.1/dist/css/loading.css\", \"https://unpkg.com/@holoviz/panel@0.13.1/dist/css/markdown.css\", \"https://unpkg.com/@holoviz/panel@0.13.1/dist/css/widgets.css\"];\n var inline_js = [ function(Bokeh) {\n inject_raw_css(\"\\n .bk.pn-loading.arcs:before {\\n background-image: url(\\\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIj4gIDxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjMyIiBzdHJva2Utd2lkdGg9IjgiIHN0cm9rZT0iI2MzYzNjMyIgc3Ryb2tlLWRhc2hhcnJheT0iNTAuMjY1NDgyNDU3NDM2NjkgNTAuMjY1NDgyNDU3NDM2NjkiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+ICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIxcyIga2V5VGltZXM9IjA7MSIgdmFsdWVzPSIwIDUwIDUwOzM2MCA1MCA1MCI+PC9hbmltYXRlVHJhbnNmb3JtPiAgPC9jaXJjbGU+PC9zdmc+\\\");\\n background-size: auto calc(min(50%, 400px));\\n }\\n \");\n }, function(Bokeh) {\n Bokeh.set_log_level(\"info\");\n },\nfunction(Bokeh) {} // ensure no trailing comma for IE\n ];\n\n function run_inline_js() {\n if ((root.Bokeh !== undefined) || (force === true)) {\n for (var i = 0; i < inline_js.length; i++) {\n inline_js[i].call(root, root.Bokeh);\n }} else if (Date.now() < root._bokeh_timeout) {\n setTimeout(run_inline_js, 100);\n } else if (!root._bokeh_failed_load) {\n console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n root._bokeh_failed_load = true;\n }\n }\n\n if (root._bokeh_is_loading === 0) {\n console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n run_inline_js();\n } else {\n load_libs(css_urls, js_urls, js_modules, function() {\n console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n run_inline_js();\n });\n }\n}(window));" }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", "if ((window.PyViz === undefined) || (window.PyViz instanceof HTMLElement)) {\n", " window.PyViz = {comms: {}, comm_status:{}, kernels:{}, receivers: {}, plot_index: []}\n", "}\n", "\n", "\n", " function JupyterCommManager() {\n", " }\n", "\n", " JupyterCommManager.prototype.register_target = function(plot_id, comm_id, msg_handler) {\n", " if (window.comm_manager || ((window.Jupyter !== undefined) && (Jupyter.notebook.kernel != null))) {\n", " var comm_manager = window.comm_manager || Jupyter.notebook.kernel.comm_manager;\n", " comm_manager.register_target(comm_id, function(comm) {\n", " comm.on_msg(msg_handler);\n", " });\n", " } else if ((plot_id in window.PyViz.kernels) && (window.PyViz.kernels[plot_id])) {\n", " window.PyViz.kernels[plot_id].registerCommTarget(comm_id, function(comm) {\n", " comm.onMsg = msg_handler;\n", " });\n", " } else if (typeof google != 'undefined' && google.colab.kernel != null) {\n", " google.colab.kernel.comms.registerTarget(comm_id, (comm) => {\n", " var messages = comm.messages[Symbol.asyncIterator]();\n", " function processIteratorResult(result) {\n", " var message = result.value;\n", " console.log(message)\n", " var content = {data: message.data, comm_id};\n", " var buffers = []\n", " for (var buffer of message.buffers || []) {\n", " buffers.push(new DataView(buffer))\n", " }\n", " var metadata = message.metadata || {};\n", " var msg = {content, buffers, metadata}\n", " msg_handler(msg);\n", " return messages.next().then(processIteratorResult);\n", " }\n", " return messages.next().then(processIteratorResult);\n", " })\n", " }\n", " }\n", "\n", " JupyterCommManager.prototype.get_client_comm = function(plot_id, comm_id, msg_handler) {\n", " if (comm_id in window.PyViz.comms) {\n", " return window.PyViz.comms[comm_id];\n", " } else if (window.comm_manager || ((window.Jupyter !== undefined) && (Jupyter.notebook.kernel != null))) {\n", " var comm_manager = window.comm_manager || Jupyter.notebook.kernel.comm_manager;\n", " var comm = comm_manager.new_comm(comm_id, {}, {}, {}, comm_id);\n", " if (msg_handler) {\n", " comm.on_msg(msg_handler);\n", " }\n", " } else if ((plot_id in window.PyViz.kernels) && (window.PyViz.kernels[plot_id])) {\n", " var comm = window.PyViz.kernels[plot_id].connectToComm(comm_id);\n", " comm.open();\n", " if (msg_handler) {\n", " comm.onMsg = msg_handler;\n", " }\n", " } else if (typeof google != 'undefined' && google.colab.kernel != null) {\n", " var comm_promise = google.colab.kernel.comms.open(comm_id)\n", " comm_promise.then((comm) => {\n", " window.PyViz.comms[comm_id] = comm;\n", " if (msg_handler) {\n", " var messages = comm.messages[Symbol.asyncIterator]();\n", " function processIteratorResult(result) {\n", " var message = result.value;\n", " var content = {data: message.data};\n", " var metadata = message.metadata || {comm_id};\n", " var msg = {content, metadata}\n", " msg_handler(msg);\n", " return messages.next().then(processIteratorResult);\n", " }\n", " return messages.next().then(processIteratorResult);\n", " }\n", " }) \n", " var sendClosure = (data, metadata, buffers, disposeOnDone) => {\n", " return comm_promise.then((comm) => {\n", " comm.send(data, metadata, buffers, disposeOnDone);\n", " });\n", " };\n", " var comm = {\n", " send: sendClosure\n", " };\n", " }\n", " window.PyViz.comms[comm_id] = comm;\n", " return comm;\n", " }\n", " window.PyViz.comm_manager = new JupyterCommManager();\n", " \n", "\n", "\n", "var JS_MIME_TYPE = 'application/javascript';\n", "var HTML_MIME_TYPE = 'text/html';\n", "var EXEC_MIME_TYPE = 'application/vnd.holoviews_exec.v0+json';\n", "var CLASS_NAME = 'output';\n", "\n", "/**\n", " * Render data to the DOM node\n", " */\n", "function render(props, node) {\n", " var div = document.createElement(\"div\");\n", " var script = document.createElement(\"script\");\n", " node.appendChild(div);\n", " node.appendChild(script);\n", "}\n", "\n", "/**\n", " * Handle when a new output is added\n", " */\n", "function handle_add_output(event, handle) {\n", " var output_area = handle.output_area;\n", " var output = handle.output;\n", " if ((output.data == undefined) || (!output.data.hasOwnProperty(EXEC_MIME_TYPE))) {\n", " return\n", " }\n", " var id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n", " var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n", " if (id !== undefined) {\n", " var nchildren = toinsert.length;\n", " var html_node = toinsert[nchildren-1].children[0];\n", " html_node.innerHTML = output.data[HTML_MIME_TYPE];\n", " var scripts = [];\n", " var nodelist = html_node.querySelectorAll(\"script\");\n", " for (var i in nodelist) {\n", " if (nodelist.hasOwnProperty(i)) {\n", " scripts.push(nodelist[i])\n", " }\n", " }\n", "\n", " scripts.forEach( function (oldScript) {\n", " var newScript = document.createElement(\"script\");\n", " var attrs = [];\n", " var nodemap = oldScript.attributes;\n", " for (var j in nodemap) {\n", " if (nodemap.hasOwnProperty(j)) {\n", " attrs.push(nodemap[j])\n", " }\n", " }\n", " attrs.forEach(function(attr) { newScript.setAttribute(attr.name, attr.value) });\n", " newScript.appendChild(document.createTextNode(oldScript.innerHTML));\n", " oldScript.parentNode.replaceChild(newScript, oldScript);\n", " });\n", " if (JS_MIME_TYPE in output.data) {\n", " toinsert[nchildren-1].children[1].textContent = output.data[JS_MIME_TYPE];\n", " }\n", " output_area._hv_plot_id = id;\n", " if ((window.Bokeh !== undefined) && (id in Bokeh.index)) {\n", " window.PyViz.plot_index[id] = Bokeh.index[id];\n", " } else {\n", " window.PyViz.plot_index[id] = null;\n", " }\n", " } else if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n", " var bk_div = document.createElement(\"div\");\n", " bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n", " var script_attrs = bk_div.children[0].attributes;\n", " for (var i = 0; i < script_attrs.length; i++) {\n", " toinsert[toinsert.length - 1].childNodes[1].setAttribute(script_attrs[i].name, script_attrs[i].value);\n", " }\n", " // store reference to server id on output_area\n", " output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n", " }\n", "}\n", "\n", "/**\n", " * Handle when an output is cleared or removed\n", " */\n", "function handle_clear_output(event, handle) {\n", " var id = handle.cell.output_area._hv_plot_id;\n", " var server_id = handle.cell.output_area._bokeh_server_id;\n", " if (((id === undefined) || !(id in PyViz.plot_index)) && (server_id !== undefined)) { return; }\n", " var comm = window.PyViz.comm_manager.get_client_comm(\"hv-extension-comm\", \"hv-extension-comm\", function () {});\n", " if (server_id !== null) {\n", " comm.send({event_type: 'server_delete', 'id': server_id});\n", " return;\n", " } else if (comm !== null) {\n", " comm.send({event_type: 'delete', 'id': id});\n", " }\n", " delete PyViz.plot_index[id];\n", " if ((window.Bokeh !== undefined) & (id in window.Bokeh.index)) {\n", " var doc = window.Bokeh.index[id].model.document\n", " doc.clear();\n", " const i = window.Bokeh.documents.indexOf(doc);\n", " if (i > -1) {\n", " window.Bokeh.documents.splice(i, 1);\n", " }\n", " }\n", "}\n", "\n", "/**\n", " * Handle kernel restart event\n", " */\n", "function handle_kernel_cleanup(event, handle) {\n", " delete PyViz.comms[\"hv-extension-comm\"];\n", " window.PyViz.plot_index = {}\n", "}\n", "\n", "/**\n", " * Handle update_display_data messages\n", " */\n", "function handle_update_output(event, handle) {\n", " handle_clear_output(event, {cell: {output_area: handle.output_area}})\n", " handle_add_output(event, handle)\n", "}\n", "\n", "function register_renderer(events, OutputArea) {\n", " function append_mime(data, metadata, element) {\n", " // create a DOM node to render to\n", " var toinsert = this.create_output_subarea(\n", " metadata,\n", " CLASS_NAME,\n", " EXEC_MIME_TYPE\n", " );\n", " this.keyboard_manager.register_events(toinsert);\n", " // Render to node\n", " var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n", " render(props, toinsert[0]);\n", " element.append(toinsert);\n", " return toinsert\n", " }\n", "\n", " events.on('output_added.OutputArea', handle_add_output);\n", " events.on('output_updated.OutputArea', handle_update_output);\n", " events.on('clear_output.CodeCell', handle_clear_output);\n", " events.on('delete.Cell', handle_clear_output);\n", " events.on('kernel_ready.Kernel', handle_kernel_cleanup);\n", "\n", " OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n", " safe: true,\n", " index: 0\n", " });\n", "}\n", "\n", "if (window.Jupyter !== undefined) {\n", " try {\n", " var events = require('base/js/events');\n", " var OutputArea = require('notebook/js/outputarea').OutputArea;\n", " if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n", " register_renderer(events, OutputArea);\n", " }\n", " } catch(err) {\n", " }\n", "}\n" ], "application/vnd.holoviews_load.v0+json": "\nif ((window.PyViz === undefined) || (window.PyViz instanceof HTMLElement)) {\n window.PyViz = {comms: {}, comm_status:{}, kernels:{}, receivers: {}, plot_index: []}\n}\n\n\n function JupyterCommManager() {\n }\n\n JupyterCommManager.prototype.register_target = function(plot_id, comm_id, msg_handler) {\n if (window.comm_manager || ((window.Jupyter !== undefined) && (Jupyter.notebook.kernel != null))) {\n var comm_manager = window.comm_manager || Jupyter.notebook.kernel.comm_manager;\n comm_manager.register_target(comm_id, function(comm) {\n comm.on_msg(msg_handler);\n });\n } else if ((plot_id in window.PyViz.kernels) && (window.PyViz.kernels[plot_id])) {\n window.PyViz.kernels[plot_id].registerCommTarget(comm_id, function(comm) {\n comm.onMsg = msg_handler;\n });\n } else if (typeof google != 'undefined' && google.colab.kernel != null) {\n google.colab.kernel.comms.registerTarget(comm_id, (comm) => {\n var messages = comm.messages[Symbol.asyncIterator]();\n function processIteratorResult(result) {\n var message = result.value;\n console.log(message)\n var content = {data: message.data, comm_id};\n var buffers = []\n for (var buffer of message.buffers || []) {\n buffers.push(new DataView(buffer))\n }\n var metadata = message.metadata || {};\n var msg = {content, buffers, metadata}\n msg_handler(msg);\n return messages.next().then(processIteratorResult);\n }\n return messages.next().then(processIteratorResult);\n })\n }\n }\n\n JupyterCommManager.prototype.get_client_comm = function(plot_id, comm_id, msg_handler) {\n if (comm_id in window.PyViz.comms) {\n return window.PyViz.comms[comm_id];\n } else if (window.comm_manager || ((window.Jupyter !== undefined) && (Jupyter.notebook.kernel != null))) {\n var comm_manager = window.comm_manager || Jupyter.notebook.kernel.comm_manager;\n var comm = comm_manager.new_comm(comm_id, {}, {}, {}, comm_id);\n if (msg_handler) {\n comm.on_msg(msg_handler);\n }\n } else if ((plot_id in window.PyViz.kernels) && (window.PyViz.kernels[plot_id])) {\n var comm = window.PyViz.kernels[plot_id].connectToComm(comm_id);\n comm.open();\n if (msg_handler) {\n comm.onMsg = msg_handler;\n }\n } else if (typeof google != 'undefined' && google.colab.kernel != null) {\n var comm_promise = google.colab.kernel.comms.open(comm_id)\n comm_promise.then((comm) => {\n window.PyViz.comms[comm_id] = comm;\n if (msg_handler) {\n var messages = comm.messages[Symbol.asyncIterator]();\n function processIteratorResult(result) {\n var message = result.value;\n var content = {data: message.data};\n var metadata = message.metadata || {comm_id};\n var msg = {content, metadata}\n msg_handler(msg);\n return messages.next().then(processIteratorResult);\n }\n return messages.next().then(processIteratorResult);\n }\n }) \n var sendClosure = (data, metadata, buffers, disposeOnDone) => {\n return comm_promise.then((comm) => {\n comm.send(data, metadata, buffers, disposeOnDone);\n });\n };\n var comm = {\n send: sendClosure\n };\n }\n window.PyViz.comms[comm_id] = comm;\n return comm;\n }\n window.PyViz.comm_manager = new JupyterCommManager();\n \n\n\nvar JS_MIME_TYPE = 'application/javascript';\nvar HTML_MIME_TYPE = 'text/html';\nvar EXEC_MIME_TYPE = 'application/vnd.holoviews_exec.v0+json';\nvar CLASS_NAME = 'output';\n\n/**\n * Render data to the DOM node\n */\nfunction render(props, node) {\n var div = document.createElement(\"div\");\n var script = document.createElement(\"script\");\n node.appendChild(div);\n node.appendChild(script);\n}\n\n/**\n * Handle when a new output is added\n */\nfunction handle_add_output(event, handle) {\n var output_area = handle.output_area;\n var output = handle.output;\n if ((output.data == undefined) || (!output.data.hasOwnProperty(EXEC_MIME_TYPE))) {\n return\n }\n var id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n if (id !== undefined) {\n var nchildren = toinsert.length;\n var html_node = toinsert[nchildren-1].children[0];\n html_node.innerHTML = output.data[HTML_MIME_TYPE];\n var scripts = [];\n var nodelist = html_node.querySelectorAll(\"script\");\n for (var i in nodelist) {\n if (nodelist.hasOwnProperty(i)) {\n scripts.push(nodelist[i])\n }\n }\n\n scripts.forEach( function (oldScript) {\n var newScript = document.createElement(\"script\");\n var attrs = [];\n var nodemap = oldScript.attributes;\n for (var j in nodemap) {\n if (nodemap.hasOwnProperty(j)) {\n attrs.push(nodemap[j])\n }\n }\n attrs.forEach(function(attr) { newScript.setAttribute(attr.name, attr.value) });\n newScript.appendChild(document.createTextNode(oldScript.innerHTML));\n oldScript.parentNode.replaceChild(newScript, oldScript);\n });\n if (JS_MIME_TYPE in output.data) {\n toinsert[nchildren-1].children[1].textContent = output.data[JS_MIME_TYPE];\n }\n output_area._hv_plot_id = id;\n if ((window.Bokeh !== undefined) && (id in Bokeh.index)) {\n window.PyViz.plot_index[id] = Bokeh.index[id];\n } else {\n window.PyViz.plot_index[id] = null;\n }\n } else if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n var bk_div = document.createElement(\"div\");\n bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n var script_attrs = bk_div.children[0].attributes;\n for (var i = 0; i < script_attrs.length; i++) {\n toinsert[toinsert.length - 1].childNodes[1].setAttribute(script_attrs[i].name, script_attrs[i].value);\n }\n // store reference to server id on output_area\n output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n }\n}\n\n/**\n * Handle when an output is cleared or removed\n */\nfunction handle_clear_output(event, handle) {\n var id = handle.cell.output_area._hv_plot_id;\n var server_id = handle.cell.output_area._bokeh_server_id;\n if (((id === undefined) || !(id in PyViz.plot_index)) && (server_id !== undefined)) { return; }\n var comm = window.PyViz.comm_manager.get_client_comm(\"hv-extension-comm\", \"hv-extension-comm\", function () {});\n if (server_id !== null) {\n comm.send({event_type: 'server_delete', 'id': server_id});\n return;\n } else if (comm !== null) {\n comm.send({event_type: 'delete', 'id': id});\n }\n delete PyViz.plot_index[id];\n if ((window.Bokeh !== undefined) & (id in window.Bokeh.index)) {\n var doc = window.Bokeh.index[id].model.document\n doc.clear();\n const i = window.Bokeh.documents.indexOf(doc);\n if (i > -1) {\n window.Bokeh.documents.splice(i, 1);\n }\n }\n}\n\n/**\n * Handle kernel restart event\n */\nfunction handle_kernel_cleanup(event, handle) {\n delete PyViz.comms[\"hv-extension-comm\"];\n window.PyViz.plot_index = {}\n}\n\n/**\n * Handle update_display_data messages\n */\nfunction handle_update_output(event, handle) {\n handle_clear_output(event, {cell: {output_area: handle.output_area}})\n handle_add_output(event, handle)\n}\n\nfunction register_renderer(events, OutputArea) {\n function append_mime(data, metadata, element) {\n // create a DOM node to render to\n var toinsert = this.create_output_subarea(\n metadata,\n CLASS_NAME,\n EXEC_MIME_TYPE\n );\n this.keyboard_manager.register_events(toinsert);\n // Render to node\n var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n render(props, toinsert[0]);\n element.append(toinsert);\n return toinsert\n }\n\n events.on('output_added.OutputArea', handle_add_output);\n events.on('output_updated.OutputArea', handle_update_output);\n events.on('clear_output.CodeCell', handle_clear_output);\n events.on('delete.Cell', handle_clear_output);\n events.on('kernel_ready.Kernel', handle_kernel_cleanup);\n\n OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n safe: true,\n index: 0\n });\n}\n\nif (window.Jupyter !== undefined) {\n try {\n var events = require('base/js/events');\n var OutputArea = require('notebook/js/outputarea').OutputArea;\n if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n register_renderer(events, OutputArea);\n }\n } catch(err) {\n }\n}\n" }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "import pandas as pd\n", "import numpy as np\n", "import panel as pn\n", "pn.extension('tabulator')\n", "# pn.extension(sizing_mode = 'stretch_width')\n", "import hvplot.pandas" ] }, { "cell_type": "code", "execution_count": 3, "id": "bbeb7ef7-69e8-4686-b494-668403b5c57b", "metadata": {}, "outputs": [], "source": [ "# cache data to improve dashboard performance\n", "if 'data' not in pn.state.cache.keys():\n", "\n", " df = pd.read_csv('https://raw.githubusercontent.com/owid/co2-data/master/owid-co2-data.csv')\n", " #df = pd.read_csv(\"docs/owid-co2-data.csv\")\n", "\n", " pn.state.cache['data'] = df.copy()\n", "\n", "else: \n", "\n", " df = pn.state.cache['data']" ] }, { "cell_type": "code", "execution_count": 4, "id": "476ebb61-5ae1-4c7c-a3fe-6626f7c7e6e9", "metadata": {}, "outputs": [ { "data": { "text/html": [ "
\n", "\n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
iso_codecountryyearco2co2_per_capitatrade_co2cement_co2cement_co2_per_capitacoal_co2coal_co2_per_capita...ghg_excluding_lucf_per_capitamethanemethane_per_capitanitrous_oxidenitrous_oxide_per_capitapopulationgdpprimary_energy_consumptionenergy_per_capitaenergy_per_gdp
0AFGAfghanistan19490.0150.002NaNNaNNaN0.0150.002...NaNNaNNaNNaNNaN7624058.0NaNNaNNaNNaN
1AFGAfghanistan19500.0840.011NaNNaNNaN0.0210.003...NaNNaNNaNNaNNaN7752117.09.421400e+09NaNNaNNaN
2AFGAfghanistan19510.0920.012NaNNaNNaN0.0260.003...NaNNaNNaNNaNNaN7840151.09.692280e+09NaNNaNNaN
3AFGAfghanistan19520.0920.012NaNNaNNaN0.0320.004...NaNNaNNaNNaNNaN7935996.01.001733e+10NaNNaNNaN
4AFGAfghanistan19530.1060.013NaNNaNNaN0.0380.005...NaNNaNNaNNaNNaN8039684.01.063052e+10NaNNaNNaN
..................................................................
25984ZWEZimbabwe201610.7380.7651.4150.6390.0466.9590.496...2.07611.500.8206.210.44314030338.02.096179e+1046.6663326.0732.226
25985ZWEZimbabwe20179.5820.6731.6660.6780.0485.6650.398...2.02311.620.8166.350.44614236599.02.194784e+1045.9363226.6172.093
25986ZWEZimbabwe201811.8540.8211.3080.6970.0487.1010.492...2.17311.960.8286.590.45614438812.02.271535e+1047.5023289.8872.091
25987ZWEZimbabwe201910.9490.7481.4730.6970.0486.0200.411...NaNNaNNaNNaNNaN14645473.0NaN49.4273374.877NaN
25988ZWEZimbabwe202010.5310.709NaN0.6970.0476.2570.421...NaNNaNNaNNaNNaN14862927.0NaNNaNNaNNaN
\n", "

25989 rows × 60 columns

\n", "
" ], "text/plain": [ " iso_code country year co2 co2_per_capita trade_co2 \\\n", "0 AFG Afghanistan 1949 0.015 0.002 NaN \n", "1 AFG Afghanistan 1950 0.084 0.011 NaN \n", "2 AFG Afghanistan 1951 0.092 0.012 NaN \n", "3 AFG Afghanistan 1952 0.092 0.012 NaN \n", "4 AFG Afghanistan 1953 0.106 0.013 NaN \n", "... ... ... ... ... ... ... \n", "25984 ZWE Zimbabwe 2016 10.738 0.765 1.415 \n", "25985 ZWE Zimbabwe 2017 9.582 0.673 1.666 \n", "25986 ZWE Zimbabwe 2018 11.854 0.821 1.308 \n", "25987 ZWE Zimbabwe 2019 10.949 0.748 1.473 \n", "25988 ZWE Zimbabwe 2020 10.531 0.709 NaN \n", "\n", " cement_co2 cement_co2_per_capita coal_co2 coal_co2_per_capita ... \\\n", "0 NaN NaN 0.015 0.002 ... \n", "1 NaN NaN 0.021 0.003 ... \n", "2 NaN NaN 0.026 0.003 ... \n", "3 NaN NaN 0.032 0.004 ... \n", "4 NaN NaN 0.038 0.005 ... \n", "... ... ... ... ... ... \n", "25984 0.639 0.046 6.959 0.496 ... \n", "25985 0.678 0.048 5.665 0.398 ... \n", "25986 0.697 0.048 7.101 0.492 ... \n", "25987 0.697 0.048 6.020 0.411 ... \n", "25988 0.697 0.047 6.257 0.421 ... \n", "\n", " ghg_excluding_lucf_per_capita methane methane_per_capita \\\n", "0 NaN NaN NaN \n", "1 NaN NaN NaN \n", "2 NaN NaN NaN \n", "3 NaN NaN NaN \n", "4 NaN NaN NaN \n", "... ... ... ... \n", "25984 2.076 11.50 0.820 \n", "25985 2.023 11.62 0.816 \n", "25986 2.173 11.96 0.828 \n", "25987 NaN NaN NaN \n", "25988 NaN NaN NaN \n", "\n", " nitrous_oxide nitrous_oxide_per_capita population gdp \\\n", "0 NaN NaN 7624058.0 NaN \n", "1 NaN NaN 7752117.0 9.421400e+09 \n", "2 NaN NaN 7840151.0 9.692280e+09 \n", "3 NaN NaN 7935996.0 1.001733e+10 \n", "4 NaN NaN 8039684.0 1.063052e+10 \n", "... ... ... ... ... \n", "25984 6.21 0.443 14030338.0 2.096179e+10 \n", "25985 6.35 0.446 14236599.0 2.194784e+10 \n", "25986 6.59 0.456 14438812.0 2.271535e+10 \n", "25987 NaN NaN 14645473.0 NaN \n", "25988 NaN NaN 14862927.0 NaN \n", "\n", " primary_energy_consumption energy_per_capita energy_per_gdp \n", "0 NaN NaN NaN \n", "1 NaN NaN NaN \n", "2 NaN NaN NaN \n", "3 NaN NaN NaN \n", "4 NaN NaN NaN \n", "... ... ... ... \n", "25984 46.666 3326.073 2.226 \n", "25985 45.936 3226.617 2.093 \n", "25986 47.502 3289.887 2.091 \n", "25987 49.427 3374.877 NaN \n", "25988 NaN NaN NaN \n", "\n", "[25989 rows x 60 columns]" ] }, "execution_count": 4, "metadata": {}, "output_type": "execute_result" } ], "source": [ "df" ] }, { "cell_type": "code", "execution_count": 5, "id": "3882b47f-a273-4451-9e73-48e429773bb0", "metadata": {}, "outputs": [ { "data": { "text/html": [ "
\n", "\n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
iso_codecountryyearco2co2_per_capitatrade_co2cement_co2cement_co2_per_capitacoal_co2coal_co2_per_capita...ghg_excluding_lucf_per_capitamethanemethane_per_capitanitrous_oxidenitrous_oxide_per_capitapopulationgdpprimary_energy_consumptionenergy_per_capitaenergy_per_gdp
16785NaNNorth America17850.004NaNNaNNaNNaN0.004NaN...NaNNaNNaNNaNNaNNaNNaNNaNNaNNaN
16786NaNNorth America17860.004NaNNaNNaNNaN0.004NaN...NaNNaNNaNNaNNaNNaNNaNNaNNaNNaN
16787NaNNorth America17870.004NaNNaNNaNNaN0.004NaN...NaNNaNNaNNaNNaNNaNNaNNaNNaNNaN
16788NaNNorth America17880.004NaNNaNNaNNaN0.004NaN...NaNNaNNaNNaNNaNNaNNaNNaNNaNNaN
16789NaNNorth America17890.004NaNNaNNaNNaN0.004NaN...NaNNaNNaNNaNNaNNaNNaNNaNNaNNaN
..................................................................
17016NaNNorth America20166471.36011.353309.90470.8580.1241509.6312.648...NaNNaNNaNNaNNaN573814461.0NaNNaNNaNNaN
17017NaNNorth America20176412.98211.155335.00972.9140.1271467.6022.553...NaNNaNNaNNaNNaN578582963.0NaNNaNNaNNaN
17018NaNNorth America20186588.63011.366345.91574.7870.1291398.9792.413...NaNNaNNaNNaNNaN582921781.0NaNNaNNaNNaN
17019NaNNorth America20196460.72611.056354.35376.9250.1321214.3292.078...NaNNaNNaNNaNNaN587512621.0NaNNaNNaNNaN
17020NaNNorth America20205775.1599.805NaN76.8700.130965.4301.639...NaNNaNNaNNaNNaN592062319.0NaNNaNNaNNaN
\n", "

236 rows × 60 columns

\n", "
" ], "text/plain": [ " iso_code country year co2 co2_per_capita trade_co2 \\\n", "16785 NaN North America 1785 0.004 NaN NaN \n", "16786 NaN North America 1786 0.004 NaN NaN \n", "16787 NaN North America 1787 0.004 NaN NaN \n", "16788 NaN North America 1788 0.004 NaN NaN \n", "16789 NaN North America 1789 0.004 NaN NaN \n", "... ... ... ... ... ... ... \n", "17016 NaN North America 2016 6471.360 11.353 309.904 \n", "17017 NaN North America 2017 6412.982 11.155 335.009 \n", "17018 NaN North America 2018 6588.630 11.366 345.915 \n", "17019 NaN North America 2019 6460.726 11.056 354.353 \n", "17020 NaN North America 2020 5775.159 9.805 NaN \n", "\n", " cement_co2 cement_co2_per_capita coal_co2 coal_co2_per_capita ... \\\n", "16785 NaN NaN 0.004 NaN ... \n", "16786 NaN NaN 0.004 NaN ... \n", "16787 NaN NaN 0.004 NaN ... \n", "16788 NaN NaN 0.004 NaN ... \n", "16789 NaN NaN 0.004 NaN ... \n", "... ... ... ... ... ... \n", "17016 70.858 0.124 1509.631 2.648 ... \n", "17017 72.914 0.127 1467.602 2.553 ... \n", "17018 74.787 0.129 1398.979 2.413 ... \n", "17019 76.925 0.132 1214.329 2.078 ... \n", "17020 76.870 0.130 965.430 1.639 ... \n", "\n", " ghg_excluding_lucf_per_capita methane methane_per_capita \\\n", "16785 NaN NaN NaN \n", "16786 NaN NaN NaN \n", "16787 NaN NaN NaN \n", "16788 NaN NaN NaN \n", "16789 NaN NaN NaN \n", "... ... ... ... \n", "17016 NaN NaN NaN \n", "17017 NaN NaN NaN \n", "17018 NaN NaN NaN \n", "17019 NaN NaN NaN \n", "17020 NaN NaN NaN \n", "\n", " nitrous_oxide nitrous_oxide_per_capita population gdp \\\n", "16785 NaN NaN NaN NaN \n", "16786 NaN NaN NaN NaN \n", "16787 NaN NaN NaN NaN \n", "16788 NaN NaN NaN NaN \n", "16789 NaN NaN NaN NaN \n", "... ... ... ... ... \n", "17016 NaN NaN 573814461.0 NaN \n", "17017 NaN NaN 578582963.0 NaN \n", "17018 NaN NaN 582921781.0 NaN \n", "17019 NaN NaN 587512621.0 NaN \n", "17020 NaN NaN 592062319.0 NaN \n", "\n", " primary_energy_consumption energy_per_capita energy_per_gdp \n", "16785 NaN NaN NaN \n", "16786 NaN NaN NaN \n", "16787 NaN NaN NaN \n", "16788 NaN NaN NaN \n", "16789 NaN NaN NaN \n", "... ... ... ... \n", "17016 NaN NaN NaN \n", "17017 NaN NaN NaN \n", "17018 NaN NaN NaN \n", "17019 NaN NaN NaN \n", "17020 NaN NaN NaN \n", "\n", "[236 rows x 60 columns]" ] }, "execution_count": 5, "metadata": {}, "output_type": "execute_result" } ], "source": [ "df[df['country'] == 'North America']" ] }, { "cell_type": "code", "execution_count": 6, "id": "c25f84c2-e7f3-41e0-81c7-a3e6339c2f3f", "metadata": {}, "outputs": [], "source": [ "# Fill NAs with 0s and create GDP per capita column\n", "df = df.fillna(0)\n", "df['gdp_per_capita'] = np.where(df['population']!= 0, df['gdp']/ df['population'], 0)" ] }, { "cell_type": "code", "execution_count": 7, "id": "8020f108-8ed6-4540-add3-eaabd287fc0b", "metadata": {}, "outputs": [], "source": [ "# Make DataFrame Pipeline Interactive\n", "idf = df.interactive()" ] }, { "cell_type": "markdown", "id": "01aac238-cbe0-44ab-b1c2-882f3eb6fce9", "metadata": {}, "source": [ "### (1) CO2 emission over time by continent" ] }, { "cell_type": "code", "execution_count": 8, "id": "e4cc8972-f096-481e-acca-7c3d3dd1168f", "metadata": {}, "outputs": [ { "data": {}, "metadata": {}, "output_type": "display_data" }, { "data": { "application/vnd.holoviews_exec.v0+json": "", "text/html": [ "
\n", "
\n", "
\n", "" ], "text/plain": [ "IntSlider(end=2020, name='Year slider', sizing_mode='stretch_width', start=1750, step=5, value=1850)" ] }, "execution_count": 8, "metadata": { "application/vnd.holoviews_exec.v0+json": { "id": "1002" } }, "output_type": "execute_result" } ], "source": [ "# Define Panel widgets\n", "year_slider = pn.widgets.IntSlider(name='Year slider', start=1750, end=2020, step=5, value=1850)\n", "year_slider" ] }, { "cell_type": "code", "execution_count": 9, "id": "b944a702-5234-49e3-9f8c-ba05d96c3ba5", "metadata": {}, "outputs": [], "source": [ "# Radio buttons for CO2 measures\n", "yaxis_co2 = pn.widgets.RadioButtonGroup(\n", " name='Y axis', \n", " options=['co2', 'co2_per_capita',],\n", " button_type='success'\n", ")" ] }, { "cell_type": "code", "execution_count": 10, "id": "819a9794-f437-4722-806a-3efcfbe917c9", "metadata": {}, "outputs": [], "source": [ "continents = ['World', 'Asia', 'Oceania', 'Europe', 'Africa', 'North America', 'South America', 'Antarctica']\n", "\n", "co2_pipeline = (\n", " idf[\n", " (idf.year <= year_slider) &\n", " (idf.country.isin(continents))\n", " ]\n", " .groupby(['country', 'year'])[yaxis_co2].mean()\n", " .to_frame()\n", " .reset_index()\n", " .sort_values(by='year') \n", " .reset_index(drop=True)\n", ")" ] }, { "cell_type": "code", "execution_count": 11, "id": "0fb89030-ebe9-4914-a7cb-c1673665784e", "metadata": {}, "outputs": [ { "data": {}, "metadata": {}, "output_type": "display_data" }, { "data": { "application/vnd.holoviews_exec.v0+json": "", "text/html": [ "
\n", "
\n", "
\n", "" ], "text/plain": [ "" ] }, "execution_count": 11, "metadata": { "application/vnd.holoviews_exec.v0+json": { "id": "1005" } }, "output_type": "execute_result" } ], "source": [ "co2_pipeline" ] }, { "cell_type": "code", "execution_count": 12, "id": "2d91103c-5205-4e55-9f1c-dd7932891e3c", "metadata": {}, "outputs": [ { "data": {}, "metadata": {}, "output_type": "display_data" }, { "data": {}, "metadata": {}, "output_type": "display_data" }, { "data": { "application/vnd.holoviews_exec.v0+json": "", "text/html": [ "
\n", "
\n", "
\n", "" ], "text/plain": [ "" ] }, "execution_count": 12, "metadata": { "application/vnd.holoviews_exec.v0+json": { "id": "1015" } }, "output_type": "execute_result" } ], "source": [ "co2_plot = co2_pipeline.hvplot(x = 'year', by='country', y=yaxis_co2,line_width=2, title=\"CO2 emission by continent\")\n", "co2_plot" ] }, { "cell_type": "markdown", "id": "52f7fdda-c157-4dda-8c47-b9b81092634e", "metadata": {}, "source": [ "### (2) Table - CO2 emission over time by continent" ] }, { "cell_type": "code", "execution_count": 13, "id": "36ecf3ca-952e-4550-96de-bc604c9621be", "metadata": {}, "outputs": [ { "name": "stderr", "output_type": "stream", "text": [ "WARNING:param.main: DataTabulator was not imported on instantiation and may not render in a notebook. Restart the notebook kernel and ensure you load it as part of the extension using:\n", "\n", "pn.extension('tabulator')\n", "\n" ] }, { "data": {}, "metadata": {}, "output_type": "display_data" }, { "data": { "application/vnd.holoviews_exec.v0+json": "", "text/html": [ "
\n", "
\n", "
\n", "" ], "text/plain": [ "" ] }, "execution_count": 13, "metadata": { "application/vnd.holoviews_exec.v0+json": { "id": "1414" } }, "output_type": "execute_result" } ], "source": [ "co2_table = co2_pipeline.pipe(pn.widgets.Tabulator, pagination='remote', page_size = 10, sizing_mode='stretch_width') \n", "co2_table" ] }, { "cell_type": "markdown", "id": "4585e6f7-ab53-4393-92dd-3e55844bc765", "metadata": {}, "source": [ "### (3) CO2 vs GDP scatterplot" ] }, { "cell_type": "code", "execution_count": 14, "id": "00ebcd82-e483-4a84-85f0-dbce320fc132", "metadata": {}, "outputs": [], "source": [ "co2_vs_gdp_scatterplot_pipeline = (\n", " idf[\n", " (idf.year == year_slider) &\n", " (~ (idf.country.isin(continents)))\n", " ]\n", " .groupby(['country', 'year', 'gdp_per_capita'])['co2'].mean()\n", " .to_frame()\n", " .reset_index()\n", " .sort_values(by='year') \n", " .reset_index(drop=True)\n", ")" ] }, { "cell_type": "code", "execution_count": 15, "id": "3d81562a-b9ef-4d18-91f1-ae9bab742e0f", "metadata": {}, "outputs": [ { "data": {}, "metadata": {}, "output_type": "display_data" }, { "data": { "application/vnd.holoviews_exec.v0+json": "", "text/html": [ "
\n", "
\n", "
\n", "" ], "text/plain": [ "" ] }, "execution_count": 15, "metadata": { "application/vnd.holoviews_exec.v0+json": { "id": "1464" } }, "output_type": "execute_result" } ], "source": [ "co2_vs_gdp_scatterplot_pipeline" ] }, { "cell_type": "code", "execution_count": 16, "id": "f285f097-22e9-4a2a-bd91-7f2e4a3f0fab", "metadata": {}, "outputs": [ { "data": {}, "metadata": {}, "output_type": "display_data" }, { "data": {}, "metadata": {}, "output_type": "display_data" }, { "data": { "application/vnd.holoviews_exec.v0+json": "", "text/html": [ "
\n", "
\n", "
\n", "" ], "text/plain": [ "" ] }, "execution_count": 16, "metadata": { "application/vnd.holoviews_exec.v0+json": { "id": "1473" } }, "output_type": "execute_result" } ], "source": [ "co2_vs_gdp_scatterplot = co2_vs_gdp_scatterplot_pipeline.hvplot(x='gdp_per_capita', \n", " y='co2', \n", " by='country', \n", " size=80, kind=\"scatter\", \n", " alpha=0.7,\n", " legend=False, \n", " height=500, \n", " width=500)\n", "co2_vs_gdp_scatterplot" ] }, { "cell_type": "markdown", "id": "6078e321-a06e-4077-8935-1ee5c0476a94", "metadata": {}, "source": [ "### (4) Bar chart with CO2 sources by continent" ] }, { "cell_type": "code", "execution_count": 17, "id": "98625b5d-fe1f-4013-be67-b820711a282d", "metadata": {}, "outputs": [], "source": [ "yaxis_co2_source = pn.widgets.RadioButtonGroup(\n", " name='Y axis', \n", " options=['coal_co2', 'oil_co2', 'gas_co2'], \n", " button_type='success'\n", ")\n", "\n", "continents_excl_world = ['Asia', 'Oceania', 'Europe', 'Africa', 'North America', 'South America', 'Antarctica']\n", "\n", "co2_source_bar_pipeline = (\n", " idf[\n", " (idf.year == year_slider) &\n", " (idf.country.isin(continents_excl_world))\n", " ]\n", " .groupby(['year', 'country'])[yaxis_co2_source].sum()\n", " .to_frame()\n", " .reset_index()\n", " .sort_values(by='year') \n", " .reset_index(drop=True)\n", ")" ] }, { "cell_type": "code", "execution_count": 18, "id": "bdb8cb27-1769-4df4-a103-b96f93102b82", "metadata": {}, "outputs": [ { "data": {}, "metadata": {}, "output_type": "display_data" }, { "data": {}, "metadata": {}, "output_type": "display_data" }, { "data": { "application/vnd.holoviews_exec.v0+json": "", "text/html": [ "
\n", "
\n", "
\n", "" ], "text/plain": [ "" ] }, "execution_count": 18, "metadata": { "application/vnd.holoviews_exec.v0+json": { "id": "3285" } }, "output_type": "execute_result" } ], "source": [ "co2_source_bar_plot = co2_source_bar_pipeline.hvplot(kind='bar', \n", " x='country', \n", " y=yaxis_co2_source, \n", " title='CO2 source by continent')\n", "co2_source_bar_plot" ] }, { "cell_type": "markdown", "id": "5cd2ea61-4cd0-43b2-94b8-4fd0b7f07ec6", "metadata": {}, "source": [ "### Creating Dashboard" ] }, { "cell_type": "code", "execution_count": null, "id": "775f8285-a963-4e62-ac13-64263ce4fb63", "metadata": {}, "outputs": [], "source": [ "#Layout using Template\n", "#before: template = pn.template.FastListTemplate(\n", "template = pn.template.fast.list.FastListTemplate(\n", " title='World CO2 emission dashboard', \n", " sidebar=[pn.pane.Markdown(\"# CO2 Emissions and Climate Change\"), \n", " pn.pane.Markdown(\"#### Carbon dioxide emissions are the primary driver of global climate change. It’s widely recognised that to avoid the worst impacts of climate change, the world needs to urgently reduce emissions. But, how this responsibility is shared between regions, countries, and individuals has been an endless point of contention in international discussions.\"), \n", " pn.pane.PNG('https://github.com/thu-vu92/python-dashboard-panel/raw/main/climate_day.png', sizing_mode='scale_both'),\n", " pn.pane.Markdown(\"## Settings\"),\n", " year_slider],\n", " main=[pn.Row(pn.Column(yaxis_co2, \n", " co2_plot.panel(width=600), margin=(0,25)), \n", " co2_table.panel(width=400)), \n", " pn.Row(pn.Column(co2_vs_gdp_scatterplot.panel(width=600), margin=(0,25)), \n", " pn.Column(yaxis_co2_source, co2_source_bar_plot.panel(width=500)))],\n", " accent_base_color=\"#88d8b0\",\n", " header_background=\"#88d8b0\",\n", ")\n", "# template.show()\n", "template.servable()" ] } ], "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.10.5" } }, "nbformat": 4, "nbformat_minor": 5 }