学习笔记之Bokeh

Welcome to Bokeh — Bokeh 0.12.16 documentation

https://bokeh.pydata.org/en/latest/
Bokeh is an interactive visualization library that targets modern web browsers for presentation. Its goal is to provide elegant, concise construction of versatile graphics, and to extend this capability with high-performance interactivity over very large or streaming datasets.
Bokeh can help anyone who would like to quickly and easily create interactive plots, dashboards, and data applications.
To install / upgrade / verify installation, see https://bokeh.pydata.org/en/latest/docs/installation.html .
To get started using Bokeh to make your visualizations, see the User Guide.
- Quickstart — Bokeh 0.12.16 documentation
  - https://bokeh.pydata.org/en/latest/docs/user_guide/quickstart.html#userguide-quickstart
To see examples of how you might use Bokeh with your own data, check out the Gallery.
A complete API reference of Bokeh is at Reference Guide.
Bokeh Tutorial
- https://hub.mybinder.org/user/bokeh-bokeh-notebooks-ry6sbisy/notebooks/tutorial/00%20-%20Introduction%20and%20Setup.ipynb
- Bokeh is an interactive visualization library that targets modern web browsers for presentation. It is good for:
  - Interactive visualization in modern browsers
  - Standalone HTML documents, or server-backed apps
  - Expressive and versatile graphics
  - Large, dynamic or streaming data
  - Easy usage from python (or Scala, or R, or...)
- And most importantly:
  - NO JAVASCRIPT REQUIRED
- The goal of Bokeh is to provide elegant, concise construction of novel graphics in the style of D3.js, from the comfort of high level languages such as Python, and to extend this capability with high-performance interactivity over very large or streaming datasets. Bokeh can help anyone who would like to quickly and easily create interactive plots, dashboards, and data applications.

bokeh/bokeh: Interactive Web Plotting for Python

https://github.com/bokeh/bokeh
Interactive Web Plotting for Python http://bokeh.pydata.org/en/latest/
Bokeh is an interactive visualization library for Python that enables beautiful and meaningful visual presentation of data in modern web browsers. With Bokeh, you can quickly and easily create interactive plots, dashboards, and data applications.
Bokeh provides an elegant and concise way to construct versatile graphics while delivering high-performance interactivity for large or streamed datasets.

学习笔记之Bokeh Data Visualization | DataCamp - Pegasus923 - 博客园

https://www.cnblogs.com/pegasus923/p/9406705.html

Bokeh 可视化（项目实战经验分享）- Python爱好者社区

https://mp.weixin.qq.com/s/q1QAr_H0ZGKIs_Tz0nxJSA

美观实用！Star 过万，用 Python 做交互式图形的这款工具火了！

https://mp.weixin.qq.com/s/kDpZszgLJhmfp5SbJmeJrg

How to plot bar with strings as x coordinate ?

Plotting with Basic Glyphs — Bokeh 1.0.4 documentation
- https://bokeh.pydata.org/en/latest/docs/user_guide/plotting.html#bars
bokeh.plotting — Bokeh 1.0.4 documentation
- https://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.vbar
Handling Categorical Data — Bokeh 1.0.4 documentation
- https://bokeh.pydata.org/en/latest/docs/user_guide/categorical.html#bars
- To inform Bokeh that the x-axis is categorical, we pass this list of factors as the x_range argument to :fund:~bokeh.plotting.figure.figure:
- p = figure(x_range=fruits, ... )

How to plot bar in group ?

Handling Categorical Data — Bokeh 1.0.4 documentation
- https://bokeh.pydata.org/en/latest/docs/user_guide/categorical.html#grouped
- When creating bar charts, it is often desirable to visually display the data according to sub-groups. There are two basic methods that can be used, depending on your use case: using nested categorical coordinates, or applying vidual dodges.

How to plot line with dash ?

line_dash='dashed'
bokeh.plotting — Bokeh 1.0.4 documentation
- https://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.line
- line_dash (DashPattern) –
- The line dash values for the line.
- (default: [])
bokeh.core.properties — Bokeh 1.0.4 documentation
- https://bokeh.pydata.org/en/latest/docs/reference/core/properties.html#bokeh.core.properties.DashPattern
- Accept line dash specifications.
- Express patterns that describe line dashes. DashPattern values can be specified in a variety of ways:
  - An enum: “solid”, “dashed”, “dotted”, “dotdash”, “dashdot”
  - a tuple or list of integers in the HTML5 Canvas dash specification style. Note that if the list of integers has an odd number of elements, then it is duplicated, and that duplicated list becomes the new dash list.
