Dash Bio⑫（FornaContainer）

FornaContainer

FornaContainerコンポーネントを使うと、RNA分子の２次元構造を可視化することができます。

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

上記のDash Enterpriseにあるサンプルを参考にして、RNA分子の２次元構造を視覚化します。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import dash
import dash_bio as dashbio

app = dash.Dash(__name__)

sequences = {
    'PDB_01019': {
        'sequence': 'AUGGGCCCGGGCCCAAUGGGCCCGGGCCCA',
        'structure': '.((((((())))))).((((((()))))))'
    },
    'PDB_00598': {
        'sequence': 'GGAGAUGACgucATCTcc',
        'structure': '((((((((()))))))))'
    }
}

app.layout = dashbio.FornaContainer(sequences=[sequences['PDB_01019'], sequences['PDB_00598']])

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

[ブラウザで表示]

RNA分子の２次元構造を可視化することができました。

ドラッグ操作により全体の表示位置を変えたり、分子構造をつかんで移動したりすることができます。

Dash Bio⑪（Clustergram）

Clustergram

Clustergramコンポーネントを使うと、２次元のクラスター分析を可視化することができます。

クラスター分析とは、大きな集団の中から似たもの同士を集めてグループに分ける統計的な分析手法です。

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

上記の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
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/clustergram_brain_cancer.csv').set_index('ID_REF')

columns = list(df.columns.values)
rows = list(df.index)

app.layout = dcc.Graph(figure=dashbio.Clustergram(
                           data=df.loc[rows].values,
                           column_labels=columns,
                           row_labels=rows,
                           color_threshold={
                               'row': 250,
                               'col': 700
                           },
                           hidden_labels='row',
                           height=700,
                           width=1000
                           )
                       )

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

[ブラウザで表示]

２次元のクラスター分析を可視化することができました。

ドラッグ操作により表示範囲を変えることができます。

Dash Bio⑪（VolcanoPlot）

VolcanoPlot

VolcanoPlotコンポーネントを使うと、遺伝子の発現比と統計的有意性（p値）を可視化することができます。

遺伝子の発現を視覚化し、重要な変化をしている遺伝子を特定することができます。

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

上記のDash Enterpriseにあるサンプルを参考にして、遺伝子の発現を視覚化します。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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/volcano_data1.csv')

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

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

[ブラウザで表示]

遺伝子の発現を可視化することができました。

ドラッグ操作により表示範囲や表示位置を変えたり、凡例のデータ名をクリックしデータの表示・非表示を切り替えたりすることができます。

Dash Bio⑩（OncoPrint）

OncoPrint

OncoPrintコンポーネントを使うと、ヒートマップによって複数のゲノム変化イベントを可視化することができます。

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

上記のDash Enterpriseにあるサンプルを参考にして、ゲノム変化イベントを表示してみます。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import json
import urllib.request as urlreq
import dash
import dash_bio as dashbio

app = dash.Dash(__name__)


data = urlreq.urlopen(
    'https://git.io/oncoprint_dataset3.json'
).read().decode('utf-8')

data = json.loads(data)

app.layout = dashbio.OncoPrint(data=data)

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

[ブラウザで表示]

ゲノム変化イベントを表示することができました。

ドラッグ操作により表示範囲や表示位置を変えたり、凡例のデータ名をクリックすることによりデータの表示・非表示を切り替えたりすることができます。

Dash Bio⑨（ニードル プロット）

ニードル プロット

NeedlePlotコンポーネントを使うと、JSON形式のデータを点と線の組み合わせで可視化することができます。

ニードル プロットは、データポイントを横方向のベースラインに接続する垂直線を表示し、指定された値の上と下の両方の値を表示する場合に便利です。

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

上記のDash Enterpriseにあるサンプルを参考にして、ニードル プロットを表示してみます。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import json
import urllib.request as urlreq
import dash
import dash_bio as dashbio

app = dash.Dash(__name__)

data = urlreq.urlopen(
    'https://git.io/needle_PIK3CA.json'
).read().decode('utf-8')

mdata = json.loads(data)

app.layout = dashbio.NeedlePlot(
                mutationData=mdata,
                rangeSlider=True)

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

[ブラウザで表示]

ニードルプロットを表示することができました。

ドラッグ操作により表示範囲や表示位置を変えたり、凡例のデータ名をクリックすることによりデータの表示・非表示を切り替えたりすることができます。

Dash Bio⑧（NGL分子を可視化）

NGL分子を可視化

NglMoleculeViewerコンポーネントを使うと、NGL分子を可視化することができます。

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

上記のDash Enterpriseにあるサンプルを参考にして、NGL分子を可視化してみます。

[ソースコード]

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
42
43
44
45
46
47
48
49
50
51
52
import dash
import dash_bio as dashbio
from dash import dcc, html
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate
import dash_bio.utils.ngl_parser as ngl_parser

app = dash.Dash(__name__)

data_path = "https://raw.githubusercontent.com/plotly/datasets/master/Dash_Bio/Molecular/"

