• Skip to main content
  • Skip to primary sidebar

学習記録

Dash

DashでMarkdown

2018年9月26日 by 河副 太智 Leave a Comment

Markdownを記述すると簡単にhtml文書構成ができます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import dash
import dash_html_components as html
 
app = dash.Dash()
 
text = '''
あいうえお
かきくけこ
さしすせそ
[links](https://commonmark.org/help/)
'''
 
app.layout = html.Div([
            dcc.Markdown(children=text)
])
 
if __name__ == '__main__':
    app.run_server()    

 

Filed Under: Dash

DashのDash Core Components一覧

2018年9月26日 by 河副 太智 Leave a Comment

Dash Core Componentsのページにあるコードをコピペするだけで
ほしいコンポーネントが簡単に設置できます。

 

ドロップダウン、スライダー、ラジオボタンの3つを設置↓

コード

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
import dash_html_components as html
 
app = dash.Dash()
app.layout = html.Div([
    
            html.Label("Dropdown"),
            dcc.Dropdown(options=[
                {"label":"New York City",
                "value":"NYC"},
                 {"label":"San Francisco",
                 "value":"SF"}],
                        value="SF"),
            html.Label("Slider"),
            dcc.Slider(min=-10,max=10,step=0.5,value=0,
                      marks={i: i for i in range (-10,10)}),
            html.P(html.Label("Some Radio Items")),
            dcc.RadioItems(options=[{"label":"New York City",
                "value":"NYC"},
                 {"label":"San Francisco",
                 "value":"SF"}],
                          
                          value="SF")    
])
    
    
if __name__ == '__main__':
    app.run_server()    

 

Filed Under: Dash

DashでHTMLとCSSを追加する

2018年9月26日 by 河副 太智 Leave a Comment

dash_html_componentsを使用すると簡単にHTMLやCSSを
書くことができます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import dash
import dash_html_components as html
 
app = dash.Dash()
app.layout = html.Div(["this is the outermost div",
                      html.Div(["this is an inner di v"],
                              style={"color":"red","border":"3px red solid"}),
                      html.Div(["another inner div"],
                              style={"color":"blue","border":"3px blue solid"})],
                     style={"color":"green","border":"2px green solid"})
 
 
if __name__ == '__main__':
    app.run_server()

 

実行すると以下のように表示されます。

 

 

 

様々なDash Core Componentsはリファレンスページにあります。

Filed Under: Dash

Dashの基礎

2018年9月25日 by 河副 太智 Leave a Comment

Dashを使用してローカル環境でのwebappの構築
以下のコードを実行するとポート8050で実行される
Running on http://1xx.0.0.1:8050/

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
import dash
import dash_core_components as dcc
import dash_html_components as html
 
app = dash.Dash()
 
app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),
    html.Div(children='Dash: A web application framework for Python.'),
 
    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }
        }
    )
])
 
if __name__ == '__main__':
    app.run_server()

 

上記コードは値を手入力で入れているので次はplotlyを使用して
グラフを表示させます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
 
df = pd.read_csv("OldFaithful.csv")
 
app = dash.Dash()
 
 
app.layout = html.Div([dcc.Graph(id="old",
            figure={"data":[go.Scatter(x=df["X"],y=df["Y"],mode="markers")],
                "layout":go.Layout(title="old faithful eruptions",
                          xaxis={"title":"Duration"},
                          yaxis={"title":"Interval"})})])
 
 
if __name__ == '__main__':
    app.run_server()

 

↓ローカル上で表示されたWebapp

 

 

 

Filed Under: Dash

  • « Go to Previous Page
  • Page 1
  • Page 2

Primary Sidebar

カテゴリー

  • AWS
  • Bootstrap
  • Dash
  • Django
  • flask
  • GIT(sourcetree)
  • Plotly/Dash
  • VPS
  • その他tool
  • ブログ
  • プログラミング
    • Bokeh
    • css
    • HoloViews
    • Jupyter
    • Numpy
    • Pandas
    • PosgreSQL
    • Python 基本
    • python3
      • webアプリ
    • python3解説
    • scikit-learn
    • scipy
    • vps
    • Wordpress
    • グラフ
    • コマンド
    • スクレイピング
    • チートシート
    • データクレンジング
    • ブロックチェーン
    • 作成実績
    • 時系列分析
    • 機械学習
      • 分析手法
      • 教師有り
    • 異常値検知
    • 自然言語処理
  • 一太郎
  • 数学
    • sympy
      • 対数関数(log)
      • 累乗根(n乗根)
    • 暗号学

Copyright © 2025 · Genesis Sample on Genesis Framework · WordPress · Log in