├── img ├── QS_BPS.png ├── QS_GS1.png ├── QS_GS2.png ├── GSU_VYI1.png ├── GSU_VYI2.png ├── GSU_VYI3.png ├── QS_ME_DA.png ├── QS_ME_VCS.png ├── QS_ME_LPB1.png └── QS_ME_LPB2.png ├── .ipynb_checkpoints └── Untitled-checkpoint.ipynb ├── tmp ├── 用户指南（DonaldDai）.md ├── 绘制高级图表（DonaldDai）.md ├── 设置（DonaldDai）.md ├── 插入图表或Apps（DonaldDai）.md ├── 一些重要概念（DonaldDai）.md ├── 快速入门（DonaldDai）.md └── 用基础标志绘图（DonaldDai）.md ├── CONTRIBUTING.md └── jupyter ├── QS-GS1.ipynb ├── .ipynb_checkpoints ├── QS-GS1-checkpoint.ipynb ├── QS-GS2-checkpoint.ipynb └── QS-ME-LPB1-checkpoint.ipynb ├── QS-GS2.ipynb └── QS-ME-LPB1.ipynb /img/QS_BPS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DonaldDai/Bokeh-CN/HEAD/img/QS_BPS.png -------------------------------------------------------------------------------- /img/QS_GS1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DonaldDai/Bokeh-CN/HEAD/img/QS_GS1.png -------------------------------------------------------------------------------- /img/QS_GS2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DonaldDai/Bokeh-CN/HEAD/img/QS_GS2.png -------------------------------------------------------------------------------- /img/GSU_VYI1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DonaldDai/Bokeh-CN/HEAD/img/GSU_VYI1.png -------------------------------------------------------------------------------- /img/GSU_VYI2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DonaldDai/Bokeh-CN/HEAD/img/GSU_VYI2.png -------------------------------------------------------------------------------- /img/GSU_VYI3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DonaldDai/Bokeh-CN/HEAD/img/GSU_VYI3.png -------------------------------------------------------------------------------- /img/QS_ME_DA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DonaldDai/Bokeh-CN/HEAD/img/QS_ME_DA.png -------------------------------------------------------------------------------- /img/QS_ME_VCS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DonaldDai/Bokeh-CN/HEAD/img/QS_ME_VCS.png -------------------------------------------------------------------------------- /img/QS_ME_LPB1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DonaldDai/Bokeh-CN/HEAD/img/QS_ME_LPB1.png -------------------------------------------------------------------------------- /img/QS_ME_LPB2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DonaldDai/Bokeh-CN/HEAD/img/QS_ME_LPB2.png -------------------------------------------------------------------------------- /.ipynb_checkpoints/Untitled-checkpoint.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [], 3 | "metadata": {}, 4 | "nbformat": 4, 5 | "nbformat_minor": 0 6 | } 7 | -------------------------------------------------------------------------------- /tmp/用户指南（DonaldDai）.md: -------------------------------------------------------------------------------- 1 | ## 用户指南-User Guide 2 | 3 | 这一章内容主要是了解一下整片用户指南的大体结构，根据你可能用到的情况，你可以挑选不同的章节去了解。章节根据内容分为： 4 | 5 | ### 快速入门-Quickstart 6 | 7 | 主要是走马观花的带你过一遍基本的功能和用法。 8 | 9 | ### 设置-Getting Set Up 10 | 11 | 验证你的Bokeh是否安装成功 12 | 13 | ### 插入图表或Apps-Embedding Plots and Apps 14 | 15 | 以多种方式在HTML文档中嵌入静态或基于Bokeh服务器的交互图表 16 | 17 | ### 一些重要概念-Defining Key Concepts 18 | 19 | 定义和解释一些基本的概念 -------------------------------------------------------------------------------- /tmp/绘制高级图表（DonaldDai）.md: -------------------------------------------------------------------------------- 1 | ## 绘制高级图表-Making High-level Charts 2 | 3 | ### 核心概念-Key Concepts 4 | 5 | #### 可接受数据类型-Accepted Charts Data Formats 6 | 7 | #### 属性配置-Attribute Specification 8 | 9 | ### 柱状图-Bar Charts 10 | 11 | #### 数据特征-Aggregations 12 | 13 | #### 条柱的宽-Bar Width 14 | 15 | #### 条柱的色-Bar Color 16 | 17 | #### 分组式柱图-Grouping 18 | 19 | #### 垛堞式柱图-Stacking 20 | 21 | ### 箱形图-Box Plots 22 | 23 | #### 箱子的色-Box Color 24 | 25 | #### 箱线的色-Whisker Color 26 | 27 | 译者没有用过箱形图，这个翻译不准还望指正 28 | 29 | #### Outliers 30 | 31 | #### 标记形状-Markers 32 | 33 | ### 直方图-Histograms 34 | 35 | #### 条柱数-Number of Bins 36 | 37 | #### 条柱的色-Bar Color 38 | 39 | #### 分组配色-Color Groups 40 | 41 | ### 散点图-Scatter Plots 42 | 43 | #### 点的色-Color 44 | 45 | #### 分组配色-Color Groups 46 | 47 | #### 图例-Legends 48 | 49 | #### 散点类型-Markers 50 | 51 | #### 工具栏配置-Tooltips 52 | 53 | ### Chart全局配置-Chart Defaults 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## 参与注意事项 2 | 3 | - 所有标题加上英文版标题，这样方便在引用图片和Jupyter Notebook例子更方便。格式如下 4 | 5 | ## 快速入门-Quickstart 6 | 7 | 8 | - 大标题以二级标题（**两个#**）显示，如 9 | 10 | ## 标题 11 | 12 | - 要翻译哪一部分请提前Issue或者E-mail我，先来后到哦~ 13 | 14 | - push的Markdown文档统一保存在`/tmp`路径下，命名格式为 15 | 16 | 大标题(你的ID) ------------------**括号为中文括号** 17 | 18 | 如 我翻译快速入门（Quickstart）可以保存为 19 | 20 | **快速入门（DonaldDai）.md** 21 | 22 | `/tmp`中的文档我每天晚上0点会整合一次 23 | 24 | - 交互式图形截图统一保存在`/img`路径下，命名规则为 25 | 26 | 大标题选择简写\[_子标题选择简写\[顺序编号\]\] 27 | 28 | 如 在Qickstart_Linked panning and brushing下的两张图片可以保存为 29 | 30 | **QickStart_LinkedPanningandBrushing1.png**和**QickStart_LinkedPanningandBrushing2.png** 31 | 32 | 或者 33 | 34 | **QS_LPB1.png**和**QS_LPB2.png** 35 | 36 | - Jupyter notebook的例子保存在`/jupyter`路径下，命名规则跟图片一致，如果不会可以Email我哦 37 | 38 | - 参与者push的时间务必在**11：30**之前 39 | 40 | pull到本地的时间最好在**12：00**之后 41 | 42 | - 每次push请添加清晰的说明 43 | 44 | 比如 push的大概内容、更新了哪个名词的单词或者是通俗化了一些句子等 45 | 46 | 养成良好的说明习惯也方便日后自己查阅 -------------------------------------------------------------------------------- /tmp/设置（DonaldDai）.md: -------------------------------------------------------------------------------- 1 | ## 设置-Getting Set Up 2 | 3 | 这一章的第一部分会指引你快速安装一下Bokeh并做一些小测试来检测一下是否安装正常。 4 | 5 | ### 安装Bokeh库-Installing the Bokeh Library 6 | 7 | 安装Bokeh最简单的方法就是用诸如`pip`、`conda`等包管理工具来安装。如果你用过 [Anaconda](http://continuum.io/anaconda)那么你可以用`conda`来安装 8 | 9 | ``` 10 | conda install bokeh 11 | ``` 12 | 13 | 否则，就用`pip`工具来安装 14 | 15 | ``` 16 | pip install bokeh 17 | ``` 18 | 19 | 如果要查看更多安装方面的细节可以参考Bokeh文档的[安装](http://bokeh.pydata.org/en/latest/docs/installation.html#installation)部分。 20 | 21 | ### 验证安装-Verifying your installation 22 | 23 | 第一步你可以在Python的交互式命令行中`import bokeh`，用`bokeh.__version__`来查看当前安装的版本。如果你能成功执行命令，结果应该长这样： 24 | 25 | ![](/img/GSU_VYI1.png) 26 | 27 | 第二步，你可以用Bokeh绘制一个简单的图形来检测是否安装正常。将下面的代码保存到文件中并执行或者直接在Python交互式命令行中键入下面的代码来绘制一副简单的图形。 28 | 29 | ```python 30 | from bokeh.plotting import figure, output_file, show 31 | output_file("test.html") 32 | p = figure() 33 | p.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=2) 34 | show(p) 35 | ``` 36 | 37 | 这段代码会生成一个名为`test.html`的本地文件，并且会自动打开默认浏览器来显示图形。正常运行的图形应该是这样的 38 | 39 | ![](/img/GSU_VYI2.png) 40 | 41 | 你也可以在IPython/Jupyter notebook中执行上述的代码来绘制图形，但是需要把上面代码中的`output_file`替换成`output_notebook`。结果如下 42 | 43 | ![](/img/GSU_VYI3.png) 44 | 45 | ### 寻求帮助？-Finding Help 46 | 47 | 如果在你安装或者运行示例的时候出现问题了，可以发Email到[Bokeh mailing list](https://groups.google.com/a/continuum.io/forum/#!forum/bokeh)寻求帮助，也可以在[Bokeh GitHub issue tracker](https://github.com/bokeh/bokeh/issues)中提交Issue。 -------------------------------------------------------------------------------- /tmp/插入图表或Apps（DonaldDai）.md: -------------------------------------------------------------------------------- 1 | ## 嵌入图表和Apps-Embedding Plots and Apps 2 | 3 | 原文 [Embedding Plots and Apps](http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html) 4 | 5 | Bokeh提供了多种方式来为HMTL插入图表 6 | 7 | ### 生成单独的HTML文件 8 | 9 | Bokeh的`file_html()`函数能生成包含图表的独立HTML文件，该文件的模板能用Bokeh自带的，也可以用自己的（具体自己查阅`file_html()`函数的文档，例子 [gapminder example plot](https://github.com/bokeh/bokeh/blob/master/examples/howto/interactive_bubble/gapminder.py)）。HTML文件包含了图表的所有信息并且是可移植的，同时每张图表旁边的交互工具不会消失。 10 | 11 | 例子： 12 | 13 | ```python 14 | from bokeh.plotting import figure 15 | from bokeh.resources import CDN 16 | from bokeh.embed import file_html 17 | 18 | plot = figure() 19 | plot.circle([1,2], [3,4]) 20 | 21 | html = file_html(plot, CDN, "my plot") 22 | ``` 23 | 24 | 其中，`html`中的文本可以用Python自带函数保存到一个文件中 25 | 26 | > 注意 27 | > 28 | > 这个方法相对比较低级、直接，在后面的内容中会教大家用`bokeh.plotting`和`bokeh.charts`中的接口配合[`output_file()`](http://bokeh.pydata.org/en/latest/docs/reference/io.html#bokeh.io.output_file)、[`show()`](http://bokeh.pydata.org/en/latest/docs/reference/io.html#bokeh.io.show)、[`save()`](http://bokeh.pydata.org/en/latest/docs/reference/io.html#bokeh.io.save)函数来达到相同的效果 29 | 30 | ### 作为组件嵌入到HTML中 31 | 32 | Bokeh提供`components()`函数来生成组件形式的图标代码。`components()`返回 33 | 34 | - 一个` 72 | ``` 73 | 74 | `div`长这样 75 | 76 | ```html 77 |
78 | ``` 79 | 80 | 得到了`script`和`div`之后还不能够显示图表，还需将Bokeh官方的`.css`和`.js`文件引用过来才行，也可以将官方的文件下载到本地来加载。引用只需要在``标签中加入如下代码 81 | 82 | ```html 83 | 86 | 89 | 90 | 91 | 92 | ``` 93 | 94 | 其中文件名中有"-widget"的引用文件只有在你需要用到**Bokeh widgets**时才会用到，平时可以不引用来节省页面加载的时间。的`x.y.z`指的是版本号，比如现在要引用**0.12.0**版本的Bokeh，则代码应该长这样 95 | 96 | ```html 97 | 100 | 103 | 104 | 105 | 106 | ``` 107 | 108 | > 注意 109 | > 110 | > 不然可能会加载失败 111 | 112 | 例子： 113 | 114 | 一个完整的HTML文件长这样 115 | 116 | ```html 117 | 118 | 119 | 120 | 121 | Bokeh Scatter Plots 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | ``` 134 | 135 | `component()`函数能接受单个Bokeh图表模型作为参数，也能接受包含Bokeh图表模型的列表（List）、元组（tuple）、字典（dictionary）作为参数，其返回值是包含`script`和`div`文本的对应数据结构。 136 | 137 | ### 在IPython Notebook中嵌入图表 138 | 139 | `notebook_div()`函数能够生成适用于IPython Notebook嵌入的文本包，只有一个输出。文本包中包含`script`和`div`文本。 140 | 141 | ```python 142 | from bokeh.plotting import figure 143 | from bokeh.embed import notebook_div 144 | 145 | plot = figure() 146 | plot.circle([1,2], [3,4]) 147 | 148 | div = notebook_div(plot) 149 | ``` 150 | 151 | 返回的内容和`components()`大体相同，这里不再显示出来 152 | 153 | > 注意 154 | > 155 | > 这个方法相对比较低级、直接，在后面的内容中会教大家用`bokeh.plotting`和`bokeh.charts`中的接口配合 [`output_notebook()`](http://bokeh.pydata.org/en/latest/docs/reference/io.html#bokeh.io.output_notebook)、[`save()`](http://bokeh.pydata.org/en/latest/docs/reference/io.html#bokeh.io.save)函数来达到相同的效果 156 | 157 | ### 自动加载的嵌入方式 158 | 159 | Bokeh提供了一种自动加载的方式来嵌入图表，自动加载的形式是将一段` 191 | ``` 192 | 193 | > 注意 194 | > 195 | > 要让script文本执行得要Bokeh server处于运行状态 196 | 197 | 如果你已经有app在Bokeh服务器上并且还有app的url，那么替换代码如下 198 | 199 | ```python 200 | script = autoload_server(model=None, app_path="/apps/slider", url="https://demo.bokehplots.com") 201 | ``` 202 | 203 | 更多细节参见 [autoload_server()](http://bokeh.pydata.org/en/latest/docs/reference/embed.html#bokeh.embed.autoload_server) 204 | 205 | #### 从静态文件中获取数据 206 | 207 | 如果不想使用Bokeh服务器的话，也可以用`autoload_static()`函数生成引用静态数据的` 234 | ``` 235 | 236 | `script`文本要保存在能够索引到“`some/path`"的路径上的HTML中 237 | 238 | > 注意 239 | > 240 | > 由于" 234 | ] 235 | }, 236 | "metadata": {}, 237 | "output_type": "display_data" 238 | }, 239 | { 240 | "data": { 241 | "text/html": [ 242 | "

<Bokeh Notebook handle for In[2]>

" 243 | ], 244 | "text/plain": [ 245 | "" 246 | ] 247 | }, 248 | "execution_count": 2, 249 | "metadata": {}, 250 | "output_type": "execute_result" 251 | } 252 | ], 253 | "source": [ 254 | "# prepare some data\n", 255 | "x = [1, 2, 3, 4, 5]\n", 256 | "y = [6, 7, 2, 4, 5]\n", 257 | "\n", 258 | "# create a new plot with a title and axis labels\n", 259 | "p = figure(title=\"simple line example\", x_axis_label='x', y_axis_label='y')\n", 260 | "\n", 261 | "# add a line renderer with legend and line thickness\n", 262 | "p.line(x, y, legend=\"Temp.\", line_width=2)\n", 263 | "\n", 264 | "# show the results\n", 265 | "show(p)" 266 | ] 267 | }, 268 | { 269 | "cell_type": "code", 270 | "execution_count": null, 271 | "metadata": { 272 | "collapsed": true 273 | }, 274 | "outputs": [], 275 | "source": [] 276 | } 277 | ], 278 | "metadata": { 279 | "kernelspec": { 280 | "display_name": "Python 2", 281 | "language": "python", 282 | "name": "python2" 283 | }, 284 | "language_info": { 285 | "codemirror_mode": { 286 | "name": "ipython", 287 | "version": 2 288 | }, 289 | "file_extension": ".py", 290 | "mimetype": "text/x-python", 291 | "name": "python", 292 | "nbconvert_exporter": "python", 293 | "pygments_lexer": "ipython2", 294 | "version": "2.7.11" 295 | } 296 | }, 297 | "nbformat": 4, 298 | "nbformat_minor": 0 299 | } 300 | -------------------------------------------------------------------------------- /jupyter/.ipynb_checkpoints/QS-GS1-checkpoint.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "code", 5 | "execution_count": 1, 6 | "metadata": { 7 | "collapsed": false, 8 | "scrolled": true 9 | }, 10 | "outputs": [ 11 | { 12 | "data": { 13 | "text/html": [ 14 | "\n", 15 | "
\n", 16 | " \n", 17 | " Loading BokehJS ...\n", 18 | "
" 19 | ] 20 | }, 21 | "metadata": {}, 22 | "output_type": "display_data" 23 | }, 24 | { 25 | "data": { 26 | "application/javascript": [ 27 | "\n", 28 | "(function(global) {\n", 29 | " function now() {\n", 30 | " return new Date();\n", 31 | " }\n", 32 | "\n", 33 | " var force = \"1\";\n", 34 | "\n", 35 | " if (typeof (window._bokeh_onload_callbacks) === \"undefined\" || force !== \"\") {\n", 36 | " window._bokeh_onload_callbacks = [];\n", 37 | " window._bokeh_is_loading = undefined;\n", 38 | " }\n", 39 | "\n", 40 | " function run_callbacks() {\n", 41 | " window._bokeh_onload_callbacks.forEach(function(callback) { callback() });\n", 42 | " delete window._bokeh_onload_callbacks\n", 43 | " console.info(\"Bokeh: all callbacks have finished\");\n", 44 | " }\n", 45 | "\n", 46 | " function load_libs(js_urls, callback) {\n", 47 | " window._bokeh_onload_callbacks.push(callback);\n", 48 | " if (window._bokeh_is_loading > 0) {\n", 49 | " console.log(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n", 50 | " return null;\n", 51 | " }\n", 52 | " if (js_urls == null || js_urls.length === 0) {\n", 53 | " run_callbacks();\n", 54 | " return null;\n", 55 | " }\n", 56 | " console.log(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n", 57 | " window._bokeh_is_loading = js_urls.length;\n", 58 | " for (var i = 0; i < js_urls.length; i++) {\n", 59 | " var url = js_urls[i];\n", 60 | " var s = document.createElement('script');\n", 61 | " s.src = url;\n", 62 | " s.async = false;\n", 63 | " s.onreadystatechange = s.onload = function() {\n", 64 | " window._bokeh_is_loading--;\n", 65 | " if (window._bokeh_is_loading === 0) {\n", 66 | " console.log(\"Bokeh: all BokehJS libraries loaded\");\n", 67 | " run_callbacks()\n", 68 | " }\n", 69 | " };\n", 70 | " s.onerror = function() {\n", 71 | " console.warn(\"failed to load library \" + url);\n", 72 | " };\n", 73 | " console.log(\"Bokeh: injecting script tag for BokehJS library: \", url);\n", 74 | " document.getElementsByTagName(\"head\")[0].appendChild(s);\n", 75 | " }\n", 76 | " };\n", 77 | "\n", 78 | " var js_urls = ['https://cdn.pydata.org/bokeh/release/bokeh-0.12.1.min.js', 'https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.1.min.js', 'https://cdn.pydata.org/bokeh/release/bokeh-compiler-0.12.1.min.js'];\n", 79 | "\n", 80 | " var inline_js = [\n", 81 | " function(Bokeh) {\n", 82 | " Bokeh.set_log_level(\"info\");\n", 83 | " },\n", 84 | " \n", 85 | " function(Bokeh) {\n", 86 | " \n", 87 | " Bokeh.$(\"#d2d0945b-c6fd-4f4a-bb42-052f3e78a85c\").text(\"BokehJS successfully loaded\");\n", 88 | " var kernel = Jupyter.notebook.kernel\n", 89 | " if (kernel.execute !== undefined) {\n", 90 | " kernel.execute(\"import bokeh.io; bokeh.io._nb_loaded = True\");\n", 91 | " }\n", 92 | " },\n", 93 | " function(Bokeh) {\n", 94 | " console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-0.12.1.min.css\");\n", 95 | " Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-0.12.1.min.css\");\n", 96 | " console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.1.min.css\");\n", 97 | " Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.1.min.css\");\n", 98 | " }\n", 99 | " ];\n", 100 | "\n", 101 | " function run_inline_js() {\n", 102 | " for (var i = 0; i < inline_js.length; i++) {\n", 103 | " inline_js[i](window.Bokeh);\n", 104 | " }\n", 105 | " }\n", 106 | "\n", 107 | " if (window._bokeh_is_loading === 0) {\n", 108 | " console.log(\"Bokeh: BokehJS loaded, going straight to plotting\");\n", 109 | " run_inline_js();\n", 110 | " } else {\n", 111 | " load_libs(js_urls, function() {\n", 112 | " console.log(\"Bokeh: BokehJS plotting callback run at\", now());\n", 113 | " run_inline_js();\n", 114 | " });\n", 115 | " }\n", 116 | "}(this));" 117 | ] 118 | }, 119 | "metadata": {}, 120 | "output_type": "display_data" 121 | } 122 | ], 123 | "source": [ 124 | "from bokeh.plotting import figure, output_notebook, show\n", 125 | "\n", 126 | "# output to static HTML file\n", 127 | "output_notebook()" 128 | ] 129 | }, 130 | { 131 | "cell_type": "code", 132 | "execution_count": 2, 133 | "metadata": { 134 | "collapsed": false, 135 | "scrolled": false 136 | }, 137 | "outputs": [ 138 | { 139 | "data": { 140 | "text/html": [ 141 | "\n", 142 | "\n", 143 | "
\n", 144 | "
\n", 145 | "
\n", 146 | "" 234 | ] 235 | }, 236 | "metadata": {}, 237 | "output_type": "display_data" 238 | }, 239 | { 240 | "data": { 241 | "text/html": [ 242 | "

<Bokeh Notebook handle for In[2]>

" 243 | ], 244 | "text/plain": [ 245 | "" 246 | ] 247 | }, 248 | "execution_count": 2, 249 | "metadata": {}, 250 | "output_type": "execute_result" 251 | } 252 | ], 253 | "source": [ 254 | "# prepare some data\n", 255 | "x = [1, 2, 3, 4, 5]\n", 256 | "y = [6, 7, 2, 4, 5]\n", 257 | "\n", 258 | "# create a new plot with a title and axis labels\n", 259 | "p = figure(title=\"simple line example\", x_axis_label='x', y_axis_label='y')\n", 260 | "\n", 261 | "# add a line renderer with legend and line thickness\n", 262 | "p.line(x, y, legend=\"Temp.\", line_width=2)\n", 263 | "\n", 264 | "# show the results\n", 265 | "show(p)" 266 | ] 267 | }, 268 | { 269 | "cell_type": "code", 270 | "execution_count": null, 271 | "metadata": { 272 | "collapsed": true 273 | }, 274 | "outputs": [], 275 | "source": [] 276 | } 277 | ], 278 | "metadata": { 279 | "kernelspec": { 280 | "display_name": "Python 2", 281 | "language": "python", 282 | "name": "python2" 283 | }, 284 | "language_info": { 285 | "codemirror_mode": { 286 | "name": "ipython", 287 | "version": 2 288 | }, 289 | "file_extension": ".py", 290 | "mimetype": "text/x-python", 291 | "name": "python", 292 | "nbconvert_exporter": "python", 293 | "pygments_lexer": "ipython2", 294 | "version": "2.7.11" 295 | } 296 | }, 297 | "nbformat": 4, 298 | "nbformat_minor": 0 299 | } 300 | -------------------------------------------------------------------------------- /tmp/用基础标志绘图（DonaldDai）.md: -------------------------------------------------------------------------------- 1 | ## 用基础标志绘图-Plotting with Basic Glyphs 2 | 3 | ### 创建标志-Creating Figures 4 | 5 | 需要指出的是利用[bokeh.plotting](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh-plotting)创建出的图形子带默认的工具和可视化风格。如果要风格化自己的图形请看[Styling Visual Attributes](http://bokeh.pydata.org/en/latest/docs/user_guide/styling.html#userguide-styling)，若要组合不同工具请看[Configuring Plot Tools](http://bokeh.pydata.org/en/latest/docs/user_guide/tools.html#userguide-tools)。 6 | 7 | #### 散点图标atter Markers 8 | 9 | 要绘制散点图可以用`Figure`中的`circle()`函数： 10 | 11 | ```python 12 | from bokeh.plotting import figure, output_file, show 13 | 14 | # output to static HTML file 15 | output_file("line.html") 16 | 17 | p = figure(plot_width=400, plot_height=400) 18 | 19 | # add a circle renderer with a size, color, and alpha 20 | p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5) 21 | 22 | # show the results 23 | show(p) 24 | ``` 25 | 26 | 【图图】 27 | 28 | 照着葫芦画瓢，如果要绘制方形的散点图可以用`Figure`中的`square()`函数： 29 | 30 | ```python 31 | from bokeh.plotting import figure, output_file, show 32 | 33 | # output to static HTML file 34 | output_file("square.html") 35 | 36 | p = figure(plot_width=400, plot_height=400) 37 | 38 | # add a square renderer with a size, color, and alpha 39 | p.square([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="olive", alpha=0.5) 40 | 41 | # show the results 42 | show(p) 43 | ``` 44 | 45 | 【图图】 46 | 47 | 还有许多类型的散点图可供选择，具体见下表（链接中包含例子） 48 | 49 | | [`asterisk()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.asterisk) | [`diamond()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.diamond) | [`square_cross()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.square_cross) | 50 | | :--------------------------------------- | :--------------------------------------- | :--------------------------------------- | 51 | | [`circle()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.circle) | [`diamond_cross()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.diamond_cross) | [`square_x()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.square_x) | 52 | | [`circle_cross()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.circle_cross) | [`inverted_triangle()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.inverted_triangle) | [`triangle()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.triangle) | 53 | | [`circle_x()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.circle_x) | [`square()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.square) | [`x()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.x) | 54 | | [`cross()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.cross) | | | 55 | 56 | 所有类型的图标都有`x`、`y`、`size`（定义在[screen units](http://bokeh.pydata.org/en/latest/docs/user_guide/styling.html#userguide-styling-units)）和`angle`（默认单位是弧度）。除此之外，[`circle()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.circle)函数具有`radius`参数，用来调节[data-space units](http://bokeh.pydata.org/en/latest/docs/user_guide/styling.html#userguide-styling-units)。 57 | 58 | #### 线形标志-Line Glyphs 59 | 60 | ##### 单个直线-Single Lines 61 | 62 | 下面直接给出例子，向`line()`函数传入一系列*x*和*y*值来绘制一根直线： 63 | 64 | ```python 65 | from bokeh.plotting import figure, output_file, show 66 | 67 | output_file("line.html") 68 | 69 | p = figure(plot_width=400, plot_height=400) 70 | 71 | # add a line renderer 72 | p.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=2) 73 | 74 | show(p) 75 | ``` 76 | 77 | 【图图】 78 | 79 | ##### 多条直线-Multiple Lines 80 | 81 | 有时候需要在同一图形中展示多条曲线，这时可以用`multi_line()`函数： 82 | 83 | ```python 84 | from bokeh.plotting import figure, output_file, show 85 | 86 | output_file("patch.html") 87 | 88 | p = figure(plot_width=400, plot_height=400) 89 | 90 | p.multi_line([[1, 3, 2], [3, 4, 6, 6]], [[2, 1, 4], [4, 7, 8, 5]], 91 | color=["firebrick", "navy"], alpha=[0.8, 0.3], line_width=4) 92 | 93 | show(p) 94 | ``` 95 | 96 | 【图图】 97 | 98 | > 注意 99 | > 100 | > 这里绘制函数接收的参数比较特殊，不仅可以接受纯量Python列表，也可以接受元素为列表的列表。 101 | 102 | ##### 隐藏直线段-Missing Points 103 | 104 | `NaN`值可以传入`line()`和`multi_line()`函数。在下面的例子中我们将逻辑上为一条的直线中的一部分隐藏，使其实际上变成两条直线。（实际上我理解的是值为`NaN`的那一段直线就不进行插值了，所以就没有直线） 105 | 106 | ```python 107 | from bokeh.plotting import figure, output_file, show 108 | 109 | output_file("line.html") 110 | 111 | p = figure(plot_width=400, plot_height=400) 112 | 113 | # add a line renderer with a NaN 114 | nan = float('nan') 115 | p.line([1, 2, 3, nan, 4, 5], [6, 7, 2, 4, 4, 5], line_width=2) 116 | 117 | show(p) 118 | ``` 119 | 120 | 【图图】 121 | 122 | #### 贴图标志-Patch Glyphs 123 | 124 | ##### 单个贴图-Single Patches 125 | 126 | 下面的例子示范的是如何向`patch()`函数传入两组一维Python列表来生成单个多边形的贴图。其中两个一维Python列表中的值对应位组成一个点的坐标。 127 | 128 | ```python 129 | from bokeh.plotting import figure, output_file, show 130 | 131 | output_file("patch.html") 132 | 133 | p = figure(plot_width=400, plot_height=400) 134 | 135 | # add a patch renderer with an alpha an line width 136 | p.patch([1, 2, 3, 4, 5], [6, 7, 8, 7, 3], alpha=0.5, line_width=2) 137 | 138 | show(p) 139 | ``` 140 | 141 | 【图图】 142 | 143 | ##### 多个贴图-Multiple Patches 144 | 145 | 如果要在一个图形中绘制多个贴图，可以使用`patches()`方法，方式如下： 146 | 147 | ```python 148 | from bokeh.plotting import figure, output_file, show 149 | 150 | output_file("patch.html") 151 | 152 | p = figure(plot_width=400, plot_height=400) 153 | 154 | p.patches([[1, 3, 2], [3, 4, 6, 6]], [[2, 1, 4], [4, 7, 8, 5]], 155 | color=["firebrick", "navy"], alpha=[0.8, 0.3], line_width=2) 156 | 157 | show(p) 158 | ``` 159 | 160 | 【图图】 161 | 162 | > 注意 163 | > 164 | > 这里绘制函数接收的参数比较特殊，不仅可以接受纯量Python列表，也可以接受元素为列表的列表。 165 | 166 | ##### 隐藏部分贴图-Missing Points 167 | 168 | 和`line()`、`multi_line()`一样，`NaN`值也可以被传入`patch()`、`patches()`中。在下面的例子中，我们将一个逻辑上为一块的贴图分成两块（实际上相当于将`NaN`两边的数据分开绘制贴图，只不过这两个贴图颜色一样）： 169 | 170 | ```python 171 | from bokeh.plotting import figure, output_file, show 172 | 173 | output_file("patch.html") 174 | 175 | p = figure(plot_width=400, plot_height=400) 176 | 177 | # add a patch renderer with a NaN value 178 | nan = float('nan') 179 | p.patch([1, 2, 3, nan, 4, 5, 6], [6, 7, 5, nan, 7, 3, 6], alpha=0.5, line_width=2) 180 | 181 | show(p) 182 | ``` 183 | 184 | 【图图】 185 | 186 | > 警告 187 | > 188 | > Hit testing on patch objects with `NaN` values is not currently supported. 189 | 190 | #### 长方形与椭圆形-Rectangles, Ovals and Ellipses 191 | 192 | 要在图形中绘制和*网格对齐*的四边形可以使用[`quad()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.quad)标志函数，[`quad()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.quad)函数接受`left`、`right`、`top`、`bottom`这四个参数，分别表示四边形的四个边对应的坐标。 193 | 194 | ```python 195 | from bokeh.plotting import figure, show, output_file 196 | 197 | output_file('rectangles.html') 198 | 199 | p = figure(width=400, height=400) 200 | p.quad(top=[2, 3, 4], bottom=[1, 2, 3], left=[1, 2, 3], 201 | right=[1.2, 2.5, 3.7], color="#B3DE69") 202 | 203 | show(p) 204 | ``` 205 | 206 | 【图图】 207 | 208 | 如果要绘制任意一种四边形，可以用[`rect()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.rect)函数并指定需要的长、宽、角度来画出需要的标志。 209 | 210 | ```python 211 | from math import pi 212 | from bokeh.plotting import figure, show, output_file 213 | 214 | output_file('rectangles_rotated.html') 215 | 216 | p = figure(width=400, height=400) 217 | p.rect(x=[1, 2, 3], y=[1, 2, 3], width=0.2, height=40, color="#CAB2D6", 218 | angle=pi/3, height_units="screen") 219 | 220 | show(p) 221 | ``` 222 | 223 | 【图图】 224 | 225 |  [`oval()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.oval)标志函数可接受的参数与[`rect()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.rect)一样。 226 | 227 | ```python 228 | from math import pi 229 | from bokeh.plotting import figure, show, output_file 230 | 231 | output_file('ovals.html') 232 | 233 | p = figure(width=400, height=400) 234 | p.oval(x=[1, 2, 3], y=[1, 2, 3], width=0.2, height=40, color="#CAB2D6", 235 | angle=pi/3, height_units="screen") 236 | 237 | show(p) 238 | ``` 239 | 240 | 【图图】 241 | 242 |  [`ellipse()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.ellipse)标志函数接受的参数和 [`oval()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.oval)、[`rect()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.rect)并无二样，个人感觉 [`ellipse()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.ellipse)和 [`oval()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.oval)函数绘制的都是椭圆形，只是[`ellipse()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.ellipse)绘制的椭圆形更胖一点。 243 | 244 | ```python 245 | from math import pi 246 | from bokeh.plotting import figure, show, output_file 247 | 248 | output_file('ellipses.html') 249 | 250 | p = figure(width=400, height=400) 251 | p.ellipse(x=[1, 2, 3], y=[1, 2, 3], width=[0.2, 0.3, 0.1], height=0.3, 252 | angle=pi/3, color="#CAB2D6") 253 | 254 | show(p) 255 | ``` 256 | 257 | 【图图】 258 | 259 | #### 图片-Images 260 | 261 | 要在图形中显示自己的图片，可以用[`image()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.image)、 [`image_rgba()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.image_rgba)和[`image_url()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.image_url) 标志函数。 262 | 263 | 下面这个例子演示如何用[`image_rgba()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.image_rgba)在图形中嵌入raw RGBA数据图。 264 | 265 | > 注意 266 | > 267 | > 这个例子中使用Numpy库来简化数据的生成 268 | 269 | ```python 270 | from __future__ import division 271 | 272 | import numpy as np 273 | 274 | from bokeh.plotting import figure, output_file, show 275 | 276 | # create an array of RGBA data 277 | N = 20 278 | img = np.empty((N, N), dtype=np.uint32) 279 | view = img.view(dtype=np.uint8).reshape((N, N, 4)) 280 | for i in range(N): 281 | for j in range(N): 282 | view[i, j, 0] = int(255 * i / N) 283 | view[i, j, 1] = 158 284 | view[i, j, 2] = int(255 * j / N) 285 | view[i, j, 3] = 255 286 | 287 | output_file("image_rgba.html") 288 | 289 | p = figure(plot_width=400, plot_height=400, x_range=(0, 10), y_range=(0, 10)) 290 | 291 | p.image_rgba(image=[img], x=[0], y=[0], dw=[10], dh=[10]) 292 | 293 | show(p) 294 | ``` 295 | 296 | 【图图】 297 | 298 | #### 线段与射线-Segments and Rays 299 | 300 | 有时候在一个图形中绘制多个线段或者射线会非常有用，Bokeh提供了 [`segment()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.segment)和[`ray()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.ray)标志函数来完成这一需求。 301 | 302 |  [`segment()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.segment)函数接受`x0`、`y0`、`x1`、`y1`（分别对应起始x，y坐标和终点x，y坐标） 303 | 304 | ```python 305 | from bokeh.plotting import figure, show 306 | 307 | p = figure(width=400, height=400) 308 | p.segment(x0=[1, 2, 3], y0=[1, 2, 3], x1=[1.2, 2.4, 3.1], 309 | y1=[1.2, 2.5, 3.7], color="#F4A582", line_width=3) 310 | 311 | show(p) 312 | ``` 313 | 314 | 【图图】 315 | 316 |  [`ray()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.ray)函数接受`x`、`y`、`length`、`angle`（分别表示起始x，y坐标、长度、角度）这几个参数。其中角度的默认单位为“弧度”（但也可以用角度），长度单位为[屏幕像素](http://bokeh.pydata.org/en/latest/docs/user_guide/styling.html#userguide-styling-units)，如果要绘制无限长的射线，将`0`传给`length`参数。 317 | 318 | ```python 319 | from bokeh.plotting import figure, show 320 | 321 | p = figure(width=400, height=400) 322 | p.ray(x=[1, 2, 3], y=[1, 2, 3], length=45, angle=[30, 45, 60], 323 | angle_units="deg", color="#FB8072", line_width=2) 324 | 325 | show(p) 326 | ``` 327 | 328 | #### 楔形与弧形-Wedges and Arcs 329 | 330 | [`arc()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.arc)标志函数能够绘制简单的弧形，他接受`radius`、`start_angle`和`end_angle`（分别表示半径、起始角度、终点角度，上面例子中的角度的单位是弧度），该函数还有个可选参数`direction`，可以传入`"clock"`（顺时针绘制）或者`"anticlock"`（逆时针绘制）参数。 331 | 332 | ```python 333 | from bokeh.plotting import figure, show 334 | 335 | p = figure(width=400, height=400) 336 | p.arc(x=[1, 2, 3], y=[1, 2, 3], radius=0.1, start_angle=0.4, end_angle=4.8, color="navy") 337 | 338 | show(p) 339 | ``` 340 | 341 | 【图图】 342 | 343 |  [`wedge()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.wedge)函数接受的参数和[`arc()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.arc)一样，但是其绘制的是扇形。 344 | 345 | ```python 346 | from bokeh.plotting import figure, show 347 | 348 | p = figure(width=400, height=400) 349 | p.wedge(x=[1, 2, 3], y=[1, 2, 3], radius=0.2, start_angle=0.4, end_angle=4.8, 350 | color="firebrick", alpha=0.6, direction="clock") 351 | 352 | show(p) 353 | ``` 354 | 355 | 【图图】 356 | 357 |  [`annular_wedge()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.annular_wedge)函数和[`arc()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.arc)函数很像，但绘制的图形是环形， [`annular_wedge()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.annular_wedge) 接受`inner_radius`和`outer_radius`参数（分别对应内半径和外半径），而非`radius`。 358 | 359 | ```python 360 | from bokeh.plotting import figure, show 361 | 362 | p = figure(width=400, height=400) 363 | p.annular_wedge(x=[1, 2, 3], y=[1, 2, 3], inner_radius=0.1, outer_radius=0.25, 364 | start_angle=0.4, end_angle=4.8, color="green", alpha=0.6) 365 | 366 | show(p) 367 | ``` 368 | 369 | 【图图】 370 | 371 | 最后是[`annulus()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.annulus)标志函数，该函数只能绘制整个环形，用法如下。 372 | 373 | ```python 374 | from bokeh.plotting import figure, show 375 | 376 | p = figure(width=400, height=400) 377 | p.annulus(x=[1, 2, 3], y=[1, 2, 3], inner_radius=0.1, outer_radius=0.25, 378 | color="orange", alpha=0.6) 379 | 380 | show(p) 381 | ``` 382 | 383 | 【图图】 384 | 385 | #### 特殊曲线-Specialized Curves 386 | 387 | Bokeh还提供了[`quadratic()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.quadratic)和[`bezier()`](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.bezier)标志函数来绘制二次和三次曲线。有时候还有一些特例情况，详情请看[reference documentation](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh-plotting)。 388 | 389 | ### 组合标志-Combining Multiple Glyphs 390 | 391 | 要在同一图形中绘制多种标志可以直接在图形对象（`Figure`)中添加。 392 | 393 | ```python 394 | rom bokeh.plotting import figure, output_file, show 395 | 396 | x = [1, 2, 3, 4, 5] 397 | y = [6, 7, 8, 7, 3] 398 | 399 | output_file("multiple.html") 400 | 401 | p = figure(plot_width=400, plot_height=400) 402 | 403 | # add both a line and circles on the same plot 404 | p.line(x, y, line_width=2) 405 | p.circle(x, y, fill_color="white", size=8) 406 | 407 | show(p) 408 | ``` 409 | 410 | 【图图】 411 | 412 | 所有在[bokeh.plotting](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh-plotting)中的标志函数都遵循这一原则，同一个图形中可以添加任意多个标志。 413 | 414 | ### 设置坐标范围-Setting Ranges 415 | 416 | 一般情况下，Bokeh会根据曲线标志自适应的设置坐标范围，但你也可以用`Rangeld`方法来改变`x_range`和`y_range`来设置坐标范围，`Rangeld`方法接受两个参数，分别为坐标的起始点和终点。 417 | 418 | ```python 419 | p.x_range = Rangeld(0, 100) 420 | ``` 421 | 422 | 为方便起见，`figure()`方法也能接受形式为（起始点，终点）的元组作为属性`x_range`或`y_range`的值，而这两个属性能改变图形的坐标轴范围，下面的例子演示了两种修改坐标轴范围的方法 423 | 424 | ```python 425 | from bokeh.plotting import figure, output_file, show 426 | from bokeh.models import Range1d 427 | 428 | output_file("title.html") 429 | 430 | # create a new plot with a range set with a tuple 431 | p = figure(plot_width=400, plot_height=400, x_range=(0, 20)) 432 | 433 | # set a range using a Range1d 434 | p.y_range = Range1d(0, 15) 435 | 436 | p.circle([1, 2, 3, 4, 5], [2, 5, 8, 2, 7], size=10) 437 | 438 | show(p) 439 | ``` 440 | 441 | 【图图】 442 | 443 | 你也可以设置一个范围，限制用户使用pan或zoom工具的范围 444 | 445 | ### 配置坐标轴-Specifying Axis Types 446 | 447 | 上面所有的例子所使用的坐标轴都是线性的。线性坐标轴适用于大多数图形，但有时候时间轴和对数轴更有用，这一节中将讲述如何配置[bokeh.plotting](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh-plotting)图形的坐标轴类型。 448 | 449 | #### 类轴-Categorical Axes 450 | 451 | ```python 452 | from bokeh.plotting import figure, output_file, show 453 | 454 | factors = ["a", "b", "c", "d", "e", "f", "g", "h"] 455 | x = [50, 40, 65, 10, 25, 37, 80, 60] 456 | 457 | output_file("categorical.html") 458 | 459 | p = figure(y_range=factors) 460 | 461 | p.circle(x, factors, size=15, fill_color="orange", line_color="green", line_width=3) 462 | 463 | show(p) 464 | ``` 465 | 466 | 【图图】 467 | 468 | #### 时间坐标轴-Datetime Axes 469 | 470 | 当处理的数据与时间有关时，使用时间坐标轴是个很好的选择。 471 | 472 | > 注意 473 | > 474 | > 下面的例子需要联网才能正常运行，并且，为了更方便的展示数据，会用到第三方Pandas库。 475 | 476 | 之前我们已经学习过了如何使用[bokeh.plotting](http://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh-plotting)的`figure()`函数来绘制图形，其实`figure()`函数还接受`x_axis_type`和`y_axis_type`参数，分别表示x和y轴的类型。要配置成时间坐标轴，传入`"datetime"`参数即可。 477 | 478 | ```python 479 | import pandas as pd 480 | from bokeh.plotting import figure, output_file, show 481 | 482 | AAPL = pd.read_csv( 483 | "http://ichart.yahoo.com/table.csv?s=AAPL&a=0&b=1&c=2000&d=0&e=1&f=2010", 484 | parse_dates=['Date'] 485 | ) 486 | 487 | output_file("datetime.html") 488 | 489 | # create a new plot with a datetime axis type 490 | p = figure(width=800, height=250, x_axis_type="datetime") 491 | 492 | p.line(AAPL['Date'], AAPL['Close'], color='navy', alpha=0.5) 493 | 494 | show(p) 495 | ``` 496 | 497 | 【图图】 498 | 499 | > 注意 500 | > 501 | > 未来版本的Bokeh将会自动识别时间序列数据，并配置时间坐标轴 502 | 503 | #### 对数坐标轴-Log Scale Axes 504 | 505 | 当处理指数级增长等快速增长的数据时，用指数坐标轴能更准确方便的表示图形，有的情况数据增长的很快，以致于两个轴都要用指数坐标轴来表示。 506 | 507 | 和上面的方法类似，要配置指数坐标轴，向`figure()`函数的`x_axis_type`和`y_axis_type`属性传入`"log"`值即可。 508 | 509 | ```python 510 | from bokeh.plotting import figure, output_file, show 511 | 512 | x = [0.1, 0.5, 1.0, 1.5, 2.0, 2.5, 3.0] 513 | y = [10**xx for xx in x] 514 | 515 | output_file("log.html") 516 | 517 | # create a new plot with a log axis type 518 | p = figure(plot_width=400, plot_height=400, 519 | y_axis_type="log", y_range=(10**-1, 10**4)) 520 | 521 | p.line(x, y, line_width=2) 522 | p.circle(x, y, fill_color="white", size=8) 523 | 524 | show(p) 525 | ``` 526 | 527 | 【图图】 528 | 529 | #### 双轴-Twin Axes 530 | 531 | 有的情况下要将两个范围不同的曲线表示在同一图形中，这时就需要两个坐标轴，也就是双轴。可以通过图形对象的`extra_x_range`和`extra_y_range`属性来创建额外的坐标轴，再通过`add_layout`函数布置到图形中，例子如下 532 | 533 | ```python 534 | from numpy import pi, arange, sin, linspace 535 | 536 | from bokeh.plotting import output_file, figure, show 537 | from bokeh.models import LinearAxis, Range1d 538 | 539 | x = arange(-2*pi, 2*pi, 0.1) 540 | y = sin(x) 541 | y2 = linspace(0, 100, len(y)) 542 | 543 | output_file("twin_axis.html") 544 | 545 | p = figure(x_range=(-6.5, 6.5), y_range=(-1.1, 1.1)) 546 | 547 | p.circle(x, y, color="red") 548 | 549 | p.extra_y_ranges = {"foo": Range1d(start=0, end=100)} 550 | p.circle(x, y2, color="blue", y_range_name="foo") 551 | p.add_layout(LinearAxis(y_range_name="foo"), 'left') 552 | 553 | show(p) 554 | ``` 555 | 556 | 【图图】 557 | 558 | ### 添加注释 559 | 560 | 这一部分已被移除，具体详见[Adding Annotations](http://bokeh.pydata.org/en/latest/docs/user_guide/annotations.html#userguide-annotations)。 -------------------------------------------------------------------------------- /jupyter/QS-GS2.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "code", 5 | "execution_count": 1, 6 | "metadata": { 7 | "collapsed": false 8 | }, 9 | "outputs": [ 10 | { 11 | "data": { 12 | "text/html": [ 13 | "\n", 14 | "
\n", 15 | " \n", 16 | " Loading BokehJS ...\n", 17 | "
" 18 | ] 19 | }, 20 | "metadata": {}, 21 | "output_type": "display_data" 22 | }, 23 | { 24 | "data": { 25 | "application/javascript": [ 26 | "\n", 27 | "(function(global) {\n", 28 | " function now() {\n", 29 | " return new Date();\n", 30 | " }\n", 31 | "\n", 32 | " var force = \"1\";\n", 33 | "\n", 34 | " if (typeof (window._bokeh_onload_callbacks) === \"undefined\" || force !== \"\") {\n", 35 | " window._bokeh_onload_callbacks = [];\n", 36 | " window._bokeh_is_loading = undefined;\n", 37 | " }\n", 38 | "\n", 39 | " function run_callbacks() {\n", 40 | " window._bokeh_onload_callbacks.forEach(function(callback) { callback() });\n", 41 | " delete window._bokeh_onload_callbacks\n", 42 | " console.info(\"Bokeh: all callbacks have finished\");\n", 43 | " }\n", 44 | "\n", 45 | " function load_libs(js_urls, callback) {\n", 46 | " window._bokeh_onload_callbacks.push(callback);\n", 47 | " if (window._bokeh_is_loading > 0) {\n", 48 | " console.log(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n", 49 | " return null;\n", 50 | " }\n", 51 | " if (js_urls == null || js_urls.length === 0) {\n", 52 | " run_callbacks();\n", 53 | " return null;\n", 54 | " }\n", 55 | " console.log(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n", 56 | " window._bokeh_is_loading = js_urls.length;\n", 57 | " for (var i = 0; i < js_urls.length; i++) {\n", 58 | " var url = js_urls[i];\n", 59 | " var s = document.createElement('script');\n", 60 | " s.src = url;\n", 61 | " s.async = false;\n", 62 | " s.onreadystatechange = s.onload = function() {\n", 63 | " window._bokeh_is_loading--;\n", 64 | " if (window._bokeh_is_loading === 0) {\n", 65 | " console.log(\"Bokeh: all BokehJS libraries loaded\");\n", 66 | " run_callbacks()\n", 67 | " }\n", 68 | " };\n", 69 | " s.onerror = function() {\n", 70 | " console.warn(\"failed to load library \" + url);\n", 71 | " };\n", 72 | " console.log(\"Bokeh: injecting script tag for BokehJS library: \", url);\n", 73 | " document.getElementsByTagName(\"head\")[0].appendChild(s);\n", 74 | " }\n", 75 | " };\n", 76 | "\n", 77 | " var js_urls = ['https://cdn.pydata.org/bokeh/release/bokeh-0.12.1.min.js', 'https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.1.min.js', 'https://cdn.pydata.org/bokeh/release/bokeh-compiler-0.12.1.min.js'];\n", 78 | "\n", 79 | " var inline_js = [\n", 80 | " function(Bokeh) {\n", 81 | " Bokeh.set_log_level(\"info\");\n", 82 | " },\n", 83 | " \n", 84 | " function(Bokeh) {\n", 85 | " \n", 86 | " Bokeh.$(\"#456b555c-019c-4921-a674-b4edfe002aaf\").text(\"BokehJS successfully loaded\");\n", 87 | " var kernel = Jupyter.notebook.kernel\n", 88 | " if (kernel.execute !== undefined) {\n", 89 | " kernel.execute(\"import bokeh.io; bokeh.io._nb_loaded = True\");\n", 90 | " }\n", 91 | " },\n", 92 | " function(Bokeh) {\n", 93 | " console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-0.12.1.min.css\");\n", 94 | " Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-0.12.1.min.css\");\n", 95 | " console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.1.min.css\");\n", 96 | " Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.1.min.css\");\n", 97 | " }\n", 98 | " ];\n", 99 | "\n", 100 | " function run_inline_js() {\n", 101 | " for (var i = 0; i < inline_js.length; i++) {\n", 102 | " inline_js[i](window.Bokeh);\n", 103 | " }\n", 104 | " }\n", 105 | "\n", 106 | " if (window._bokeh_is_loading === 0) {\n", 107 | " console.log(\"Bokeh: BokehJS loaded, going straight to plotting\");\n", 108 | " run_inline_js();\n", 109 | " } else {\n", 110 | " load_libs(js_urls, function() {\n", 111 | " console.log(\"Bokeh: BokehJS plotting callback run at\", now());\n", 112 | " run_inline_js();\n", 113 | " });\n", 114 | " }\n", 115 | "}(this));" 116 | ] 117 | }, 118 | "metadata": {}, 119 | "output_type": "display_data" 120 | } 121 | ], 122 | "source": [ 123 | "from bokeh.plotting import figure, output_notebook, show\n", 124 | "\n", 125 | "# output to static HTML file\n", 126 | "output_notebook()" 127 | ] 128 | }, 129 | { 130 | "cell_type": "code", 131 | "execution_count": 2, 132 | "metadata": { 133 | "collapsed": false 134 | }, 135 | "outputs": [ 136 | { 137 | "data": { 138 | "text/html": [ 139 | "\n", 140 | "\n", 141 | "
\n", 142 | "
\n", 143 | "
\n", 144 | "" 232 | ] 233 | }, 234 | "metadata": {}, 235 | "output_type": "display_data" 236 | }, 237 | { 238 | "data": { 239 | "text/html": [ 240 | "

<Bokeh Notebook handle for In[2]>

" 241 | ], 242 | "text/plain": [ 243 | "" 244 | ] 245 | }, 246 | "execution_count": 2, 247 | "metadata": {}, 248 | "output_type": "execute_result" 249 | } 250 | ], 251 | "source": [ 252 | "# prepare some data\n", 253 | "x = [0.1, 0.5, 1.0, 1.5, 2.0, 2.5, 3.0]\n", 254 | "y0 = [i**2 for i in x]\n", 255 | "y1 = [10**i for i in x]\n", 256 | "y2 = [10**(i**2) for i in x]\n", 257 | "\n", 258 | "# create a new plot\n", 259 | "p = figure(\n", 260 | " tools=\"pan,box_zoom,reset,save\",\n", 261 | " y_axis_type=\"log\", y_range=[0.001, 10**11], title=\"log axis example\",\n", 262 | " x_axis_label='sections', y_axis_label='particles'\n", 263 | ")\n", 264 | "\n", 265 | "# add some renderers\n", 266 | "p.line(x, x, legend=\"y=x\")\n", 267 | "p.circle(x, x, legend=\"y=x\", fill_color=\"white\", size=8)\n", 268 | "p.line(x, y0, legend=\"y=x^2\", line_width=3)\n", 269 | "p.line(x, y1, legend=\"y=10^x\", line_color=\"red\")\n", 270 | "p.circle(x, y1, legend=\"y=10^x\", fill_color=\"red\", line_color=\"red\", size=6)\n", 271 | "p.line(x, y2, legend=\"y=10^x^2\", line_color=\"orange\", line_dash=\"4 4\")\n", 272 | "\n", 273 | "# show the results\n", 274 | "show(p)" 275 | ] 276 | }, 277 | { 278 | "cell_type": "code", 279 | "execution_count": null, 280 | "metadata": { 281 | "collapsed": true 282 | }, 283 | "outputs": [], 284 | "source": [] 285 | } 286 | ], 287 | "metadata": { 288 | "kernelspec": { 289 | "display_name": "Python 2", 290 | "language": "python", 291 | "name": "python2" 292 | }, 293 | "language_info": { 294 | "codemirror_mode": { 295 | "name": "ipython", 296 | "version": 2 297 | }, 298 | "file_extension": ".py", 299 | "mimetype": "text/x-python", 300 | "name": "python", 301 | "nbconvert_exporter": "python", 302 | "pygments_lexer": "ipython2", 303 | "version": "2.7.11" 304 | } 305 | }, 306 | "nbformat": 4, 307 | "nbformat_minor": 0 308 | } 309 | -------------------------------------------------------------------------------- /jupyter/.ipynb_checkpoints/QS-GS2-checkpoint.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "code", 5 | "execution_count": 1, 6 | "metadata": { 7 | "collapsed": false 8 | }, 9 | "outputs": [ 10 | { 11 | "data": { 12 | "text/html": [ 13 | "\n", 14 | "
\n", 15 | " \n", 16 | " Loading BokehJS ...\n", 17 | "
" 18 | ] 19 | }, 20 | "metadata": {}, 21 | "output_type": "display_data" 22 | }, 23 | { 24 | "data": { 25 | "application/javascript": [ 26 | "\n", 27 | "(function(global) {\n", 28 | " function now() {\n", 29 | " return new Date();\n", 30 | " }\n", 31 | "\n", 32 | " var force = \"1\";\n", 33 | "\n", 34 | " if (typeof (window._bokeh_onload_callbacks) === \"undefined\" || force !== \"\") {\n", 35 | " window._bokeh_onload_callbacks = [];\n", 36 | " window._bokeh_is_loading = undefined;\n", 37 | " }\n", 38 | "\n", 39 | " function run_callbacks() {\n", 40 | " window._bokeh_onload_callbacks.forEach(function(callback) { callback() });\n", 41 | " delete window._bokeh_onload_callbacks\n", 42 | " console.info(\"Bokeh: all callbacks have finished\");\n", 43 | " }\n", 44 | "\n", 45 | " function load_libs(js_urls, callback) {\n", 46 | " window._bokeh_onload_callbacks.push(callback);\n", 47 | " if (window._bokeh_is_loading > 0) {\n", 48 | " console.log(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n", 49 | " return null;\n", 50 | " }\n", 51 | " if (js_urls == null || js_urls.length === 0) {\n", 52 | " run_callbacks();\n", 53 | " return null;\n", 54 | " }\n", 55 | " console.log(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n", 56 | " window._bokeh_is_loading = js_urls.length;\n", 57 | " for (var i = 0; i < js_urls.length; i++) {\n", 58 | " var url = js_urls[i];\n", 59 | " var s = document.createElement('script');\n", 60 | " s.src = url;\n", 61 | " s.async = false;\n", 62 | " s.onreadystatechange = s.onload = function() {\n", 63 | " window._bokeh_is_loading--;\n", 64 | " if (window._bokeh_is_loading === 0) {\n", 65 | " console.log(\"Bokeh: all BokehJS libraries loaded\");\n", 66 | " run_callbacks()\n", 67 | " }\n", 68 | " };\n", 69 | " s.onerror = function() {\n", 70 | " console.warn(\"failed to load library \" + url);\n", 71 | " };\n", 72 | " console.log(\"Bokeh: injecting script tag for BokehJS library: \", url);\n", 73 | " document.getElementsByTagName(\"head\")[0].appendChild(s);\n", 74 | " }\n", 75 | " };\n", 76 | "\n", 77 | " var js_urls = ['https://cdn.pydata.org/bokeh/release/bokeh-0.12.1.min.js', 'https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.1.min.js', 'https://cdn.pydata.org/bokeh/release/bokeh-compiler-0.12.1.min.js'];\n", 78 | "\n", 79 | " var inline_js = [\n", 80 | " function(Bokeh) {\n", 81 | " Bokeh.set_log_level(\"info\");\n", 82 | " },\n", 83 | " \n", 84 | " function(Bokeh) {\n", 85 | " \n", 86 | " Bokeh.$(\"#456b555c-019c-4921-a674-b4edfe002aaf\").text(\"BokehJS successfully loaded\");\n", 87 | " var kernel = Jupyter.notebook.kernel\n", 88 | " if (kernel.execute !== undefined) {\n", 89 | " kernel.execute(\"import bokeh.io; bokeh.io._nb_loaded = True\");\n", 90 | " }\n", 91 | " },\n", 92 | " function(Bokeh) {\n", 93 | " console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-0.12.1.min.css\");\n", 94 | " Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-0.12.1.min.css\");\n", 95 | " console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.1.min.css\");\n", 96 | " Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.1.min.css\");\n", 97 | " }\n", 98 | " ];\n", 99 | "\n", 100 | " function run_inline_js() {\n", 101 | " for (var i = 0; i < inline_js.length; i++) {\n", 102 | " inline_js[i](window.Bokeh);\n", 103 | " }\n", 104 | " }\n", 105 | "\n", 106 | " if (window._bokeh_is_loading === 0) {\n", 107 | " console.log(\"Bokeh: BokehJS loaded, going straight to plotting\");\n", 108 | " run_inline_js();\n", 109 | " } else {\n", 110 | " load_libs(js_urls, function() {\n", 111 | " console.log(\"Bokeh: BokehJS plotting callback run at\", now());\n", 112 | " run_inline_js();\n", 113 | " });\n", 114 | " }\n", 115 | "}(this));" 116 | ] 117 | }, 118 | "metadata": {}, 119 | "output_type": "display_data" 120 | } 121 | ], 122 | "source": [ 123 | "from bokeh.plotting import figure, output_notebook, show\n", 124 | "\n", 125 | "# output to static HTML file\n", 126 | "output_notebook()" 127 | ] 128 | }, 129 | { 130 | "cell_type": "code", 131 | "execution_count": 2, 132 | "metadata": { 133 | "collapsed": false 134 | }, 135 | "outputs": [ 136 | { 137 | "data": { 138 | "text/html": [ 139 | "\n", 140 | "\n", 141 | "
\n", 142 | "
\n", 143 | "
\n", 144 | "" 232 | ] 233 | }, 234 | "metadata": {}, 235 | "output_type": "display_data" 236 | }, 237 | { 238 | "data": { 239 | "text/html": [ 240 | "

<Bokeh Notebook handle for In[2]>

" 241 | ], 242 | "text/plain": [ 243 | "" 244 | ] 245 | }, 246 | "execution_count": 2, 247 | "metadata": {}, 248 | "output_type": "execute_result" 249 | } 250 | ], 251 | "source": [ 252 | "# prepare some data\n", 253 | "x = [0.1, 0.5, 1.0, 1.5, 2.0, 2.5, 3.0]\n", 254 | "y0 = [i**2 for i in x]\n", 255 | "y1 = [10**i for i in x]\n", 256 | "y2 = [10**(i**2) for i in x]\n", 257 | "\n", 258 | "# create a new plot\n", 259 | "p = figure(\n", 260 | " tools=\"pan,box_zoom,reset,save\",\n", 261 | " y_axis_type=\"log\", y_range=[0.001, 10**11], title=\"log axis example\",\n", 262 | " x_axis_label='sections', y_axis_label='particles'\n", 263 | ")\n", 264 | "\n", 265 | "# add some renderers\n", 266 | "p.line(x, x, legend=\"y=x\")\n", 267 | "p.circle(x, x, legend=\"y=x\", fill_color=\"white\", size=8)\n", 268 | "p.line(x, y0, legend=\"y=x^2\", line_width=3)\n", 269 | "p.line(x, y1, legend=\"y=10^x\", line_color=\"red\")\n", 270 | "p.circle(x, y1, legend=\"y=10^x\", fill_color=\"red\", line_color=\"red\", size=6)\n", 271 | "p.line(x, y2, legend=\"y=10^x^2\", line_color=\"orange\", line_dash=\"4 4\")\n", 272 | "\n", 273 | "# show the results\n", 274 | "show(p)" 275 | ] 276 | }, 277 | { 278 | "cell_type": "code", 279 | "execution_count": null, 280 | "metadata": { 281 | "collapsed": true 282 | }, 283 | "outputs": [], 284 | "source": [] 285 | } 286 | ], 287 | "metadata": { 288 | "kernelspec": { 289 | "display_name": "Python 2", 290 | "language": "python", 291 | "name": "python2" 292 | }, 293 | "language_info": { 294 | "codemirror_mode": { 295 | "name": "ipython", 296 | "version": 2 297 | }, 298 | "file_extension": ".py", 299 | "mimetype": "text/x-python", 300 | "name": "python", 301 | "nbconvert_exporter": "python", 302 | "pygments_lexer": "ipython2", 303 | "version": "2.7.11" 304 | } 305 | }, 306 | "nbformat": 4, 307 | "nbformat_minor": 0 308 | } 309 | -------------------------------------------------------------------------------- /jupyter/QS-ME-LPB1.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "code", 5 | "execution_count": 2, 6 | "metadata": { 7 | "collapsed": false 8 | }, 9 | "outputs": [ 10 | { 11 | "data": { 12 | "text/html": [ 13 | "\n", 14 | "
\n", 15 | " \n", 16 | " Loading BokehJS ...\n", 17 | "
" 18 | ] 19 | }, 20 | "metadata": {}, 21 | "output_type": "display_data" 22 | }, 23 | { 24 | "data": { 25 | "application/javascript": [ 26 | "\n", 27 | "(function(global) {\n", 28 | " function now() {\n", 29 | " return new Date();\n", 30 | " }\n", 31 | "\n", 32 | " var force = \"1\";\n", 33 | "\n", 34 | " if (typeof (window._bokeh_onload_callbacks) === \"undefined\" || force !== \"\") {\n", 35 | " window._bokeh_onload_callbacks = [];\n", 36 | " window._bokeh_is_loading = undefined;\n", 37 | " }\n", 38 | "\n", 39 | " function run_callbacks() {\n", 40 | " window._bokeh_onload_callbacks.forEach(function(callback) { callback() });\n", 41 | " delete window._bokeh_onload_callbacks\n", 42 | " console.info(\"Bokeh: all callbacks have finished\");\n", 43 | " }\n", 44 | "\n", 45 | " function load_libs(js_urls, callback) {\n", 46 | " window._bokeh_onload_callbacks.push(callback);\n", 47 | " if (window._bokeh_is_loading > 0) {\n", 48 | " console.log(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n", 49 | " return null;\n", 50 | " }\n", 51 | " if (js_urls == null || js_urls.length === 0) {\n", 52 | " run_callbacks();\n", 53 | " return null;\n", 54 | " }\n", 55 | " console.log(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n", 56 | " window._bokeh_is_loading = js_urls.length;\n", 57 | " for (var i = 0; i < js_urls.length; i++) {\n", 58 | " var url = js_urls[i];\n", 59 | " var s = document.createElement('script');\n", 60 | " s.src = url;\n", 61 | " s.async = false;\n", 62 | " s.onreadystatechange = s.onload = function() {\n", 63 | " window._bokeh_is_loading--;\n", 64 | " if (window._bokeh_is_loading === 0) {\n", 65 | " console.log(\"Bokeh: all BokehJS libraries loaded\");\n", 66 | " run_callbacks()\n", 67 | " }\n", 68 | " };\n", 69 | " s.onerror = function() {\n", 70 | " console.warn(\"failed to load library \" + url);\n", 71 | " };\n", 72 | " console.log(\"Bokeh: injecting script tag for BokehJS library: \", url);\n", 73 | " document.getElementsByTagName(\"head\")[0].appendChild(s);\n", 74 | " }\n", 75 | " };\n", 76 | "\n", 77 | " var js_urls = ['https://cdn.pydata.org/bokeh/release/bokeh-0.12.1.min.js', 'https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.1.min.js', 'https://cdn.pydata.org/bokeh/release/bokeh-compiler-0.12.1.min.js'];\n", 78 | "\n", 79 | " var inline_js = [\n", 80 | " function(Bokeh) {\n", 81 | " Bokeh.set_log_level(\"info\");\n", 82 | " },\n", 83 | " \n", 84 | " function(Bokeh) {\n", 85 | " \n", 86 | " Bokeh.$(\"#301998ae-1c19-48c5-92a9-7ca6df965aca\").text(\"BokehJS successfully loaded\");\n", 87 | " var kernel = Jupyter.notebook.kernel\n", 88 | " if (kernel.execute !== undefined) {\n", 89 | " kernel.execute(\"import bokeh.io; bokeh.io._nb_loaded = True\");\n", 90 | " }\n", 91 | " },\n", 92 | " function(Bokeh) {\n", 93 | " console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-0.12.1.min.css\");\n", 94 | " Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-0.12.1.min.css\");\n", 95 | " console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.1.min.css\");\n", 96 | " Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.1.min.css\");\n", 97 | " }\n", 98 | " ];\n", 99 | "\n", 100 | " function run_inline_js() {\n", 101 | " for (var i = 0; i < inline_js.length; i++) {\n", 102 | " inline_js[i](window.Bokeh);\n", 103 | " }\n", 104 | " }\n", 105 | "\n", 106 | " if (window._bokeh_is_loading === 0) {\n", 107 | " console.log(\"Bokeh: BokehJS loaded, going straight to plotting\");\n", 108 | " run_inline_js();\n", 109 | " } else {\n", 110 | " load_libs(js_urls, function() {\n", 111 | " console.log(\"Bokeh: BokehJS plotting callback run at\", now());\n", 112 | " run_inline_js();\n", 113 | " });\n", 114 | " }\n", 115 | "}(this));" 116 | ] 117 | }, 118 | "metadata": {}, 119 | "output_type": "display_data" 120 | } 121 | ], 122 | "source": [ 123 | "import numpy as np\n", 124 | "\n", 125 | "from bokeh.layouts import gridplot\n", 126 | "from bokeh.plotting import figure, output_notebook, show\n", 127 | "\n", 128 | "# output to static HTML file\n", 129 | "output_notebook()" 130 | ] 131 | }, 132 | { 133 | "cell_type": "code", 134 | "execution_count": 3, 135 | "metadata": { 136 | "collapsed": false 137 | }, 138 | "outputs": [ 139 | { 140 | "data": { 141 | "text/html": [ 142 | "\n", 143 | "\n", 144 | "
\n", 145 | "
\n", 146 | "
\n", 147 | "" 235 | ] 236 | }, 237 | "metadata": {}, 238 | "output_type": "display_data" 239 | }, 240 | { 241 | "data": { 242 | "text/html": [ 243 | "

<Bokeh Notebook handle for In[3]>

" 244 | ], 245 | "text/plain": [ 246 | "" 247 | ] 248 | }, 249 | "execution_count": 3, 250 | "metadata": {}, 251 | "output_type": "execute_result" 252 | } 253 | ], 254 | "source": [ 255 | "# prepare some data\n", 256 | "N = 100\n", 257 | "x = np.linspace(0, 4*np.pi, N)\n", 258 | "y0 = np.sin(x)\n", 259 | "y1 = np.cos(x)\n", 260 | "y2 = np.sin(x) + np.cos(x)\n", 261 | "\n", 262 | "# create a new plot\n", 263 | "s1 = figure(width=250, plot_height=250, title=None)\n", 264 | "s1.circle(x, y0, size=10, color=\"navy\", alpha=0.5)\n", 265 | "\n", 266 | "# NEW: create a new plot and share both ranges\n", 267 | "s2 = figure(width=250, height=250, x_range=s1.x_range, y_range=s1.y_range, title=None)\n", 268 | "s2.triangle(x, y1, size=10, color=\"firebrick\", alpha=0.5)\n", 269 | "\n", 270 | "# NEW: create a new plot and share only one range\n", 271 | "s3 = figure(width=250, height=250, x_range=s1.x_range, title=None)\n", 272 | "s3.square(x, y2, size=10, color=\"olive\", alpha=0.5)\n", 273 | "\n", 274 | "# NEW: put the subplots in a gridplot\n", 275 | "p = gridplot([[s1, s2, s3]], toolbar_location=None)\n", 276 | "\n", 277 | "# show the results\n", 278 | "show(p)" 279 | ] 280 | }, 281 | { 282 | "cell_type": "code", 283 | "execution_count": null, 284 | "metadata": { 285 | "collapsed": true 286 | }, 287 | "outputs": [], 288 | "source": [] 289 | } 290 | ], 291 | "metadata": { 292 | "kernelspec": { 293 | "display_name": "Python 2", 294 | "language": "python", 295 | "name": "python2" 296 | }, 297 | "language_info": { 298 | "codemirror_mode": { 299 | "name": "ipython", 300 | "version": 2 301 | }, 302 | "file_extension": ".py", 303 | "mimetype": "text/x-python", 304 | "name": "python", 305 | "nbconvert_exporter": "python", 306 | "pygments_lexer": "ipython2", 307 | "version": "2.7.11" 308 | } 309 | }, 310 | "nbformat": 4, 311 | "nbformat_minor": 0 312 | } 313 | -------------------------------------------------------------------------------- /jupyter/.ipynb_checkpoints/QS-ME-LPB1-checkpoint.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "code", 5 | "execution_count": 2, 6 | "metadata": { 7 | "collapsed": false 8 | }, 9 | "outputs": [ 10 | { 11 | "data": { 12 | "text/html": [ 13 | "\n", 14 | "
\n", 15 | " \n", 16 | " Loading BokehJS ...\n", 17 | "
" 18 | ] 19 | }, 20 | "metadata": {}, 21 | "output_type": "display_data" 22 | }, 23 | { 24 | "data": { 25 | "application/javascript": [ 26 | "\n", 27 | "(function(global) {\n", 28 | " function now() {\n", 29 | " return new Date();\n", 30 | " }\n", 31 | "\n", 32 | " var force = \"1\";\n", 33 | "\n", 34 | " if (typeof (window._bokeh_onload_callbacks) === \"undefined\" || force !== \"\") {\n", 35 | " window._bokeh_onload_callbacks = [];\n", 36 | " window._bokeh_is_loading = undefined;\n", 37 | " }\n", 38 | "\n", 39 | " function run_callbacks() {\n", 40 | " window._bokeh_onload_callbacks.forEach(function(callback) { callback() });\n", 41 | " delete window._bokeh_onload_callbacks\n", 42 | " console.info(\"Bokeh: all callbacks have finished\");\n", 43 | " }\n", 44 | "\n", 45 | " function load_libs(js_urls, callback) {\n", 46 | " window._bokeh_onload_callbacks.push(callback);\n", 47 | " if (window._bokeh_is_loading > 0) {\n", 48 | " console.log(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n", 49 | " return null;\n", 50 | " }\n", 51 | " if (js_urls == null || js_urls.length === 0) {\n", 52 | " run_callbacks();\n", 53 | " return null;\n", 54 | " }\n", 55 | " console.log(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n", 56 | " window._bokeh_is_loading = js_urls.length;\n", 57 | " for (var i = 0; i < js_urls.length; i++) {\n", 58 | " var url = js_urls[i];\n", 59 | " var s = document.createElement('script');\n", 60 | " s.src = url;\n", 61 | " s.async = false;\n", 62 | " s.onreadystatechange = s.onload = function() {\n", 63 | " window._bokeh_is_loading--;\n", 64 | " if (window._bokeh_is_loading === 0) {\n", 65 | " console.log(\"Bokeh: all BokehJS libraries loaded\");\n", 66 | " run_callbacks()\n", 67 | " }\n", 68 | " };\n", 69 | " s.onerror = function() {\n", 70 | " console.warn(\"failed to load library \" + url);\n", 71 | " };\n", 72 | " console.log(\"Bokeh: injecting script tag for BokehJS library: \", url);\n", 73 | " document.getElementsByTagName(\"head\")[0].appendChild(s);\n", 74 | " }\n", 75 | " };\n", 76 | "\n", 77 | " var js_urls = ['https://cdn.pydata.org/bokeh/release/bokeh-0.12.1.min.js', 'https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.1.min.js', 'https://cdn.pydata.org/bokeh/release/bokeh-compiler-0.12.1.min.js'];\n", 78 | "\n", 79 | " var inline_js = [\n", 80 | " function(Bokeh) {\n", 81 | " Bokeh.set_log_level(\"info\");\n", 82 | " },\n", 83 | " \n", 84 | " function(Bokeh) {\n", 85 | " \n", 86 | " Bokeh.$(\"#301998ae-1c19-48c5-92a9-7ca6df965aca\").text(\"BokehJS successfully loaded\");\n", 87 | " var kernel = Jupyter.notebook.kernel\n", 88 | " if (kernel.execute !== undefined) {\n", 89 | " kernel.execute(\"import bokeh.io; bokeh.io._nb_loaded = True\");\n", 90 | " }\n", 91 | " },\n", 92 | " function(Bokeh) {\n", 93 | " console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-0.12.1.min.css\");\n", 94 | " Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-0.12.1.min.css\");\n", 95 | " console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.1.min.css\");\n", 96 | " Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.1.min.css\");\n", 97 | " }\n", 98 | " ];\n", 99 | "\n", 100 | " function run_inline_js() {\n", 101 | " for (var i = 0; i < inline_js.length; i++) {\n", 102 | " inline_js[i](window.Bokeh);\n", 103 | " }\n", 104 | " }\n", 105 | "\n", 106 | " if (window._bokeh_is_loading === 0) {\n", 107 | " console.log(\"Bokeh: BokehJS loaded, going straight to plotting\");\n", 108 | " run_inline_js();\n", 109 | " } else {\n", 110 | " load_libs(js_urls, function() {\n", 111 | " console.log(\"Bokeh: BokehJS plotting callback run at\", now());\n", 112 | " run_inline_js();\n", 113 | " });\n", 114 | " }\n", 115 | "}(this));" 116 | ] 117 | }, 118 | "metadata": {}, 119 | "output_type": "display_data" 120 | } 121 | ], 122 | "source": [ 123 | "import numpy as np\n", 124 | "\n", 125 | "from bokeh.layouts import gridplot\n", 126 | "from bokeh.plotting import figure, output_notebook, show\n", 127 | "\n", 128 | "# output to static HTML file\n", 129 | "output_notebook()" 130 | ] 131 | }, 132 | { 133 | "cell_type": "code", 134 | "execution_count": 3, 135 | "metadata": { 136 | "collapsed": false 137 | }, 138 | "outputs": [ 139 | { 140 | "data": { 141 | "text/html": [ 142 | "\n", 143 | "\n", 144 | "
\n", 145 | "
\n", 146 | "
\n", 147 | "" 235 | ] 236 | }, 237 | "metadata": {}, 238 | "output_type": "display_data" 239 | }, 240 | { 241 | "data": { 242 | "text/html": [ 243 | "

<Bokeh Notebook handle for In[3]>

" 244 | ], 245 | "text/plain": [ 246 | "" 247 | ] 248 | }, 249 | "execution_count": 3, 250 | "metadata": {}, 251 | "output_type": "execute_result" 252 | } 253 | ], 254 | "source": [ 255 | "# prepare some data\n", 256 | "N = 100\n", 257 | "x = np.linspace(0, 4*np.pi, N)\n", 258 | "y0 = np.sin(x)\n", 259 | "y1 = np.cos(x)\n", 260 | "y2 = np.sin(x) + np.cos(x)\n", 261 | "\n", 262 | "# create a new plot\n", 263 | "s1 = figure(width=250, plot_height=250, title=None)\n", 264 | "s1.circle(x, y0, size=10, color=\"navy\", alpha=0.5)\n", 265 | "\n", 266 | "# NEW: create a new plot and share both ranges\n", 267 | "s2 = figure(width=250, height=250, x_range=s1.x_range, y_range=s1.y_range, title=None)\n", 268 | "s2.triangle(x, y1, size=10, color=\"firebrick\", alpha=0.5)\n", 269 | "\n", 270 | "# NEW: create a new plot and share only one range\n", 271 | "s3 = figure(width=250, height=250, x_range=s1.x_range, title=None)\n", 272 | "s3.square(x, y2, size=10, color=\"olive\", alpha=0.5)\n", 273 | "\n", 274 | "# NEW: put the subplots in a gridplot\n", 275 | "p = gridplot([[s1, s2, s3]], toolbar_location=None)\n", 276 | "\n", 277 | "# show the results\n", 278 | "show(p)" 279 | ] 280 | }, 281 | { 282 | "cell_type": "code", 283 | "execution_count": null, 284 | "metadata": { 285 | "collapsed": true 286 | }, 287 | "outputs": [], 288 | "source": [] 289 | } 290 | ], 291 | "metadata": { 292 | "kernelspec": { 293 | "display_name": "Python 2", 294 | "language": "python", 295 | "name": "python2" 296 | }, 297 | "language_info": { 298 | "codemirror_mode": { 299 | "name": "ipython", 300 | "version": 2 301 | }, 302 | "file_extension": ".py", 303 | "mimetype": "text/x-python", 304 | "name": "python", 305 | "nbconvert_exporter": "python", 306 | "pygments_lexer": "ipython2", 307 | "version": "2.7.11" 308 | } 309 | }, 310 | "nbformat": 4, 311 | "nbformat_minor": 0 312 | } 313 | --------------------------------------------------------------------------------