Dash DAQ⑥（Knobコンポーネント）

Dash DAQ

Dash DAQでは、データの収集・管理を行うコンポーネントを提供しています。

スイッチや計器に似た可視化ツールが用意されており、データを変化させる管理UIを作成できます。

Dash Enterprise - https://dash.plotly.com/dash-daq

Knobコンポーネント

Knobコンポーネントを使うと、値の範囲を指定できるノブを表示することができます。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.Knob(id='our-knob'),
    html.Div(id='knob-result')
])

@app.callback(Output('knob-result', 'children'), Input('our-knob', 'value'))
def update_output(value):
    return 'The knob value is {}.'.format(value)

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

値の範囲を指定できるノブが表示されました。

ノブ内の円をドラッグすることにより、数値を変更することができます。

Dash DAQ⑤（Indicatorコンポーネント）

Dash DAQ

Dash DAQでは、データの収集・管理を行うコンポーネントを提供しています。

スイッチや計器に似た可視化ツールが用意されており、データを変化させる管理UIを作成できます。

Dash Enterprise - https://dash.plotly.com/dash-daq

Indicatorコンポーネント

Indicatorコンポーネントを使うと、ブール型のインジケーターを表示することができます。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.Indicator(
        id='our-indicator',
        label="Default"
    ),
    html.Button(
        'On/Off',
        id='our-indicator-button',
        n_clicks=0
    )
])

@app.callback(
    Output('our-indicator', 'value'),
    Input('our-indicator-button', 'n_clicks')
)
def update_output(value):
    return True if value % 2 == 0 else False

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

ブール型のインジケーターを表示することができました。

ボタンをクリックするたびに、インジケーターが変化することを確認できます。

Dash DAQ④（GraduatedBarコンポーネント）

Dash DAQ

Dash DAQでは、データの収集・管理を行うコンポーネントを提供しています。

スイッチや計器に似た可視化ツールが用意されており、データを変化させる管理UIを作成できます。

Dash Enterprise - https://dash.plotly.com/dash-daq

GraduatedBarコンポーネント

GraduatedBarコンポーネントを使うと、メモリ付きバーを表示することができます。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.GraduatedBar(
        id='our-graduated-bar',
        label="Default",
        value=6
    ),
    dcc.Slider(
        id='our-graduated-bar-slider',
        min=0,
        max=10,
        step=1,
        value=5
    ),
])

@app.callback(
    Output('our-graduated-bar', 'value'),
    Input('our-graduated-bar-slider', 'value')
)
def update_output(value):
    return value

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

メモリ付きバーを表示することができました。

スライドバーで選択値を変更すると、メモリに反映されることを確認できます。

Dash DAQ③（Gaugeコンポーネント）

Dash DAQ

Dash DAQでは、データの収集・管理を行うコンポーネントを提供しています。

スイッチや計器に似た可視化ツールが用意されており、データを変化させる管理UIを作成できます。

Dash Enterprise - https://dash.plotly.com/dash-daq

Gaugeコンポーネント

Gaugeコンポーネントを使うと、ゲージ（円形の計器）を表示することができます。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.Gauge(
        id='our-gauge',
        label="Default",
        value=6
    ),
    dcc.Slider(
        id='our-gauge-slider',
        min=0,
        max=10,
        step=1,
        value=5
    ),
])

@app.callback(Output('our-gauge', 'value'),
              Input('our-gauge-slider', 'value'))
def update_output(value):
    return value

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

ゲージ（円形の計器）を表示することができました。

スライドバーで選択値を変更すると、ゲージに反映されることを確認できます。

Dash DAQ②（Color Pickerコンポーネント）

Dash DAQ

Dash DAQでは、データの収集・管理を行うコンポーネントを提供しています。

スイッチや計器に似た可視化ツールが用意されており、データを変化させる管理UIを作成できます。

Dash Enterprise - https://dash.plotly.com/dash-daq

Color Pickerコンポーネント

Color Pickerコンポーネントを使うと、カラーピッカーを表示することができます。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_daq as daq

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.ColorPicker(
        id='our-color-picker',
        label='Color Picker',
        value=dict(hex='#119DFF')
    ),
    html.Div(id='color-picker-result')
])

@app.callback(
    Output('color-picker-result', 'children'),
    Input('our-color-picker', 'value')
)
def update_output(value):
    return 'The selected color is {}.'.format(value)

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

カラーピッカーが表示され、カラーパレットやスライダーを使って色を選択することができます。

選択した色の情報はJSON形式で取得できます。

Dash DAQ①（BooleanSwitchコンポーネント）

Dash DAQ

Dash DAQでは、データの収集・管理を行うコンポーネントを提供しています。

スイッチや計器に似た可視化ツールが用意されており、データを変化させる管理UIを作成できます。

