Plotlyは、インタラクティブで美しいデータ可視化を簡単に行える優れたPythonライブラリです。

この記事では、Plotlyを使ったグラフ作成の基本から、応用的なテクニックまでを丁寧に解説します。

Plotlyの魅力

インタラクティブ性

Plotlyは、インタラクティブなグラフが作成できる点が大きな魅力です。例えば、グラフ上でカーソルを動かすことでデータポイントの詳細が表示されたり、ズームやパンといった操作が直感的に行えます。また、グラフの見た目も美しく、スタイリッシュなデザインを簡単に実現できます。

HTML出力

Plotlyの生成するチャートは、HTMLコードとして出力可能なので、Webサイトや社内ツールへの埋め込みが可能です。

シンプルさのplotly.expressと柔軟性のplotly.graph_objects

基本的な可視化を素早く作るならplotly.express、細部までこだわった複雑な可視化を作るならplotly.graph_objectsと、目的に合わせたオプションが提供されています。

さてここからは、3ステップに分けて、Plotlyの基本概念から応用までを見ていきましょう。闇雲にAPIリファレンスを読むのではなく、段階的に理解を深めていくことでPlotlyを使いこなせるようになります。

ステップ1: Plotly Expressの基本概念を理解して、データ可視化をサクサク作る

まず最初のステップとして、Plotly Expressを用いてさまざまな種類のデータ可視化を自由自在に作れるようになりましょう。まずは基本概念を理解していきましょう！

1-1. px.{チャートの種類}

Plotly Expressの可視化を作成する基本的な構文は、 px.{チャートの種類}() という形式です。まずは、どんなチャートの種類があるかを把握すると、スムーズにPlotlyを利用できます。

主要なチャートの種類

• 棒グラフ ... px.bar()
• 折れ線グラフ ... px.line()
• 散布図 ... px.scatter()
• エリアグラフ ... px.area()
• 円グラフ ... px.pie()
• ヒストグラム ... px.histogram()
• 箱ひげ図 ... px.box()
• バイオリン図 ... px.violin()
• ヒートマップ ... px.density_heatmap()
• 地図（散布図） ... px.scatter_mapbox()
• 地図（ライン） ... px.line_mapbox()
• 地図（塗り分け） ... px.choropleth()
• ペアプロット ... px.scatter_matrix()
• サンバーストチャート ... px.sunburst()
• ツリーマップ ... px.treemap()

1-2. DataFrameを受け取る

px.bar() , px.line() などの関数は、第一引数にDataFrameを受け取ります。このDataFrameが可視化されるデータになります。

1-3. 基本的なオプションを理解する

共通のオプション: title, subtitle, color, labels

まずは、ほとんどのチャートで共通のオプションを把握しましょう。

• title … グラフの上部に表示されるタイトル文字列です。
• subtitle … タイトル文字列の下に表示される文字列です。
• color … グラフの色分けをしたいカラム名を指定します。
• labels … 軸やプロパティの値を上書きするための辞書形式。

import plotly.express as px

gapminder2007 = px.data.gapminder().query('year == 2007')
fig = px.scatter(
  gapminder2007, # DataFrame
  x='gdpPercap', 
  y='lifeExp', 
  color='continent', 
  title='Life Expectancy vs GDP per Capita'
  labels={'gdpPercap': 'GDP per Capita', 'lifeExp': 'Life Expectancy'}
)

1次元グラフ (パイチャート・帯グラフ) のオプション: value, names

値の表現が一次元のチャート、すなわちパイチャートや帯グラフに特有のオプションを見ていきましょう。

• value … valueで指定したカラムが、その系列の値として扱われます。
• names … namesで指定したカラムが、その系列のラベルに用いられます。

df = px.data.gapminder().query("year == 2007").query("continent == 'Europe'")
df.loc[df['pop'] < 2.e6, 'country'] = 'Other countries' # Represent only large countries
fig = px.pie(
  df, 
  values='pop',
  names='country',  # Germany, Turkey, France ...
  title='Population of European continent'
)

2次元グラフ (xyグラフ) のオプション: x, y, orientation, text

棒グラフや折れ線グラフのようなX軸・Y軸からなるチャートのオプション

• x … x軸に使うカラム名
• y … y軸に使うカラム名
• orientation … ‘v’ を指定すると、xが横でyが縦に表示される。 ‘h’ を指定するとその逆。デフォルト値は ‘v’
• text … グラフ中に表示したいカラム名

jp_pop = px.data.gapminder().query("country == 'Japan'")
fig = px.bar(
  jp_pop, 
  y='pop', 
  x='year', 
  title='Population of Japan',
  text='year'
)

ステップ2: チャートをカスタマイズする

チャートの色を変える: color_discrete_sequence

チャートの色を変更するためには、color_discrete_sequence か color_discrete_map のオプションを使用します。

• color_discrete_sequence … 色の配列を受け付けます。CSSの色表現 (’red’, ‘#ff0000’ など) を使うことができます。配列にある色を順番に使いながら、配色を自動的に作成します。また、Plotly Expressのライブラリの中でプリセットも提供されています。ビルトインで提供されているカラースケールは、公式ドキュメントから確認できます。 https://plotly.com/python/builtin-colorscales/
• color_discrete_map … 辞書形式で色を直接指定します。辞書のキーに系列名、値に色コードをセットしてください。

ホバー時のコンテンツを変える: hover_name, hover_data

チャートがホバーされた時に表示するコンテンツを変更するには、hover_name, hover_dataオプっションを用います。

fig = px.scatter(
	gapminder2007,
	x='gdpPercap',
	y='lifeExp',
	color='continent',
	size='pop',
	size_max=60, 
  hover_name='country'
)

チャートを分割して並べる: facet_col, facet_row

facet_row と facet_col は、データを複数のサブプロット（小分割したグラフ）に自動的に分割して表示できるオプションです。指定した列（または配列）の各ユニークな値ごとにサブプロットを作成し、縦方向（facet_row）・横方向（facet_col）に並べて比較できるようにします。

• facet_row: 指定した列の値を元に、縦方向（行）に複数の小分割サブプロットを配置します。
• facet_col: 指定した列の値を元に、横方向（列）に複数の小分割サブプロットを配置します。

gapminder2007 = px.data.gapminder().query('year == 2007')
fig = px.scatter(
  gapminder2007,
  x='gdpPercap',
  y='lifeExp',
  title='Life Expectancy vs GDP per Capita',
  labels={'gdpPercap': 'GDP per Capita', 'lifeExp': 'Life Expectancy'},
  facet_col='continent',
)

アニメーション

animation_frame と animation_group は、Plotly Express でアニメーションを作成するときに使うオプションです。

• animation_frame: グラフを切り替えるフレームを分割するカラムを指定。指定列の値がアニメーションのフレームに対応する。
• animation_group: フレーム間で同一オブジェクトとして扱うグループ化用の列を指定。マーカーなどを連続的に追跡できる。

gapminder = px.data.gapminder()
fig = px.scatter(
  gapminder,
  x='gdpPercap',
  y='lifeExp',
  color='continent',
  size='pop',
  animation_frame='year',
  animation_group='country')

ステップ3: さらに複雑なカスタマイズ: fig.update_layout()

px.bar() px.pie() などで作成したオブジェクトに対して、 .update_layout() を用いることでさらなるカスタマイズが可能です。

update_layout関数のドキュメントはこちら: https://plotly.com/python/reference/layout/

この記事では、よく使いそうなオプションを紹介します。

font_: フォントの設定

font_family, font_color, font_sizeなどでフォントの設定が可能です。また、title_font_familyやsubtitle_font_color のように接頭辞をつけることで適応範囲を限定できます。

fig.update_layout(
    font_family="Courier New",
    font_color="blue",
    font_size="14"
    title_font_family="Times New Roman",
    title_font_color="red",
    legend_title_font_color="green"
)

paper_bgcolor, plot_bgcolor: 背景色の設定

paper_bgcolorはHTML全体の背景色、 plot_bgcolorはチャート描画部分の背景色を指定できます。

fig.update_layout(
  paper_bgcolor='#E8E8EC',
  plot_bgcolor='#F9F9FB'
)

update_layoutは、他にも様々なオプションがあります。より詳しい内容はドキュメントを参照してください！

ネクストステップ: PlotlyをWebアプリに組み込むには？

Plotlyで美しく、インタラクティブなデータ可視化が作れることはよくわかりました。

Plotly Dash

Plotly Dashは、Plotlyチームが提供しているダッシュボード構築フレームワークです。PythonコードだけでUIレイアウトからインタラクションの制御まで設定できるため、HTMLやJavaScriptなどを直接扱う必要がありません。フレームワークとしてはFlaskをベースにしており、Flaskがデプロイできる環境であれば動作させることもできます。

https://dash.plotly.com/

Morph

Morphは、Pythonとマークダウンでウェブアプリが構築できるフレームワークです。フロントエンドは、マークダウンファイルの中にコンポーネントを配置することで構築することができるため、非常に簡単にインタラクティブで美しいWebアプリケーションを構築することができます。

セットアップが非常に簡単で、インストール後はコマンド一つでプロジェクトが立ち上がり、すぐにPythonコードとマークダウンでアプリを開発することができます。

https://docs.morph-data.io/docs/ja/getting-started/why-morph

$ pip install morph-data
$ morph new my_project

$ cd my_project
$ morph serve

Plotly.js

チャートをJavaScriptで書くなら、Plotly.jsを使ってフロントエンドアプリケーションに組み込むのも、選択肢の一つになるでしょう。

https://github.com/plotly/plotly.js