学会使用Boken实现数据可视化(二)

作者: python与数据分析 | 来源:发表于2021-01-04 17:41 被阅读0次

学会使用Boken实现数据可视化(二)
学会使用Boken实现数据可视化(一)
学会使用Boken实现数据可视化(三)
实战|学会使用Boken实现数据可视化(四)
实战|学会使用Boken实现数据可视化(五)
（三）线性回归--梯度下降
数据可视化大屏分析软件有哪些，无需写代码就可以分析吗？
superset企业级的智能分析工具安装和学习
echart实现分段函数
MYSQL

【导语】通过上一节的学习，相信我们对bokeh有了一个基本的认识。那么这篇文章主要内容是通过bokeh实现布局，交互和标注。

一、布局

横向布局：主要使用 row() 函数

纵向布局：主要使用column() 函数

from bokeh.io import output_notebook, show
from bokeh.layouts import row, column
from bokeh.plotting import figure

output_notebook()

x = list(range(10))
y0 = x
y1 = [10 - i for i in x]
y2 = [abs(i - 3) for i in x]

# 绘制三张图
s1 = figure(plot_width=250, plot_height=250)
s1.circle(x, y0, size=12, color="pink", alpha=0.8)

s2 = figure(plot_width=250, plot_height=250)
s2.triangle(x, y1, size=12, color="lightblue", alpha=0.8)

s3 = figure(plot_width=250, plot_height=250)
s3.square(x, y2, size=12, color="orange", alpha=0.8)

layout = row(column(s1, s2), s3)
output_notebook()
show(layout)

网格布局：gridplot()

选项卡式布局：Panel(), Tabs()

from bokeh.io import output_notebook, show
from bokeh.layouts import gridplot
from bokeh.plotting import figure


x = list(range(11))
y0 = x
y1 = [10 - i for i in x]
y2 = [abs(i - 5) for i in x]

# 绘制三张图
s1 = figure(background_fill_color="#fafafa")
s1.circle(x, y0, size=12, alpha=0.8, color="#53777a")

s2 = figure(background_fill_color="#fafafa")
s2.triangle(x, y1, size=12, alpha=0.8, color="#c02942")

s3 = figure(background_fill_color="#fafafa")
s3.square(x, y2, size=12, alpha=0.8, color="#d95b43")

# 网格布局，并设置绘图大小
grid3 = gridplot([s1, s2, s3], ncols=2, plot_width=250, plot_height=250)

output_notebook()
show(grid3)

如果希望在两个可视化文件之间进行全尺寸切换，而不必将它们压缩到彼此相邻或重叠的位置，则选项卡式布局是一个不错的选择

from bokeh.io import show, output_notebook
from bokeh.models import Panel, Tabs
from bokeh.plotting import figure

p1 = figure(plot_width=300, plot_height=300)
p1.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)
tab1 = Panel(child=p1, title="circle")

p2 = figure(plot_width=300, plot_height=300)
p2.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=3, color="navy", alpha=0.5)
tab2 = Panel(child=p2, title="line")

output_notebook()
show(Tabs(tabs=[tab1, tab2]))

二、交互

链接平移(Linked Panning)

链接选择(Linked Brushing)

通常需要在许多绘图之间进行链接平移。启用此功能所需要做的就是在figure（）函数中共享范围。运行下列代码，尝试拖拽其中任一绘图，看看其它绘制是否跟着一起动。

from bokeh.io import output_notebook, show
from bokeh.layouts import gridplot
from bokeh.plotting import figure


x = list(range(11))
y0 = x
y1 = [10-xx for xx in x]
y2 = [abs(xx-5) for xx in x]


# 绘制 s1
s1 = figure(plot_width=250, plot_height=250, title=None)
s1.circle(x, y0, size=10, color="navy", alpha=0.5)

# 绘制 s2 并且共享一个范围
s2 = figure(plot_width=250, plot_height=250, x_range=s1.x_range, y_range=s1.y_range, title=None)
s2.triangle(x, y1, size=10, color="firebrick", alpha=0.5)

