Last active
October 5, 2023 17:11
-
-
Save mahynski/76ca979bcca4664fc866d42a4a277c3f to your computer and use it in GitHub Desktop.
Create an interactive periodic table using Bokeh
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "cells": [ | |
| { | |
| "cell_type": "code", | |
| "execution_count": null, | |
| "id": "e435fc51", | |
| "metadata": { | |
| "id": "e435fc51" | |
| }, | |
| "outputs": [], | |
| "source": [ | |
| "# Based on the example here: https://docs.bokeh.org/en/latest/docs/examples/topics/categorical/periodic.html\n", | |
| "# This example does not include the Lanthanide and Actinide Series - here I have added them, and expanded some hover tools." | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": null, | |
| "id": "ac53885e", | |
| "metadata": { | |
| "id": "ac53885e" | |
| }, | |
| "outputs": [], | |
| "source": [ | |
| "# !pip install bokeh==3.0.3" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": null, | |
| "id": "ff1a75ef", | |
| "metadata": { | |
| "id": "ff1a75ef" | |
| }, | |
| "outputs": [], | |
| "source": [ | |
| "from bokeh.plotting import figure, show, column\n", | |
| "from bokeh.sampledata.periodic_table import elements\n", | |
| "from bokeh.transform import dodge, factor_cmap\n", | |
| "import pandas as pd" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": null, | |
| "id": "8b704e26", | |
| "metadata": { | |
| "id": "8b704e26" | |
| }, | |
| "outputs": [], | |
| "source": [ | |
| "from bokeh.io import output_notebook" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": null, | |
| "id": "b94c9903", | |
| "metadata": { | |
| "id": "b94c9903", | |
| "outputId": "1201c902-f756-425d-8137-c4f43ebfd683" | |
| }, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "text/html": [ | |
| "<style>\n", | |
| " .bk-notebook-logo {\n", | |
| " display: block;\n", | |
| " width: 20px;\n", | |
| " height: 20px;\n", | |
| " background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAOkSURBVDiNjZRtaJVlGMd/1/08zzln5zjP1LWcU9N0NkN8m2CYjpgQYQXqSs0I84OLIC0hkEKoPtiH3gmKoiJDU7QpLgoLjLIQCpEsNJ1vqUOdO7ppbuec5+V+rj4ctwzd8IIbbi6u+8f1539dt3A78eXC7QizUF7gyV1fD1Yqg4JWz84yffhm0qkFqBogB9rM8tZdtwVsPUhWhGcFJngGeWrPzHm5oaMmkfEg1usvLFyc8jLRqDOMru7AyC8saQr7GG7f5fvDeH7Ej8CM66nIF+8yngt6HWaKh7k49Soy9nXurCi1o3qUbS3zWfrYeQDTB/Qj6kX6Ybhw4B+bOYoLKCC9H3Nu/leUTZ1JdRWkkn2ldcCamzrcf47KKXdAJllSlxAOkRgyHsGC/zRday5Qld9DyoM4/q/rUoy/CXh3jzOu3bHUVZeU+DEn8FInkPBFlu3+nW3Nw0mk6vCDiWg8CeJaxEwuHS3+z5RgY+YBR6V1Z1nxSOfoaPa4LASWxxdNp+VWTk7+4vzaou8v8PN+xo+KY2xsw6une2frhw05CTYOmQvsEhjhWjn0bmXPjpE1+kplmmkP3suftwTubK9Vq22qKmrBhpY4jvd5afdRA3wGjFAgcnTK2s4hY0/GPNIb0nErGMCRxWOOX64Z8RAC4oCXdklmEvcL8o0BfkNK4lUg9HTl+oPlQxdNo3Mg4Nv175e/1LDGzZen30MEjRUtmXSfiTVu1kK8W4txyV6BMKlbgk3lMwYCiusNy9fVfvvwMxv8Ynl6vxoByANLTWplvuj/nF9m2+PDtt1eiHPBr1oIfhCChQMBw6Aw0UulqTKZdfVvfG7VcfIqLG9bcldL/+pdWTLxLUy8Qq38heUIjh4XlzZxzQm19lLFlr8vdQ97rjZVOLf8nclzckbcD4wxXMidpX30sFd37Fv/GtwwhzhxGVAprjbg0gCAEeIgwCZyTV2Z1REEW8O4py0wsjeloKoMr6iCY6dP92H6Vw/oTyICIthibxjm/DfN9lVz8IqtqKYLUXfoKVMVQVVJOElGjrnnUt9T9wbgp8AyYKaGlqingHZU/uG2NTZSVqwHQTWkx9hxjkpWDaCg6Ckj5qebgBVbT3V3NNXMSiWSDdGV3hrtzla7J+duwPOToIg42ChPQOQjspnSlp1V+Gjdged7+8UN5CRAV7a5EdFNwCjEaBR27b3W890TE7g24NAP/mMDXRWrGoFPQI9ls/MWO2dWFAar/xcOIImbbpA3zgAAAABJRU5ErkJggg==);\n", | |
| " }\n", | |
| " </style>\n", | |
| " <div>\n", | |
| " <a href=\"https://bokeh.org\" target=\"_blank\" class=\"bk-notebook-logo\"></a>\n", | |
| " <span id=\"p1001\">Loading BokehJS ...</span>\n", | |
| " </div>\n" | |
| ] | |
| }, | |
| "metadata": {}, | |
| "output_type": "display_data" | |
| }, | |
| { | |
| "data": { | |
| "application/javascript": [ | |
| "(function(root) {\n", | |
| " function now() {\n", | |
| " return new Date();\n", | |
| " }\n", | |
| "\n", | |
| " const 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", | |
| "const JS_MIME_TYPE = 'application/javascript';\n", | |
| " const HTML_MIME_TYPE = 'text/html';\n", | |
| " const EXEC_MIME_TYPE = 'application/vnd.bokehjs_exec.v0+json';\n", | |
| " const CLASS_NAME = 'output_bokeh rendered_html';\n", | |
| "\n", | |
| " /**\n", | |
| " * Render data to the DOM node\n", | |
| " */\n", | |
| " function render(props, node) {\n", | |
| " const script = document.createElement(\"script\");\n", | |
| " node.appendChild(script);\n", | |
| " }\n", | |
| "\n", | |
| " /**\n", | |
| " * Handle when an output is cleared or removed\n", | |
| " */\n", | |
| " function handleClearOutput(event, handle) {\n", | |
| " const cell = handle.cell;\n", | |
| "\n", | |
| " const id = cell.output_area._bokeh_element_id;\n", | |
| " const server_id = cell.output_area._bokeh_server_id;\n", | |
| " // Clean up Bokeh references\n", | |
| " if (id != null && id in Bokeh.index) {\n", | |
| " Bokeh.index[id].model.document.clear();\n", | |
| " delete Bokeh.index[id];\n", | |
| " }\n", | |
| "\n", | |
| " if (server_id !== undefined) {\n", | |
| " // Clean up Bokeh references\n", | |
| " const cmd_clean = \"from bokeh.io.state import curstate; print(curstate().uuid_to_server['\" + server_id + \"'].get_sessions()[0].document.roots[0]._id)\";\n", | |
| " cell.notebook.kernel.execute(cmd_clean, {\n", | |
| " iopub: {\n", | |
| " output: function(msg) {\n", | |
| " const id = msg.content.text.trim();\n", | |
| " if (id in Bokeh.index) {\n", | |
| " Bokeh.index[id].model.document.clear();\n", | |
| " delete Bokeh.index[id];\n", | |
| " }\n", | |
| " }\n", | |
| " }\n", | |
| " });\n", | |
| " // Destroy server and session\n", | |
| " const cmd_destroy = \"import bokeh.io.notebook as ion; ion.destroy_server('\" + server_id + \"')\";\n", | |
| " cell.notebook.kernel.execute(cmd_destroy);\n", | |
| " }\n", | |
| " }\n", | |
| "\n", | |
| " /**\n", | |
| " * Handle when a new output is added\n", | |
| " */\n", | |
| " function handleAddOutput(event, handle) {\n", | |
| " const output_area = handle.output_area;\n", | |
| " const output = handle.output;\n", | |
| "\n", | |
| " // limit handleAddOutput to display_data with EXEC_MIME_TYPE content only\n", | |
| " if ((output.output_type != \"display_data\") || (!Object.prototype.hasOwnProperty.call(output.data, EXEC_MIME_TYPE))) {\n", | |
| " return\n", | |
| " }\n", | |
| "\n", | |
| " const toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n", | |
| "\n", | |
| " if (output.metadata[EXEC_MIME_TYPE][\"id\"] !== undefined) {\n", | |
| " toinsert[toinsert.length - 1].firstChild.textContent = output.data[JS_MIME_TYPE];\n", | |
| " // store reference to embed id on output_area\n", | |
| " output_area._bokeh_element_id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n", | |
| " }\n", | |
| " if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n", | |
| " const bk_div = document.createElement(\"div\");\n", | |
| " bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n", | |
| " const script_attrs = bk_div.children[0].attributes;\n", | |
| " for (let i = 0; i < script_attrs.length; i++) {\n", | |
| " toinsert[toinsert.length - 1].firstChild.setAttribute(script_attrs[i].name, script_attrs[i].value);\n", | |
| " toinsert[toinsert.length - 1].firstChild.textContent = bk_div.children[0].textContent\n", | |
| " }\n", | |
| " // store reference to server id on output_area\n", | |
| " output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n", | |
| " }\n", | |
| " }\n", | |
| "\n", | |
| " function register_renderer(events, OutputArea) {\n", | |
| "\n", | |
| " function append_mime(data, metadata, element) {\n", | |
| " // create a DOM node to render to\n", | |
| " const 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", | |
| " const props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n", | |
| " render(props, toinsert[toinsert.length - 1]);\n", | |
| " element.append(toinsert);\n", | |
| " return toinsert\n", | |
| " }\n", | |
| "\n", | |
| " /* Handle when an output is cleared or removed */\n", | |
| " events.on('clear_output.CodeCell', handleClearOutput);\n", | |
| " events.on('delete.Cell', handleClearOutput);\n", | |
| "\n", | |
| " /* Handle when a new output is added */\n", | |
| " events.on('output_added.OutputArea', handleAddOutput);\n", | |
| "\n", | |
| " /**\n", | |
| " * Register the mime type and append_mime function with output_area\n", | |
| " */\n", | |
| " OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n", | |
| " /* Is output safe? */\n", | |
| " safe: true,\n", | |
| " /* Index of renderer in `output_area.display_order` */\n", | |
| " index: 0\n", | |
| " });\n", | |
| " }\n", | |
| "\n", | |
| " // register the mime type if in Jupyter Notebook environment and previously unregistered\n", | |
| " if (root.Jupyter !== undefined) {\n", | |
| " const events = require('base/js/events');\n", | |
| " const OutputArea = require('notebook/js/outputarea').OutputArea;\n", | |
| "\n", | |
| " if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n", | |
| " register_renderer(events, OutputArea);\n", | |
| " }\n", | |
| " }\n", | |
| " if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n", | |
| " root._bokeh_timeout = Date.now() + 5000;\n", | |
| " root._bokeh_failed_load = false;\n", | |
| " }\n", | |
| "\n", | |
| " const NB_LOAD_WARNING = {'data': {'text/html':\n", | |
| " \"<div style='background-color: #fdd'>\\n\"+\n", | |
| " \"<p>\\n\"+\n", | |
| " \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n", | |
| " \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n", | |
| " \"</p>\\n\"+\n", | |
| " \"<ul>\\n\"+\n", | |
| " \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n", | |
| " \"<li>use INLINE resources instead, as so:</li>\\n\"+\n", | |
| " \"</ul>\\n\"+\n", | |
| " \"<code>\\n\"+\n", | |
| " \"from bokeh.resources import INLINE\\n\"+\n", | |
| " \"output_notebook(resources=INLINE)\\n\"+\n", | |
| " \"</code>\\n\"+\n", | |
| " \"</div>\"}};\n", | |
| "\n", | |
| " function display_loaded() {\n", | |
| " const el = document.getElementById(\"p1001\");\n", | |
| " if (el != null) {\n", | |
| " el.textContent = \"BokehJS is loading...\";\n", | |
| " }\n", | |
| " if (root.Bokeh !== undefined) {\n", | |
| " if (el != null) {\n", | |
| " el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n", | |
| " }\n", | |
| " } else if (Date.now() < root._bokeh_timeout) {\n", | |
| " setTimeout(display_loaded, 100)\n", | |
| " }\n", | |
| " }\n", | |
| "\n", | |
| " function run_callbacks() {\n", | |
| " try {\n", | |
| " root._bokeh_onload_callbacks.forEach(function(callback) {\n", | |
| " if (callback != null)\n", | |
| " callback();\n", | |
| " });\n", | |
| " } finally {\n", | |
| " delete root._bokeh_onload_callbacks\n", | |
| " }\n", | |
| " console.debug(\"Bokeh: all callbacks have finished\");\n", | |
| " }\n", | |
| "\n", | |
| " function load_libs(css_urls, js_urls, callback) {\n", | |
| " if (css_urls == null) css_urls = [];\n", | |
| " if (js_urls == null) js_urls = [];\n", | |
| "\n", | |
| " root._bokeh_onload_callbacks.push(callback);\n", | |
| " if (root._bokeh_is_loading > 0) {\n", | |
| " console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n", | |
| " return null;\n", | |
| " }\n", | |
| " if (js_urls == null || js_urls.length === 0) {\n", | |
| " run_callbacks();\n", | |
| " return null;\n", | |
| " }\n", | |
| " console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n", | |
| " root._bokeh_is_loading = css_urls.length + js_urls.length;\n", | |
| "\n", | |
| " function on_load() {\n", | |
| " root._bokeh_is_loading--;\n", | |
| " if (root._bokeh_is_loading === 0) {\n", | |
| " console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n", | |
| " run_callbacks()\n", | |
| " }\n", | |
| " }\n", | |
| "\n", | |
| " function on_error(url) {\n", | |
| " console.error(\"failed to load \" + url);\n", | |
| " }\n", | |
| "\n", | |
| " for (let i = 0; i < css_urls.length; i++) {\n", | |
| " const url = css_urls[i];\n", | |
| " const element = document.createElement(\"link\");\n", | |
| " element.onload = on_load;\n", | |
| " element.onerror = on_error.bind(null, url);\n", | |
| " element.rel = \"stylesheet\";\n", | |
| " element.type = \"text/css\";\n", | |
| " element.href = url;\n", | |
| " console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n", | |
| " document.body.appendChild(element);\n", | |
| " }\n", | |
| "\n", | |
| " for (let i = 0; i < js_urls.length; i++) {\n", | |
| " const url = js_urls[i];\n", | |
| " const element = document.createElement('script');\n", | |
| " element.onload = on_load;\n", | |
| " element.onerror = on_error.bind(null, url);\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", | |
| " };\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", | |
| " const js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-3.0.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-gl-3.0.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.0.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.0.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-3.0.3.min.js\"];\n", | |
| " const css_urls = [];\n", | |
| "\n", | |
| " const inline_js = [ function(Bokeh) {\n", | |
| " Bokeh.set_log_level(\"info\");\n", | |
| " },\n", | |
| "function(Bokeh) {\n", | |
| " }\n", | |
| " ];\n", | |
| "\n", | |
| " function run_inline_js() {\n", | |
| " if (root.Bokeh !== undefined || force === true) {\n", | |
| " for (let i = 0; i < inline_js.length; i++) {\n", | |
| " inline_js[i].call(root, root.Bokeh);\n", | |
| " }\n", | |
| "if (force === true) {\n", | |
| " display_loaded();\n", | |
| " }} else if (Date.now() < root._bokeh_timeout) {\n", | |
| " setTimeout(run_inline_js, 100);\n", | |
| " } else if (!root._bokeh_failed_load) {\n", | |
| " console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n", | |
| " root._bokeh_failed_load = true;\n", | |
| " } else if (force !== true) {\n", | |
| " const cell = $(document.getElementById(\"p1001\")).parents('.cell').data().cell;\n", | |
| " cell.output_area.append_execute_result(NB_LOAD_WARNING)\n", | |
| " }\n", | |
| " }\n", | |
| "\n", | |
| " if (root._bokeh_is_loading === 0) {\n", | |
| " console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n", | |
| " run_inline_js();\n", | |
| " } else {\n", | |
| " load_libs(css_urls, js_urls, function() {\n", | |
| " console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n", | |
| " run_inline_js();\n", | |
| " });\n", | |
| " }\n", | |
| "}(window));" | |
| ], | |
| "application/vnd.bokehjs_load.v0+json": "(function(root) {\n function now() {\n return new Date();\n }\n\n const force = true;\n\n if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n root._bokeh_onload_callbacks = [];\n root._bokeh_is_loading = undefined;\n }\n\n\n if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n root._bokeh_timeout = Date.now() + 5000;\n root._bokeh_failed_load = false;\n }\n\n const NB_LOAD_WARNING = {'data': {'text/html':\n \"<div style='background-color: #fdd'>\\n\"+\n \"<p>\\n\"+\n \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n \"</p>\\n\"+\n \"<ul>\\n\"+\n \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n \"<li>use INLINE resources instead, as so:</li>\\n\"+\n \"</ul>\\n\"+\n \"<code>\\n\"+\n \"from bokeh.resources import INLINE\\n\"+\n \"output_notebook(resources=INLINE)\\n\"+\n \"</code>\\n\"+\n \"</div>\"}};\n\n function display_loaded() {\n const el = document.getElementById(\"p1001\");\n if (el != null) {\n el.textContent = \"BokehJS is loading...\";\n }\n if (root.Bokeh !== undefined) {\n if (el != null) {\n el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n }\n } else if (Date.now() < root._bokeh_timeout) {\n setTimeout(display_loaded, 100)\n }\n }\n\n function run_callbacks() {\n try {\n root._bokeh_onload_callbacks.forEach(function(callback) {\n if (callback != null)\n callback();\n });\n } finally {\n delete root._bokeh_onload_callbacks\n }\n console.debug(\"Bokeh: all callbacks have finished\");\n }\n\n function load_libs(css_urls, js_urls, callback) {\n if (css_urls == null) css_urls = [];\n if (js_urls == null) js_urls = [];\n\n root._bokeh_onload_callbacks.push(callback);\n if (root._bokeh_is_loading > 0) {\n console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n return null;\n }\n if (js_urls == null || js_urls.length === 0) {\n run_callbacks();\n return null;\n }\n console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n root._bokeh_is_loading = css_urls.length + js_urls.length;\n\n function on_load() {\n root._bokeh_is_loading--;\n if (root._bokeh_is_loading === 0) {\n console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n run_callbacks()\n }\n }\n\n function on_error(url) {\n console.error(\"failed to load \" + url);\n }\n\n for (let i = 0; i < css_urls.length; i++) {\n const url = css_urls[i];\n const element = document.createElement(\"link\");\n element.onload = on_load;\n element.onerror = on_error.bind(null, url);\n element.rel = \"stylesheet\";\n element.type = \"text/css\";\n element.href = url;\n console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n document.body.appendChild(element);\n }\n\n for (let i = 0; i < js_urls.length; i++) {\n const url = js_urls[i];\n const element = document.createElement('script');\n element.onload = on_load;\n element.onerror = on_error.bind(null, url);\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 };\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 const js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-3.0.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-gl-3.0.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.0.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.0.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-3.0.3.min.js\"];\n const css_urls = [];\n\n const inline_js = [ function(Bokeh) {\n Bokeh.set_log_level(\"info\");\n },\nfunction(Bokeh) {\n }\n ];\n\n function run_inline_js() {\n if (root.Bokeh !== undefined || force === true) {\n for (let i = 0; i < inline_js.length; i++) {\n inline_js[i].call(root, root.Bokeh);\n }\nif (force === true) {\n display_loaded();\n }} else if (Date.now() < root._bokeh_timeout) {\n setTimeout(run_inline_js, 100);\n } else if (!root._bokeh_failed_load) {\n console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n root._bokeh_failed_load = true;\n } else if (force !== true) {\n const cell = $(document.getElementById(\"p1001\")).parents('.cell').data().cell;\n cell.output_area.append_execute_result(NB_LOAD_WARNING)\n }\n }\n\n if (root._bokeh_is_loading === 0) {\n console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n run_inline_js();\n } else {\n load_libs(css_urls, js_urls, function() {\n console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n run_inline_js();\n });\n }\n}(window));" | |
| }, | |
| "metadata": {}, | |
| "output_type": "display_data" | |
| } | |
| ], | |
| "source": [ | |
| "output_notebook()" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": null, | |
| "id": "28477ccf", | |
| "metadata": { | |
| "id": "28477ccf" | |
| }, | |
| "outputs": [], | |
| "source": [ | |
| "save_to_file = False # Should we save this to a file, or display in the notebook?\n", | |
| "if save_to_file:\n", | |
| " from bokeh.plotting import output_file, save\n", | |
| " output_file(filename=\"interactive_periodic_table.html\", title=\"Interactive Periodic Table\")\n", | |
| " command = save\n", | |
| "else:\n", | |
| " command = show" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 1, | |
| "id": "e9069f8e", | |
| "metadata": { | |
| "id": "e9069f8e" | |
| }, | |
| "outputs": [], | |
| "source": [ | |
| "# From Bokeh's example gallery\n", | |
| "periods = [\"I\", \"II\", \"III\", \"IV\", \"V\", \"VI\", \"VII\"]\n", | |
| "groups = [str(x) for x in range(1, 19)]\n", | |
| "\n", | |
| "df = elements.copy()\n", | |
| "df[\"atomic mass\"] = df[\"atomic mass\"].astype(str)\n", | |
| "df[\"group\"] = df[\"group\"].astype(str)\n", | |
| "df[\"period\"] = [periods[x-1] for x in df.period]\n", | |
| "df = df[df.group != \"-\"]\n", | |
| "df = df[df.symbol != \"Lr\"]\n", | |
| "df = df[df.symbol != \"Lu\"]\n", | |
| "\n", | |
| "cmap = {\n", | |
| " \"alkali metal\" : \"#a6cee3\",\n", | |
| " \"alkaline earth metal\" : \"#1f78b4\",\n", | |
| " \"metal\" : \"#d93b43\",\n", | |
| " \"halogen\" : \"#999d9a\",\n", | |
| " \"metalloid\" : \"#e08d49\",\n", | |
| " \"noble gas\" : \"#eaeaea\",\n", | |
| " \"nonmetal\" : \"#f1d4Af\",\n", | |
| " \"transition metal\" : \"#599d7A\",\n", | |
| " \"lanthanoid\" : \"#FFF88C\",\n", | |
| " \"actinoid\" : \"#FF8CE1\"\n", | |
| "}\n", | |
| "\n", | |
| "TOOLTIPS = [\n", | |
| " (\"Name\", \"@name\"),\n", | |
| " (\"Atomic number\", \"@{atomic number}\"),\n", | |
| " (\"Atomic mass (amu) \", \"@{atomic mass}\"),\n", | |
| " (\"Type\", \"@metal\"),\n", | |
| " (\"CPK color\", \"$color[hex, swatch]:CPK\"),\n", | |
| " (\"Electronic configuration\", \"@{electronic configuration}\"),\n", | |
| " ('Electronegativity', \"@electronegativity\"),\n", | |
| " ('Atomic Radius (pm)', '@{atomic radius}'),\n", | |
| " ('Ion Radius (pm)', '@{ion radius}'),\n", | |
| " ('VdW Radius (pm)', '@{van der Waals radius}'),\n", | |
| " ('Standard State', '@{standard state}'),\n", | |
| " ('Bonding Type', '@{bonding type}'),\n", | |
| " ('Melting Point (K)', '@{melting point}'),\n", | |
| " ('Boiling Point (K)', '@{boiling point}'),\n", | |
| " ('Density (g/m^3)', '@density')\n", | |
| "]\n", | |
| "\n", | |
| "p = figure(title=\"\", width=1000, height=450,\n", | |
| " x_range=groups, y_range=list(reversed(periods)),\n", | |
| " tools=\"hover\", toolbar_location=None, tooltips=TOOLTIPS)\n", | |
| "\n", | |
| "r = p.rect(\"group\", \"period\", 0.95, 0.95, source=df, fill_alpha=0.6, legend_field=\"metal\",\n", | |
| " color=factor_cmap('metal', palette=list(cmap.values()), factors=list(cmap.keys())))\n", | |
| "\n", | |
| "text_props = dict(source=df, text_align=\"left\", text_baseline=\"middle\", color=\"white\")\n", | |
| "\n", | |
| "x = dodge(\"group\", -0.4, range=p.x_range)\n", | |
| "\n", | |
| "p.text(x=x, y=\"period\", text=\"symbol\", text_font_style=\"bold\", **text_props)\n", | |
| "\n", | |
| "p.text(x=x, y=dodge(\"period\", 0.3, range=p.y_range), text=\"atomic number\",\n", | |
| " text_font_size=\"11px\", **text_props)\n", | |
| "\n", | |
| "p.text(x=x, y=dodge(\"period\", -0.35, range=p.y_range), text=\"name\",\n", | |
| " text_font_size=\"7px\", **text_props)\n", | |
| "\n", | |
| "p.text(x=x, y=dodge(\"period\", -0.2, range=p.y_range), text=\"atomic mass\",\n", | |
| " text_font_size=\"7px\", **text_props)\n", | |
| "\n", | |
| "p.rect([\"3\", \"3\"], [\"VI\", \"VII\"], 0.95, 0.95, color=[\"#FFF88C\", \"#FF8CE1\"])\n", | |
| "\n", | |
| "p.outline_line_color = None\n", | |
| "p.grid.grid_line_color = None\n", | |
| "p.axis.axis_line_color = None\n", | |
| "p.axis.major_tick_line_color = None\n", | |
| "p.axis.major_label_standoff = 0\n", | |
| "p.legend.orientation = \"horizontal\"\n", | |
| "p.legend.location =\"top_center\"\n", | |
| "p.hover.renderers = [r]\n", | |
| "\n", | |
| "# Add La/Ac series\n", | |
| "la_ac_series = elements.copy()\n", | |
| "\n", | |
| "Lr = la_ac_series[la_ac_series.symbol == 'Lr']\n", | |
| "Lr.group = \"17\"\n", | |
| "Lr.metal = 'actinoid'\n", | |
| "Lu = la_ac_series[la_ac_series.symbol == 'Lu']\n", | |
| "Lu.group = \"17\"\n", | |
| "Lu.metal = 'lanthanoid'\n", | |
| "\n", | |
| "la_ac_series = la_ac_series[\n", | |
| " (la_ac_series.group == '-')\n", | |
| "]\n", | |
| "\n", | |
| "la_ac_series = pd.concat((la_ac_series, Lu, Lr))\n", | |
| "la_ac_series = la_ac_series.sort_values(by='atomic number')\n", | |
| "\n", | |
| "la_ac_series[\"group\"] = [str(x) for x in [3+i for i in range(15)]*2]\n", | |
| "la_ac_series[\"period\"] = [\"1\" for i in range(15)] + [\"2\" for i in range(15)]\n", | |
| "\n", | |
| "p2 = figure(title=\"\", width=1000, height=65*2,\n", | |
| " x_range=groups,\n", | |
| " y_range=[\"2\", \"1\"],\n", | |
| " tools=\"hover\", toolbar_location=None, tooltips=TOOLTIPS)\n", | |
| "\n", | |
| "la_ac_text_props = dict(source=la_ac_series, text_align=\"left\", text_baseline=\"middle\", color=\"white\")\n", | |
| "\n", | |
| "r2 = p2.rect(\"group\", \"period\", 0.95, 0.95, source=la_ac_series, fill_alpha=0.6,\n", | |
| " color=factor_cmap('metal', palette=list(cmap.values()), factors=list(cmap.keys())))\n", | |
| "\n", | |
| "x = dodge(\"group\",\n", | |
| " -0.4,\n", | |
| " range=p2.x_range)\n", | |
| "\n", | |
| "p2.text(x=x, y=\"period\", text=\"symbol\", text_font_style=\"bold\", **la_ac_text_props)\n", | |
| "\n", | |
| "p2.text(x=x, y=dodge(\"period\", 0.3, range=p2.y_range), text=\"atomic number\",\n", | |
| " text_font_size=\"11px\", **la_ac_text_props)\n", | |
| "\n", | |
| "p2.text(x=x, y=dodge(\"period\", -0.35, range=p2.y_range), text=\"name\",\n", | |
| " text_font_size=\"7px\", **la_ac_text_props)\n", | |
| "\n", | |
| "p2.text(x=x, y=dodge(\"period\", -0.2, range=p2.y_range), text=\"atomic mass\",\n", | |
| " text_font_size=\"7px\", **la_ac_text_props)\n", | |
| "\n", | |
| "p2.outline_line_color = None\n", | |
| "p2.grid.grid_line_color = None\n", | |
| "p2.axis.axis_line_color = None\n", | |
| "p2.axis.major_tick_line_color = None\n", | |
| "p2.axis.major_label_standoff = 0\n", | |
| "p2.xaxis.major_label_text_font_size = '0pt'\n", | |
| "p2.yaxis.major_label_text_font_size = '0pt'\n", | |
| "\n", | |
| "p2.hover.renderers = [r2]\n", | |
| "\n", | |
| "p.background_fill_color = '#071b42'\n", | |
| "p.background_fill_alpha = 0.5\n", | |
| "p2.background_fill_color = '#071b42'\n", | |
| "p2.background_fill_alpha = 0.5\n", | |
| "p.border_fill_color = '#071b42'\n", | |
| "p2.border_fill_color = '#071b42'\n", | |
| "p.border_fill_alpha = 0.5\n", | |
| "p2.border_fill_alpha = 0.5\n", | |
| "p.legend.background_fill_color = '#071b42'\n", | |
| "p.legend.background_fill_alpha = 0.5\n", | |
| "\n", | |
| "p.yaxis.major_label_text_color = \"white\"\n", | |
| "p.xaxis.major_label_text_color = \"white\"\n", | |
| "p.legend.label_text_color = \"white\"\n", | |
| "\n", | |
| "command(column(p, p2))" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": null, | |
| "id": "8d47262b", | |
| "metadata": { | |
| "id": "8d47262b" | |
| }, | |
| "outputs": [], | |
| "source": [] | |
| } | |
| ], | |
| "metadata": { | |
| "kernelspec": { | |
| "display_name": "gcms-wf", | |
| "language": "python", | |
| "name": "gcms-wf" | |
| }, | |
| "language_info": { | |
| "codemirror_mode": { | |
| "name": "ipython", | |
| "version": 3 | |
| }, | |
| "file_extension": ".py", | |
| "mimetype": "text/x-python", | |
| "name": "python", | |
| "nbconvert_exporter": "python", | |
| "pygments_lexer": "ipython3", | |
| "version": "3.9.12" | |
| }, | |
| "colab": { | |
| "provenance": [] | |
| } | |
| }, | |
| "nbformat": 4, | |
| "nbformat_minor": 5 | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment