Looker のグラフと可視化をカスタマイズして、より完全なデータ ストーリーを伝える

※この投稿は米国時間 2024 年 9 月 21 日に、Google Cloud blog に投稿されたものの抄訳です。

データから情報を引き出してストーリーを伝えることができなければ、そのデータは単なる数字の羅列にすぎません。ユーザーがデータのストーリーを伝え、信頼性の高い指標を基に共同作業を行えるようにするために、Google Cloud では Looker 機能の拡充を続けています。先ごろには、Looker の標準可視化をブレットグラフ、サンバースト グラフ、ベン図、ツリーマップの可視化を使用して変換する機能を拡張しました。これらは Looker の Explore とダッシュボードのためのもので、変換はグラフ構成エディタを使って行います。Looker のこれらの新しい可視化を十分にご活用いただけるよう、グラフ構成エディタを使って可視化を最大限に強化し、影響力のあるデータ体験を生み出す方法のヒントをご紹介します。

グラフ構成エディタを初めて使用する方のためにご説明すると、Looker の可視化では Highcharts のインタラクティブなグラフ作成ライブラリを使ってデータが表示されます。このエディタを使うことで、ユーザーは Highcharts のライブラリ API の一部を利用して可視化を設定できます。今回の投稿では、Highcharts API について詳しく説明するとともに、グラフ構成エディタを使って可視化の質を高めるためのヒントとコツについてもご紹介します。この投稿を最大限にご活用いただくには、挙げた例を十分に理解するための JSON 形式に関する知識が欠かせません。また、グラフ構成エディタにアクセスできる環境も必要となります。

折れ線グラフの各線の外観とラベルを構成する

折れ線グラフの可視化において、複数の時系列データをそれぞれ 1 本の線で表すケースをご想像ください。どの線がどのデータを表しているのかダッシュボードのビューアで区別しにくい、あるいは特定の線を他よりも強調したいといったことがあるかもしれません。Highcharts のさまざまな「series」属性を適用することで、各線のスタイルや表示方法を調節できます。次のような属性があります。

• dashStyle: 各線のパターンを変更する

• lineWidth: 各線の太さを変更する

• opacity: 各線の不透明度を変更する

• dataLabels: 線のデータまたは値にラベルを適用する

線の可視化のデータをステークホルダーに理解してもらいやすくなるよう、「series」の各属性は任意に組み合わせて適用できます。以下のグラフ構成エディタの構成例では、3 番目の「Category」の線を他の線と区別するために、線を太くするとともにデータラベルを有効にしています。その他の線については不透明度を減らし、ドットパターンを設定しています。

Highcharts の「plotOptions」属性を使ってすべての線にデフォルトのスタイルを設定することで、上の構成例はさらにシンプルにできます。デフォルトのスタイルを設定した後に、それをオーバーライドする「series」属性を使えば、特定の線をさらにカスタマイズできます。以下は、グラフ構成エディタでデフォルトのスタイルとそれをオーバーライドするスタイルを設定している例です。

可視化のインライン スクロールを有効にする

横軸は年月（数十年間）、縦棒は月ごとのデータを示す縦棒グラフの可視化について考えてみましょう。ダッシュボードの幅によって可視化が制限されるため、時間が経つにつれて縦棒の幅が狭くなると、月や年ごとのデータがつぶれてトレンドが理解しにくくなります。代わりに、Highcharts の「chart.scrollablePlotArea」属性を使って可視化の幅を定義してみてください。そうすることで、縦棒グラフや折れ線グラフの可視化をステークホルダーが横にスクロールできるようになります。「minWidth」属性を使って可視化の最小幅を設定できるほか、「scrollPositionX」属性を使えば可視化のスクロール開始位置を定義することが可能です。以下の例は、グラフ構成エディタで可視化の最小幅を 2,000 ピクセルに設定し、スクロール開始位置を右端に設定したものです。

また、「minHeight」と「scrollPositionY」属性を使えば、可視化の縦方向のスクロールが可能になります。

円グラフなどのグラフ可視化向けのデータラベルをフルカスタマイズする

円グラフの可視化のプロット メニューのオプションを使うと、円の各スライスにラベルを付けることができますが、通常はスライスの割合または値のどちらか一方しか表示できません。そのため、閲覧者がデータの内容を完全に把握するには、凡例とデータラベルの両方を交互に見る必要があります。円グラフの各スライスにマウスを合わせれば全データを確認できますが、定期配信される PDF 形式のダッシュボード レポートでは、可視化にマウスを合わせても詳細データは表示されません。

グラフ構成エディタを使用すると、Highcharts の PointLabelObject で利用可能な情報をデータラベルに表示でき、割合と値を同時に示すことも可能です。さらに、HTML を使ってラベルをカスタマイズすることで、ステークホルダーがグラフからすばやく情報を得やすくなります。上の最初の例で説明した Highcharts の「dataLabels」属性を構成して、グラフのデータラベルのスタイルや表示方法を調節する必要があります。次のような「dataLabels」属性を構成できます。

• enabled: グラフでデータラベルを有効にする（最初の例で説明したとおり）

• useHTML: データラベルの HTML 形式を有効にする

• style: すべてのデータラベルに対して CSS スタイルを設定する

• format: 形式と個々の要素を定義する

以下のグラフ構成エディタの構成例では、円グラフのデータラベルが 12 ピクセルのフォントサイズで表示されます。「format」属性を使用し、PointLabelObject のプロパティの名前を中かっこで囲むと、そのすべてのプロパティをデータラベルに表示できます。この例では、「format」属性を次のように文字列に設定しています。

• 円グラフのスライスの名前を、HTML の注目付け要素内で PointLabelObject の「key」プロパティを使って太字で表示する

• データポイントの値を、PointLabelObject の「y」プロパティを使って表示する

• データポイントの割合を、PointLabelObject の「percentage」プロパティを使って小数点以下 1 桁の形式で表示する

このように設定すると、データラベルは Category - 596524 (11.5%) のように表示されます。

「dataLabels.format」属性は「tooltip.format」属性と同じように機能します。詳しくは、こちらのドキュメントをご参照ください。また、円グラフには「plotOptions.pie.dataLabels」属性を使用します。折れ線グラフに同じデータラベルの形式を適用するには、代わりに「plotOptions.line.dataLabels」属性を使ってオーバーライドする必要があります。グラフの種類が異なっても、「dataLabels」属性でデータラベルを設定するインターフェースや機能はほぼ同じです。

グラフをよりスマートかつ影響力のあるものにしましょう

これらの例を参考に Highcharts API の使い方や Looker 可視化の構成方法について学び、影響力があって役立つストーリーを伝えるためにお役立ていただければ幸いです。今回の投稿では、Looker のグラフ構成エディタと Highcharts API を使って、データの各シリーズのスタイルをカスタマイズする方法、可視化のインライン スクロールを有効にする方法、データラベルをカスタマイズする方法についてご紹介しました。

より詳しい情報については、Looker のグラフ構成エディタについてのドキュメントをご参照ください。また、同エディタで利用できる新しい可視化タイプを Looker の Explore とダッシュボードでお試しください。データ ストーリーがより魅力的になるよう、今後もグラフ構成エディタの使い方のヒントをご紹介してまいります。

ー デベロッパーリレーションズ エンジニア Jeremy Chang