- To indicate that dashing is turned off (solid lines), specify the empty list [].

How to plot segment ?

Plotting with Basic Glyphs — Bokeh 0.12.16 documentation
- https://bokeh.pydata.org/en/latest/docs/user_guide/plotting.html#segments-and-rays

How to plot step line ?

Plotting with Basic Glyphs — Bokeh 1.0.4 documentation
- https://bokeh.pydata.org/en/latest/docs/user_guide/plotting.html#step-lines
- For some kinds of data, it may be more appropriate to draw discrete steps between data points, instead of connecting points with linear segments. The step() glyph method can be used to accomplish this:
bokeh.plotting — Bokeh 1.0.4 documentation
- https://bokeh.pydata.org/en/latest/docs/reference/plotting.html#bokeh.plotting.figure.Figure.step

How to plot a panel widget with navigation tabs ?

bokeh.models.widgets.panels — Bokeh 0.12.16 documentation
- https://bokeh.pydata.org/en/latest/docs/reference/models/widgets.panels.html#bokeh.models.widgets.panels.Tabs

How to plot data table ?

interaction_data_table.py — Bokeh 1.0.4 documentation
- https://bokeh.pydata.org/en/latest/docs/user_guide/examples/interaction_data_table.html
Export CSV
- https://demo.bokeh.org/export_csv
- https://github.com/bokeh/bokeh/tree/master/examples/app/export_csv
- This demo uses a CustomJS callback to export DataTable contents to CSV.

How to plot with datetime axes ?

Plotting with Basic Glyphs — Bokeh 0.12.16 documentation
- http://bokeh.pydata.org/en/latest/docs/user_guide/plotting.html#datetime-axes
pandas.to_datetime — pandas 0.23.0 documentation
- http://pandas.pydata.org/pandas-docs/stable/generated/pandas.to_datetime.html?highlight=to_datetime#pandas.to_datetime

How to hide xaxis / xgrid lines / lines ?

Styling Visual Attributes — Bokeh 0.12.16 documentation
- https://bokeh.pydata.org/en/latest/docs/user_guide/styling.html#visible-property

How to set axix ticker ?

Styling Visual Attributes — Bokeh 0.12.16 documentation
- https://bokeh.pydata.org/en/latest/docs/user_guide/styling.html#fixedticker
bokeh.models.axes — Bokeh 0.12.16 documentation
- https://bokeh.pydata.org/en/latest/docs/reference/models/axes.html#bokeh.models.axes.Axis.ticker

How to add multiple axes ?

Plotting with Basic Glyphs — Bokeh 0.12.16 documentation
- https://bokeh.pydata.org/en/latest/docs/user_guide/plotting.html#twin-axes
bokeh.models.plots — Bokeh 0.12.16 documentation
- https://bokeh.pydata.org/en/latest/docs/reference/models/plots.html#bokeh.models.plots.Plot.add_layout
- https://bokeh.pydata.org/en/latest/docs/reference/models/plots.html#bokeh.models.plots.Plot.extra_y_ranges
bokeh.models.axes — Bokeh 0.12.16 documentation
- https://bokeh.pydata.org/en/latest/docs/reference/models/axes.html#bokeh.models.axes.LinearAxis
Bokeh add label to second axis on the right - Stack Overflow
- https://stackoverflow.com/questions/29267141/bokeh-add-label-to-second-axis-on-the-right

How to set legend location ?

Styling Visual Attributes — Bokeh 0.12.16 documentation
- https://bokeh.pydata.org/en/latest/docs/user_guide/styling.html#location

How to hide / mute glyphs by clicking on legend entries ?

Interactive Legends — Bokeh 0.13.0 documentation
- https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/legends.html

How to change title property?

bokeh.models.annotations — Bokeh 1.0.0 documentation
- https://bokeh.pydata.org/en/latest/docs/reference/models/annotations.html#bokeh.models.annotations.Title

How to make the figure fit to window ?

