├── Choropleth Map ├── NYC Unemployment rate.ipynb ├── New_York_Unemployment.html └── readme.md ├── Interactive Data Visualization using Bokeh.ipynb ├── README.md └── bar.html /Choropleth Map/readme.md: -------------------------------------------------------------------------------- 1 | #Plotting Unemployment Data in Python using Bokeh 2 | 3 | 4 | ##Downloading **sample data** 5 | ``` 6 | import bokeh.sampledata 7 | bokeh.sampledata.download() 8 | ``` 9 | [![screenshot_1488412423.png](https://s19.postimg.org/crgmowa43/screenshot_1488412423.png)](https://postimg.org/image/5o8r9a4of/) 10 | 11 | 12 | - - - - 13 | ##Bokeh Inline Output: [Choropleth Map] 14 | [![screenshot_1488411915.png](https://s19.postimg.org/h0gaty71v/screenshot_1488411915.png)](https://postimg.org/image/j50nv18of/) 15 | 16 | 17 | -------------------------------------------------------------------------------- /Interactive Data Visualization using Bokeh.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "markdown", 5 | "metadata": {}, 6 | "source": [ 7 | "# Bar graph visualization with Bokeh" 8 | ] 9 | }, 10 | { 11 | "cell_type": "code", 12 | "execution_count": 6, 13 | "metadata": { 14 | "collapsed": false 15 | }, 16 | "outputs": [], 17 | "source": [ 18 | "#Import library\n", 19 | "from bokeh.charts import Bar, output_file, show, output_notebook" 20 | ] 21 | }, 22 | { 23 | "cell_type": "code", 24 | "execution_count": 7, 25 | "metadata": { 26 | "collapsed": true 27 | }, 28 | "outputs": [], 29 | "source": [ 30 | "# prepare data (dummy data)\n", 31 | "data = {\"y\": [1, 2, 3, 4, 5]}" 32 | ] 33 | }, 34 | { 35 | "cell_type": "code", 36 | "execution_count": 8, 37 | "metadata": { 38 | "collapsed": true 39 | }, 40 | "outputs": [], 41 | "source": [ 42 | "# Output to Bar.html or you can show inline\n", 43 | "output_file(\"bar.html\", title=\"bar plot example\") " 44 | ] 45 | }, 46 | { 47 | "cell_type": "code", 48 | "execution_count": 9, 49 | "metadata": { 50 | "collapsed": false 51 | }, 52 | "outputs": [ 53 | { 54 | "data": { 55 | "text/html": [ 56 | "\n", 57 | "
\n", 58 | " \n", 59 | " Loading BokehJS ...\n", 60 | "
" 61 | ] 62 | }, 63 | "metadata": {}, 64 | "output_type": "display_data" 65 | }, 66 | { 67 | "data": { 68 | "application/javascript": [ 69 | "\n", 70 | "(function(global) {\n", 71 | " function now() {\n", 72 | " return new Date();\n", 73 | " }\n", 74 | "\n", 75 | " var force = true;\n", 76 | "\n", 77 | " if (typeof (window._bokeh_onload_callbacks) === \"undefined\" || force === true) {\n", 78 | " window._bokeh_onload_callbacks = [];\n", 79 | " window._bokeh_is_loading = undefined;\n", 80 | " }\n", 81 | "\n", 82 | "\n", 83 | " \n", 84 | " if (typeof (window._bokeh_timeout) === \"undefined\" || force === true) {\n", 85 | " window._bokeh_timeout = Date.now() + 5000;\n", 86 | " window._bokeh_failed_load = false;\n", 87 | " }\n", 88 | "\n", 89 | " var NB_LOAD_WARNING = {'data': {'text/html':\n", 90 | " \"
\\n\"+\n", 91 | " \"

\\n\"+\n", 92 | " \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n", 93 | " \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n", 94 | " \"

\\n\"+\n", 95 | " \"\\n\"+\n", 99 | " \"\\n\"+\n", 100 | " \"from bokeh.resources import INLINE\\n\"+\n", 101 | " \"output_notebook(resources=INLINE)\\n\"+\n", 102 | " \"\\n\"+\n", 103 | " \"
\"}};\n", 104 | "\n", 105 | " function display_loaded() {\n", 106 | " if (window.Bokeh !== undefined) {\n", 107 | " document.getElementById(\"897bc204-c1b1-464e-9874-47d038a03e47\").textContent = \"BokehJS successfully loaded.\";\n", 108 | " } else if (Date.now() < window._bokeh_timeout) {\n", 109 | " setTimeout(display_loaded, 100)\n", 110 | " }\n", 111 | " }\n", 112 | "\n", 113 | " function run_callbacks() {\n", 114 | " window._bokeh_onload_callbacks.forEach(function(callback) { callback() });\n", 115 | " delete window._bokeh_onload_callbacks\n", 116 | " console.info(\"Bokeh: all callbacks have finished\");\n", 117 | " }\n", 118 | "\n", 119 | " function load_libs(js_urls, callback) {\n", 120 | " window._bokeh_onload_callbacks.push(callback);\n", 121 | " if (window._bokeh_is_loading > 0) {\n", 122 | " console.log(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n", 123 | " return null;\n", 124 | " }\n", 125 | " if (js_urls == null || js_urls.length === 0) {\n", 126 | " run_callbacks();\n", 127 | " return null;\n", 128 | " }\n", 129 | " console.log(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n", 130 | " window._bokeh_is_loading = js_urls.length;\n", 131 | " for (var i = 0; i < js_urls.length; i++) {\n", 132 | " var url = js_urls[i];\n", 133 | " var s = document.createElement('script');\n", 134 | " s.src = url;\n", 135 | " s.async = false;\n", 136 | " s.onreadystatechange = s.onload = function() {\n", 137 | " window._bokeh_is_loading--;\n", 138 | " if (window._bokeh_is_loading === 0) {\n", 139 | " console.log(\"Bokeh: all BokehJS libraries loaded\");\n", 140 | " run_callbacks()\n", 141 | " }\n", 142 | " };\n", 143 | " s.onerror = function() {\n", 144 | " console.warn(\"failed to load library \" + url);\n", 145 | " };\n", 146 | " console.log(\"Bokeh: injecting script tag for BokehJS library: \", url);\n", 147 | " document.getElementsByTagName(\"head\")[0].appendChild(s);\n", 148 | " }\n", 149 | " };var element = document.getElementById(\"897bc204-c1b1-464e-9874-47d038a03e47\");\n", 150 | " if (element == null) {\n", 151 | " console.log(\"Bokeh: ERROR: autoload.js configured with elementid '897bc204-c1b1-464e-9874-47d038a03e47' but no matching script tag was found. \")\n", 152 | " return false;\n", 153 | " }\n", 154 | "\n", 155 | " var js_urls = [\"https://cdn.pydata.org/bokeh/release/bokeh-0.12.4.min.js\", \"https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.4.min.js\"];\n", 156 | "\n", 157 | " var inline_js = [\n", 158 | " function(Bokeh) {\n", 159 | " Bokeh.set_log_level(\"info\");\n", 160 | " },\n", 161 | " \n", 162 | " function(Bokeh) {\n", 163 | " \n", 164 | " document.getElementById(\"897bc204-c1b1-464e-9874-47d038a03e47\").textContent = \"BokehJS is loading...\";\n", 165 | " },\n", 166 | " function(Bokeh) {\n", 167 | " console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-0.12.4.min.css\");\n", 168 | " Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-0.12.4.min.css\");\n", 169 | " console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.4.min.css\");\n", 170 | " Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.4.min.css\");\n", 171 | " }\n", 172 | " ];\n", 173 | "\n", 174 | " function run_inline_js() {\n", 175 | " \n", 176 | " if ((window.Bokeh !== undefined) || (force === true)) {\n", 177 | " for (var i = 0; i < inline_js.length; i++) {\n", 178 | " inline_js[i](window.Bokeh);\n", 179 | " }if (force === true) {\n", 180 | " display_loaded();\n", 181 | " }} else if (Date.now() < window._bokeh_timeout) {\n", 182 | " setTimeout(run_inline_js, 100);\n", 183 | " } else if (!window._bokeh_failed_load) {\n", 184 | " console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n", 185 | " window._bokeh_failed_load = true;\n", 186 | " } else if (force !== true) {\n", 187 | " var cell = $(document.getElementById(\"897bc204-c1b1-464e-9874-47d038a03e47\")).parents('.cell').data().cell;\n", 188 | " cell.output_area.append_execute_result(NB_LOAD_WARNING)\n", 189 | " }\n", 190 | "\n", 191 | " }\n", 192 | "\n", 193 | " if (window._bokeh_is_loading === 0) {\n", 194 | " console.log(\"Bokeh: BokehJS loaded, going straight to plotting\");\n", 195 | " run_inline_js();\n", 196 | " } else {\n", 197 | " load_libs(js_urls, function() {\n", 198 | " console.log(\"Bokeh: BokehJS plotting callback run at\", now());\n", 199 | " run_inline_js();\n", 200 | " });\n", 201 | " }\n", 202 | "}(this));" 203 | ] 204 | }, 205 | "metadata": {}, 206 | "output_type": "display_data" 207 | } 208 | ], 209 | "source": [ 210 | "# Output option\n", 211 | "output_notebook()" 212 | ] 213 | }, 214 | { 215 | "cell_type": "markdown", 216 | "metadata": {}, 217 | "source": [ 218 | "# ![s](http://s19.postimg.org/udjfwkbw3/screenshot_1488406801.png)" 219 | ] 220 | }, 221 | { 222 | "cell_type": "code", 223 | "execution_count": 10, 224 | "metadata": { 225 | "collapsed": true 226 | }, 227 | "outputs": [], 228 | "source": [ 229 | "# create a new line chat with a title and axis labels\n", 230 | "out = Bar(data, title=\"Bar Chart Example\", xlabel='x', ylabel='values', width=400, height=400)" 231 | ] 232 | }, 233 | { 234 | "cell_type": "code", 235 | "execution_count": 12, 236 | "metadata": { 237 | "collapsed": false 238 | }, 239 | "outputs": [ 240 | { 241 | "data": { 242 | "text/html": [ 243 | "\n", 244 | "\n", 245 | "
\n", 246 | "
\n", 247 | "
\n", 248 | "" 384 | ] 385 | }, 386 | "metadata": {}, 387 | "output_type": "display_data" 388 | } 389 | ], 390 | "source": [ 391 | "# show the result in new webpage + inline in ipy notebook\n", 392 | "show(out)" 393 | ] 394 | }, 395 | { 396 | "cell_type": "markdown", 397 | "metadata": {}, 398 | "source": [ 399 | "### Inline plot in notebook" 400 | ] 401 | }, 402 | { 403 | "cell_type": "markdown", 404 | "metadata": {}, 405 | "source": [ 406 | "## ![s](http://s19.postimg.org/urkrw5vzn/screenshot_1488406859.png)" 407 | ] 408 | }, 409 | { 410 | "cell_type": "markdown", 411 | "metadata": {}, 412 | "source": [ 413 | "## Output file is saved as \"bar.html\" in local drive" 414 | ] 415 | }, 416 | { 417 | "cell_type": "markdown", 418 | "metadata": {}, 419 | "source": [ 420 | "## ![s](http://s19.postimg.org/741fp2x4j/screenshot_1488337270.png)" 421 | ] 422 | }, 423 | { 424 | "cell_type": "markdown", 425 | "metadata": {}, 426 | "source": [ 427 | "## above output is embedded using \"!.[demo].(image url)\" ipython markdown" 428 | ] 429 | }, 430 | { 431 | "cell_type": "code", 432 | "execution_count": null, 433 | "metadata": { 434 | "collapsed": true 435 | }, 436 | "outputs": [], 437 | "source": [] 438 | } 439 | ], 440 | "metadata": { 441 | "kernelspec": { 442 | "display_name": "Python 3", 443 | "language": "python", 444 | "name": "python3" 445 | }, 446 | "language_info": { 447 | "codemirror_mode": { 448 | "name": "ipython", 449 | "version": 3 450 | }, 451 | "file_extension": ".py", 452 | "mimetype": "text/x-python", 453 | "name": "python", 454 | "nbconvert_exporter": "python", 455 | "pygments_lexer": "ipython3", 456 | "version": "3.5.2" 457 | } 458 | }, 459 | "nbformat": 4, 460 | "nbformat_minor": 1 461 | } 462 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Interactive-Data-Visualization-using-Bokeh---Python 2 | Using Bokeh python library for interactive visualization which uses **web browsers** for representation of graphs. 3 | 4 | [![screenshot-1488388948.png](https://i.postimg.cc/8P64Htqv/screenshot-1488388948.png)](https://postimg.cc/3d32rCrr) 5 | 6 | This notebook shows creation of interactive graphs with [Bokeh Library](http://bokeh.pydata.org/en/latest/docs/installation.html) 7 | 8 | * Install `pip3 install bohek` to install the source Bokeh library. 9 | 10 | [![screenshot-1488338406.png](https://i.postimg.cc/CLqgFKYy/screenshot-1488338406.png)](https://postimg.cc/6ytSctyz) 11 | 12 | - - - - 13 | 14 | 15 | 16 | ##Importing library for bar data 17 | ``` 18 | from bokeh.charts import Bar, output_file, show, output_notebook 19 | ``` 20 | 21 | 22 | - - - - 23 | ##Bokeh Inline Output1: [Bar Graph] 24 | [![screenshot_1488406982.png](https://s19.postimg.cc/k60wk5po3/screenshot_1488406982.png)](https://postimg.cc/image/npmu9ysdr/) 25 | 26 | [![screenshot_1488406859.png](https://s19.postimg.cc/urkrw5vzn/screenshot_1488406859.png)](https://postimg.cc/image/u21zjsvfz/) 27 | 28 | - - - - 29 | 30 | ##Bokeh Local Output2: [Bar.html] 31 | [![screenshot_1488337778.png](https://s19.postimg.cc/jjy5itqgj/screenshot_1488337778.png)](https://postimg.cc/image/qn60yfvvz/) 32 | 33 | 34 | - - - - 35 | 36 | ##Bokeh Inline Output3: [Choropleth Map] 37 | [![screenshot-1488411915.png](https://i.postimg.cc/jdf6Nc1F/screenshot-1488411915.png)](https://postimg.cc/LnHZFt2t) 38 | 39 | -------------------------------------------------------------------------------- /bar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | bar plot example 7 | 8 | 9 | 10 | 11 | 14 | 25 | 26 | 27 | 28 |
29 |
30 |
31 | 32 | 47 | 48 | --------------------------------------------------------------------------------