高度な対話型の可視化が可能なPlotlyを紹介する。
図の構成要素
Plotlyにおける図は、以下のように構成される。
- トレース： 基本描画単位（散布図 Scatter, 線グラフ Line, 棒グラフ Bar などのオブジェクト）
- データ： トレースのリスト（複数のトレースを1つの画面に描画）
- レイアウト： 図のレイアウト．タイトル，軸などを定義
- 図： データとレイアウトから構成されるオブジェクト
データ以外は，辞書（の辞書）から成るデータ構造で保管される．
描画
- plotly.offline.plot(図オブジェクト) でhtmlファイルを出力（と同時にブラウザで表示）
- 図オブジェクト.show() でJupyterのノートに出力 （Jupyter Labのバージョンによっては表示されない．）
Plotlyの図はmatplotlibのような画像ではないので，拡大・縮小だけでなく，トレースの選択やマウスオーバーでデータの表示などの対話型の操作ができる．
import plotly
import plotly.graph_objs as go
# Google Colab.でプロットするためには， 以下を実行する．
# import plotly.io as pio
# pio.renderers.default = "colab"
trace = go.Scatter(
x=[1, 2, 3, 4, 5],
y=[10, 20, 30, 20, 10],
mode="markers + lines",
text=["A", "B", "C", "D", "E"],
marker=dict(size=14, line=dict(width=1), color="red", opacity=0.3),
)
data = [trace]
fig = go.Figure(data)
plotly.offline.plot(fig);
２つ以上のトレースをもつ図も、同様に作ることができる。 トレースをクリックすることによって選択が可能であり， マウスを点の上に移動させると，データが表示されることを確認しよう．
trace1 = go.Scatter(
x=[1, 2, 3, 4, 5],
y=[10, 20, 30, 20, 10],
mode="markers + lines",
)
trace2 = go.Scatter(
x=[1, 2, 3, 4, 5],
y=[20, 20, 20, 20, 20],
mode="markers + lines",
)
data = [trace1, trace2]
layout = go.Layout(
title="2つのトレース",
)
fig = go.Figure(data, layout)
plotly.offline.plot(fig);
trace1 = go.Bar(x=["Sara", "Kitty", "Mickey"], y=[160, 64, 83], name="Height")
trace2 = go.Bar(x=["Sara", "Kitty", "Mickey"], y=[60, 12, 20], name="Weight")
data = [trace1, trace2]
fig = go.Figure(data)
plotly.offline.plot(fig);
layout = go.Layout(
barmode="stack",
title="身長と体重",
)
fig = go.Figure(data=data, layout=layout)
plotly.offline.plot(fig);
import pandas as pd
iris = pd.read_csv(
"http://logopt.com/data/iris.data",
names=["sepal length", "sepal width", "petal length", "petal width", "class"],
)
iris.head()
アヤメのデータのヒストグラムを描画する．
ヒストグラムは数値データの分布の概要を知る際に便利である．
# グラフオブジェクトの Histgram クラスを用いて，インスタンスを生成する．
trace1 = go.Histogram(x=iris["sepal length"], opacity=0.75, name="sepal length")
trace2 = go.Histogram(x=iris["sepal width"], opacity=0.75, name="sepal width")
trace3 = go.Histogram(x=iris["petal length"], opacity=0.75, name="petal length")
trace4 = go.Histogram(x=iris["petal width"], opacity=0.75, name="petal width")
# データはトレースのリストである．
data = [trace1, trace2, trace3, trace4]
# レイアウトでグラフのタイトルや軸名を設定する．
# レイアウトも辞書（の辞書）のような形式である．
layout = go.Layout(
title="Iris Histgram", xaxis=dict(title="Length/Width"), yaxis=dict(title="Count")
)
# 図（Figure）はデータとレイアウトを合わせたオブジェクトである．
fig = go.Figure(data=data, layout=layout)
plotly.offline.plot(fig);
pokemon = pd.read_csv("http://logopt.com/data/poke.csv", encoding="utf-8", index_col=0)
pokemon.head()
問題 (SAT,GPA)
http://logopt.com/data/SATGPA.csv データを読み込み，2種類のSATの成績とGPAのヒストグラムを描画せよ．
trace = go.Scatter(
x=iris["sepal length"],
y=iris["petal width"],
mode="markers",
)
layout = go.Layout(
title="Iris Scatter",
xaxis=dict(title="sepal length"),
yaxis=dict(title="petal width"),
)
data = [trace]
fig = go.Figure(data, layout)
plotly.offline.plot(fig);
問題（車）
http://logopt.com/data/auto-mpg.data から車のデータを読み込み， 重さ weight と燃費 mpg の散布図を描け．
L = [
"mpg",
"cylinders",
"displacement",
"horsepower",
"weight",
"acceleration",
"year",
"origin",
"name",
]
car = pd.read_csv(
"http://logopt.com/data/auto-mpg.data", delim_whitespace=True, names=L
)
問題（ダイヤモンド）
http://logopt.com/data/Diamond.csv からダイアモンドの価格データを読み込み，カラット carat と価格 price の散布図を描け．
pokemon = pd.read_csv("http://logopt.com/data/poke.csv", encoding="utf-8", index_col=0)
pokemon.head()