Plotly: 箱ひげ図上の点にホバーテキストを表示する

投稿者: | 2017年9月8日

概要

  • plotly の箱ひげ図(BoxPlot)上にプロットした点に追加情報を付加する
  • 追加情報はマウスホバーで表示する
  • グラフ上の点を別ページへのリンクにする方法もおまけとして紹介する

Plotly とは

Plotly とは可視化ツールの一つで、
R, MATLAB, python などから API を通してグラフ描画が可能です。

インタラクティブなグラフの描画が特徴的で、
出力されたグラフの一部を拡大したり、
プロットされた点の座標を確認したり、
3D グラフの向きを替えたりできてとても便利です。

また、散布図や棒グラフ、円グラフ、箱ひげ図、
ヒストグラムなどの典型的なグラフの描画は、
ライブラリで用意されているため簡単にグラフの作成が可能です。

箱ひげ図上の点に情報を埋め込んでインタラクティブに表示したい

色々と便利な Plotly ですが、
典型的な使い方から少し外れた使い方をしようと思うと工夫が必要になることがあります。

例えば、箱ひげ図のように点をプロットすることがメインではないグラフに、
点をプロットして、その点に付加情報を埋め込み、
マウスホバーでその情報を表示するとなると、一工夫が必要になってきます。

散布図の場合

散布図を作成する場合は、グラフ上の各点にテキスト情報を持たせることは簡単にできます。

下のグラフは、二次元上にランダムに点をプロットしたもので、
各点に生成された番号の情報を埋め込んでいます。
マウスカーソルを点の上におくと、その点の番号が表示されます。


散布図の場合はテキストの情報を埋め込むのは簡単で、
グラフを plot_ly で作成する際に、引数の text に各点のテキストを与えるだけです。

箱ひげ図の場合

ところが、箱ひげ図の場合は、散布図のように簡単にはテキストの情報を埋め込むことはできません。
上と同じように text を指定して箱ひげ図を作成しようとしても、エラーが生じるだけです。

そのため、箱ひげ図を描いた上に、付加情報を重ねるという手順が必要となります。
これには、注釈を付与する add_annotations を用います。

ただし、add_annotations はデフォルトでは、矢印とテキストで注釈を表示するので、
今のようにマウスホバーで情報を表示したい場合は、
showarrow を FALSE に、text を空文字列にして、
埋め込みたい情報は hovertext に与えることになります。

実際に、下のようなグラフを作成することができて、
箱ひげ図上にプロットされた点にマウスカーソルを合わせると、
その点の番号を表示することができます。

応用編

補足として、グラフ上の点をリンクにする方法と
多項目の箱ひげ図の場合で用いる方法について紹介しておきます。

点にハイパーリンクを持たせる

グラフ上にプロットした点の付加情報を別のページに用意しておいて、
詳細な情報を知りたい場合には点をクリックすればそのページに飛べると便利だと思う時があります。

例えば、俳優の身長をグラフにプロットしておいて、
各点が一人の俳優を表していて、点をクリックすると、
その俳優の Wikipedia 情報が見れるなどが考えられますね。

実は、Plotly のテキスト情報は HTML タグに対応しているので、
ハイパーリンクを点に埋め込むことができます。

下のグラフは各点に、このサイトのホームへのリンクを埋め込んでいるので、
点をクリックすると、ホームに飛ばされます。

多項目の箱ひげ図の場合

上では単項目の箱ひげ図の点にホバーテキストを与えてきましたが、
多項目になるとどうでしょうか。
気になるのは、多項目の場合にテキストの座標をどう与えるかです。

実は、BoxPlot では項目の座標は項目名で与えることができます。
そのため、x 座標に項目名を与えて、 y 座標に数値を与えれば、
先ほどと同様に、グラフの点上にホバーテキストを埋め込むことができます。

下の例では、各点に詳細情報を埋め込んでおり、
マウスカーソルを各点に合わせると、その点の詳細情報が表示されます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です