sizing_mode='scale_width'
bokeh.plotting — Bokeh 0.12.16 documentation
- https://bokeh.pydata.org/en/latest/docs/reference/plotting.html
bokeh.models.layouts — Bokeh 0.12.16 documentation
- https://bokeh.pydata.org/en/latest/docs/reference/models/layouts.html#bokeh.models.layouts.Column
- https://bokeh.pydata.org/en/latest/docs/reference/models/layouts.html#bokeh.models.layouts.LayoutDOM
  - attr sizing_mode
    - property type: Enum ( SizingMode )
    - How the item being displayed should size itself. Possible values are "fixed", "scale_width", "scale_height", "scale_both", and "stretch_both".
    - "stretch_both" elements are completely responsive (independently in width and height) and will resize to occupy all available space, even if this changes the aspect ratio of the element. This is sometimes called outside-in, and is a typical behavior for desktop applications.
    - "fixed" elements are not responsive. They will retain their original width and height regardless of any subsequent browser window resize events.
    - "scale_width" elements will responsively resize to fit to the width available, while maintaining the original aspect ratio. This is a typical behavior for modern websites. For a Plot, the aspect ratio plot_width/plot_height is maintained.
    - "scale_height" elements will responsively resize to fit to the height available, while maintaining the original aspect ratio. For a Plot, the aspect ratio plot_width/plot_height is maintained. A plot with "scale_height" mode needs to be wrapped in a Row or Column to be responsive.
    - "scale_both" elements will responsively resize to for both the width and height available, while maintaining the original aspect ratio.
bokeh.models.widgets.panels — Bokeh 0.12.16 documentation
- https://bokeh.pydata.org/en/latest/docs/reference/models/widgets.panels.html#bokeh.models.widgets.panels.Panel

How to plot with different colors ?

Handling Categorical Data — Bokeh 1.0.4 documentation
- https://bokeh.pydata.org/en/latest/docs/user_guide/categorical.html#colors
- Often times we may want to have bars that are shaded some color. This can be accomplished in different ways. One way is to supply all the colors up front. This can be done by putting all the data, including the colors for each bar, in a ColumnDataSource. Then the name of the column containing the colors is passed to figure as the color (or line_color/fill_color) arguments.
- Another way to shade the bars is to use a CategoricalColorMapper that colormaps the bars inside the browser. There is a function factor_cmap() that makes this simple to do.
Styling Visual Attributes — Bokeh 0.12.16 documentation
- http://bokeh.pydata.org/en/latest/docs/user_guide/styling.html#specifying-colors
HTML Color Names
- https://www.w3schools.com/colors/colors_names.asp

How to display text inside figure as annotation ?

How can I add text annotation in Bokeh? - Stack Overflow
- https://stackoverflow.com/questions/30696486/how-can-i-add-text-annotation-in-bokeh
- mytext = Label(x=70, y=70, text='here your text')
- p.add_layout(mytext)
Labels - Adding Annotations — Bokeh 0.13.0 documentation
- http://bokeh.pydata.org/en/latest/docs/user_guide/annotations.html#labels
class Label(**kwargs) - bokeh.models.annotations — Bokeh 0.13.0 documentation
- https://bokeh.pydata.org/en/latest/docs/reference/models/annotations.html#bokeh.models.annotations.Label

How to display text outside of figure ?

bokeh.models.widgets.markups — Bokeh 1.0.0 documentation
- https://bokeh.pydata.org/en/latest/docs/reference/models/widgets.markups.html#bokeh.models.widgets.markups.PreText
- A block (div) of text. This Bokeh model corresponds to an HTML <div> element.

How to use tooltip Hover ?

