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のグラフ問題

グラフの縦幅の調整方法