# 绘制 s3 并且共享一个范围
s3 = figure(plot_width=250, plot_height=250, x_range=s1.x_range, title=None)
s3.square(x, y2, size=10, color="olive", alpha=0.5)

p = gridplot([[s1, s2, s3]], toolbar_location=None)

# 显示结果
output_notebook()
show(p)

运行下列代码，尝试使用绘图右上角的工具来对图进行操作，当鼠标悬停在工具图标上时，也会显示工具名称。

BoxSelectTool：名为 'box_select'，在绘图区域上拖动鼠标来定义矩形选择区域；
LassoSelectTool：名为 'lasso_select'，在绘图区域上拖动鼠标来定义要选择的任意区域。

from bokeh.io import output_notebook, show
from bokeh.layouts import gridplot
from bokeh.models import ColumnDataSource
from bokeh.plotting import figure


x = list(range(-20, 21))
y0 = [abs(xx) for xx in x]
y1 = [xx**2 for xx in x]

# 创建图片共享的列数据源
source = ColumnDataSource(data=dict(x=x, y0=y0, y1=y1))

# 自定义选择外观
TOOLS = "box_select,lasso_select,help"

# create a new plot and add a renderer
left = figure(tools=TOOLS, plot_width=300, plot_height=300, title=None)
left.circle('x', 'y0', source=source)

# create another new plot and add a renderer
right = figure(tools=TOOLS, plot_width=300, plot_height=300, title=None)
right.circle('x', 'y1', source=source)

p = gridplot([[left, right]])

output_notebook()
show(p)

三、标注(注释)

图例
1）legend_label
2）legend_group

悬停工具

legend_label要为字形提供简单的显式标签，在绘图时，需要传入legend_label参数：如果给多个字形赋予了相同的标签，则它们将全部合并为带有该标签的单个图例项。

import numpy as np

from bokeh.plotting import figure, output_notebook, show

x = np.linspace(0, 4*np.pi, 100)
y = np.sin(x)


p = figure()

# 通过lagend_label参数添加图例标签
p.circle(x, y, legend_label="sin(x)")

p.line(x, y, legend_label="sin(x)")

p.line(x, 2*y, legend_label="2*sin(x)",
       line_dash=[4, 4], line_color="orange", line_width=2)

p.square(x, 3*y, legend_label="3*sin(x)", fill_color=None, line_color="green")
p.line(x, 3*y, legend_label="3*sin(x)", line_color="green")

output_notebook()
show(p)

legend_group()通常希望通过对数据源列中的值进行分组操作来生成多个图例项。将legend_group参数传入字形方法，Bokeh可以执行这样的分组

from bokeh.models import ColumnDataSource
from bokeh.palettes import RdBu3
from bokeh.plotting import figure, output_notebook, show

c1 = RdBu3[2] # red
c2 = RdBu3[0] # blue
source = ColumnDataSource(dict(
    x=[1, 2, 3, 4, 5, 6],
    y=[2, 1, 2, 1, 2, 1],
    color=[c1, c2, c1, c2, c1, c2],
    label=['hi', 'lo', 'hi', 'lo', 'hi', 'lo']
))

p = figure(x_range=(0, 7), y_range=(0, 3), plot_height=300, tools='save')

# 图例字段与数据源中的 label 匹配
p.circle( x='x', y='y', radius=0.5, color='color', legend_group='label', source=source)

output_notebook()
show(p)

以@开头的字段名称与 ColumnDataSource 中的内容相关联。运行下方代码，尝试将鼠标悬停在点上面，看看是否有内容展示

from bokeh.plotting import ColumnDataSource, figure, output_notebook, show

source = ColumnDataSource(data=dict(
    x=['1', '5', '6', '3', '4', '7'],
    y=[123, 153, 89, 107, 98, 23],
    desc=['A', 'b', 'C', 'd', 'e','f'],
))

TOOLTIPS = [
    ("index", "$index"),
    ("(x,y)", "($x, $y)"),
    ("desc", "@desc"),
]

p = figure(plot_width=400, plot_height=400, tooltips=TOOLTIPS,
           title="Mouse over the dots")

p.circle('x', 'y', size=20, source=source)

output_notebook()
show(p)