dropdown_options = [
    {"label": "1BNA", "value": "1BNA"},
    {"label": "MPRO", "value": "MPRO"},
    {"label": "PLPR", "value": "PLPR"},
    {"label": "5L73", "value": "5L73"},
    {"label": "NSP2", "value": "NSP2"}
]

app.layout = html.Div([
    dcc.Dropdown(
        id="default-ngl-molecule-dropdown",
        options=dropdown_options,
        placeholder="Select a molecule",
        value="1BNA"
    ),
    dashbio.NglMoleculeViewer(id="default-ngl-molecule"),
])

@app.callback(
    Output("default-ngl-molecule", 'data'),
    Output("default-ngl-molecule", "molStyles"),
    Input("default-ngl-molecule-dropdown", "value")
)
def return_molecule(value):

    if value is None:
        raise PreventUpdate

    molstyles_dict = {
        "representations": ["cartoon", "axes+box"],
        "chosenAtomsColor": "white",
        "chosenAtomsRadius": 1,
        "molSpacingXaxis": 100,
    }

    data_list = [ngl_parser.get_data(data_path=data_path, pdb_id=value, color='red',reset_view=True, local=False)]

    return data_list, molstyles_dict

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

[ブラウザで表示]

NGL分子を可視化することができました。

左クリックでドラッグをすると角度を変えて表示することができ、右クリックでドラッグすると位置を変えて表示することができます。

またスクロールの上下をすることによって拡大・縮小表示をすることができます。

Dash Bio⑦（SMILES記法を可視化）

SMILES記法を可視化

Jsmeコンポーネントを使うと、SMILES記法で書かれた文字列を可視化することができます。

SMILES記法とは、分子の化学構造をASCII符号の英数字で文字列化した、構造的に曖昧性の無い表記方法です。

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

上記のDash Enterpriseにあるサンプルを参考にして、SMILES記法で書かれた文字列を可視化してみます。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import dash
import dash_bio as dashbio
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    dashbio.Jsme(
        smiles='O=C(Nc1cccc(Cl)c1)c3cncc4nnc(c2ccc(OC(F)F)cc2)n34',
    ),
])

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

[ブラウザで表示]

SMILES記法で書かれた文字列を可視化することができました。

Dash Bio⑥（分子構造を可視化）

分子構造を可視化

Speckコンポーネントを使うと、分子構造を可視化することができます。

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

上記のDash Enterpriseにあるサンプルを参考にして、メタンの分子構造を可視化してみます。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import urllib.request as urlreq
import dash
import dash_bio as dashbio
from dash_bio.utils import xyz_reader

app = dash.Dash(__name__)

data = urlreq.urlopen(
    'https://git.io/speck_methane.xyz'
).read().decode('cp932')

data = xyz_reader.read_xyz(datapath_or_datastring=data, is_datafile=False)

app.layout = dashbio.Speck(data=data)

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

[ブラウザで表示]

メタン分子構造を可視化することができました。

マウスをドラッグをすると角度を変えて表示することができます。

また Ctrl＋スクロール上下 で拡大・縮小表示をすることもできます。

Dash Bio⑤（核酸／アミノ酸配列を可視化）

核酸／アミノ酸配列を可視化

AlignmentChartコンポーネントを使うと、FASTA形式やClustal形式のデータから核酸またはアミノ酸の配列を可視化することができます。

Dash Enterprise - dash_bio.AlignmentChart Examples and Reference

上記のDash Enterpriseにあるサンプルを参考にして、細胞性腫瘍(cellular tumor)を可視化してみます。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import dash
import dash_bio as dashbio
from dash import html
import urllib.request as urlreq
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

data = urlreq.urlopen(
    'https://git.io/alignment_viewer_p53.fasta'
).read().decode('utf-8')

app.layout = html.Div([
    dashbio.AlignmentChart(
        data=data
    )
])

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

[ブラウザで表示]

細胞性腫瘍(cellular tumor)を可視化することができました。

グラフをドラッグすると位置を変えて表示したり、表示範囲を変更して表示したりすることができます。

Dash Bio④（生体分子構造）

生体分子構造を可視化

Molecule3dViewerコンポーネントを使うと生体分子構造を３次元に可視化することができます。

Dash Enterprise - dash_bio.Molecule3dViewer Examples and Reference

上記の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
import dash
import dash_bio as dashbio
from dash import html
from dash_bio.utils import PdbParser, create_mol3d_style
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

parser = PdbParser('https://git.io/4K8X.pdb')

data = parser.mol3d_data()
styles = create_mol3d_style(
    data['atoms'], visualization_type='cartoon', color_element='residue'
)

app.layout = html.Div([
    dashbio.Molecule3dViewer(
        id='dashbio-default-molecule3d',
        modelData=data,
        styles=styles
    )
])

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

[ブラウザで表示]

生体分子構造を３次元に可視化することができ、ドラッグするといろいろな角度で表示することができました。

また Ctrl＋スクロール上下 で拡大・縮小表示することもできます。