Plotly 表と図を並べてに表示！(左右・上下)

　Plotly で表を書く記事第3弾です！ これまでの記事をまとめると、以下の通りです。

• Plotly で 表 を描く方法 まとめ！(go.Table)
• Plotly で 表 を描く方法 まとめ2 (figure factory)
• Plotly 表と図を同時に表示！ ← この記事はここ！

　ここまで、go.Table と figure factory の2つの方法で表を書く方法を説明し、その違いについて説明していきましたが、今回の記事では、"figure factory" を用いて、同じデータから表と図を一緒に表示する方法についてまとめていきます！

左右に並べて表示

　配置を設定することで左右に並べて表示することができるので、グラフの書き方はほとんど同じです！
今回の例では、figure factory の create tableを用いて作成した表と、graph objectで折れ線グラフを書いていきます。

　今回も使用するデータは、地域別・年別の LifeExp(平均寿命), pop(人口), gdpPercap(一人あたりのGDP)です。

表の作成

　書き方は簡単で、データフレームdf を容易した上で、 ff.create_table(df)で設定できます！
詳しくは前回の記事で書いているので、そちらを参照してください！

図 (折れ線グラフ)の作成

　グラフの書き方は、ほとんど一緒なのですが、x軸とy軸の設定を以下のようにしてください。
これについては、この後説明を加えます。

xaxis='x2', yaxis='y2'

レイアウト設定

　ここまでで、表示したい表と図を定義しました。そして、ここでは update_layout として レイアウトの設定をしていきます！

fig.update_layout(
    title_text = '地域別の平均寿命の推移',
    margin = {'t':50, 'b':100},
    xaxis = {'domain': [0, .5]},
    xaxis2 = {'domain': [0.6, 1.],'title':'year'},
    yaxis2 = {'anchor': 'x2', 'title': 'lifeExp'}
)

　ひとつずつ、上のupdate_layout の要素を説明していくと、

title_text

表・図の全体のタイトルをつけるためのものです。(必須ではない)

margin

　余白の間隔を指定しています。 't' : top (上側), 'b' : bottom (下側), 'l' : left (左側), right (右側)

xaxis

　x軸に対する設定
(今回の図表だと先に定義している表側のx軸の設定です)

xaxis2, yaxis2

　x, y 軸に対する設定
(今回の図表だと、後に定義している図(折れ線グラフ)側の設定で、そのためグラフの設定時に、xaxisとyaxisを表の軸と区別するために、x2,y2と明記しました。)

domain

配置する「領域」を設定しています。全体を 0 ~ 1とする
上の例では、横軸方向に 0~0.5までを xaxis側の表、0.6~1.0までをxaxis2側の図を表すという形です。

title

軸ラベルのこと (各軸のタイトル (テキスト))

サンプルコード

import plotly.graph_objs as go
import plotly.express as px
import plotly.figure_factory as ff  
# データ準備
df = px.data.gapminder()
df= df.groupby(['continent','year']).mean().reset_index().drop('iso_num',axis=1)
df = df.round(1) #小数点以下第4位までにする

# 表を描く
fig = ff.create_table(df,height_constant=20)

# Add graph data
for continent in df['continent'].unique():
    df_plot = df[df['continent']==continent]
    fig.add_trace(
        go.Scatter(
            x = df_plot['year'],
            y = df_plot['lifeExp'],
            name = continent,
            xaxis='x2', yaxis='y2'
        )
    )

fig.update_layout(
    title_text = '地域別の平均寿命の推移',
    margin = {'t':50, 'b':100},
    xaxis = {'domain': [0, .5]},
    xaxis2 = {'domain': [0.6, 1.],'title':'year'},
    yaxis2 = {'anchor': 'x2', 'title': 'lifeExp'}
)

fig.show()

上下に並べて表示

　ここまでは、左右に並べて表示する方法についてまとめていきましたが、主に左右に分割設定をしている部分はupdate_layout での 各軸のdomain の設定部分でした。これを抑えておけると、他の並べ方も簡単にすることができるので、その一例として上のコードをベースに上下に並べてみようと思います！

　update_layout の一部だけを変えただけでも、表示を変えることができるのですがどこが変わったかわかりますか？

fig.update_layout(
    title_text = '地域別の平均寿命の推移',
    margin = {'t':50, 'b':100},
    yaxis = {'domain': [0, .5]},
    yaxis2 = {'domain': [0.6, 1.],'title':'lifeExp'},
    xaxis2 = {'anchor': 'y2', 'title': 'year'}
)

　よく見ると、上の3行 (margin)までは変わっていないと思いますが、軸設定の部分でx,yが入れ替わっているのがわかると思います。本当にこれだけしか変えていないのですが、実際にグラフを書いてみると下のように上下に並べた図ができます！簡単ですね！
　このdomain設定を意識することで、同じサイズで2つの図表を表示するのではなく、表の方をもう少し大きくしたい！といったことや、グラフをもっと大きくしたい！といった細かい設定もできるようになります！！

サンプルコード

import plotly.graph_objs as go
import plotly.express as px
import plotly.figure_factory as ff  
# データ準備
df = px.data.gapminder()
df= df.groupby(['continent','year']).mean().reset_index().drop('iso_num',axis=1)
df = df.round(1) #小数点以下第4位までにする

# 表を描く
fig = ff.create_table(df,height_constant=20)

# Add graph data
for continent in df['continent'].unique():
    df_plot = df[df['continent']==continent]
    fig.add_trace(
        go.Scatter(
            x = df_plot['year'],
            y = df_plot['lifeExp'],
            name = continent,
            xaxis='x2', yaxis='y2'
        )
    )

fig.update_layout(
    title_text = '地域別の平均寿命の推移',
    margin = {'t':50, 'b':100},
    yaxis = {'domain': [0, .5]},
    yaxis2 = {'domain': [0.6, 1.],'title':'lifeExp'},
    xaxis2 = {'anchor': 'y2', 'title': 'year'}
)

fig.show()

参考サイト

• https://plotly.com/python/figure-factory-subplots/