Plotly.jsでサンバーストグラフを作ってみましょう
はじめに
システム部の李です。
今回は、弊社が運営している課金通話プラットフォーム「Port」のマーケティング活動をサポートするツールの一つ、Plotly.jsについて紹介させていただきます。
Plotly.jsの魅力：いつ、なぜ使う？
以前、Chart.jsを使用して円グラフを作成し、ユーザー構成を可視化する方法をご紹介しましたが、弊社ではデータ可視化において、Chart.jsだけでなく、より高度なニーズに対応するためにPlotly.jsも積極的に活用しています。
Chart.jsは学習コストが低く、軽量でパフォーマンスも良いため、簡単に使い始めることができ、基本的なチャート作成には最適です。しかし、高度なカスタマイズやインタラクションが必要な場合は、Plotly.jsの方がより強力だと考えています。
例えば、データの階層構造を視覚化するためのサンバーストチャートでは、中央から外側に向かって円形のセグメントが広がり、内側の層が親データ、外側の層が子データを表します。Plotly.jsを使用してプロットする際には、親データをクリックすることで、その子データの詳細な割合や関係性を表示することができ、階層データの理解がより直感的に進むようになります。
さらに、Chart.jsはJavaScript専用ですが、PlotlyファミリーにはJavaScriptをサポートするPlotly.jsのほかにも、Python、R、Julia、MATLABをネイティブ対応するライブラリが揃っています。
今回は通話のステータスをサンバーストグラフで視覚化し、基本的なPlotly.jsの使い方を試してみましょう。成果物は以下のようになります。
実践：サンバーストグラフで通話ステータスを分析
Chart.jsの使用と同様に、Plotly.jsを自分のプロジェクトで使うためには、5つの基本ステップに従う必要があります。それは、
- ライブラリをインストールする、
- HTMLタグを準備する、
- データを用意する、
- レイアウトを設定する、
- チャートを描画する、
という流れです。その中で、ステップ3は最も複雑で、プロジェクトによって大きく異なることがあります。
ステップ１： Plotly.jsをインストールしよう
Plotly.jsを導入するには、公式サイトによると、以下の3つの方法があります。
1.「npm install plotly.js-dist」または「yarn install plotly.js-dist」を実行する。
2. CDNから実行時に読み込む、あるいは、ウェブページの<head>セクションに下記のコードを追加する。
<head> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> </head>
3. ソースコードをサーバにダウンロードする、あるいは、ウェブページの<head>セクションに下記のコードを追加する。
<head> <script src="plotly-2.35.2.min.js" charset="utf-8"></script> </head>
「Port」の管理プラットフォームでは、CDNの利便性と高速な読み込み速度、そして設定のシンプルさから、CDN方式を選択しました。
ステップ２： HTMLタグを準備しよう
次に、プロットする場所を指定するために、HTMLタグを<body>セクションに記述します。本チュートリアルでは、myDivというidを持つdivタグを使用します。
<body> <div id='myDiv'></div> </body>
ステップ３： データを用意よう
データを渡すことは最も複雑で、サンバーストグラフの核となります。本例のコードは以下の通りです。
<script>
const myData = [{
type: "sunburst",
labels: ["接続成功", "接続失敗", "有料通話", "無料通話", "不在着信", "着信拒否", "発信キャンセル"],
values: [2213,494,1646,567,163,36,295],
parents: ["","","接続成功","接続成功","接続失敗","接続失敗","接続失敗"],
branchvalues: "total",
// 下の項目は必須ではありません。
textinfo: 'label+percent entry',
texttemplate: "%{label}<br>%{percentEntry:.2%}",
insidetextorientation: 'horizontal',
hovertemplate: "%{label}：%{value:,}回<extra></extra>",
marker: {
line: {
width: 2
},
colors: ['rgb(70, 130, 180)','rgb(255, 182, 193)',],
},
leaf: {
opacity: 0.6
},
}];
</script>
少し長いかもしれませんが、一個一個理解していきましょう。
まずは「type」を「sunburst」に設定します。
次に、凡例名とその値は「labels」と「values」で定義します。これらは同じ長さであり、順序も一致していることを確認してください。
そして、親データと子データの関係は「parents」で指定します。「labels」と同じ長さで、それぞれの親データの「labels」を入力してください。例えば、本例の関係は下図のようになります。親がないデータには空の値をしっかりと入れてください。
「Branchvalues」は、親ノードの値をどのように扱うかを決定する設定です。デフォルトの「remainder」では、親ノードの値は子ノードの合計を引いた残りの値として扱われます。一方、本例で使われている「total」は、親ノードの値がその子ノードすべての合計値を表すことを意味します。
ここまでは正しい形式を見るための必須項目です。結果は下図のようになります。
しかし、さらに読みやすくするために、他の項目もぜひ試してみてください。
「textinfo」、「texttemplate」、「insidetextorientation」はすべて、チャート内のテキスト表示に関する設定です。本例では、ラベルとエントリーの割合を小数点以下2桁まで水平に表示するように設定しています。さまざまなカスタムフォーマットが可能ですが、ぜひPlotly.jsの公式サイトを参考にしてください。ほしいフォーマットがある場合は、ChatGPTに説明して、書き方を尋ねるのも便利だと思います。
「hovertemplate」で設定するのは、カーソルを重ねたときの表示内容です。本例では、ラベルと値を表示し、「回」という単位を付けました。「value」の後のカンマは、数字の3桁区切りとして使用されています。
「marker」にある「line」とその下の「width」は、グラフの境界線の太さを2ピクセルに設定し、「colors」は2つの親ノードの色を指定しています。また、「leaf」にある「opacity」は葉・子ノードの透明度を60%に設定しています。
ステップ４： レイアウトを設定しよう
特に複雑ではないグラフの場合、レイアウトは margin、width、height を指定するだけで十分だと思います。
<script>
const myLayout = {
margin: {
t: 0,
l: 0,
r: 0,
b: 0
},
width: 360,
height: 360,
};
</script>
ステップ５： チャートを描画しよう
成果を確認するために、ステップ３で用意したデータ（変数名： myData ）とステップ4で設定したレイアウト（変数名： myLayout ）をステップ2で準備したHTMLタグ （id：’myDiv’）にリンクしましょう。
<script>
Plotly.newPlot('myDiv', myData, myLayout);
</script>
結果
これで、以下のチャートに似たものが表示されるはずです。内側の親データをクリックすると、その配下の子データの比率が表示されます。おめでとうございます！
各設定項目について詳しく知りたい方は、ぜひPlotly.jsの公式サイトを参考にしてください。
ちなみに、Chart.jsもサンバーストグラフ用のプラグインを提供しています。興味のある方は、こちらを参考にしてください。
最後に
最後までお読みいただき、誠にありがとうございます！データ分析には多くのツールがありますが、ウェブ可視化の分野だけでも、Chart.js や Plotly.js に加え、D3.js や Highcharts など、さまざまな選択肢があります。「最適」なツールを見つけるには時間がかかるかもしれませんが、まずは色々と試してみましょう！
（本文の作成にはChatGPTを使用したことがあります。）