データを提供する

表示する下位データがなければ，データ可視化は不可能である.本節では，描画にデータを提供する様々な方式について，データ値を直接転送してから作成までについて述べる. ColumnDataSource 使用しています CDSView それがそうです。

直接データを提供する

Bokehでは，値リストを描画関数に直接渡すことができる.以下の例では、データは x_values そして y_values 直接伝えることができます circle 絵の描き方(参照) 基本字を使って印刷する より多くの例を表示します)。

from bokeh.plotting import figure

x_values = [1, 2, 3, 4, 5]
y_values = [6, 7, 2, 3, 6]

p = figure()
p.circle(x=x_values, y=y_values)

このようにデータを転送する時、Bokehは舞台裏で仕事をしています ColumnDataSource あなたにあげました。しかし学習作成と使用は ColumnDataSource データストリーム、描画間でデータを共有し、データをフィルタリングするなど、より高度な機能にアクセスすることができます。

ColumnDataSource

♪the ColumnDataSource 多くのBokehグラフの核であり，グラフの字形で可視化されたデータを提供する.与 ColumnDataSource 例えば、複数の描画部品と小構成要素との間でデータを容易に共有することができる DataTable それがそうです。同じ時に ColumnDataSource 複数のレンダラを駆動するために、データソース選択を共有することもできる。したがって、選択ツールを用いて1つのグラフからデータ点を選択し、第2のグラフに自動的に強調表示することができる。 (リンク選択 ）。

最も基本的なレベルでは ColumnDataSource 列名とデータリスト間のマッピングのみである.♪the ColumnDataSource vt.1種類の方法をとる. data パラメータは、文字列名をキーとし、データ値のリスト(または配列)を値とする辞書である。1つの位置パラメータを ColumnDataSource 初期値設定項は data それがそうです。一旦 ColumnDataSource 作成されていれば、それを伝えることができます source 描画方法のパラメータは、列名をデータ値の代替転送として使用することができます。

from bokeh.plotting import figure
from bokeh.models import ColumnDataSource

data = {'x_values': [1, 2, 3, 4, 5],
        'y_values': [6, 7, 2, 3, 6]}

source = ColumnDataSource(data=data)

p = figure()
p.circle(x='x_values', y='y_values', source=source)

注釈

与えられたすべての列という暗黙的な仮定があります ColumnDataSource それらはいつでも同じ長さを持っている。したがって、一般的により望ましい方法は更新だ。 .data 属性は“一度にすべて完了”である.

パンダ

♪the data パラメータはパンダでもいいです DataFrame あるいは…。 GroupBy 物体です。

source = ColumnDataSource(df)

もし1つが DataFrame この列ではCDSは DataFrame それがそうです。の索引です。 DataFrame リセットされます DataFrame 命名されたインデックス列があれば、CDSにも同名の列がある。しかし、インデックス名が None CDSには共通名が指定される。はい。はい。 index もしそれが利用可能であれば level_0 そうでなければ。

パンダ多重索引

準備万端整っている MultiIndex 列とインデックスは ColumnsDataSource それがそうです。インデックスについては、タプルインデックスが作成され、 MultiIndex 下線で結ぶ。列名は下線で接続される.例：

df = pd.DataFrame({('a', 'b'): {('A', 'B'): 1, ('A', 'C'): 2},
                   ('b', 'a'): {('A', 'C'): 7, ('A', 'B'): 8},
                   ('b', 'b'): {('A', 'D'): 9, ('A', 'B'): 10}})
cds = ColumnDataSource(df)

will result in a column named index with [(A, B), (A, C), (A, D)] and columns named a_b, b_a, and b_b. This process will fail for non-string column names, so flatten the DataFrame manually in that case.

パンダユニットBy

group = df.groupby(('colA', 'ColB'))
source = ColumnDataSource(group)

もし1つが GroupBy オブジェクトは、CDSは呼び出し結果に対応する列を有する group.describe() それがそうです。♪the describe 方法は、統計的メトリック値のための列、例えば mean そして count すべての未グループ化のための元の列。生まれたのは DataFrame Vbl.はい，あります MultiIndex 元の列名および計算メトリック値を有する列は、したがって、前述のスキームを使用して平坦化される。例えばもし1つが DataFrame 列がある. 'year' そして 'mpg' それがそうです。そして通ります df.groupby('year') CDSに設定すると次のような列になります 'mpg_mean'

この適応能力に注意してください GroupBy 対象はパンダとのご利用のみとなっております >=0.20.0 それがそうです。

流

ColumnDataSource ストリーミングは新しいデータをCDSに付加する有効な方式である.使用することで stream メソッドの場合，Bokehはデータセット全体ではなく，ブラウザにのみ新しいデータを送信する.♪the stream 方法は1つを受け入れる new_data パラメータは、列名を対応する列に付加されるデータシーケンスにマッピングするDICTを含む。オプションのパラメータが必要です rollover これは，保持する最大データ長(列の先頭のデータを破棄する)である.デフォルト値. rollover 値はNoneがデータを無限に増加させることを許す.

source = ColumnDataSource(data=dict(foo=[], bar=[]))

# has new, identical-length updates for all columns in source
new_data = {
    'foo' : [10, 20],
    'bar' : [100, 200],
}

source.stream(new_data)

使用フローの例については、参照されたい examples/app/ohlc それがそうです。

補片.

ColumnDataSource パッチを打つことはデータソーススライスを更新する有効な方法である.使用することで patch 方法：Bokehは、データセット全体ではなく、ブラウザに新しいデータを送信するだけでよい。♪the patch メソッドの場合は，適用するパッチが変更するタプルリストを表すdictに列名をマッピングすることを渡すべきである.

パッチの変更を記述するタプルの形式は以下のとおりである.

(index, new_value)  # replace a single column value

# or

(slice, new_values) # replace several column values

完全例については参照のこと examples/howto/patch_app.py それがそうです。

データを変換する

データをどのように追加するかを見ました ColumnDataSource バーカーの陰謀を推し進めていますこれは、非点グラフ内のフラグがどのように着色されるべきかを制御するために作成された色の列など、元のデータまたは私たち自身が明示的に変換したデータを含むことができる。また、ブラウザでのみ発生する変換を指定することもできます。これは、コードを低減する(すなわち、データを手動でカラーマッピングする必要がない)およびブラウザに送信しなければならないデータ量(元のデータのみを送信し、カラーマッピングがクライアントで発生する)を低減するために有用である。

本節では，利用可能な異なる変換対象をいくつか検討する.

色

ブラウザで線形カラーマッピングを行うには linear_cmap() 関数は使用可能である.それは受け入れます ColumnDataSource カラーマップ、カラーパレット(内蔵パレット名または実際の色リストであってもよい)、およびカラーマッピング範囲の最小/最大値に列する。結果を字形の色属性に渡すことができる：

fill_color=linear_cmap('counts', 'Viridis256', min=0, max=10)

以下に完全な例を示す.

import numpy as np

from bokeh.plotting import figure, show
from bokeh.transform import linear_cmap
from bokeh.util.hex import hexbin

n = 50000
x = np.random.standard_normal(n)
y = np.random.standard_normal(n)

bins = hexbin(x, y, 0.1)

p = figure(tools="", match_aspect=True, background_fill_color='#440154')
p.grid.visible = False

p.hex_tile(q="q", r="r", size=0.1, line_color=None, source=bins,
           fill_color=linear_cmap('counts', 'Viridis256', 0, max(bins.counts)))

show(p)

そのほか linear_cmap() もう一つ log_cmap() 対数比でカラーマッピングを行い、 factor_cmap() 分類データをカラーマッピングする(以下の例を参照)。

標識物

分類データをタグタイプにマッピングすることも可能である.以下の例を示す factor_mark() 入力データには、異なるマークまたは異なるカテゴリが表示される。使い方もお見せしています factor_cmap() これらの同じカテゴリをカラーマッピングするためには、以下の操作を実行してください。

from bokeh.plotting import figure, show
from bokeh.sampledata.iris import flowers
from bokeh.transform import factor_cmap, factor_mark

SPECIES = ['setosa', 'versicolor', 'virginica']
MARKERS = ['hex', 'circle_x', 'triangle']

p = figure(title = "Iris Morphology")
p.xaxis.axis_label = 'Petal Length'
p.yaxis.axis_label = 'Sepal Width'

p.scatter("petal_length", "sepal_width", source=flowers, legend_field="species", fill_alpha=0.4, size=12,
          marker=factor_mark('species', MARKERS, SPECIES),
          color=factor_cmap('species', 'Category10_3', SPECIES))

show(p)

注釈

♪the factor_mark() 変換は主に scatter 字形方法は Scatter フォントはタグタイプでパラメータ化できる.

CustomJSTransform

上の内蔵変換のほかにもう一つあります CustomJSTransform これは，任意のJavaScriptコードを指定してColumnDataSourceデータに対して変換手続きを実行することを可能にする.通常、 v_func (“ベクトル化”関数の場合)が提供される(一般的ではないのはスカラー等価項である func 必要かもしれません)。♪the v_func コードは変数に配列を入力することが期待されるべきである xs 変換された値を含むJavaScript配列を返す：

v_func = """
    const first = xs[0]
    const norm = new Float64Array(xs.length)
    for (let i = 0; i < xs.length; i++) {
        norm[i] = xs[i] / first
    }
    return norm
"""
normalize = CustomJSTransform(v_func=v_func)

plot.line(x='aapl_date', y=transform('aapl_close', normalize), line_width=2,
          color='#cf3c4d', alpha=0.6,legend="Apple", source=aapl_source)

上のコードは、元の価格データを第1のデータ点に対する正規化リターンシーケンスに変換する。すべての結果を以下に示す.

データをフィルタリングする

一般に，大きなデータセットから二次サンプリングやフィルタリングを行うデータ部分に注目する必要がある.Bokehにより、データのサブセットを表すデータソースのビューを指定することができます。データソースを見ることにより、下位データは変更する必要がなく、描画間で共有することができる。このビューは、特定のフォントに結合されるべきデータソースの行を選択する1つまたは複数のフィルタから構成される。

データサブセットを使用して描画する場合には、作成することができます CDSView そしてそれを view レンダラにパラメータを追加-メソッドを追加 Figure 例えば、 figure.circle それがそうです。♪the CDSView 2つの属性があります source そして filters それがそうです。 source はい。 ColumnDataSource このビューはそれに関連している. filters 1人前です Filter オブジェクトは、以下に列挙して説明する。

from bokeh.plotting import figure
from bokeh.models import ColumnDataSource, CDSView

source = ColumnDataSource(some_data)
view = CDSView(source=source, filters=[filter1, filter2])

p = figure()
p.circle(x="x", y="y", source=source, view=view)

IndexFilter

♪the IndexFilter 一番簡単なフィルタータイプです。これは1つあります indices 属性は、描画に含まれるデータのインデックスの整数リストである。

from bokeh.layouts import gridplot
from bokeh.models import CDSView, ColumnDataSource, IndexFilter
from bokeh.plotting import figure, show

source = ColumnDataSource(data=dict(x=[1, 2, 3, 4, 5], y=[1, 2, 3, 4, 5]))
view = CDSView(source=source, filters=[IndexFilter([0, 2, 4])])

tools = ["box_select", "hover", "reset"]
p = figure(plot_height=300, plot_width=300, tools=tools)
p.circle(x="x", y="y", size=10, hover_color="red", source=source)

p_filtered = figure(plot_height=300, plot_width=300, tools=tools)
p_filtered.circle(x="x", y="y", size=10, hover_color="red", source=source, view=view)

show(gridplot([[p, p_filtered]]))

BooleanFilter

A BooleanFilter TrueまたはFalse値リストのデータソースから行を選択する booleans 財産です。

from bokeh.layouts import gridplot
from bokeh.models import BooleanFilter, CDSView, ColumnDataSource
from bokeh.plotting import figure, show

source = ColumnDataSource(data=dict(x=[1, 2, 3, 4, 5], y=[1, 2, 3, 4, 5]))
booleans = [True if y_val > 2 else False for y_val in source.data['y']]
view = CDSView(source=source, filters=[BooleanFilter(booleans)])

tools = ["box_select", "hover", "reset"]
p = figure(plot_height=300, plot_width=300, tools=tools)
p.circle(x="x", y="y", size=10, hover_color="red", source=source)

p_filtered = figure(plot_height=300, plot_width=300, tools=tools,
                    x_range=p.x_range, y_range=p.y_range)
p_filtered.circle(x="x", y="y", size=10, hover_color="red", source=source, view=view)

show(gridplot([[p, p_filtered]]))

GroupFilter

♪the GroupFilter データセットからクラス変数の特定の値を有する行を選択することができます。♪the GroupFilter 2つの属性があります column_name 中の列の名前。 ColumnDataSource そして、 group 選択する列の値。

In the example below, flowers contains a categorical variable species which is either setosa, versicolor, or virginica.

from bokeh.layouts import gridplot
from bokeh.models import CDSView, ColumnDataSource, GroupFilter
from bokeh.plotting import figure, show
from bokeh.sampledata.iris import flowers

source = ColumnDataSource(flowers)
view1 = CDSView(source=source, filters=[GroupFilter(column_name='species', group='versicolor')])

plot_size_and_tools = {'plot_height': 300, 'plot_width': 300,
                        'tools':['box_select', 'reset', 'help']}

p1 = figure(title="Full data set", **plot_size_and_tools)
p1.circle(x='petal_length', y='petal_width', source=source, color='black')

p2 = figure(title="Setosa only", x_range=p1.x_range, y_range=p1.y_range, **plot_size_and_tools)
p2.circle(x='petal_length', y='petal_width', source=source, view=view1, color='red')

show(gridplot([[p1, p2]]))

CustomJSFilter

また1つのものを作ることができます CustomJSFilter ご自分の機能を使います。そのため，JavaScriptやTypeScriptを用いてコードを作成し，フィルタリングのサブセットを表すインデックスリストやブールリストを返す.♪the ColumnDataSource 属性関連の CDSView 追加されたこのフィルタは、レンダリング時に変数を使用します source それがそうです。

JavaScript

作成するには CustomJSFilter JavaScriptで書かれたカスタム機能を用いて，JavaScriptコードを文字列としてパラメータに渡す. code ：

custom_filter = CustomJSFilter(code='''
var indices = [];

// iterate through rows of data source and see if each satisfies some constraint
for (var i = 0; i < source.get_length(); i++){
    if (source.data['some_column'][i] == 'some_value'){
        indices.push(true);
    } else {
        indices.push(false);
    }
}
return indices;
''')

AjaxDataSource

Bokehサーバアプリケーションは，データの更新やデータソースへのデータストリーミングを簡単にするが，独立文書に類似した機能を持つ必要がある場合がある.♪the AjaxDataSource この機能を提供する.

♪the AjaxDataSource REST端点へのURLとポーリング間隔を配置した.ブラウザでは、データソースは、指定された間隔でエンドポイントにデータを要求し、ローカルにデータを更新する。既存のデータは完全に置き換えることもできるし，追加することもできる(最大構成可能なもの) max_size ）。提供されたエンドポイントは、標準に一致するJSON辞書を返さなければなりません。 ColumnDataSource 書式：

{
    'x' : [1, 2, 3, ...],
    'y' : [9, 3, 2, ...]
}

そうでなければ、使用する AjaxDataSource 使用基準と ColumnDataSource ：

source = AjaxDataSource(data_url='http://some.api.com/data',
                        polling_interval=100)

# Use just like a ColumnDataSource
p.circle('x', 'y', source=source)

完全な例(以下に示す)は、 examples/howto/ajax_source.py

リンク選択

同じものを使う ColumnDataSource 次の2つの描画では，それらの選択を共有することが許される.

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

output_file("brushing.html")

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

# create a column data source for the plots to share
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]])