texas.py — Bokeh 0.13.0 documentation
- https://bokeh.pydata.org/en/latest/docs/gallery/texas.html
tools_hover_tooltip_formatting.py — Bokeh 0.13.0 documentation
- https://bokeh.pydata.org/en/latest/docs/user_guide/examples/tools_hover_tooltip_formatting.html
HoverTool - Configuring Plot Tools — Bokeh 0.13.0 documentation
- https://bokeh.pydata.org/en/latest/docs/user_guide/tools.html#hovertool
Hover Inspections - Styling Visual Attributes — Bokeh 0.13.0 documentation
- https://bokeh.pydata.org/en/latest/docs/user_guide/styling.html#hover-inspections
class HoverTool(**kwargs) - bokeh.models.tools — Bokeh 0.13.0 documentation
- https://bokeh.pydata.org/en/latest/docs/reference/models/tools.html#bokeh.models.tools.HoverTool
bokeh.models.formatters — Bokeh 0.13.0 documentation
- https://bokeh.pydata.org/en/latest/docs/reference/models/formatters.html#bokeh.models.formatters.NumeralTickFormatter
- https://bokeh.pydata.org/en/latest/docs/reference/models/formatters.html#bokeh.models.formatters.DatetimeTickFormatter
class ColumnDataSource(*args, **kw) - bokeh.models.sources — Bokeh 0.13.0 documentation
- https://bokeh.pydata.org/en/latest/docs/reference/models/sources.html#bokeh.models.sources.ColumnDataSource
python - Bokeh Plotting: Enable tooltips for only some glyphs - Stack Overflow
- https://stackoverflow.com/questions/29435200/bokeh-plotting-enable-tooltips-for-only-some-glyphs
- renderers=[circle1]

How to set hover tool to be inactive by default?

Configuring Plot Tools — Bokeh 0.13.0 documentation - Setting the Active Tools
- https://bokeh.pydata.org/en/latest/docs/user_guide/tools.html#setting-the-active-tools
- figure.toolbar.active_inspect = None

How to use DateRangeSlider ?

slider.py — Bokeh 0.13.0 documentation
- https://bokeh.pydata.org/en/latest/docs/gallery/slider.html
RangeSlider - Adding Widgets — Bokeh 0.13.0 documentation
- https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/widgets.html#rangeslider
- To use widgets, you must add them to your document and define their functionality. Widgets can be added directly to the document root or nested inside a layout. There are two ways to program a widget’s functionality:
  - Use the CustomJS callback (see JavaScript Callbacks). This will work in standalone HTML documents.
  - Use bokeh serve to start the Bokeh server and set up event handlers with .on_change (or for some widgets, .on_click).
bokeh.models.widgets.sliders — Bokeh 0.13.0 documentation
- https://bokeh.pydata.org/en/latest/docs/reference/models/widgets.sliders.html#bokeh.models.widgets.sliders.DateRangeSlider
- https://bokeh.pydata.org/en/latest/docs/reference/models/widgets.sliders.html#bokeh.models.widgets.sliders.DateSlider
python - Changing axis range with RangeSlider - Stack Overflow
- https://stackoverflow.com/questions/46629183/changing-axis-range-with-rangeslider
daterangepicker - How DateRangeSlider in bokeh works? - Stack Overflow
- https://stackoverflow.com/questions/45144032/how-daterangeslider-in-bokeh-works
JavaScript Callbacks — Bokeh 0.13.0 documentation
- https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html
- https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html#customjs-for-model-property-events
bokeh.models.callbacks — Bokeh 0.13.0 documentation
- https://bokeh.pydata.org/en/latest/docs/reference/models/callbacks.html#bokeh.models.callbacks.CustomJS
python - Bokeh Multi-Select widget callback not Working - Stack Overflow
- https://stackoverflow.com/questions/50747006/bokeh-multi-select-widget-callback-not-working
python - Bokeh Slider custom JS callback - Stack Overflow
- https://stackoverflow.com/questions/50689700/bokeh-slider-custom-js-callback
javascript - bokeh select widget callback using CustomJS to filter dataframe and plot - Stack Overflow
- https://stackoverflow.com/questions/50648727/bokeh-select-widget-callback-using-customjs-to-filter-dataframe-and-plot
Date - JavaScript | MDN
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
JavaScript 教程 | 菜鸟教程
- http://www.runoob.com/js/js-tutorial.html

How to link pan or zooming actions across many plots, i.e. zoom together?

