【plotlyレイアウト応用編】<>hovertemplate活用

hoverは浮かぶという意味があり、plotlyではグラフのプロットにカーソルを動かした際にデータの詳細を表示させるオプションのことを指します。

本記事ではhovertemplateやcustomdataを使ってhoverをさらにカスタマイズする方法について解説します。

特にcustomdataの使い方はHPにも解説がほとんどないので参考になるかと思います。

それでは本記事の構成を紹介します。

①pxでのhover_name、hover_dataの使い方

plotly_expressで使用できるgapminderのデータを使っていきます。

query()で2007年のデータのみを抜き出した状態でグラフ化します。

dfの中身は以下のようになっています。

hover_name=”country”, hover_data=[“continent”, “pop”]

とすることで、ホバーのタイトルが国名、ホバーの内容がx軸、y軸のデータ＋大陸(continent)と人口(pop)になります。

実際にプロットにマウスを当てて確認してみてください。

import plotly.graph_objects as go
import plotly.express as px

df= px.data.gapminder().query("year==2007")

fig = px.scatter(df,x="gdpPercap", y="lifeExp", log_x=True,
                 hover_name="country", hover_data=["continent", "pop"])

fig.show()

②hovertemplateの使い方

hovertemplateはplotly.graph_objects（go）で使用できます。

hovertemplate=”平均寿命:%{y}<br>”の部分のみ解説します。

%{y}と入力することでyの値を表示できます。

変数を{}で囲うことで認識する仕組みでxやz（3Dプロット）でも使えます。

customdataとの組み合わせでこの概念の理解が必須となります。

df = px.data.gapminder().query("year==2007")

fig = go.Figure(data=[go.Scatter(x=df["gdpPercap"], y=df["lifeExp"],mode='markers',
                                 hovertemplate="平均寿命:%{y}")])

fig.show()

③customdataとhovertemplateを組み合わせる

customdata=df[[‘country’,’continent’,’lifeExp’,’pop’,’gdpPercap’]]

と記述し、customdataに各列のデータを格納します。

hovertemplate=”国:%{customdata[0]}

customdata[0]は0列名、countryのデータを指すのでホバーでは国名が表示されます。

つまりcustomdataを使うとhovertemplateで指定する際に好きなデータを好きなだけ表示できます。

fig = go.Figure(data=[go.Scatter(x=df["gdpPercap"], y=df["lifeExp"],mode='markers',
                                 customdata=df[['country','continent','lifeExp','pop','gdpPercap']],hovertemplate="国:%{customdata[0]}")])

fig.show()

④条件でグラフの色やプロットサイズを変える

小技ですが、予め条件を設定したデータを用意しておくと

df_80 = px.data.gapminder().query(“lifeExp>80”)

fig.add_traceを使って色違いのプロットを表示することができます。

その場合、当然ホバーの内容もhovertemplateを変えることで自由自在に表示を変更できます。

marker={‘size’:10}でマーカーサイズも変更しておくとより見やすいグラフになります。

最後の一文はなくても良いですが、タイトルやグラフサイズ、凡例の表示等も変えれることは覚えておいて損はないです。

fig.update_layout(title_text=””,height=400, width=400,showlegend=False)

df = px.data.gapminder().query("year==2007")
df_80 = px.data.gapminder().query("lifeExp>80")

fig = go.Figure(data=[go.Scatter(x=df["gdpPercap"], y=df["lifeExp"],mode='markers',customdata=df[['country','continent','lifeExp','pop','gdpPercap']],hovertemplate="国:%{customdata[0]}")])
fig.add_trace(go.Scatter(x=df_80["gdpPercap"], y=df_80["lifeExp"],mode='markers',marker = {'size': 10},customdata=df_80[['country','continent','lifeExp','pop','gdpPercap']],hovertemplate="人口:%{customdata[3]}"))

fig.update_layout(title_text="",height=400, width=400,showlegend=False)

fig.show()

⑤大量のホバーを設定する

<br> は Break(改行)の略です。HTMLで改行として使われるタグですが、〇〇<br> + 〇〇<br>・・・と続けていくことで改行されてホバーが表示されます。

実際にマウスを当てて確認してみてください。

さらに、

fig.add_trace(go.Line(x=df[“gdpPercap”], y=df [‘y_line’],marker_color=’rgb(224, 50, 83)’,line=dict(dash=’dot’)))

で線を引く工夫をしています。今回は基準線のような役割で引きました。

marker_colorで色を指定し、lineのdash=’dot’で点線に設定しています。

df = px.data.gapminder().query("year==2007")
df_80 = px.data.gapminder().query("lifeExp>80")
df ['y_line']= 80

fig = go.Figure(data=[go.Scatter(x=df["gdpPercap"], y=df["lifeExp"],mode='markers')])

fig.add_trace(go.Scatter(x=df_80["gdpPercap"], y=df_80["lifeExp"],mode='markers',
                         marker = {'size': 10},customdata=df_80[['country','continent','lifeExp','pop','gdpPercap']],
                         hovertemplate="国:%{customdata[0]}<br>"+"大陸:%{customdata[1]}<br>"+"平均寿命:%{customdata[2]}<br>"
                        +"人口:%{customdata[3]}<br>"+"GDP:%{customdata[4]}<br>"))

fig.add_trace(go.Line(x=df["gdpPercap"], y=df ['y_line'],marker_color='rgb(224, 50, 83)',line=dict(dash='dot')))

fig.update_layout(title_text="2007年",height=400, width=400,showlegend=False)

fig.update_layout(yaxis = dict(range=(50, 90)))

    
fig.show()

⑥HTMLタグの応用（HPの例題）

今回紹介した内容でhovertemplateのコード部分は解読可能ですが、一部紹介していない部分があるので紹介します。

<b></b>で囲うことでフォントを太字（bold）にできます。

また、text=を設定しておいてhovertemplateで{text}を参照することもできます。

その他、{x:$,.0f}で単位をドルかつカンマをつけてみたり、{y:.0%}で%表示したりといった例が紹介されています。

import plotly.graph_objects as go
import plotly.express as px
import pandas as pd
import math

data = px.data.gapminder()
df_2007 = data[data['year']==2007]
df_2007 = df_2007.sort_values(['continent', 'country'])

bubble_size = []

for index, row in df_2007.iterrows():
    bubble_size.append(math.sqrt(row['pop']))

df_2007['size'] = bubble_size
continent_names = ['Africa', 'Americas', 'Asia', 'Europe', 'Oceania']
continent_data = {continent:df_2007.query("continent == '%s'" %continent)
                              for continent in continent_names}

fig = go.Figure()

for continent_name, continent in continent_data.items():
    fig.add_trace(go.Scatter(
        x=continent['gdpPercap'],
        y=continent['lifeExp'],
        name=continent_name,
        text=df_2007['continent'],
        hovertemplate=
        "<b>%{text}</b><br><br>" +
        "GDP per Capita: %{x:$,.0f}<br>" +
        "Life Expectation: %{y:.0%}<br>" +
        "Population: %{marker.size:,}" +
        "<extra></extra>",
        marker_size=continent['size'],
        ))

fig.update_traces(
    mode='markers',
    marker={'sizemode':'area',
            'sizeref':10})

fig.update_layout(
    xaxis={
        'title':'GDP per capita',
        'type':'log'},
    yaxis={'title':'Life Expectancy (years)'})

fig.show()

以上で解説は終わりです。

Plotlyに関する書籍紹介

↓Plotlyについて学べる数少ない参考書です。