Created
October 1, 2020 17:13
-
-
Save PBrockmann/44f69779de55d1fe69a2232bdd1d4c09 to your computer and use it in GitHub Desktop.
Bokeh dashboard map/scatter
This file contains 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": 1, | |
| "metadata": {}, | |
| "outputs": [], | |
| "source": [ | |
| "import pandas as pd\n", | |
| "import numpy as np" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 2, | |
| "metadata": {}, | |
| "outputs": [], | |
| "source": [ | |
| "from bokeh.io import output_notebook, show\n", | |
| "from bokeh.plotting import figure\n", | |
| "from bokeh.layouts import row, column\n", | |
| "from bokeh.models import ColumnDataSource, CustomJS, Select\n", | |
| "from bokeh.models import WMTSTileSource\n", | |
| "from bokeh.tile_providers import get_provider\n", | |
| "from bokeh import events" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 3, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "text/html": [ | |
| "\n", | |
| " <div class=\"bk-root\">\n", | |
| " <a href=\"https://bokeh.org\" target=\"_blank\" class=\"bk-logo bk-logo-small bk-logo-notebook\"></a>\n", | |
| " <span id=\"1001\">Loading BokehJS ...</span>\n", | |
| " </div>" | |
| ] | |
| }, | |
| "metadata": {}, | |
| "output_type": "display_data" | |
| }, | |
| { | |
| "data": { | |
| "application/javascript": [ | |
| "\n", | |
| "(function(root) {\n", | |
| " function now() {\n", | |
| " return new Date();\n", | |
| " }\n", | |
| "\n", | |
| " var force = true;\n", | |
| "\n", | |
| " if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n", | |
| " root._bokeh_onload_callbacks = [];\n", | |
| " root._bokeh_is_loading = undefined;\n", | |
| " }\n", | |
| "\n", | |
| " var JS_MIME_TYPE = 'application/javascript';\n", | |
| " var HTML_MIME_TYPE = 'text/html';\n", | |
| " var EXEC_MIME_TYPE = 'application/vnd.bokehjs_exec.v0+json';\n", | |
| " var CLASS_NAME = 'output_bokeh rendered_html';\n", | |
| "\n", | |
| " /**\n", | |
| " * Render data to the DOM node\n", | |
| " */\n", | |
| " function render(props, node) {\n", | |
| " var script = document.createElement(\"script\");\n", | |
| " node.appendChild(script);\n", | |
| " }\n", | |
| "\n", | |
| " /**\n", | |
| " * Handle when an output is cleared or removed\n", | |
| " */\n", | |
| " function handleClearOutput(event, handle) {\n", | |
| " var cell = handle.cell;\n", | |
| "\n", | |
| " var id = cell.output_area._bokeh_element_id;\n", | |
| " var server_id = cell.output_area._bokeh_server_id;\n", | |
| " // Clean up Bokeh references\n", | |
| " if (id != null && id in Bokeh.index) {\n", | |
| " Bokeh.index[id].model.document.clear();\n", | |
| " delete Bokeh.index[id];\n", | |
| " }\n", | |
| "\n", | |
| " if (server_id !== undefined) {\n", | |
| " // Clean up Bokeh references\n", | |
| " var cmd = \"from bokeh.io.state import curstate; print(curstate().uuid_to_server['\" + server_id + \"'].get_sessions()[0].document.roots[0]._id)\";\n", | |
| " cell.notebook.kernel.execute(cmd, {\n", | |
| " iopub: {\n", | |
| " output: function(msg) {\n", | |
| " var id = msg.content.text.trim();\n", | |
| " if (id in Bokeh.index) {\n", | |
| " Bokeh.index[id].model.document.clear();\n", | |
| " delete Bokeh.index[id];\n", | |
| " }\n", | |
| " }\n", | |
| " }\n", | |
| " });\n", | |
| " // Destroy server and session\n", | |
| " var cmd = \"import bokeh.io.notebook as ion; ion.destroy_server('\" + server_id + \"')\";\n", | |
| " cell.notebook.kernel.execute(cmd);\n", | |
| " }\n", | |
| " }\n", | |
| "\n", | |
| " /**\n", | |
| " * Handle when a new output is added\n", | |
| " */\n", | |
| " function handleAddOutput(event, handle) {\n", | |
| " var output_area = handle.output_area;\n", | |
| " var output = handle.output;\n", | |
| "\n", | |
| " // limit handleAddOutput to display_data with EXEC_MIME_TYPE content only\n", | |
| " if ((output.output_type != \"display_data\") || (!output.data.hasOwnProperty(EXEC_MIME_TYPE))) {\n", | |
| " return\n", | |
| " }\n", | |
| "\n", | |
| " var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n", | |
| "\n", | |
| " if (output.metadata[EXEC_MIME_TYPE][\"id\"] !== undefined) {\n", | |
| " toinsert[toinsert.length - 1].firstChild.textContent = output.data[JS_MIME_TYPE];\n", | |
| " // store reference to embed id on output_area\n", | |
| " output_area._bokeh_element_id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n", | |
| " }\n", | |
| " if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n", | |
| " var bk_div = document.createElement(\"div\");\n", | |
| " bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n", | |
| " var script_attrs = bk_div.children[0].attributes;\n", | |
| " for (var i = 0; i < script_attrs.length; i++) {\n", | |
| " toinsert[toinsert.length - 1].firstChild.setAttribute(script_attrs[i].name, script_attrs[i].value);\n", | |
| " 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", | |
| " var toinsert = this.create_output_subarea(\n", | |
| " metadata,\n", | |
| " CLASS_NAME,\n", | |
| " EXEC_MIME_TYPE\n", | |
| " );\n", | |
| " this.keyboard_manager.register_events(toinsert);\n", | |
| " // Render to node\n", | |
| " var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n", | |
| " render(props, toinsert[toinsert.length - 1]);\n", | |
| " element.append(toinsert);\n", | |
| " return toinsert\n", | |
| " }\n", | |
| "\n", | |
| " /* Handle when an output is cleared or removed */\n", | |
| " events.on('clear_output.CodeCell', handleClearOutput);\n", | |
| " events.on('delete.Cell', handleClearOutput);\n", | |
| "\n", | |
| " /* Handle when a new output is added */\n", | |
| " events.on('output_added.OutputArea', handleAddOutput);\n", | |
| "\n", | |
| " /**\n", | |
| " * Register the mime type and append_mime function with output_area\n", | |
| " */\n", | |
| " OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n", | |
| " /* Is output safe? */\n", | |
| " safe: true,\n", | |
| " /* Index of renderer in `output_area.display_order` */\n", | |
| " index: 0\n", | |
| " });\n", | |
| " }\n", | |
| "\n", | |
| " // register the mime type if in Jupyter Notebook environment and previously unregistered\n", | |
| " if (root.Jupyter !== undefined) {\n", | |
| " var events = require('base/js/events');\n", | |
| " var OutputArea = require('notebook/js/outputarea').OutputArea;\n", | |
| "\n", | |
| " if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n", | |
| " register_renderer(events, OutputArea);\n", | |
| " }\n", | |
| " }\n", | |
| "\n", | |
| " \n", | |
| " if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n", | |
| " root._bokeh_timeout = Date.now() + 5000;\n", | |
| " root._bokeh_failed_load = false;\n", | |
| " }\n", | |
| "\n", | |
| " var NB_LOAD_WARNING = {'data': {'text/html':\n", | |
| " \"<div style='background-color: #fdd'>\\n\"+\n", | |
| " \"<p>\\n\"+\n", | |
| " \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n", | |
| " \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n", | |
| " \"</p>\\n\"+\n", | |
| " \"<ul>\\n\"+\n", | |
| " \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n", | |
| " \"<li>use INLINE resources instead, as so:</li>\\n\"+\n", | |
| " \"</ul>\\n\"+\n", | |
| " \"<code>\\n\"+\n", | |
| " \"from bokeh.resources import INLINE\\n\"+\n", | |
| " \"output_notebook(resources=INLINE)\\n\"+\n", | |
| " \"</code>\\n\"+\n", | |
| " \"</div>\"}};\n", | |
| "\n", | |
| " function display_loaded() {\n", | |
| " var el = document.getElementById(\"1001\");\n", | |
| " if (el != null) {\n", | |
| " el.textContent = \"BokehJS is loading...\";\n", | |
| " }\n", | |
| " if (root.Bokeh !== undefined) {\n", | |
| " if (el != null) {\n", | |
| " el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n", | |
| " }\n", | |
| " } else if (Date.now() < root._bokeh_timeout) {\n", | |
| " setTimeout(display_loaded, 100)\n", | |
| " }\n", | |
| " }\n", | |
| "\n", | |
| "\n", | |
| " function run_callbacks() {\n", | |
| " try {\n", | |
| " root._bokeh_onload_callbacks.forEach(function(callback) {\n", | |
| " if (callback != null)\n", | |
| " callback();\n", | |
| " });\n", | |
| " } finally {\n", | |
| " delete root._bokeh_onload_callbacks\n", | |
| " }\n", | |
| " console.debug(\"Bokeh: all callbacks have finished\");\n", | |
| " }\n", | |
| "\n", | |
| " function load_libs(css_urls, js_urls, callback) {\n", | |
| " if (css_urls == null) css_urls = [];\n", | |
| " if (js_urls == null) js_urls = [];\n", | |
| "\n", | |
| " root._bokeh_onload_callbacks.push(callback);\n", | |
| " if (root._bokeh_is_loading > 0) {\n", | |
| " console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n", | |
| " return null;\n", | |
| " }\n", | |
| " if (js_urls == null || js_urls.length === 0) {\n", | |
| " run_callbacks();\n", | |
| " return null;\n", | |
| " }\n", | |
| " console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n", | |
| " root._bokeh_is_loading = css_urls.length + js_urls.length;\n", | |
| "\n", | |
| " function on_load() {\n", | |
| " root._bokeh_is_loading--;\n", | |
| " if (root._bokeh_is_loading === 0) {\n", | |
| " console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n", | |
| " run_callbacks()\n", | |
| " }\n", | |
| " }\n", | |
| "\n", | |
| " function on_error() {\n", | |
| " console.error(\"failed to load \" + url);\n", | |
| " }\n", | |
| "\n", | |
| " for (var i = 0; i < css_urls.length; i++) {\n", | |
| " var url = css_urls[i];\n", | |
| " const element = document.createElement(\"link\");\n", | |
| " element.onload = on_load;\n", | |
| " element.onerror = on_error;\n", | |
| " element.rel = \"stylesheet\";\n", | |
| " element.type = \"text/css\";\n", | |
| " element.href = url;\n", | |
| " console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n", | |
| " document.body.appendChild(element);\n", | |
| " }\n", | |
| "\n", | |
| " const hashes = {\"https://cdn.bokeh.org/bokeh/release/bokeh-2.2.1.min.js\": \"qkRvDQVAIfzsJo40iRBbxt6sttt0hv4lh74DG7OK4MCHv4C5oohXYoHUM5W11uqS\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.2.1.min.js\": \"Sb7Mr06a9TNlet/GEBeKaf5xH3eb6AlCzwjtU82wNPyDrnfoiVl26qnvlKjmcAd+\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.2.1.min.js\": \"HaJ15vgfmcfRtB4c4YBOI4f1MUujukqInOWVqZJZZGK7Q+ivud0OKGSTn/Vm2iso\"};\n", | |
| "\n", | |
| " for (var i = 0; i < js_urls.length; i++) {\n", | |
| " var url = js_urls[i];\n", | |
| " var element = document.createElement('script');\n", | |
| " element.onload = on_load;\n", | |
| " element.onerror = on_error;\n", | |
| " element.async = false;\n", | |
| " element.src = url;\n", | |
| " if (url in hashes) {\n", | |
| " element.crossOrigin = \"anonymous\";\n", | |
| " element.integrity = \"sha384-\" + hashes[url];\n", | |
| " }\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", | |
| " \n", | |
| " var js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.2.1.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.2.1.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.2.1.min.js\"];\n", | |
| " var css_urls = [];\n", | |
| " \n", | |
| "\n", | |
| " var inline_js = [\n", | |
| " function(Bokeh) {\n", | |
| " Bokeh.set_log_level(\"info\");\n", | |
| " },\n", | |
| " function(Bokeh) {\n", | |
| " \n", | |
| " \n", | |
| " }\n", | |
| " ];\n", | |
| "\n", | |
| " function run_inline_js() {\n", | |
| " \n", | |
| " if (root.Bokeh !== undefined || force === true) {\n", | |
| " \n", | |
| " for (var i = 0; i < inline_js.length; i++) {\n", | |
| " inline_js[i].call(root, root.Bokeh);\n", | |
| " }\n", | |
| " if (force === true) {\n", | |
| " display_loaded();\n", | |
| " }} else if (Date.now() < root._bokeh_timeout) {\n", | |
| " setTimeout(run_inline_js, 100);\n", | |
| " } else if (!root._bokeh_failed_load) {\n", | |
| " console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n", | |
| " root._bokeh_failed_load = true;\n", | |
| " } else if (force !== true) {\n", | |
| " var cell = $(document.getElementById(\"1001\")).parents('.cell').data().cell;\n", | |
| " cell.output_area.append_execute_result(NB_LOAD_WARNING)\n", | |
| " }\n", | |
| "\n", | |
| " }\n", | |
| "\n", | |
| " if (root._bokeh_is_loading === 0) {\n", | |
| " console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n", | |
| " run_inline_js();\n", | |
| " } else {\n", | |
| " load_libs(css_urls, js_urls, function() {\n", | |
| " console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n", | |
| " run_inline_js();\n", | |
| " });\n", | |
| " }\n", | |
| "}(window));" | |
| ], | |
| "application/vnd.bokehjs_load.v0+json": "\n(function(root) {\n function now() {\n return new Date();\n }\n\n var force = true;\n\n if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n root._bokeh_onload_callbacks = [];\n root._bokeh_is_loading = undefined;\n }\n\n \n\n \n if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n root._bokeh_timeout = Date.now() + 5000;\n root._bokeh_failed_load = false;\n }\n\n var NB_LOAD_WARNING = {'data': {'text/html':\n \"<div style='background-color: #fdd'>\\n\"+\n \"<p>\\n\"+\n \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n \"</p>\\n\"+\n \"<ul>\\n\"+\n \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n \"<li>use INLINE resources instead, as so:</li>\\n\"+\n \"</ul>\\n\"+\n \"<code>\\n\"+\n \"from bokeh.resources import INLINE\\n\"+\n \"output_notebook(resources=INLINE)\\n\"+\n \"</code>\\n\"+\n \"</div>\"}};\n\n function display_loaded() {\n var el = document.getElementById(\"1001\");\n if (el != null) {\n el.textContent = \"BokehJS is loading...\";\n }\n if (root.Bokeh !== undefined) {\n if (el != null) {\n el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n }\n } else if (Date.now() < root._bokeh_timeout) {\n setTimeout(display_loaded, 100)\n }\n }\n\n\n function run_callbacks() {\n try {\n root._bokeh_onload_callbacks.forEach(function(callback) {\n if (callback != null)\n callback();\n });\n } finally {\n delete root._bokeh_onload_callbacks\n }\n console.debug(\"Bokeh: all callbacks have finished\");\n }\n\n function load_libs(css_urls, js_urls, callback) {\n if (css_urls == null) css_urls = [];\n if (js_urls == null) js_urls = [];\n\n root._bokeh_onload_callbacks.push(callback);\n if (root._bokeh_is_loading > 0) {\n console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n return null;\n }\n if (js_urls == null || js_urls.length === 0) {\n run_callbacks();\n return null;\n }\n console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n root._bokeh_is_loading = css_urls.length + js_urls.length;\n\n function on_load() {\n root._bokeh_is_loading--;\n if (root._bokeh_is_loading === 0) {\n console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n run_callbacks()\n }\n }\n\n function on_error() {\n console.error(\"failed to load \" + url);\n }\n\n for (var i = 0; i < css_urls.length; i++) {\n var url = css_urls[i];\n const element = document.createElement(\"link\");\n element.onload = on_load;\n element.onerror = on_error;\n element.rel = \"stylesheet\";\n element.type = \"text/css\";\n element.href = url;\n console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n document.body.appendChild(element);\n }\n\n const hashes = {\"https://cdn.bokeh.org/bokeh/release/bokeh-2.2.1.min.js\": \"qkRvDQVAIfzsJo40iRBbxt6sttt0hv4lh74DG7OK4MCHv4C5oohXYoHUM5W11uqS\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.2.1.min.js\": \"Sb7Mr06a9TNlet/GEBeKaf5xH3eb6AlCzwjtU82wNPyDrnfoiVl26qnvlKjmcAd+\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.2.1.min.js\": \"HaJ15vgfmcfRtB4c4YBOI4f1MUujukqInOWVqZJZZGK7Q+ivud0OKGSTn/Vm2iso\"};\n\n for (var i = 0; i < js_urls.length; i++) {\n var url = js_urls[i];\n var element = document.createElement('script');\n element.onload = on_load;\n element.onerror = on_error;\n element.async = false;\n element.src = url;\n if (url in hashes) {\n element.crossOrigin = \"anonymous\";\n element.integrity = \"sha384-\" + hashes[url];\n }\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 \n var js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.2.1.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.2.1.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.2.1.min.js\"];\n var css_urls = [];\n \n\n var inline_js = [\n function(Bokeh) {\n Bokeh.set_log_level(\"info\");\n },\n function(Bokeh) {\n \n \n }\n ];\n\n function run_inline_js() {\n \n if (root.Bokeh !== undefined || force === true) {\n \n for (var i = 0; i < inline_js.length; i++) {\n inline_js[i].call(root, root.Bokeh);\n }\n if (force === true) {\n display_loaded();\n }} else if (Date.now() < root._bokeh_timeout) {\n setTimeout(run_inline_js, 100);\n } else if (!root._bokeh_failed_load) {\n console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n root._bokeh_failed_load = true;\n } else if (force !== true) {\n var cell = $(document.getElementById(\"1001\")).parents('.cell').data().cell;\n cell.output_area.append_execute_result(NB_LOAD_WARNING)\n }\n\n }\n\n if (root._bokeh_is_loading === 0) {\n console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n run_inline_js();\n } else {\n load_libs(css_urls, js_urls, function() {\n console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n run_inline_js();\n });\n }\n}(window));" | |
| }, | |
| "metadata": {}, | |
| "output_type": "display_data" | |
| } | |
| ], | |
| "source": [ | |
| "output_notebook()" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 4, | |
| "metadata": {}, | |
| "outputs": [], | |
| "source": [ | |
| "values = list('ABCDFG')\n", | |
| "\n", | |
| "df = pd.DataFrame(np.random.randint(0,60,size=(30, 6)), columns=values)" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 5, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "text/plain": [ | |
| "(-6122571.993630046, -3503549.8435043744)" | |
| ] | |
| }, | |
| "execution_count": 5, | |
| "metadata": {}, | |
| "output_type": "execute_result" | |
| } | |
| ], | |
| "source": [ | |
| "from pyproj import Transformer\n", | |
| "\n", | |
| "transformer = Transformer.from_crs(\"EPSG:4326\", \"EPSG:3857\", always_xy=True)\n", | |
| "\n", | |
| "world_lon1, world_lat1 = transformer.transform(-85, -60)\n", | |
| "world_lon2, world_lat2 = transformer.transform(-55, -30)\n", | |
| "\n", | |
| "world_lon2, world_lat2" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 6, | |
| "metadata": {}, | |
| "outputs": [], | |
| "source": [ | |
| "df['Longitude'] = df['A']\n", | |
| "df['Latitude'] = df['B']\n", | |
| "\n", | |
| "lons, lats = [], []\n", | |
| "for lon, lat in list(zip(df[\"Longitude\"], df[\"Latitude\"])):\n", | |
| " x, y = transformer.transform(lon, lat)\n", | |
| " lons.append(x)\n", | |
| " lats.append(y)\n", | |
| " \n", | |
| "df['xpos'] = lons\n", | |
| "df['ypos'] = lats\n", | |
| "\n", | |
| "varName1 = 'A'\n", | |
| "varName2 = 'B'\n", | |
| "\n", | |
| "df['x'] = df[varName1]\n", | |
| "df['y'] = df[varName2]" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 7, | |
| "metadata": {}, | |
| "outputs": [], | |
| "source": [ | |
| "sourceScatter = ColumnDataSource(df)\n", | |
| "\n", | |
| "tooltips = [('x', '@x'), ('y', '@y')]\n", | |
| "title = varName1 + ' vs ' + varName2\n", | |
| "\n", | |
| "pScatter = figure(tools='pan, wheel_zoom, box_select, lasso_select, reset', plot_width=400, plot_height=400, \n", | |
| " active_scroll='wheel_zoom',\n", | |
| " x_axis_label=varName1, y_axis_label=varName2,\n", | |
| " tooltips=tooltips,\n", | |
| " title=title)\n", | |
| "\n", | |
| "circles = pScatter.circle('x', 'y', source=sourceScatter,\n", | |
| " size=15, line_color='navy', fill_color='navy', fill_alpha=0.3)\n", | |
| "\n", | |
| "select1Scatter = Select(title='Variable 1: ', value=varName1, width=100, options=values)\n", | |
| "select2Scatter = Select(title='Variable 2: ', value=varName2, width=100, options=values)\n", | |
| "\n", | |
| "changeScatterVariables = CustomJS(args=dict(pScatter=pScatter, sourceScatter=sourceScatter, \n", | |
| " select1Scatter=select1Scatter, select2Scatter=select2Scatter, \n", | |
| " tooltips=tooltips,\n", | |
| " ax1=pScatter.xaxis, ax2=pScatter.yaxis), code=\"\"\"\n", | |
| " console.log(\"Change variables on Scatter\");\n", | |
| " var varName1 = select1Scatter.value;\n", | |
| " var varName2 = select2Scatter.value;\n", | |
| " pScatter.title.text = varName1 + \" vs \" + varName2;\n", | |
| " ax1[0].axis_label = varName1;\n", | |
| " ax2[0].axis_label = varName2; \n", | |
| " sourceScatter.data['x'] = sourceScatter.data[varName1];\n", | |
| " sourceScatter.data['y'] = sourceScatter.data[varName2];\n", | |
| " sourceScatter.change.emit();\n", | |
| "\"\"\")\n", | |
| "\n", | |
| "select1Scatter.js_on_change(\"value\", changeScatterVariables)\n", | |
| "select2Scatter.js_on_change(\"value\", changeScatterVariables)" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 8, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "text/html": [ | |
| "\n", | |
| "\n", | |
| "\n", | |
| "\n", | |
| "\n", | |
| "\n", | |
| " <div class=\"bk-root\" id=\"4f5aeb5b-3ec7-4b18-b7b3-e6c97c2cf651\" data-root-id=\"1099\"></div>\n" | |
| ] | |
| }, | |
| "metadata": {}, | |
| "output_type": "display_data" | |
| }, | |
| { | |
| "data": { | |
| "application/javascript": [ | |
| "(function(root) {\n", | |
| " function embed_document(root) {\n", | |
| " \n", | |
| " var docs_json = {\"bb48812d-11da-41b6-ae4b-122842ba1630\":{\"roots\":{\"references\":[{\"attributes\":{\"children\":[{\"id\":\"1046\"},{\"id\":\"1003\"},{\"id\":\"1098\"}]},\"id\":\"1099\",\"type\":\"Row\"},{\"attributes\":{\"dimension\":\"lon\"},\"id\":\"1056\",\"type\":\"MercatorTicker\"},{\"attributes\":{\"overlay\":{\"id\":\"1028\"}},\"id\":\"1025\",\"type\":\"LassoSelectTool\"},{\"attributes\":{\"formatter\":{\"id\":\"1058\"},\"ticker\":{\"id\":\"1056\"}},\"id\":\"1055\",\"type\":\"MercatorAxis\"},{\"attributes\":{},\"id\":\"1071\",\"type\":\"PanTool\"},{\"attributes\":{\"attribution\":\"© <a href=\\\"https://foundation.wikimedia.org/wiki/Maps_Terms_of_Use\\\">Wikimedia Maps</a> contributors\",\"url\":\"https://maps.wikimedia.org/osm-intl/{Z}/{X}/{Y}@2x.png\"},\"id\":\"1085\",\"type\":\"WMTSTileSource\"},{\"attributes\":{},\"id\":\"1026\",\"type\":\"ResetTool\"},{\"attributes\":{},\"id\":\"1053\",\"type\":\"LinearScale\"},{\"attributes\":{},\"id\":\"1072\",\"type\":\"WheelZoomTool\"},{\"attributes\":{},\"id\":\"1012\",\"type\":\"LinearScale\"},{\"attributes\":{\"text\":\"A vs B\"},\"id\":\"1004\",\"type\":\"Title\"},{\"attributes\":{\"overlay\":{\"id\":\"1076\"}},\"id\":\"1073\",\"type\":\"BoxSelectTool\"},{\"attributes\":{},\"id\":\"1117\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"below\":[{\"id\":\"1014\"}],\"center\":[{\"id\":\"1017\"},{\"id\":\"1021\"}],\"left\":[{\"id\":\"1018\"}],\"plot_height\":400,\"plot_width\":400,\"renderers\":[{\"id\":\"1040\"}],\"title\":{\"id\":\"1004\"},\"toolbar\":{\"id\":\"1030\"},\"x_range\":{\"id\":\"1006\"},\"x_scale\":{\"id\":\"1010\"},\"y_range\":{\"id\":\"1008\"},\"y_scale\":{\"id\":\"1012\"}},\"id\":\"1003\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{\"text\":\"\"},\"id\":\"1100\",\"type\":\"Title\"},{\"attributes\":{\"overlay\":{\"id\":\"1077\"}},\"id\":\"1074\",\"type\":\"LassoSelectTool\"},{\"attributes\":{\"args\":{\"pMap\":{\"id\":\"1046\"},\"select1Scatter\":{\"id\":\"1042\"},\"select2Scatter\":{\"id\":\"1043\"},\"sourceMap\":{\"id\":\"1045\"},\"sourceScatter\":{\"id\":\"1002\"}},\"code\":\"\\n console.log(\\\"Move on map\\\");\\n var indexToKeep = []; \\n var dScatter = sourceScatter.data;\\n var dMap = sourceMap.data;\\n for (var i=0; i < dMap['xpos'].length; i++) {\\n if (dMap['xpos'][i] >= pMap.x_range.start && dMap['xpos'][i] <= pMap.x_range.end &&\\n dMap['ypos'][i] >= pMap.y_range.start && dMap['ypos'][i] <= pMap.y_range.end) {\\n indexToKeep.push(dMap['index'][i]);\\n }\\n }\\n if (indexToKeep.length == 0) return;\\n for (var key in dScatter) {\\n dScatter[key] = dMap[key].filter((el,i)=>indexToKeep.some(j => i === j));\\n }\\n dScatter['x'] = dScatter[select1Scatter.value];\\n dScatter['y'] = dScatter[select2Scatter.value];\\n sourceScatter.change.emit();\\n\"},\"id\":\"1093\",\"type\":\"CustomJS\"},{\"attributes\":{},\"id\":\"1051\",\"type\":\"LinearScale\"},{\"attributes\":{},\"id\":\"1008\",\"type\":\"DataRange1d\"},{\"attributes\":{},\"id\":\"1075\",\"type\":\"ResetTool\"},{\"attributes\":{\"overlay\":{\"id\":\"1027\"}},\"id\":\"1024\",\"type\":\"BoxSelectTool\"},{\"attributes\":{\"axis\":{\"id\":\"1014\"},\"ticker\":null},\"id\":\"1017\",\"type\":\"Grid\"},{\"attributes\":{},\"id\":\"1108\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"js_property_callbacks\":{\"change:end\":[{\"id\":\"1093\"}]}},\"id\":\"1049\",\"type\":\"DataRange1d\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_inspect\":\"auto\",\"active_multi\":null,\"active_scroll\":{\"id\":\"1072\"},\"active_tap\":\"auto\",\"logo\":null,\"tools\":[{\"id\":\"1071\"},{\"id\":\"1072\"},{\"id\":\"1073\"},{\"id\":\"1074\"},{\"id\":\"1075\"}]},\"id\":\"1078\",\"type\":\"Toolbar\"},{\"attributes\":{\"source\":{\"id\":\"1045\"}},\"id\":\"1092\",\"type\":\"CDSView\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"navy\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"navy\"},\"size\":{\"units\":\"screen\",\"value\":15},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"1039\",\"type\":\"Circle\"},{\"attributes\":{\"axis_label\":\"B\",\"formatter\":{\"id\":\"1110\"},\"ticker\":{\"id\":\"1019\"}},\"id\":\"1018\",\"type\":\"LinearAxis\"},{\"attributes\":{\"js_property_callbacks\":{\"change:value\":[{\"id\":\"1044\"}]},\"options\":[\"A\",\"B\",\"C\",\"D\",\"F\",\"G\"],\"title\":\"Variable 1: \",\"value\":\"A\",\"width\":100},\"id\":\"1042\",\"type\":\"Select\"},{\"attributes\":{\"args\":{\"sourceMap\":{\"id\":\"1045\"},\"sourceScatter\":{\"id\":\"1002\"}},\"code\":\"\\n console.log(\\\"Selection on Map\\\");\\n var inds = cb_obj.indices;\\n var dScatter = sourceScatter.data;\\n var dMap = sourceMap.data;\\n dScatter['x'] = [];\\n dScatter['y'] = [];\\n if (inds.length != 0) {\\n for (var i=0; i < inds.length; i++) {\\n dScatter['x'].push(dMap['x'][inds[i]]);\\n dScatter['y'].push(dMap['y'][inds[i]]);\\n }\\n } else {\\n dScatter['x'] = dMap['x'];\\n dScatter['y'] = dMap['y'];\\n }\\n sourceScatter.change.emit();\\n\"},\"id\":\"1097\",\"type\":\"CustomJS\"},{\"attributes\":{\"data_source\":{\"id\":\"1002\"},\"glyph\":{\"id\":\"1038\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"1039\"},\"selection_glyph\":null,\"view\":{\"id\":\"1041\"}},\"id\":\"1040\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"dimension\":\"lat\"},\"id\":\"1066\",\"type\":\"MercatorTickFormatter\"},{\"attributes\":{},\"id\":\"1019\",\"type\":\"BasicTicker\"},{\"attributes\":{\"dimension\":\"lon\"},\"id\":\"1058\",\"type\":\"MercatorTickFormatter\"},{\"attributes\":{\"axis\":{\"id\":\"1018\"},\"dimension\":1,\"ticker\":null},\"id\":\"1021\",\"type\":\"Grid\"},{\"attributes\":{\"args\":{\"ax1\":[{\"id\":\"1014\"}],\"ax2\":[{\"id\":\"1018\"}],\"pScatter\":{\"id\":\"1003\"},\"select1Scatter\":{\"id\":\"1042\"},\"select2Scatter\":{\"id\":\"1043\"},\"sourceScatter\":{\"id\":\"1002\"},\"tooltips\":[[\"x\",\"@x\"],[\"y\",\"@y\"]]},\"code\":\"\\n console.log(\\\"Change variables on Scatter\\\");\\n var varName1 = select1Scatter.value;\\n var varName2 = select2Scatter.value;\\n pScatter.title.text = varName1 + \\\" vs \\\" + varName2;\\n ax1[0].axis_label = varName1;\\n ax2[0].axis_label = varName2; \\n sourceScatter.data['x'] = sourceScatter.data[varName1];\\n sourceScatter.data['y'] = sourceScatter.data[varName2];\\n sourceScatter.change.emit();\\n\"},\"id\":\"1044\",\"type\":\"CustomJS\"},{\"attributes\":{\"js_property_callbacks\":{\"change:indices\":[{\"id\":\"1097\"}]}},\"id\":\"1096\",\"type\":\"Selection\"},{\"attributes\":{\"axis\":{\"id\":\"1055\"},\"ticker\":null},\"id\":\"1062\",\"type\":\"Grid\"},{\"attributes\":{\"js_property_callbacks\":{\"change:value\":[{\"id\":\"1044\"}]},\"options\":[\"A\",\"B\",\"C\",\"D\",\"F\",\"G\"],\"title\":\"Variable 2: \",\"value\":\"B\",\"width\":100},\"id\":\"1043\",\"type\":\"Select\"},{\"attributes\":{\"data\":{\"A\":[22,30,15,36,11,57,23,6,43,47,40,44,45,54,3,8,56,5,41,16,28,12,21,3,10,33,8,38,7,18],\"B\":[12,20,24,13,7,54,38,21,20,57,29,7,57,12,46,21,2,24,19,25,20,36,28,26,49,46,9,29,49,48],\"C\":[17,17,44,5,51,16,17,0,2,7,51,10,7,23,20,34,7,29,11,38,57,27,27,0,29,28,30,33,49,43],\"D\":[12,20,57,49,1,33,7,54,17,57,48,4,44,14,22,15,54,58,21,51,12,37,25,16,24,59,38,14,7,34],\"F\":[44,51,49,43,15,52,59,22,30,4,27,32,25,49,9,18,15,13,37,17,53,47,3,41,9,2,36,56,55,35],\"G\":[22,37,5,46,1,14,45,9,54,18,10,30,14,21,29,46,22,54,57,33,40,41,51,22,11,32,46,26,21,39],\"Latitude\":[12,20,24,13,7,54,38,21,20,57,29,7,57,12,46,21,2,24,19,25,20,36,28,26,49,46,9,29,49,48],\"Longitude\":[22,30,15,36,11,57,23,6,43,47,40,44,45,54,3,8,56,5,41,16,28,12,21,3,10,33,8,38,7,18],\"index\":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29],\"x\":[22,30,15,36,11,57,23,6,43,47,40,44,45,54,3,8,56,5,41,16,28,12,21,3,10,33,8,38,7,18],\"xpos\":{\"__ndarray__\":\"YugSZkKvQkFua6VcoHpJQW5rpVygejlBt02T1SaTTkFi6BJmQq8yQdzyab5+NFhBxDjlJK6IQ0ElibfjGWIkQTHAqYaMQlJB9GBOBGT1U0GfR27oavxQQWLoEmZCr1JBkxB8RfgbU0FJei4gXe5WQSWJt+MZYhRBMQxK2nctK0GrygDfyMdXQZ9Hbuhq/CBB0G/XxyBpUUExDErady07QavKAN/Ix0dBJYm34xliNEEBmECn1tVBQSWJt+MZYhRBn0du6Gr8MEGTXByZ4wZMQTEMStp3LStBPvebKf8iUEGrygDfyMcnQbdNk9Umkz5B\",\"dtype\":\"float64\",\"order\":\"little\",\"shape\":[30]},\"y\":[12,20,24,13,7,54,38,21,20,57,29,7,57,12,46,21,2,24,19,25,20,36,28,26,49,46,9,29,49,48],\"ypos\":{\"__ndarray__\":\"2H+NaKyINEFYiKd2g1dBQfKr/w3AAUVB1fWZRRRGNkEBFapt/NYnQSjl0BIbWltBTRAGdBh4UUFiwkFLoz9CQViIp3aDV0FBd9UQqz2aXUFnPHgED8FJQQEVqm381idBd9UQqz2aXUHYf41orIg0QRiuGE7fDFZBYsJBS6M/QkF39ASr4S4LQfKr/w3AAUVB2Igh9dtwQEE3xupPsPBFQViIp3aDV0FBxpLPV9NnUEF3SBPlpslIQWGlw3iU4UZBXWc3WcvvV0EYrhhO3wxWQdRwISCKsy5BZzx4BA/BSUFdZzdZy+9XQc/BbrW5S1dB\",\"dtype\":\"float64\",\"order\":\"little\",\"shape\":[30]}},\"selected\":{\"id\":\"1094\"},\"selection_policy\":{\"id\":\"1117\"}},\"id\":\"1002\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"js_property_callbacks\":{\"change:indices\":[{\"id\":\"1095\"}]}},\"id\":\"1094\",\"type\":\"Selection\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.3},\"fill_color\":{\"value\":\"navy\"},\"line_color\":{\"value\":\"navy\"},\"size\":{\"units\":\"screen\",\"value\":15},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"1038\",\"type\":\"Circle\"},{\"attributes\":{\"args\":{\"sourceMap\":{\"id\":\"1045\"},\"sourceScatter\":{\"id\":\"1002\"}},\"code\":\"\\n console.log(\\\"Selection on Scatter\\\");\\n var inds = cb_obj.indices;\\n var dScatter = sourceScatter.data;\\n var dMap = sourceMap.data;\\n dMap['xpos'] = [];\\n dMap['ypos'] = [];\\n if (inds.length != 0) {\\n for (var i=0; i < inds.length; i++) {\\n dMap['xpos'].push(dScatter['xpos'][inds[i]]);\\n dMap['ypos'].push(dScatter['ypos'][inds[i]]);\\n }\\n } else {\\n dMap['xpos'] = dScatter['xpos'];\\n dMap['ypos'] = dScatter['ypos'];\\n }\\n sourceMap.change.emit();\\n\"},\"id\":\"1095\",\"type\":\"CustomJS\"},{\"attributes\":{\"below\":[{\"id\":\"1055\"}],\"center\":[{\"id\":\"1062\"},{\"id\":\"1070\"}],\"left\":[{\"id\":\"1063\"}],\"plot_height\":400,\"plot_width\":400,\"renderers\":[{\"id\":\"1086\"},{\"id\":\"1091\"}],\"title\":{\"id\":\"1100\"},\"toolbar\":{\"id\":\"1078\"},\"x_range\":{\"id\":\"1047\"},\"x_scale\":{\"id\":\"1051\"},\"y_range\":{\"id\":\"1049\"},\"y_scale\":{\"id\":\"1053\"}},\"id\":\"1046\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"red\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"red\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"xpos\"},\"y\":{\"field\":\"ypos\"}},\"id\":\"1090\",\"type\":\"Scatter\"},{\"attributes\":{\"dimension\":\"lat\"},\"id\":\"1064\",\"type\":\"MercatorTicker\"},{\"attributes\":{},\"id\":\"1015\",\"type\":\"BasicTicker\"},{\"attributes\":{\"formatter\":{\"id\":\"1066\"},\"ticker\":{\"id\":\"1064\"}},\"id\":\"1063\",\"type\":\"MercatorAxis\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"red\"},\"line_color\":{\"value\":\"red\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"xpos\"},\"y\":{\"field\":\"ypos\"}},\"id\":\"1089\",\"type\":\"Scatter\"},{\"attributes\":{\"data\":{\"A\":[22,30,15,36,11,57,23,6,43,47,40,44,45,54,3,8,56,5,41,16,28,12,21,3,10,33,8,38,7,18],\"B\":[12,20,24,13,7,54,38,21,20,57,29,7,57,12,46,21,2,24,19,25,20,36,28,26,49,46,9,29,49,48],\"C\":[17,17,44,5,51,16,17,0,2,7,51,10,7,23,20,34,7,29,11,38,57,27,27,0,29,28,30,33,49,43],\"D\":[12,20,57,49,1,33,7,54,17,57,48,4,44,14,22,15,54,58,21,51,12,37,25,16,24,59,38,14,7,34],\"F\":[44,51,49,43,15,52,59,22,30,4,27,32,25,49,9,18,15,13,37,17,53,47,3,41,9,2,36,56,55,35],\"G\":[22,37,5,46,1,14,45,9,54,18,10,30,14,21,29,46,22,54,57,33,40,41,51,22,11,32,46,26,21,39],\"Latitude\":[12,20,24,13,7,54,38,21,20,57,29,7,57,12,46,21,2,24,19,25,20,36,28,26,49,46,9,29,49,48],\"Longitude\":[22,30,15,36,11,57,23,6,43,47,40,44,45,54,3,8,56,5,41,16,28,12,21,3,10,33,8,38,7,18],\"index\":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29],\"x\":[22,30,15,36,11,57,23,6,43,47,40,44,45,54,3,8,56,5,41,16,28,12,21,3,10,33,8,38,7,18],\"xpos\":{\"__ndarray__\":\"YugSZkKvQkFua6VcoHpJQW5rpVygejlBt02T1SaTTkFi6BJmQq8yQdzyab5+NFhBxDjlJK6IQ0ElibfjGWIkQTHAqYaMQlJB9GBOBGT1U0GfR27oavxQQWLoEmZCr1JBkxB8RfgbU0FJei4gXe5WQSWJt+MZYhRBMQxK2nctK0GrygDfyMdXQZ9Hbuhq/CBB0G/XxyBpUUExDErady07QavKAN/Ix0dBJYm34xliNEEBmECn1tVBQSWJt+MZYhRBn0du6Gr8MEGTXByZ4wZMQTEMStp3LStBPvebKf8iUEGrygDfyMcnQbdNk9Umkz5B\",\"dtype\":\"float64\",\"order\":\"little\",\"shape\":[30]},\"y\":[12,20,24,13,7,54,38,21,20,57,29,7,57,12,46,21,2,24,19,25,20,36,28,26,49,46,9,29,49,48],\"ypos\":{\"__ndarray__\":\"2H+NaKyINEFYiKd2g1dBQfKr/w3AAUVB1fWZRRRGNkEBFapt/NYnQSjl0BIbWltBTRAGdBh4UUFiwkFLoz9CQViIp3aDV0FBd9UQqz2aXUFnPHgED8FJQQEVqm381idBd9UQqz2aXUHYf41orIg0QRiuGE7fDFZBYsJBS6M/QkF39ASr4S4LQfKr/w3AAUVB2Igh9dtwQEE3xupPsPBFQViIp3aDV0FBxpLPV9NnUEF3SBPlpslIQWGlw3iU4UZBXWc3WcvvV0EYrhhO3wxWQdRwISCKsy5BZzx4BA/BSUFdZzdZy+9XQc/BbrW5S1dB\",\"dtype\":\"float64\",\"order\":\"little\",\"shape\":[30]}},\"selected\":{\"id\":\"1096\"},\"selection_policy\":{\"id\":\"1113\"}},\"id\":\"1045\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"source\":{\"id\":\"1002\"}},\"id\":\"1041\",\"type\":\"CDSView\"},{\"attributes\":{},\"id\":\"1113\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"bottom_units\":\"screen\",\"fill_alpha\":0.5,\"fill_color\":\"lightgrey\",\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":1.0,\"line_color\":\"black\",\"line_dash\":[4,4],\"line_width\":2,\"right_units\":\"screen\",\"top_units\":\"screen\"},\"id\":\"1027\",\"type\":\"BoxAnnotation\"},{\"attributes\":{\"fill_alpha\":0.5,\"fill_color\":\"lightgrey\",\"level\":\"overlay\",\"line_alpha\":1.0,\"line_color\":\"black\",\"line_dash\":[4,4],\"line_width\":2,\"xs_units\":\"screen\",\"ys_units\":\"screen\"},\"id\":\"1028\",\"type\":\"PolyAnnotation\"},{\"attributes\":{\"data_source\":{\"id\":\"1045\"},\"glyph\":{\"id\":\"1089\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"1090\"},\"selection_glyph\":null,\"view\":{\"id\":\"1092\"}},\"id\":\"1091\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"callback\":null,\"tooltips\":[[\"x\",\"@x\"],[\"y\",\"@y\"]]},\"id\":\"1029\",\"type\":\"HoverTool\"},{\"attributes\":{},\"id\":\"1110\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"children\":[{\"id\":\"1042\"},{\"id\":\"1043\"}]},\"id\":\"1098\",\"type\":\"Column\"},{\"attributes\":{\"js_property_callbacks\":{\"change:end\":[{\"id\":\"1093\"}]}},\"id\":\"1047\",\"type\":\"DataRange1d\"},{\"attributes\":{\"axis_label\":\"A\",\"formatter\":{\"id\":\"1108\"},\"ticker\":{\"id\":\"1015\"}},\"id\":\"1014\",\"type\":\"LinearAxis\"},{\"attributes\":{},\"id\":\"1022\",\"type\":\"PanTool\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_inspect\":\"auto\",\"active_multi\":null,\"active_scroll\":{\"id\":\"1023\"},\"active_tap\":\"auto\",\"tools\":[{\"id\":\"1022\"},{\"id\":\"1023\"},{\"id\":\"1024\"},{\"id\":\"1025\"},{\"id\":\"1026\"},{\"id\":\"1029\"}]},\"id\":\"1030\",\"type\":\"Toolbar\"},{\"attributes\":{},\"id\":\"1006\",\"type\":\"DataRange1d\"},{\"attributes\":{\"axis\":{\"id\":\"1063\"},\"dimension\":1,\"ticker\":null},\"id\":\"1070\",\"type\":\"Grid\"},{\"attributes\":{},\"id\":\"1010\",\"type\":\"LinearScale\"},{\"attributes\":{},\"id\":\"1023\",\"type\":\"WheelZoomTool\"},{\"attributes\":{\"tile_source\":{\"id\":\"1085\"}},\"id\":\"1086\",\"type\":\"TileRenderer\"},{\"attributes\":{\"fill_alpha\":0.5,\"fill_color\":\"lightgrey\",\"level\":\"overlay\",\"line_alpha\":1.0,\"line_color\":\"black\",\"line_dash\":[4,4],\"line_width\":2,\"xs_units\":\"screen\",\"ys_units\":\"screen\"},\"id\":\"1077\",\"type\":\"PolyAnnotation\"},{\"attributes\":{\"bottom_units\":\"screen\",\"fill_alpha\":0.5,\"fill_color\":\"lightgrey\",\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":1.0,\"line_color\":\"black\",\"line_dash\":[4,4],\"line_width\":2,\"right_units\":\"screen\",\"top_units\":\"screen\"},\"id\":\"1076\",\"type\":\"BoxAnnotation\"}],\"root_ids\":[\"1099\"]},\"title\":\"Bokeh Application\",\"version\":\"2.2.1\"}};\n", | |
| " var render_items = [{\"docid\":\"bb48812d-11da-41b6-ae4b-122842ba1630\",\"root_ids\":[\"1099\"],\"roots\":{\"1099\":\"4f5aeb5b-3ec7-4b18-b7b3-e6c97c2cf651\"}}];\n", | |
| " root.Bokeh.embed.embed_items_notebook(docs_json, render_items);\n", | |
| "\n", | |
| " }\n", | |
| " if (root.Bokeh !== undefined) {\n", | |
| " embed_document(root);\n", | |
| " } else {\n", | |
| " var attempts = 0;\n", | |
| " var timer = setInterval(function(root) {\n", | |
| " if (root.Bokeh !== undefined) {\n", | |
| " clearInterval(timer);\n", | |
| " embed_document(root);\n", | |
| " } else {\n", | |
| " attempts++;\n", | |
| " if (attempts > 100) {\n", | |
| " clearInterval(timer);\n", | |
| " console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n", | |
| " }\n", | |
| " }\n", | |
| " }, 10, root)\n", | |
| " }\n", | |
| "})(window);" | |
| ], | |
| "application/vnd.bokehjs_exec.v0+json": "" | |
| }, | |
| "metadata": { | |
| "application/vnd.bokehjs_exec.v0+json": { | |
| "id": "1099" | |
| } | |
| }, | |
| "output_type": "display_data" | |
| } | |
| ], | |
| "source": [ | |
| "sourceMap = ColumnDataSource(df)\n", | |
| "\n", | |
| "pMap = figure(tools='pan, wheel_zoom, box_select, lasso_select, reset', active_scroll='wheel_zoom',\n", | |
| " width=400, height=400,\n", | |
| " x_axis_type=\"mercator\", y_axis_type=\"mercator\",\n", | |
| " )\n", | |
| "\n", | |
| "pMap.toolbar.logo = None\n", | |
| "\n", | |
| "pMap.add_tile(get_provider('WIKIMEDIA')) # OSM, WIKIMEDIA, ESRI_IMAGERY\n", | |
| "\n", | |
| "pMap.scatter('xpos', 'ypos', color='red', marker=\"circle\", size=10, \n", | |
| " fill_alpha=0.5, line_color='red', \n", | |
| " source = sourceMap)\n", | |
| "\n", | |
| "filterMapVariables = CustomJS(args=dict(pMap=pMap, sourceScatter=sourceScatter, sourceMap=sourceMap, \n", | |
| " select1Scatter=select1Scatter, select2Scatter=select2Scatter), code=\"\"\"\n", | |
| " console.log(\"Move on map\");\n", | |
| " var indexToKeep = []; \n", | |
| " var dScatter = sourceScatter.data;\n", | |
| " var dMap = sourceMap.data;\n", | |
| " for (var i=0; i < dMap['xpos'].length; i++) {\n", | |
| " if (dMap['xpos'][i] >= pMap.x_range.start && dMap['xpos'][i] <= pMap.x_range.end &&\n", | |
| " dMap['ypos'][i] >= pMap.y_range.start && dMap['ypos'][i] <= pMap.y_range.end) {\n", | |
| " indexToKeep.push(dMap['index'][i]);\n", | |
| " }\n", | |
| " }\n", | |
| " if (indexToKeep.length == 0) return;\n", | |
| " for (var key in dScatter) {\n", | |
| " dScatter[key] = dMap[key].filter((el,i)=>indexToKeep.some(j => i === j));\n", | |
| " }\n", | |
| " dScatter['x'] = dScatter[select1Scatter.value];\n", | |
| " dScatter['y'] = dScatter[select2Scatter.value];\n", | |
| " sourceScatter.change.emit();\n", | |
| "\"\"\")\n", | |
| "\n", | |
| "pMap.x_range.js_on_change('end', filterMapVariables)\n", | |
| "pMap.y_range.js_on_change('end', filterMapVariables)\n", | |
| "\n", | |
| "sourceScatter.selected.js_on_change('indices', \n", | |
| " CustomJS(args=dict(sourceScatter=sourceScatter, sourceMap=sourceMap), code=\"\"\"\n", | |
| " console.log(\"Selection on Scatter\");\n", | |
| " var inds = cb_obj.indices;\n", | |
| " var dScatter = sourceScatter.data;\n", | |
| " var dMap = sourceMap.data;\n", | |
| " dMap['xpos'] = [];\n", | |
| " dMap['ypos'] = [];\n", | |
| " if (inds.length != 0) {\n", | |
| " for (var i=0; i < inds.length; i++) {\n", | |
| " dMap['xpos'].push(dScatter['xpos'][inds[i]]);\n", | |
| " dMap['ypos'].push(dScatter['ypos'][inds[i]]);\n", | |
| " }\n", | |
| " } else {\n", | |
| " dMap['xpos'] = dScatter['xpos'];\n", | |
| " dMap['ypos'] = dScatter['ypos'];\n", | |
| " }\n", | |
| " sourceMap.change.emit();\n", | |
| "\"\"\")\n", | |
| ")\n", | |
| "\n", | |
| "sourceMap.selected.js_on_change('indices', \n", | |
| " CustomJS(args=dict(sourceScatter=sourceScatter, sourceMap=sourceMap), code=\"\"\"\n", | |
| " console.log(\"Selection on Map\");\n", | |
| " var inds = cb_obj.indices;\n", | |
| " var dScatter = sourceScatter.data;\n", | |
| " var dMap = sourceMap.data;\n", | |
| " dScatter['x'] = [];\n", | |
| " dScatter['y'] = [];\n", | |
| " if (inds.length != 0) {\n", | |
| " for (var i=0; i < inds.length; i++) {\n", | |
| " dScatter['x'].push(dMap['x'][inds[i]]);\n", | |
| " dScatter['y'].push(dMap['y'][inds[i]]);\n", | |
| " }\n", | |
| " } else {\n", | |
| " dScatter['x'] = dMap['x'];\n", | |
| " dScatter['y'] = dMap['y'];\n", | |
| " }\n", | |
| " sourceScatter.change.emit();\n", | |
| "\"\"\")\n", | |
| ")\n", | |
| "\n", | |
| "\n", | |
| "show(row(pMap, pScatter, column(select1Scatter, select2Scatter)))" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": null, | |
| "metadata": {}, | |
| "outputs": [], | |
| "source": [] | |
| } | |
| ], | |
| "metadata": { | |
| "kernelspec": { | |
| "display_name": "Python 3", | |
| "language": "python", | |
| "name": "python3" | |
| }, | |
| "language_info": { | |
| "codemirror_mode": { | |
| "name": "ipython", | |
| "version": 3 | |
| }, | |
| "file_extension": ".py", | |
| "mimetype": "text/x-python", | |
| "name": "python", | |
| "nbconvert_exporter": "python", | |
| "pygments_lexer": "ipython3", | |
| "version": "3.7.9" | |
| } | |
| }, | |
| "nbformat": 4, | |
| "nbformat_minor": 4 | |
| } |
This file contains 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": 1, | |
| "metadata": {}, | |
| "outputs": [], | |
| "source": [ | |
| "import pandas as pd\n", | |
| "import numpy as np" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 2, | |
| "metadata": {}, | |
| "outputs": [], | |
| "source": [ | |
| "from bokeh.io import output_notebook, show\n", | |
| "from bokeh.plotting import figure\n", | |
| "from bokeh.layouts import row, column\n", | |
| "from bokeh.models import ColumnDataSource, CustomJS, Select\n", | |
| "from bokeh.models import WMTSTileSource\n", | |
| "from bokeh.tile_providers import get_provider\n", | |
| "from bokeh import events" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 3, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "text/html": [ | |
| "\n", | |
| " <div class=\"bk-root\">\n", | |
| " <a href=\"https://bokeh.org\" target=\"_blank\" class=\"bk-logo bk-logo-small bk-logo-notebook\"></a>\n", | |
| " <span id=\"1001\">Loading BokehJS ...</span>\n", | |
| " </div>" | |
| ] | |
| }, | |
| "metadata": {}, | |
| "output_type": "display_data" | |
| }, | |
| { | |
| "data": { | |
| "application/javascript": [ | |
| "\n", | |
| "(function(root) {\n", | |
| " function now() {\n", | |
| " return new Date();\n", | |
| " }\n", | |
| "\n", | |
| " var force = true;\n", | |
| "\n", | |
| " if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n", | |
| " root._bokeh_onload_callbacks = [];\n", | |
| " root._bokeh_is_loading = undefined;\n", | |
| " }\n", | |
| "\n", | |
| " var JS_MIME_TYPE = 'application/javascript';\n", | |
| " var HTML_MIME_TYPE = 'text/html';\n", | |
| " var EXEC_MIME_TYPE = 'application/vnd.bokehjs_exec.v0+json';\n", | |
| " var CLASS_NAME = 'output_bokeh rendered_html';\n", | |
| "\n", | |
| " /**\n", | |
| " * Render data to the DOM node\n", | |
| " */\n", | |
| " function render(props, node) {\n", | |
| " var script = document.createElement(\"script\");\n", | |
| " node.appendChild(script);\n", | |
| " }\n", | |
| "\n", | |
| " /**\n", | |
| " * Handle when an output is cleared or removed\n", | |
| " */\n", | |
| " function handleClearOutput(event, handle) {\n", | |
| " var cell = handle.cell;\n", | |
| "\n", | |
| " var id = cell.output_area._bokeh_element_id;\n", | |
| " var server_id = cell.output_area._bokeh_server_id;\n", | |
| " // Clean up Bokeh references\n", | |
| " if (id != null && id in Bokeh.index) {\n", | |
| " Bokeh.index[id].model.document.clear();\n", | |
| " delete Bokeh.index[id];\n", | |
| " }\n", | |
| "\n", | |
| " if (server_id !== undefined) {\n", | |
| " // Clean up Bokeh references\n", | |
| " var cmd = \"from bokeh.io.state import curstate; print(curstate().uuid_to_server['\" + server_id + \"'].get_sessions()[0].document.roots[0]._id)\";\n", | |
| " cell.notebook.kernel.execute(cmd, {\n", | |
| " iopub: {\n", | |
| " output: function(msg) {\n", | |
| " var id = msg.content.text.trim();\n", | |
| " if (id in Bokeh.index) {\n", | |
| " Bokeh.index[id].model.document.clear();\n", | |
| " delete Bokeh.index[id];\n", | |
| " }\n", | |
| " }\n", | |
| " }\n", | |
| " });\n", | |
| " // Destroy server and session\n", | |
| " var cmd = \"import bokeh.io.notebook as ion; ion.destroy_server('\" + server_id + \"')\";\n", | |
| " cell.notebook.kernel.execute(cmd);\n", | |
| " }\n", | |
| " }\n", | |
| "\n", | |
| " /**\n", | |
| " * Handle when a new output is added\n", | |
| " */\n", | |
| " function handleAddOutput(event, handle) {\n", | |
| " var output_area = handle.output_area;\n", | |
| " var output = handle.output;\n", | |
| "\n", | |
| " // limit handleAddOutput to display_data with EXEC_MIME_TYPE content only\n", | |
| " if ((output.output_type != \"display_data\") || (!output.data.hasOwnProperty(EXEC_MIME_TYPE))) {\n", | |
| " return\n", | |
| " }\n", | |
| "\n", | |
| " var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n", | |
| "\n", | |
| " if (output.metadata[EXEC_MIME_TYPE][\"id\"] !== undefined) {\n", | |
| " toinsert[toinsert.length - 1].firstChild.textContent = output.data[JS_MIME_TYPE];\n", | |
| " // store reference to embed id on output_area\n", | |
| " output_area._bokeh_element_id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n", | |
| " }\n", | |
| " if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n", | |
| " var bk_div = document.createElement(\"div\");\n", | |
| " bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n", | |
| " var script_attrs = bk_div.children[0].attributes;\n", | |
| " for (var i = 0; i < script_attrs.length; i++) {\n", | |
| " toinsert[toinsert.length - 1].firstChild.setAttribute(script_attrs[i].name, script_attrs[i].value);\n", | |
| " 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", | |
| " var toinsert = this.create_output_subarea(\n", | |
| " metadata,\n", | |
| " CLASS_NAME,\n", | |
| " EXEC_MIME_TYPE\n", | |
| " );\n", | |
| " this.keyboard_manager.register_events(toinsert);\n", | |
| " // Render to node\n", | |
| " var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n", | |
| " render(props, toinsert[toinsert.length - 1]);\n", | |
| " element.append(toinsert);\n", | |
| " return toinsert\n", | |
| " }\n", | |
| "\n", | |
| " /* Handle when an output is cleared or removed */\n", | |
| " events.on('clear_output.CodeCell', handleClearOutput);\n", | |
| " events.on('delete.Cell', handleClearOutput);\n", | |
| "\n", | |
| " /* Handle when a new output is added */\n", | |
| " events.on('output_added.OutputArea', handleAddOutput);\n", | |
| "\n", | |
| " /**\n", | |
| " * Register the mime type and append_mime function with output_area\n", | |
| " */\n", | |
| " OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n", | |
| " /* Is output safe? */\n", | |
| " safe: true,\n", | |
| " /* Index of renderer in `output_area.display_order` */\n", | |
| " index: 0\n", | |
| " });\n", | |
| " }\n", | |
| "\n", | |
| " // register the mime type if in Jupyter Notebook environment and previously unregistered\n", | |
| " if (root.Jupyter !== undefined) {\n", | |
| " var events = require('base/js/events');\n", | |
| " var OutputArea = require('notebook/js/outputarea').OutputArea;\n", | |
| "\n", | |
| " if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n", | |
| " register_renderer(events, OutputArea);\n", | |
| " }\n", | |
| " }\n", | |
| "\n", | |
| " \n", | |
| " if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n", | |
| " root._bokeh_timeout = Date.now() + 5000;\n", | |
| " root._bokeh_failed_load = false;\n", | |
| " }\n", | |
| "\n", | |
| " var NB_LOAD_WARNING = {'data': {'text/html':\n", | |
| " \"<div style='background-color: #fdd'>\\n\"+\n", | |
| " \"<p>\\n\"+\n", | |
| " \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n", | |
| " \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n", | |
| " \"</p>\\n\"+\n", | |
| " \"<ul>\\n\"+\n", | |
| " \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n", | |
| " \"<li>use INLINE resources instead, as so:</li>\\n\"+\n", | |
| " \"</ul>\\n\"+\n", | |
| " \"<code>\\n\"+\n", | |
| " \"from bokeh.resources import INLINE\\n\"+\n", | |
| " \"output_notebook(resources=INLINE)\\n\"+\n", | |
| " \"</code>\\n\"+\n", | |
| " \"</div>\"}};\n", | |
| "\n", | |
| " function display_loaded() {\n", | |
| " var el = document.getElementById(\"1001\");\n", | |
| " if (el != null) {\n", | |
| " el.textContent = \"BokehJS is loading...\";\n", | |
| " }\n", | |
| " if (root.Bokeh !== undefined) {\n", | |
| " if (el != null) {\n", | |
| " el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n", | |
| " }\n", | |
| " } else if (Date.now() < root._bokeh_timeout) {\n", | |
| " setTimeout(display_loaded, 100)\n", | |
| " }\n", | |
| " }\n", | |
| "\n", | |
| "\n", | |
| " function run_callbacks() {\n", | |
| " try {\n", | |
| " root._bokeh_onload_callbacks.forEach(function(callback) {\n", | |
| " if (callback != null)\n", | |
| " callback();\n", | |
| " });\n", | |
| " } finally {\n", | |
| " delete root._bokeh_onload_callbacks\n", | |
| " }\n", | |
| " console.debug(\"Bokeh: all callbacks have finished\");\n", | |
| " }\n", | |
| "\n", | |
| " function load_libs(css_urls, js_urls, callback) {\n", | |
| " if (css_urls == null) css_urls = [];\n", | |
| " if (js_urls == null) js_urls = [];\n", | |
| "\n", | |
| " root._bokeh_onload_callbacks.push(callback);\n", | |
| " if (root._bokeh_is_loading > 0) {\n", | |
| " console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n", | |
| " return null;\n", | |
| " }\n", | |
| " if (js_urls == null || js_urls.length === 0) {\n", | |
| " run_callbacks();\n", | |
| " return null;\n", | |
| " }\n", | |
| " console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n", | |
| " root._bokeh_is_loading = css_urls.length + js_urls.length;\n", | |
| "\n", | |
| " function on_load() {\n", | |
| " root._bokeh_is_loading--;\n", | |
| " if (root._bokeh_is_loading === 0) {\n", | |
| " console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n", | |
| " run_callbacks()\n", | |
| " }\n", | |
| " }\n", | |
| "\n", | |
| " function on_error() {\n", | |
| " console.error(\"failed to load \" + url);\n", | |
| " }\n", | |
| "\n", | |
| " for (var i = 0; i < css_urls.length; i++) {\n", | |
| " var url = css_urls[i];\n", | |
| " const element = document.createElement(\"link\");\n", | |
| " element.onload = on_load;\n", | |
| " element.onerror = on_error;\n", | |
| " element.rel = \"stylesheet\";\n", | |
| " element.type = \"text/css\";\n", | |
| " element.href = url;\n", | |
| " console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n", | |
| " document.body.appendChild(element);\n", | |
| " }\n", | |
| "\n", | |
| " const hashes = {\"https://cdn.bokeh.org/bokeh/release/bokeh-2.2.1.min.js\": \"qkRvDQVAIfzsJo40iRBbxt6sttt0hv4lh74DG7OK4MCHv4C5oohXYoHUM5W11uqS\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.2.1.min.js\": \"Sb7Mr06a9TNlet/GEBeKaf5xH3eb6AlCzwjtU82wNPyDrnfoiVl26qnvlKjmcAd+\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.2.1.min.js\": \"HaJ15vgfmcfRtB4c4YBOI4f1MUujukqInOWVqZJZZGK7Q+ivud0OKGSTn/Vm2iso\"};\n", | |
| "\n", | |
| " for (var i = 0; i < js_urls.length; i++) {\n", | |
| " var url = js_urls[i];\n", | |
| " var element = document.createElement('script');\n", | |
| " element.onload = on_load;\n", | |
| " element.onerror = on_error;\n", | |
| " element.async = false;\n", | |
| " element.src = url;\n", | |
| " if (url in hashes) {\n", | |
| " element.crossOrigin = \"anonymous\";\n", | |
| " element.integrity = \"sha384-\" + hashes[url];\n", | |
| " }\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", | |
| " \n", | |
| " var js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.2.1.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.2.1.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.2.1.min.js\"];\n", | |
| " var css_urls = [];\n", | |
| " \n", | |
| "\n", | |
| " var inline_js = [\n", | |
| " function(Bokeh) {\n", | |
| " Bokeh.set_log_level(\"info\");\n", | |
| " },\n", | |
| " function(Bokeh) {\n", | |
| " \n", | |
| " \n", | |
| " }\n", | |
| " ];\n", | |
| "\n", | |
| " function run_inline_js() {\n", | |
| " \n", | |
| " if (root.Bokeh !== undefined || force === true) {\n", | |
| " \n", | |
| " for (var i = 0; i < inline_js.length; i++) {\n", | |
| " inline_js[i].call(root, root.Bokeh);\n", | |
| " }\n", | |
| " if (force === true) {\n", | |
| " display_loaded();\n", | |
| " }} else if (Date.now() < root._bokeh_timeout) {\n", | |
| " setTimeout(run_inline_js, 100);\n", | |
| " } else if (!root._bokeh_failed_load) {\n", | |
| " console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n", | |
| " root._bokeh_failed_load = true;\n", | |
| " } else if (force !== true) {\n", | |
| " var cell = $(document.getElementById(\"1001\")).parents('.cell').data().cell;\n", | |
| " cell.output_area.append_execute_result(NB_LOAD_WARNING)\n", | |
| " }\n", | |
| "\n", | |
| " }\n", | |
| "\n", | |
| " if (root._bokeh_is_loading === 0) {\n", | |
| " console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n", | |
| " run_inline_js();\n", | |
| " } else {\n", | |
| " load_libs(css_urls, js_urls, function() {\n", | |
| " console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n", | |
| " run_inline_js();\n", | |
| " });\n", | |
| " }\n", | |
| "}(window));" | |
| ], | |
| "application/vnd.bokehjs_load.v0+json": "\n(function(root) {\n function now() {\n return new Date();\n }\n\n var force = true;\n\n if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n root._bokeh_onload_callbacks = [];\n root._bokeh_is_loading = undefined;\n }\n\n \n\n \n if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n root._bokeh_timeout = Date.now() + 5000;\n root._bokeh_failed_load = false;\n }\n\n var NB_LOAD_WARNING = {'data': {'text/html':\n \"<div style='background-color: #fdd'>\\n\"+\n \"<p>\\n\"+\n \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n \"</p>\\n\"+\n \"<ul>\\n\"+\n \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n \"<li>use INLINE resources instead, as so:</li>\\n\"+\n \"</ul>\\n\"+\n \"<code>\\n\"+\n \"from bokeh.resources import INLINE\\n\"+\n \"output_notebook(resources=INLINE)\\n\"+\n \"</code>\\n\"+\n \"</div>\"}};\n\n function display_loaded() {\n var el = document.getElementById(\"1001\");\n if (el != null) {\n el.textContent = \"BokehJS is loading...\";\n }\n if (root.Bokeh !== undefined) {\n if (el != null) {\n el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n }\n } else if (Date.now() < root._bokeh_timeout) {\n setTimeout(display_loaded, 100)\n }\n }\n\n\n function run_callbacks() {\n try {\n root._bokeh_onload_callbacks.forEach(function(callback) {\n if (callback != null)\n callback();\n });\n } finally {\n delete root._bokeh_onload_callbacks\n }\n console.debug(\"Bokeh: all callbacks have finished\");\n }\n\n function load_libs(css_urls, js_urls, callback) {\n if (css_urls == null) css_urls = [];\n if (js_urls == null) js_urls = [];\n\n root._bokeh_onload_callbacks.push(callback);\n if (root._bokeh_is_loading > 0) {\n console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n return null;\n }\n if (js_urls == null || js_urls.length === 0) {\n run_callbacks();\n return null;\n }\n console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n root._bokeh_is_loading = css_urls.length + js_urls.length;\n\n function on_load() {\n root._bokeh_is_loading--;\n if (root._bokeh_is_loading === 0) {\n console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n run_callbacks()\n }\n }\n\n function on_error() {\n console.error(\"failed to load \" + url);\n }\n\n for (var i = 0; i < css_urls.length; i++) {\n var url = css_urls[i];\n const element = document.createElement(\"link\");\n element.onload = on_load;\n element.onerror = on_error;\n element.rel = \"stylesheet\";\n element.type = \"text/css\";\n element.href = url;\n console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n document.body.appendChild(element);\n }\n\n const hashes = {\"https://cdn.bokeh.org/bokeh/release/bokeh-2.2.1.min.js\": \"qkRvDQVAIfzsJo40iRBbxt6sttt0hv4lh74DG7OK4MCHv4C5oohXYoHUM5W11uqS\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.2.1.min.js\": \"Sb7Mr06a9TNlet/GEBeKaf5xH3eb6AlCzwjtU82wNPyDrnfoiVl26qnvlKjmcAd+\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.2.1.min.js\": \"HaJ15vgfmcfRtB4c4YBOI4f1MUujukqInOWVqZJZZGK7Q+ivud0OKGSTn/Vm2iso\"};\n\n for (var i = 0; i < js_urls.length; i++) {\n var url = js_urls[i];\n var element = document.createElement('script');\n element.onload = on_load;\n element.onerror = on_error;\n element.async = false;\n element.src = url;\n if (url in hashes) {\n element.crossOrigin = \"anonymous\";\n element.integrity = \"sha384-\" + hashes[url];\n }\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 \n var js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.2.1.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.2.1.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.2.1.min.js\"];\n var css_urls = [];\n \n\n var inline_js = [\n function(Bokeh) {\n Bokeh.set_log_level(\"info\");\n },\n function(Bokeh) {\n \n \n }\n ];\n\n function run_inline_js() {\n \n if (root.Bokeh !== undefined || force === true) {\n \n for (var i = 0; i < inline_js.length; i++) {\n inline_js[i].call(root, root.Bokeh);\n }\n if (force === true) {\n display_loaded();\n }} else if (Date.now() < root._bokeh_timeout) {\n setTimeout(run_inline_js, 100);\n } else if (!root._bokeh_failed_load) {\n console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n root._bokeh_failed_load = true;\n } else if (force !== true) {\n var cell = $(document.getElementById(\"1001\")).parents('.cell').data().cell;\n cell.output_area.append_execute_result(NB_LOAD_WARNING)\n }\n\n }\n\n if (root._bokeh_is_loading === 0) {\n console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n run_inline_js();\n } else {\n load_libs(css_urls, js_urls, function() {\n console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n run_inline_js();\n });\n }\n}(window));" | |
| }, | |
| "metadata": {}, | |
| "output_type": "display_data" | |
| } | |
| ], | |
| "source": [ | |
| "output_notebook()" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 4, | |
| "metadata": {}, | |
| "outputs": [], | |
| "source": [ | |
| "values = list('ABCDFG')\n", | |
| "\n", | |
| "df = pd.DataFrame(np.random.randint(0,60,size=(30, 6)), columns=values)" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 5, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "text/plain": [ | |
| "(-6122571.993630046, -3503549.8435043744)" | |
| ] | |
| }, | |
| "execution_count": 5, | |
| "metadata": {}, | |
| "output_type": "execute_result" | |
| } | |
| ], | |
| "source": [ | |
| "from pyproj import Transformer\n", | |
| "\n", | |
| "transformer = Transformer.from_crs(\"EPSG:4326\", \"EPSG:3857\", always_xy=True)\n", | |
| "\n", | |
| "world_lon1, world_lat1 = transformer.transform(-85, -60)\n", | |
| "world_lon2, world_lat2 = transformer.transform(-55, -30)\n", | |
| "\n", | |
| "world_lon2, world_lat2" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 6, | |
| "metadata": {}, | |
| "outputs": [], | |
| "source": [ | |
| "df['Longitude'] = df['A']\n", | |
| "df['Latitude'] = df['B']\n", | |
| "\n", | |
| "lons, lats = [], []\n", | |
| "for lon, lat in list(zip(df[\"Longitude\"], df[\"Latitude\"])):\n", | |
| " x, y = transformer.transform(lon, lat)\n", | |
| " lons.append(x)\n", | |
| " lats.append(y)\n", | |
| " \n", | |
| "df['xpos'] = lons\n", | |
| "df['ypos'] = lats\n", | |
| "\n", | |
| "varName1 = 'A'\n", | |
| "varName2 = 'B'\n", | |
| "\n", | |
| "df['x'] = df[varName1]\n", | |
| "df['y'] = df[varName2]" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 7, | |
| "metadata": {}, | |
| "outputs": [], | |
| "source": [ | |
| "sourceScatter = ColumnDataSource(df)\n", | |
| "\n", | |
| "tooltips = [('x', '@x'), ('y', '@y')]\n", | |
| "title = varName1 + ' vs ' + varName2\n", | |
| "\n", | |
| "pScatter = figure(tools='pan, wheel_zoom, box_select, lasso_select, reset', plot_width=400, plot_height=400, \n", | |
| " active_scroll='wheel_zoom',\n", | |
| " x_axis_label=varName1, y_axis_label=varName2,\n", | |
| " tooltips=tooltips,\n", | |
| " title=title)\n", | |
| "\n", | |
| "circles = pScatter.circle('x', 'y', source=sourceScatter,\n", | |
| " size=15, line_color='navy', fill_color='navy', fill_alpha=0.3)\n", | |
| "\n", | |
| "select1Scatter = Select(title='Variable 1: ', value=varName1, width=100, options=values)\n", | |
| "select2Scatter = Select(title='Variable 2: ', value=varName2, width=100, options=values)\n", | |
| "\n", | |
| "changeScatterVariables = CustomJS(args=dict(pScatter=pScatter, sourceScatter=sourceScatter, \n", | |
| " select1Scatter=select1Scatter, select2Scatter=select2Scatter, \n", | |
| " tooltips=tooltips,\n", | |
| " ax1=pScatter.xaxis, ax2=pScatter.yaxis), code=\"\"\"\n", | |
| " console.log(\"Change variables on Scatter\");\n", | |
| " var varName1 = select1Scatter.value;\n", | |
| " var varName2 = select2Scatter.value;\n", | |
| " pScatter.title.text = varName1 + \" vs \" + varName2;\n", | |
| " ax1[0].axis_label = varName1;\n", | |
| " ax2[0].axis_label = varName2; \n", | |
| " sourceScatter.data['x'] = sourceScatter.data[varName1];\n", | |
| " sourceScatter.data['y'] = sourceScatter.data[varName2];\n", | |
| " sourceScatter.change.emit();\n", | |
| "\"\"\")\n", | |
| "\n", | |
| "select1Scatter.js_on_change(\"value\", changeScatterVariables)\n", | |
| "select2Scatter.js_on_change(\"value\", changeScatterVariables)" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 8, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "text/html": [ | |
| "\n", | |
| "\n", | |
| "\n", | |
| "\n", | |
| "\n", | |
| "\n", | |
| " <div class=\"bk-root\" id=\"4f5aeb5b-3ec7-4b18-b7b3-e6c97c2cf651\" data-root-id=\"1099\"></div>\n" | |
| ] | |
| }, | |
| "metadata": {}, | |
| "output_type": "display_data" | |
| }, | |
| { | |
| "data": { | |
| "application/javascript": [ | |
| "(function(root) {\n", | |
| " function embed_document(root) {\n", | |
| " \n", | |
| " var docs_json = {\"bb48812d-11da-41b6-ae4b-122842ba1630\":{\"roots\":{\"references\":[{\"attributes\":{\"children\":[{\"id\":\"1046\"},{\"id\":\"1003\"},{\"id\":\"1098\"}]},\"id\":\"1099\",\"type\":\"Row\"},{\"attributes\":{\"dimension\":\"lon\"},\"id\":\"1056\",\"type\":\"MercatorTicker\"},{\"attributes\":{\"overlay\":{\"id\":\"1028\"}},\"id\":\"1025\",\"type\":\"LassoSelectTool\"},{\"attributes\":{\"formatter\":{\"id\":\"1058\"},\"ticker\":{\"id\":\"1056\"}},\"id\":\"1055\",\"type\":\"MercatorAxis\"},{\"attributes\":{},\"id\":\"1071\",\"type\":\"PanTool\"},{\"attributes\":{\"attribution\":\"© <a href=\\\"https://foundation.wikimedia.org/wiki/Maps_Terms_of_Use\\\">Wikimedia Maps</a> contributors\",\"url\":\"https://maps.wikimedia.org/osm-intl/{Z}/{X}/{Y}@2x.png\"},\"id\":\"1085\",\"type\":\"WMTSTileSource\"},{\"attributes\":{},\"id\":\"1026\",\"type\":\"ResetTool\"},{\"attributes\":{},\"id\":\"1053\",\"type\":\"LinearScale\"},{\"attributes\":{},\"id\":\"1072\",\"type\":\"WheelZoomTool\"},{\"attributes\":{},\"id\":\"1012\",\"type\":\"LinearScale\"},{\"attributes\":{\"text\":\"A vs B\"},\"id\":\"1004\",\"type\":\"Title\"},{\"attributes\":{\"overlay\":{\"id\":\"1076\"}},\"id\":\"1073\",\"type\":\"BoxSelectTool\"},{\"attributes\":{},\"id\":\"1117\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"below\":[{\"id\":\"1014\"}],\"center\":[{\"id\":\"1017\"},{\"id\":\"1021\"}],\"left\":[{\"id\":\"1018\"}],\"plot_height\":400,\"plot_width\":400,\"renderers\":[{\"id\":\"1040\"}],\"title\":{\"id\":\"1004\"},\"toolbar\":{\"id\":\"1030\"},\"x_range\":{\"id\":\"1006\"},\"x_scale\":{\"id\":\"1010\"},\"y_range\":{\"id\":\"1008\"},\"y_scale\":{\"id\":\"1012\"}},\"id\":\"1003\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{\"text\":\"\"},\"id\":\"1100\",\"type\":\"Title\"},{\"attributes\":{\"overlay\":{\"id\":\"1077\"}},\"id\":\"1074\",\"type\":\"LassoSelectTool\"},{\"attributes\":{\"args\":{\"pMap\":{\"id\":\"1046\"},\"select1Scatter\":{\"id\":\"1042\"},\"select2Scatter\":{\"id\":\"1043\"},\"sourceMap\":{\"id\":\"1045\"},\"sourceScatter\":{\"id\":\"1002\"}},\"code\":\"\\n console.log(\\\"Move on map\\\");\\n var indexToKeep = []; \\n var dScatter = sourceScatter.data;\\n var dMap = sourceMap.data;\\n for (var i=0; i < dMap['xpos'].length; i++) {\\n if (dMap['xpos'][i] >= pMap.x_range.start && dMap['xpos'][i] <= pMap.x_range.end &&\\n dMap['ypos'][i] >= pMap.y_range.start && dMap['ypos'][i] <= pMap.y_range.end) {\\n indexToKeep.push(dMap['index'][i]);\\n }\\n }\\n if (indexToKeep.length == 0) return;\\n for (var key in dScatter) {\\n dScatter[key] = dMap[key].filter((el,i)=>indexToKeep.some(j => i === j));\\n }\\n dScatter['x'] = dScatter[select1Scatter.value];\\n dScatter['y'] = dScatter[select2Scatter.value];\\n sourceScatter.change.emit();\\n\"},\"id\":\"1093\",\"type\":\"CustomJS\"},{\"attributes\":{},\"id\":\"1051\",\"type\":\"LinearScale\"},{\"attributes\":{},\"id\":\"1008\",\"type\":\"DataRange1d\"},{\"attributes\":{},\"id\":\"1075\",\"type\":\"ResetTool\"},{\"attributes\":{\"overlay\":{\"id\":\"1027\"}},\"id\":\"1024\",\"type\":\"BoxSelectTool\"},{\"attributes\":{\"axis\":{\"id\":\"1014\"},\"ticker\":null},\"id\":\"1017\",\"type\":\"Grid\"},{\"attributes\":{},\"id\":\"1108\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"js_property_callbacks\":{\"change:end\":[{\"id\":\"1093\"}]}},\"id\":\"1049\",\"type\":\"DataRange1d\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_inspect\":\"auto\",\"active_multi\":null,\"active_scroll\":{\"id\":\"1072\"},\"active_tap\":\"auto\",\"logo\":null,\"tools\":[{\"id\":\"1071\"},{\"id\":\"1072\"},{\"id\":\"1073\"},{\"id\":\"1074\"},{\"id\":\"1075\"}]},\"id\":\"1078\",\"type\":\"Toolbar\"},{\"attributes\":{\"source\":{\"id\":\"1045\"}},\"id\":\"1092\",\"type\":\"CDSView\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"navy\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"navy\"},\"size\":{\"units\":\"screen\",\"value\":15},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"1039\",\"type\":\"Circle\"},{\"attributes\":{\"axis_label\":\"B\",\"formatter\":{\"id\":\"1110\"},\"ticker\":{\"id\":\"1019\"}},\"id\":\"1018\",\"type\":\"LinearAxis\"},{\"attributes\":{\"js_property_callbacks\":{\"change:value\":[{\"id\":\"1044\"}]},\"options\":[\"A\",\"B\",\"C\",\"D\",\"F\",\"G\"],\"title\":\"Variable 1: \",\"value\":\"A\",\"width\":100},\"id\":\"1042\",\"type\":\"Select\"},{\"attributes\":{\"args\":{\"sourceMap\":{\"id\":\"1045\"},\"sourceScatter\":{\"id\":\"1002\"}},\"code\":\"\\n console.log(\\\"Selection on Map\\\");\\n var inds = cb_obj.indices;\\n var dScatter = sourceScatter.data;\\n var dMap = sourceMap.data;\\n dScatter['x'] = [];\\n dScatter['y'] = [];\\n if (inds.length != 0) {\\n for (var i=0; i < inds.length; i++) {\\n dScatter['x'].push(dMap['x'][inds[i]]);\\n dScatter['y'].push(dMap['y'][inds[i]]);\\n }\\n } else {\\n dScatter['x'] = dMap['x'];\\n dScatter['y'] = dMap['y'];\\n }\\n sourceScatter.change.emit();\\n\"},\"id\":\"1097\",\"type\":\"CustomJS\"},{\"attributes\":{\"data_source\":{\"id\":\"1002\"},\"glyph\":{\"id\":\"1038\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"1039\"},\"selection_glyph\":null,\"view\":{\"id\":\"1041\"}},\"id\":\"1040\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"dimension\":\"lat\"},\"id\":\"1066\",\"type\":\"MercatorTickFormatter\"},{\"attributes\":{},\"id\":\"1019\",\"type\":\"BasicTicker\"},{\"attributes\":{\"dimension\":\"lon\"},\"id\":\"1058\",\"type\":\"MercatorTickFormatter\"},{\"attributes\":{\"axis\":{\"id\":\"1018\"},\"dimension\":1,\"ticker\":null},\"id\":\"1021\",\"type\":\"Grid\"},{\"attributes\":{\"args\":{\"ax1\":[{\"id\":\"1014\"}],\"ax2\":[{\"id\":\"1018\"}],\"pScatter\":{\"id\":\"1003\"},\"select1Scatter\":{\"id\":\"1042\"},\"select2Scatter\":{\"id\":\"1043\"},\"sourceScatter\":{\"id\":\"1002\"},\"tooltips\":[[\"x\",\"@x\"],[\"y\",\"@y\"]]},\"code\":\"\\n console.log(\\\"Change variables on Scatter\\\");\\n var varName1 = select1Scatter.value;\\n var varName2 = select2Scatter.value;\\n pScatter.title.text = varName1 + \\\" vs \\\" + varName2;\\n ax1[0].axis_label = varName1;\\n ax2[0].axis_label = varName2; \\n sourceScatter.data['x'] = sourceScatter.data[varName1];\\n sourceScatter.data['y'] = sourceScatter.data[varName2];\\n sourceScatter.change.emit();\\n\"},\"id\":\"1044\",\"type\":\"CustomJS\"},{\"attributes\":{\"js_property_callbacks\":{\"change:indices\":[{\"id\":\"1097\"}]}},\"id\":\"1096\",\"type\":\"Selection\"},{\"attributes\":{\"axis\":{\"id\":\"1055\"},\"ticker\":null},\"id\":\"1062\",\"type\":\"Grid\"},{\"attributes\":{\"js_property_callbacks\":{\"change:value\":[{\"id\":\"1044\"}]},\"options\":[\"A\",\"B\",\"C\",\"D\",\"F\",\"G\"],\"title\":\"Variable 2: \",\"value\":\"B\",\"width\":100},\"id\":\"1043\",\"type\":\"Select\"},{\"attributes\":{\"data\":{\"A\":[22,30,15,36,11,57,23,6,43,47,40,44,45,54,3,8,56,5,41,16,28,12,21,3,10,33,8,38,7,18],\"B\":[12,20,24,13,7,54,38,21,20,57,29,7,57,12,46,21,2,24,19,25,20,36,28,26,49,46,9,29,49,48],\"C\":[17,17,44,5,51,16,17,0,2,7,51,10,7,23,20,34,7,29,11,38,57,27,27,0,29,28,30,33,49,43],\"D\":[12,20,57,49,1,33,7,54,17,57,48,4,44,14,22,15,54,58,21,51,12,37,25,16,24,59,38,14,7,34],\"F\":[44,51,49,43,15,52,59,22,30,4,27,32,25,49,9,18,15,13,37,17,53,47,3,41,9,2,36,56,55,35],\"G\":[22,37,5,46,1,14,45,9,54,18,10,30,14,21,29,46,22,54,57,33,40,41,51,22,11,32,46,26,21,39],\"Latitude\":[12,20,24,13,7,54,38,21,20,57,29,7,57,12,46,21,2,24,19,25,20,36,28,26,49,46,9,29,49,48],\"Longitude\":[22,30,15,36,11,57,23,6,43,47,40,44,45,54,3,8,56,5,41,16,28,12,21,3,10,33,8,38,7,18],\"index\":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29],\"x\":[22,30,15,36,11,57,23,6,43,47,40,44,45,54,3,8,56,5,41,16,28,12,21,3,10,33,8,38,7,18],\"xpos\":{\"__ndarray__\":\"YugSZkKvQkFua6VcoHpJQW5rpVygejlBt02T1SaTTkFi6BJmQq8yQdzyab5+NFhBxDjlJK6IQ0ElibfjGWIkQTHAqYaMQlJB9GBOBGT1U0GfR27oavxQQWLoEmZCr1JBkxB8RfgbU0FJei4gXe5WQSWJt+MZYhRBMQxK2nctK0GrygDfyMdXQZ9Hbuhq/CBB0G/XxyBpUUExDErady07QavKAN/Ix0dBJYm34xliNEEBmECn1tVBQSWJt+MZYhRBn0du6Gr8MEGTXByZ4wZMQTEMStp3LStBPvebKf8iUEGrygDfyMcnQbdNk9Umkz5B\",\"dtype\":\"float64\",\"order\":\"little\",\"shape\":[30]},\"y\":[12,20,24,13,7,54,38,21,20,57,29,7,57,12,46,21,2,24,19,25,20,36,28,26,49,46,9,29,49,48],\"ypos\":{\"__ndarray__\":\"2H+NaKyINEFYiKd2g1dBQfKr/w3AAUVB1fWZRRRGNkEBFapt/NYnQSjl0BIbWltBTRAGdBh4UUFiwkFLoz9CQViIp3aDV0FBd9UQqz2aXUFnPHgED8FJQQEVqm381idBd9UQqz2aXUHYf41orIg0QRiuGE7fDFZBYsJBS6M/QkF39ASr4S4LQfKr/w3AAUVB2Igh9dtwQEE3xupPsPBFQViIp3aDV0FBxpLPV9NnUEF3SBPlpslIQWGlw3iU4UZBXWc3WcvvV0EYrhhO3wxWQdRwISCKsy5BZzx4BA/BSUFdZzdZy+9XQc/BbrW5S1dB\",\"dtype\":\"float64\",\"order\":\"little\",\"shape\":[30]}},\"selected\":{\"id\":\"1094\"},\"selection_policy\":{\"id\":\"1117\"}},\"id\":\"1002\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"js_property_callbacks\":{\"change:indices\":[{\"id\":\"1095\"}]}},\"id\":\"1094\",\"type\":\"Selection\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.3},\"fill_color\":{\"value\":\"navy\"},\"line_color\":{\"value\":\"navy\"},\"size\":{\"units\":\"screen\",\"value\":15},\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}},\"id\":\"1038\",\"type\":\"Circle\"},{\"attributes\":{\"args\":{\"sourceMap\":{\"id\":\"1045\"},\"sourceScatter\":{\"id\":\"1002\"}},\"code\":\"\\n console.log(\\\"Selection on Scatter\\\");\\n var inds = cb_obj.indices;\\n var dScatter = sourceScatter.data;\\n var dMap = sourceMap.data;\\n dMap['xpos'] = [];\\n dMap['ypos'] = [];\\n if (inds.length != 0) {\\n for (var i=0; i < inds.length; i++) {\\n dMap['xpos'].push(dScatter['xpos'][inds[i]]);\\n dMap['ypos'].push(dScatter['ypos'][inds[i]]);\\n }\\n } else {\\n dMap['xpos'] = dScatter['xpos'];\\n dMap['ypos'] = dScatter['ypos'];\\n }\\n sourceMap.change.emit();\\n\"},\"id\":\"1095\",\"type\":\"CustomJS\"},{\"attributes\":{\"below\":[{\"id\":\"1055\"}],\"center\":[{\"id\":\"1062\"},{\"id\":\"1070\"}],\"left\":[{\"id\":\"1063\"}],\"plot_height\":400,\"plot_width\":400,\"renderers\":[{\"id\":\"1086\"},{\"id\":\"1091\"}],\"title\":{\"id\":\"1100\"},\"toolbar\":{\"id\":\"1078\"},\"x_range\":{\"id\":\"1047\"},\"x_scale\":{\"id\":\"1051\"},\"y_range\":{\"id\":\"1049\"},\"y_scale\":{\"id\":\"1053\"}},\"id\":\"1046\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"red\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"red\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"xpos\"},\"y\":{\"field\":\"ypos\"}},\"id\":\"1090\",\"type\":\"Scatter\"},{\"attributes\":{\"dimension\":\"lat\"},\"id\":\"1064\",\"type\":\"MercatorTicker\"},{\"attributes\":{},\"id\":\"1015\",\"type\":\"BasicTicker\"},{\"attributes\":{\"formatter\":{\"id\":\"1066\"},\"ticker\":{\"id\":\"1064\"}},\"id\":\"1063\",\"type\":\"MercatorAxis\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"red\"},\"line_color\":{\"value\":\"red\"},\"size\":{\"units\":\"screen\",\"value\":10},\"x\":{\"field\":\"xpos\"},\"y\":{\"field\":\"ypos\"}},\"id\":\"1089\",\"type\":\"Scatter\"},{\"attributes\":{\"data\":{\"A\":[22,30,15,36,11,57,23,6,43,47,40,44,45,54,3,8,56,5,41,16,28,12,21,3,10,33,8,38,7,18],\"B\":[12,20,24,13,7,54,38,21,20,57,29,7,57,12,46,21,2,24,19,25,20,36,28,26,49,46,9,29,49,48],\"C\":[17,17,44,5,51,16,17,0,2,7,51,10,7,23,20,34,7,29,11,38,57,27,27,0,29,28,30,33,49,43],\"D\":[12,20,57,49,1,33,7,54,17,57,48,4,44,14,22,15,54,58,21,51,12,37,25,16,24,59,38,14,7,34],\"F\":[44,51,49,43,15,52,59,22,30,4,27,32,25,49,9,18,15,13,37,17,53,47,3,41,9,2,36,56,55,35],\"G\":[22,37,5,46,1,14,45,9,54,18,10,30,14,21,29,46,22,54,57,33,40,41,51,22,11,32,46,26,21,39],\"Latitude\":[12,20,24,13,7,54,38,21,20,57,29,7,57,12,46,21,2,24,19,25,20,36,28,26,49,46,9,29,49,48],\"Longitude\":[22,30,15,36,11,57,23,6,43,47,40,44,45,54,3,8,56,5,41,16,28,12,21,3,10,33,8,38,7,18],\"index\":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29],\"x\":[22,30,15,36,11,57,23,6,43,47,40,44,45,54,3,8,56,5,41,16,28,12,21,3,10,33,8,38,7,18],\"xpos\":{\"__ndarray__\":\"YugSZkKvQkFua6VcoHpJQW5rpVygejlBt02T1SaTTkFi6BJmQq8yQdzyab5+NFhBxDjlJK6IQ0ElibfjGWIkQTHAqYaMQlJB9GBOBGT1U0GfR27oavxQQWLoEmZCr1JBkxB8RfgbU0FJei4gXe5WQSWJt+MZYhRBMQxK2nctK0GrygDfyMdXQZ9Hbuhq/CBB0G/XxyBpUUExDErady07QavKAN/Ix0dBJYm34xliNEEBmECn1tVBQSWJt+MZYhRBn0du6Gr8MEGTXByZ4wZMQTEMStp3LStBPvebKf8iUEGrygDfyMcnQbdNk9Umkz5B\",\"dtype\":\"float64\",\"order\":\"little\",\"shape\":[30]},\"y\":[12,20,24,13,7,54,38,21,20,57,29,7,57,12,46,21,2,24,19,25,20,36,28,26,49,46,9,29,49,48],\"ypos\":{\"__ndarray__\":\"2H+NaKyINEFYiKd2g1dBQfKr/w3AAUVB1fWZRRRGNkEBFapt/NYnQSjl0BIbWltBTRAGdBh4UUFiwkFLoz9CQViIp3aDV0FBd9UQqz2aXUFnPHgED8FJQQEVqm381idBd9UQqz2aXUHYf41orIg0QRiuGE7fDFZBYsJBS6M/QkF39ASr4S4LQfKr/w3AAUVB2Igh9dtwQEE3xupPsPBFQViIp3aDV0FBxpLPV9NnUEF3SBPlpslIQWGlw3iU4UZBXWc3WcvvV0EYrhhO3wxWQdRwISCKsy5BZzx4BA/BSUFdZzdZy+9XQc/BbrW5S1dB\",\"dtype\":\"float64\",\"order\":\"little\",\"shape\":[30]}},\"selected\":{\"id\":\"1096\"},\"selection_policy\":{\"id\":\"1113\"}},\"id\":\"1045\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"source\":{\"id\":\"1002\"}},\"id\":\"1041\",\"type\":\"CDSView\"},{\"attributes\":{},\"id\":\"1113\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"bottom_units\":\"screen\",\"fill_alpha\":0.5,\"fill_color\":\"lightgrey\",\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":1.0,\"line_color\":\"black\",\"line_dash\":[4,4],\"line_width\":2,\"right_units\":\"screen\",\"top_units\":\"screen\"},\"id\":\"1027\",\"type\":\"BoxAnnotation\"},{\"attributes\":{\"fill_alpha\":0.5,\"fill_color\":\"lightgrey\",\"level\":\"overlay\",\"line_alpha\":1.0,\"line_color\":\"black\",\"line_dash\":[4,4],\"line_width\":2,\"xs_units\":\"screen\",\"ys_units\":\"screen\"},\"id\":\"1028\",\"type\":\"PolyAnnotation\"},{\"attributes\":{\"data_source\":{\"id\":\"1045\"},\"glyph\":{\"id\":\"1089\"},\"hover_glyph\":null,\"muted_glyph\":null,\"nonselection_glyph\":{\"id\":\"1090\"},\"selection_glyph\":null,\"view\":{\"id\":\"1092\"}},\"id\":\"1091\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"callback\":null,\"tooltips\":[[\"x\",\"@x\"],[\"y\",\"@y\"]]},\"id\":\"1029\",\"type\":\"HoverTool\"},{\"attributes\":{},\"id\":\"1110\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"children\":[{\"id\":\"1042\"},{\"id\":\"1043\"}]},\"id\":\"1098\",\"type\":\"Column\"},{\"attributes\":{\"js_property_callbacks\":{\"change:end\":[{\"id\":\"1093\"}]}},\"id\":\"1047\",\"type\":\"DataRange1d\"},{\"attributes\":{\"axis_label\":\"A\",\"formatter\":{\"id\":\"1108\"},\"ticker\":{\"id\":\"1015\"}},\"id\":\"1014\",\"type\":\"LinearAxis\"},{\"attributes\":{},\"id\":\"1022\",\"type\":\"PanTool\"},{\"attributes\":{\"active_drag\":\"auto\",\"active_inspect\":\"auto\",\"active_multi\":null,\"active_scroll\":{\"id\":\"1023\"},\"active_tap\":\"auto\",\"tools\":[{\"id\":\"1022\"},{\"id\":\"1023\"},{\"id\":\"1024\"},{\"id\":\"1025\"},{\"id\":\"1026\"},{\"id\":\"1029\"}]},\"id\":\"1030\",\"type\":\"Toolbar\"},{\"attributes\":{},\"id\":\"1006\",\"type\":\"DataRange1d\"},{\"attributes\":{\"axis\":{\"id\":\"1063\"},\"dimension\":1,\"ticker\":null},\"id\":\"1070\",\"type\":\"Grid\"},{\"attributes\":{},\"id\":\"1010\",\"type\":\"LinearScale\"},{\"attributes\":{},\"id\":\"1023\",\"type\":\"WheelZoomTool\"},{\"attributes\":{\"tile_source\":{\"id\":\"1085\"}},\"id\":\"1086\",\"type\":\"TileRenderer\"},{\"attributes\":{\"fill_alpha\":0.5,\"fill_color\":\"lightgrey\",\"level\":\"overlay\",\"line_alpha\":1.0,\"line_color\":\"black\",\"line_dash\":[4,4],\"line_width\":2,\"xs_units\":\"screen\",\"ys_units\":\"screen\"},\"id\":\"1077\",\"type\":\"PolyAnnotation\"},{\"attributes\":{\"bottom_units\":\"screen\",\"fill_alpha\":0.5,\"fill_color\":\"lightgrey\",\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":1.0,\"line_color\":\"black\",\"line_dash\":[4,4],\"line_width\":2,\"right_units\":\"screen\",\"top_units\":\"screen\"},\"id\":\"1076\",\"type\":\"BoxAnnotation\"}],\"root_ids\":[\"1099\"]},\"title\":\"Bokeh Application\",\"version\":\"2.2.1\"}};\n", | |
| " var render_items = [{\"docid\":\"bb48812d-11da-41b6-ae4b-122842ba1630\",\"root_ids\":[\"1099\"],\"roots\":{\"1099\":\"4f5aeb5b-3ec7-4b18-b7b3-e6c97c2cf651\"}}];\n", | |
| " root.Bokeh.embed.embed_items_notebook(docs_json, render_items);\n", | |
| "\n", | |
| " }\n", | |
| " if (root.Bokeh !== undefined) {\n", | |
| " embed_document(root);\n", | |
| " } else {\n", | |
| " var attempts = 0;\n", | |
| " var timer = setInterval(function(root) {\n", | |
| " if (root.Bokeh !== undefined) {\n", | |
| " clearInterval(timer);\n", | |
| " embed_document(root);\n", | |
| " } else {\n", | |
| " attempts++;\n", | |
| " if (attempts > 100) {\n", | |
| " clearInterval(timer);\n", | |
| " console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n", | |
| " }\n", | |
| " }\n", | |
| " }, 10, root)\n", | |
| " }\n", | |
| "})(window);" | |
| ], | |
| "application/vnd.bokehjs_exec.v0+json": "" | |
| }, | |
| "metadata": { | |
| "application/vnd.bokehjs_exec.v0+json": { | |
| "id": "1099" | |
| } | |
| }, | |
| "output_type": "display_data" | |
| } | |
| ], | |
| "source": [ | |
| "sourceMap = ColumnDataSource(df)\n", | |
| "\n", | |
| "pMap = figure(tools='pan, wheel_zoom, box_select, lasso_select, reset', active_scroll='wheel_zoom',\n", | |
| " width=400, height=400,\n", | |
| " x_axis_type=\"mercator\", y_axis_type=\"mercator\",\n", | |
| " )\n", | |
| "\n", | |
| "pMap.toolbar.logo = None\n", | |
| "\n", | |
| "pMap.add_tile(get_provider('WIKIMEDIA')) # OSM, WIKIMEDIA, ESRI_IMAGERY\n", | |
| "\n", | |
| "pMap.scatter('xpos', 'ypos', color='red', marker=\"circle\", size=10, \n", | |
| " fill_alpha=0.5, line_color='red', \n", | |
| " source = sourceMap)\n", | |
| "\n", | |
| "filterMapVariables = CustomJS(args=dict(pMap=pMap, sourceScatter=sourceScatter, sourceMap=sourceMap, \n", | |
| " select1Scatter=select1Scatter, select2Scatter=select2Scatter), code=\"\"\"\n", | |
| " console.log(\"Move on map\");\n", | |
| " var indexToKeep = []; \n", | |
| " var dScatter = sourceScatter.data;\n", | |
| " var dMap = sourceMap.data;\n", | |
| " for (var i=0; i < dMap['xpos'].length; i++) {\n", | |
| " if (dMap['xpos'][i] >= pMap.x_range.start && dMap['xpos'][i] <= pMap.x_range.end &&\n", | |
| " dMap['ypos'][i] >= pMap.y_range.start && dMap['ypos'][i] <= pMap.y_range.end) {\n", | |
| " indexToKeep.push(dMap['index'][i]);\n", | |
| " }\n", | |
| " }\n", | |
| " if (indexToKeep.length == 0) return;\n", | |
| " for (var key in dScatter) {\n", | |
| " dScatter[key] = dMap[key].filter((el,i)=>indexToKeep.some(j => i === j));\n", | |
| " }\n", | |
| " dScatter['x'] = dScatter[select1Scatter.value];\n", | |
| " dScatter['y'] = dScatter[select2Scatter.value];\n", | |
| " sourceScatter.change.emit();\n", | |
| "\"\"\")\n", | |
| "\n", | |
| "pMap.x_range.js_on_change('end', filterMapVariables)\n", | |
| "pMap.y_range.js_on_change('end', filterMapVariables)\n", | |
| "\n", | |
| "sourceScatter.selected.js_on_change('indices', \n", | |
| " CustomJS(args=dict(sourceScatter=sourceScatter, sourceMap=sourceMap), code=\"\"\"\n", | |
| " console.log(\"Selection on Scatter\");\n", | |
| " var inds = cb_obj.indices;\n", | |
| " var dScatter = sourceScatter.data;\n", | |
| " var dMap = sourceMap.data;\n", | |
| " dMap['xpos'] = [];\n", | |
| " dMap['ypos'] = [];\n", | |
| " if (inds.length != 0) {\n", | |
| " for (var i=0; i < inds.length; i++) {\n", | |
| " dMap['xpos'].push(dScatter['xpos'][inds[i]]);\n", | |
| " dMap['ypos'].push(dScatter['ypos'][inds[i]]);\n", | |
| " }\n", | |
| " } else {\n", | |
| " dMap['xpos'] = dScatter['xpos'];\n", | |
| " dMap['ypos'] = dScatter['ypos'];\n", | |
| " }\n", | |
| " sourceMap.change.emit();\n", | |
| "\"\"\")\n", | |
| ")\n", | |
| "\n", | |
| "sourceMap.selected.js_on_change('indices', \n", | |
| " CustomJS(args=dict(sourceScatter=sourceScatter, sourceMap=sourceMap), code=\"\"\"\n", | |
| " console.log(\"Selection on Map\");\n", | |
| " var inds = cb_obj.indices;\n", | |
| " var dScatter = sourceScatter.data;\n", | |
| " var dMap = sourceMap.data;\n", | |
| " dScatter['x'] = [];\n", | |
| " dScatter['y'] = [];\n", | |
| " if (inds.length != 0) {\n", | |
| " for (var i=0; i < inds.length; i++) {\n", | |
| " dScatter['x'].push(dMap['x'][inds[i]]);\n", | |
| " dScatter['y'].push(dMap['y'][inds[i]]);\n", | |
| " }\n", | |
| " } else {\n", | |
| " dScatter['x'] = dMap['x'];\n", | |
| " dScatter['y'] = dMap['y'];\n", | |
| " }\n", | |
| " sourceScatter.change.emit();\n", | |
| "\"\"\")\n", | |
| ")\n", | |
| "\n", | |
| "\n", | |
| "show(row(pMap, pScatter, column(select1Scatter, select2Scatter)))" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": null, | |
| "metadata": {}, | |
| "outputs": [], | |
| "source": [] | |
| } | |
| ], | |
| "metadata": { | |
| "kernelspec": { | |
| "display_name": "Python 3", | |
| "language": "python", | |
| "name": "python3" | |
| }, | |
| "language_info": { | |
| "codemirror_mode": { | |
| "name": "ipython", | |
| "version": 3 | |
| }, | |
| "file_extension": ".py", | |
| "mimetype": "text/x-python", | |
| "name": "python", | |
| "nbconvert_exporter": "python", | |
| "pygments_lexer": "ipython3", | |
| "version": "3.7.9" | |
| } | |
| }, | |
| "nbformat": 4, | |
| "nbformat_minor": 4 | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment