DashHandsOn 02
Dashとは
ウェブフレームワーク
Flask / React / Plotly
データの可視化を簡単に作成し、それをウェブアプリケーションにできる
可視化という部分から ツールを使ってデータの深堀がしやすい
作るのが簡単!
レイアウト
Dashアプリケーションの静的な部分を担当する
コンポーネントを組み合わせて作成する
コンポーネントは提供されたものがあるほか、自作もできる
他は今後のハンズオンで扱うかも
今日はみんなで同じレイアウトを作成します
本日最終的に作成するレイアウト
本日の内容
コンポーネントの作成
グラフの作成
コンポーネントを組み合わせてレイアウトの作成
コンポーネントの作成
Dashのレイアウト ==> コンポーネントを組み合わせて作ったもの
コンポーネント ==> クラスに属性値を与えて作成する
各コンポーネントは多くの属性を持ちます。コールバックはその属性に渡す値を変えることによりアプリを動的にします。
style属性; コンポーネントの見た目などを整える。UIは
グラフの作成
plotlyを使って作成する
plotlyには簡単にグラフが書けるのplotly.expressがある。
データは plotly.express.data にデータセットがあるので、それを用いる
Dashアプリケーションでグラフを表示する場合、Graphコンポーネントのfigure属性にplotly.expressで作成したfigureを渡す
レイアウトの作成
レイアウトはコンポーネントを組み合わせて作成する
コンポーネントの組み合わせにはDivコンポーネントのchildren属性を用いる
style属性に対して "display" : "inline-block" を渡すことにより要素を横並びにする
並べるコンポーネントの幅は100%以下にする
firefoxだと動かない問題
ノートンかもしれない・・・
Dashのグラフ問題
グラフの縦幅の調整方法