Skip to content

Instantly share code, notes, and snippets.

@PBrockmann

PBrockmann/bokeh_dashboard_map_scatter.ipynb

Created October 1, 2020 17:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save PBrockmann/44f69779de55d1fe69a2232bdd1d4c09 to your computer and use it in GitHub Desktop.
Save PBrockmann/44f69779de55d1fe69a2232bdd1d4c09 to your computer and use it in GitHub Desktop.
Download ZIP
Bokeh dashboard map/scatter
Display the source blob
Display the rendered blob
Raw
bokeh_dashboard_map_scatter.ipynb
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
gistfile1.txt
{
"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\":\"&copy; <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