Dash Enterprise - https://dash.plotly.com/dash-daq

BooleanSwitchコンポーネント

BooleanSwitchコンポーネントでは、オンとオフを切り替えるスイッチを表示します。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_daq as daq

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.BooleanSwitch(id='our-boolean-switch', on=False),
    html.Div(id='boolean-switch-result')
])

@app.callback(
    Output('boolean-switch-result', 'children'),
    Input('our-boolean-switch', 'on')
)
def update_output(on):
    return 'The switch is {}.'.format(on)

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

スイッチを押すと、オンとオフを切り替えることができます。

Dash Bio⑯（パイルアップ）

パイルアップ

Pileupコンポーネントを使うと、パイルアップを表示することができます。

Dash Enterprise - https://dash.plotly.com/dash-bio/pileup

上記のDash Enterpriseにあるサンプルを参考にして、パイルアップを表示します。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import dash
import dash_bio as dashbio

app = dash.Dash(__name__)

HOSTED_GENOME_TRACKS = {
    'hg19': {
        'range': {
            'contig': 'chr17',
            'start': 7512284,
            'stop': 7512644
        },
        'reference': {
            'label': 'hg19',
            'url': 'https://hgdownload.cse.ucsc.edu/goldenPath/hg19/bigZips/hg19.2bit'
        },
        'tracks': [{
            'viz': 'scale',
            'label': 'Scale'
        },
            {
                'viz': 'location',
                'label': 'Location'
            },
            {
                'viz': 'genes',
                'label': 'genes',
                'source': 'bigBed',
                'sourceOptions': {'url': 'https://www.biodalliance.org/datasets/ensGene.bb'}
            }]
    }
}

app.layout = dashbio.Pileup(
                range=HOSTED_GENOME_TRACKS['hg19']['range'],
                reference=HOSTED_GENOME_TRACKS['hg19']['reference'],
                tracks=HOSTED_GENOME_TRACKS['hg19']['tracks']
            )

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

パイルアップを表示することができました。

スライドバーを使って拡大・縮小したり、ドラッグして表示位置を変えたりすることができます。

Dash Bio⑮（マンハッタンプロット）

マンハッタンプロット

ManhattanPlotコンポーネントを使うと、マンハッタンプロットを表示することができます。

マンハッタンプロットは、多数のデータポイント、非ゼロ振幅、および高い振幅値の分布を持つデータを表示します。

一般的にゲノムワイド関連解析（GWAS）で使用され、重要なSNP（個人間の遺伝情報のわずかな違いのこと。一塩基多型とも呼ばれる。）を表示することができます。

Dash Enterprise - https://dash.plotly.com/dash-bio/manhattanplot

上記のDash Enterpriseにあるサンプルを参考にして、マンハッタンプロットを表示します。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import pandas as pd
import dash
import dash_bio as dashbio
from dash import dcc

app = dash.Dash(__name__)

df = pd.read_csv('https://git.io/manhattan_data.csv')

app.layout = dcc.Graph(figure=dashbio.ManhattanPlot(dataframe=df))

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

マンハッタンプロットを表示することができました。

ドラッグすることにより、表示位置を変えたり、拡大・縮小したりすることができます。

また凡例を選択して、データの表示・非表示を切り替えることもできます。

Dash Bio⑭（ゲノムブラウザ IGV）

ゲノムブラウザ IGV

IGVコンポーネントを使うと、ゲノム情報を視覚化することができます。

（IGV は Integrative Genomics Viewer の略です）

Dash Enterprise - https://dash.plotly.com/dash-bio/igv

上記のDash Enterpriseにあるサンプルを参考にして、ゲノム情報を視覚化してみます。

[ソースコード]

1
2
3
4
5
6
7
8
9
import dash
import dash_bio as dashbio

app = dash.Dash(__name__)

app.layout = dashbio.Igv(genome='ce11', minimumBases=100)

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

ゲノム情報を可視化することができました。

ドラッグすることにより、表示位置を変えたり、拡大・縮小して表示することができます。

Dash Bio⑬（Ideogram）

Ideogram

Ideogramコンポーネントを使うと、染色体パターンを可視化することができます。

Dash Enterprise - https://dash.plotly.com/dash-bio/ideogram

上記のDash Enterpriseにあるサンプルを参考にして、染色体パターンを視覚化します。

[ソースコード]

1
2
3
4
5
6
7
8
9
import dash
import dash_bio as dashbio

app = dash.Dash(__name__)

app.layout = dashbio.Ideogram(id='test', chromosomes=[str(i) for i in range(1, 23)])

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

染色体パターンを可視化することができました。

染色体を選択すると拡大して表示することができます。もう一度選択するともとの表示に戻ります。