show(p)

フィルタリングされたデータ付きリンク選択

各フォントレンダラに使用するデータサブセットを指定することにより、描画に異なるデータサブセットを用いても、描画間でデータを共有することが容易である。同じものを使うことで ColumnDataSource このデータソースの選択およびホバリングチェックは自動的に共有される.

以下の例では、1つは CDSView Y値が250より大きいか、または100未満であるデータサブセットを指定する第2の描画のために作成される。一方の描画における選択は，別の描画に自動的に反映される.マウスを一方の描画中の一方の点にドロップすると、他方の描画における対応点(存在する場合)が強調表示される。

from bokeh.layouts import gridplot
from bokeh.models import BooleanFilter, CDSView, ColumnDataSource
from bokeh.plotting import figure, output_file, show

output_file("linked_selection_subsets.html")

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

# create a column data source for the plots to share
source = ColumnDataSource(data=dict(x=x, y0=y0, y1=y1))

# create a view of the source for one plot to use
view = CDSView(source=source, filters=[BooleanFilter([True if y > 250 or y < 100 else False for y in y1])])

TOOLS = "box_select,lasso_select,hover,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', size=10, hover_color="firebrick", source=source)

# create another new plot, add a renderer that uses the view of the data source
right = figure(tools=TOOLS, plot_width=300, plot_height=300, title=None)
right.circle('x', 'y1', size=10, hover_color="firebrick", source=source, view=view)

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

show(p)

その他のデータタイプ

Bokehはまた、ネットワークグラフィックデータおよび地理的データをレンダリングする能力を有する。これらのタイプの描画設定データの詳細については、参照されたい ネットワーク図を可視化する そして 地理データを製図する それがそうです。