Linking Plots — Bokeh 0.13.0 documentation
- https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/linking.html
- figure(x_range=s1.x_range)
Quickstart — Bokeh 0.13.0 documentation
- https://bokeh.pydata.org/en/latest/docs/user_guide/quickstart.html#linked-panning-and-brushing
python - Two interactive bokeh plots: select a value in one graph and change the other - Stack Overflow
- https://stackoverflow.com/questions/48629103/two-interactive-bokeh-plots-select-a-value-in-one-graph-and-change-the-other
javascript - How to make one slider/widget update multiple plots in Bokeh/Python/Pywidgets? - Stack Overflow
- https://stackoverflow.com/questions/47194815/how-to-make-one-slider-widget-update-multiple-plots-in-bokeh-python-pywidgets
Creating adjacent subplots — Matplotlib 2.2.2 documentation
- https://matplotlib.org/gallery/subplots_axes_and_figures/ganged_plots.html#sphx-glr-gallery-subplots-axes-and-figures-ganged-plots-py
Matplotlib/Pyplot: How to zoom subplots together? - Stack Overflow
- https://stackoverflow.com/questions/4200586/matplotlib-pyplot-how-to-zoom-subplots-together

How to improve responsiveness with large data?

Plotting Lots of Data with rbokeh
- http://ryanhafen.com/blog/plot-lots-of-data
- Set level of detail threshold / Render with WebGL /
  Hexbins /
  
  Javascript callback teaser /
  
  Abstract rendering /
  
  Faceting
- rbokeh - Initialize a Bokeh figure
  - http://hafen.github.io/rbokeh/rd.html#figure
python - Plotting Large Datasets in IPython Notebook (Bokeh) - Stack Overflow
- https://stackoverflow.com/questions/34378223/plotting-large-datasets-in-ipython-notebook-bokeh
- for simple scatters and lines of hundreds of thousands of points, there is a WebGL backend that may be useful.
- using the Bokeh Server, create a Bokeh app to downsample the data before rendering it.
- The DataShader library can be used to perform downsampling of large data sets, and integrates very well with Bokeh.
Speeding up with WebGL — Bokeh 0.13.0 documentation
- http://bokeh.pydata.org/en/latest/docs/user_guide/webgl.html
- bokeh.models.plots — Bokeh 0.13.0 documentation - output_backend
  - https://bokeh.pydata.org/en/latest/docs/reference/models/plots.html#bokeh.models.plots.Plot.output_backend
- WebGL - Wikipedia
  - https://en.wikipedia.org/wiki/WebGL
- How can I enable WebGL in my browser? - Super User
  - https://superuser.com/questions/836832/how-can-i-enable-webgl-in-my-browser
Configuring Plot Tools — Bokeh 0.13.0 documentation - Controlling Level of Detail
- https://bokeh.pydata.org/en/latest/docs/user_guide/tools.html#bokeh.models.plots.lod_threshold
Running a Bokeh Server — Bokeh 0.13.0 documentation
- https://bokeh.pydata.org/en/latest/docs/user_guide/server.html
pyviz/datashader: Turns even the largest data into images, accurately.
- https://github.com/pyviz/datashader

How to use bokeh server ?

Running a Bokeh Server — Bokeh 0.13.0 documentation
- https://bokeh.pydata.org/en/latest/docs/user_guide/server.html#
serve — Bokeh 0.13.0 documentation
- https://bokeh.pydata.org/en/latest/docs/reference/command/subcommands/serve.html

Why figure is blank even though there are data ?

If y-coordinate value is string, remember to set y_range. E.g. figure(y_range=codes)

How to fix plot plotting on top of existing plot ?

Plot plotting on top of existing plot - Google 网上论坛
- https://groups.google.com/a/continuum.io/forum/#!topic/bokeh/mVqCaH0itAE
- reset_output()
python - Bokeh: Generating graphs in a loop, the output graph's file sizes keep increasing - Stack Overflow
- https://stackoverflow.com/questions/37290219/bokeh-generating-graphs-in-a-loop-the-output-graphs-file-sizes-keep-increasin
reset_output - bokeh.io — Bokeh 0.13.0 documentation
- https://bokeh.pydata.org/en/latest/docs/reference/io.html#bokeh.io.output.reset_output

How to fix Uncaught SyntaxError: Unexpected token new at new Function (<anonymous>) ?

callback = CustomJS(args=dict(old_src=original_source, new=source), code=""" """)
change new=source to new_src=source coz that new is a key word in Javascript

How to fix SyntaxError: invalid syntax when running "bokeh serve --show myapp.py" ?

Open Anaconda Prompt, and then run it there.