Plotly のグラフと図

Dash と Plotly で作るダッシュボード

Alex Scriven

Data Scientist

Dash とは？

  • 対話的なWebアプリを作成するPythonライブラリ

$$

$$

利点:

  • 無料（TableauやPower BIと異なる）
  • PythonだけでJavaScriptの力を活用
  • Webアプリ用フレームワークよりコードが少ない
Dash と Plotly で作るダッシュボード

Plotly と Dash

  • 併用に適する

$$

  • Dash: 複数の Plotly グラフで対話的ダッシュボード
  • この例を参照

 

金融ダッシュボードのスクリーンショット。複数のグラフ、テキスト、表、画像を含み、ホバー詳細付きの折れ線グラフが目立つ

Dash と Plotly で作るダッシュボード

Plotly とは？

 

  • Plotly を復習し、Dash に注力
  • モダンで対話的なグラフを作るPythonライブラリ
    • JavaScriptをラップしつつ、Pythonで記述
  • plotly.express でグラフ作成

$$

$$

$$

Dash と Plotly で作るダッシュボード

ECデータの概要

  • EC売上のデータセット

$$

$$

  • 詳細:
    • 商品カテゴリ（大分類・小分類）＋説明
    • 単価、数量（＋ OrderValue）
    • 国
    • 販売の年月

EC売上の図示

Dash と Plotly で作るダッシュボード

plotly.express で折れ線グラフ

 

import plotly.express as px

line_graph = px.line(

  data_frame=ecom_sales,
  x='Year-Month',
  y='Total Sales ($)', 
  title='Total Sales by Month')

line_graph.show()

 

月次売上の折れ線グラフ。ポイントにホバーすると月と売上がポップアップ表示されるGIF

Dash と Plotly で作るダッシュボード

plotly.express で棒グラフ

$$

bar_fig = px.bar(
  data_frame=ecom_sales,
  x='Total Sales ($)',
  y='Country',
  title='Total Sales by Country',

  orientation='h')

bar_fig.show()

 

横棒グラフのGIF。x軸が総売上、y軸が国。バーにホバーするとデータが表示される

Dash と Plotly で作るダッシュボード

Plotly グラフのカスタマイズ

 

棒グラフのバー幅を変更:

bar_fig.update_layout({'bargap': 0.5})

bar_fig.show()

$$

$$

$$

Plotly ドキュメント を参照

 

横棒グラフの画像。前スライドと同じだが、バー間の間隔が小さい

Dash と Plotly で作るダッシュボード

Passons à la pratique !

Dash と Plotly で作るダッシュボード

Preparing Video For Download...