Python
plotly
Dash?

Dash のチュートリアルを触ってみる.

More than 1 year has passed since last update.

本日は 

Python だけでWebアプリが作れちゃうというのがウリの
Dash by plotly

を触ってみます. サンプルコードの写経がだるかったので簡易版を作ってみました.

install

公式ページから抜粋 

$ pip install dash==0.19.0  # The core dash backend
$ pip install dash-renderer==0.11.1  # The dash front-end
$ pip install dash-html-components==0.8.0  # HTML components
$ pip install dash-core-components==0.14.0  # Supercharged components
$ pip install plotly --upgrade  # Latest Plotly graphing library

Sample Code

のCoreComponentsのセクションを参考にシンプルにしました.

example.py
"""
The dash_core_components include a set a higher-level components
like dropdowns, graphs, markdown blocks, and more...
Like all Dash components, they are described entirely declaratively.
Every option that is configurable is available as a keyword argument of the
component.
"""

import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()

dropdown = [html.Label('Dropdown'),
            dcc.Dropdown(options=[
                {'label': 'A', 'value': 'a'},
                {'label': 'B', 'value': 'b'},
                {'label': 'C', 'value': 'c'}],
            value='b')]

multi_select_dropdown = [html.Label('Multi-Select Dropdown'),
                         dcc.Dropdown(options=[
                             {'label': 'P', 'value': 'p'},
                             {'label': 'Q', 'value': 'q'},
                             {'label': 'R', 'value': 'r'}],
                         value=['q', 'r'],
                         multi=True)]

radio_item = [html.Label('Radio Items'),
              dcc.RadioItems(options=[
                  {'label': 'X', 'value': 'x'},
                  {'label': 'Y', 'value': 'y'},
                  {'label': 'Z', 'value': 'z'}],
              value='z')]

check_box = [html.Label('Checkbox'),
             dcc.Checklist(options=[
                 {'label': 'S', 'value': 's'},
                 {'label': 'T', 'value': 't'},
                 {'label': 'U', 'value': 'u'}],
             values=['s', 'u'])]

slider = [html.Label('Slider'),
          dcc.Slider(min=0,
                     max=5,
                     marks={i:i for i in range(5)},
                     value=3)]

text_input=html.Div([html.Label('Text input'),
                    html.Br(),
                    dcc.Input(value='input here',type='text'),
                    html.Br()])

app.layout = html.Div([
    *dropdown,
    *multi_select_dropdown,
    *radio_item,
    *check_box,
    text_input,
    *slider,
], style={'columnCount': 2})


def main():
    app.run_server(debug=True, port=8800)

if __name__ == '__main__':
    main()

コードの量が多いのですが, 

  1. 各モジュールをインポート.
  2. app=dash.Dash() でインスタンスを作成
  3. HTMLのタグ, 要素を入れたいときは html.<HTMLのタグ,要素> というようにインスタンスを作る.
  4. UI部品(コンポーネント)が欲しいときは dcc.<コンポーネント名> といったようにインスタンスを作る.
  5. UI全体の構成を app.layout で指定する
  6. app.run_server() を呼び出す.

というようにコードを書いていきます.

実行例

$ python example.py

を実行したのちブラウザを立ち上げて 127.0.0.1:8800 にアクセスする.

スクリーンショット 0029-11-28 午後8.03.38.png

上図のようなものが出力されればOKです.
PythonとおぼろげなHTMLのタグの知識があればリッチなUIが作れちゃう.
これで可視化ツールを作ってみたいですね.

今日はこんなところでおしまい.