概要
サンキー ダイアグラムは、ある値から別の値のセットに流れを表すために使用される可視化です。接続されたものをノード、接続をリンクといいます。サンキーは、2 つのドメイン(大学とメジャーなど)間の多対多のマッピングや、一連のステージを経由する複数のパスを表示する場合に適しています(たとえば、Google アナリティクスでは、サンキーを使用して、ウェブサイトのページ間のトラフィック フローを表示します)。
奇妙なことに、名前はキャプテン サンキーにちなんで名付けられました。この者は、熱損失に比例する幅を持つ蒸気エンジンの効率の図を作成しました。
注: サンキー グラフは、今後の Google Chart リリースで大幅に変更される可能性があります。
サンキー ダイアグラムは、ユーザーのブラウザに適した SVG または VML を使用してブラウザでレンダリングされます。Google のサンキー レイアウト コードは、D3 のサンキー レイアウト コードから派生しています。
注: Google サンキー チャートは、Microsoft Internet Explorer 8 以前のバージョンでは使用できません。
簡単な例
他の 3 つのカテゴリ X、Y、Z に接続する 2 つのカテゴリ A と B があるとします。これらの接続の一部は他よりも重い接続があります。たとえば、B が X と接続しており、B は Y に接続しています。
いずれかのリンクにカーソルを合わせて、接続をハイライト表示してみてください。
サンキー チャートを作成するには、一連の行を指定します。各行には、from、to、weight の 1 つの接続に関する情報が含まれています。次に、google.visualization.Sankey()
メソッドを使用してグラフを初期化し、draw()
メソッドを使用してグラフをレンダリングします。
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['sankey']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'From'); data.addColumn('string', 'To'); data.addColumn('number', 'Weight'); data.addRows([ [ 'A', 'X', 5 ], [ 'A', 'Y', 7 ], [ 'A', 'Z', 6 ], [ 'B', 'X', 2 ], [ 'B', 'Y', 9 ], [ 'B', 'Z', 4 ] ]); // Sets chart options. var options = { width: 600, }; // Instantiates and draws our chart, passing in some options. var chart = new google.visualization.Sankey(document.getElementById('sankey_basic')); chart.draw(data, options); } </script> </head> <body> <div id="sankey_basic" style="width: 900px; height: 300px;"></div> </body> </html>
注: データのサイクルは避けてください。A にリンクする A または A にリンクする C にリンクする B にリンクすると、グラフはレンダリングされません。
マルチレベルのサンキー
複数のレベルの接続を含む Sankey グラフを作成できます。
サンキー チャートは必要に応じて自動的にレベルを追加し、レベルを自動で設定します。上のグラフの完全なコードを次に示します。
<html> <body> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="sankey_multiple" style="width: 900px; height: 300px;"></div> <script type="text/javascript"> google.charts.load("current", {packages:["sankey"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'From'); data.addColumn('string', 'To'); data.addColumn('number', 'Weight'); data.addRows([ [ 'Brazil', 'Portugal', 5 ], [ 'Brazil', 'France', 1 ], [ 'Brazil', 'Spain', 1 ], [ 'Brazil', 'England', 1 ], [ 'Canada', 'Portugal', 1 ], [ 'Canada', 'France', 5 ], [ 'Canada', 'England', 1 ], [ 'Mexico', 'Portugal', 1 ], [ 'Mexico', 'France', 1 ], [ 'Mexico', 'Spain', 5 ], [ 'Mexico', 'England', 1 ], [ 'USA', 'Portugal', 1 ], [ 'USA', 'France', 1 ], [ 'USA', 'Spain', 1 ], [ 'USA', 'England', 5 ], [ 'Portugal', 'Angola', 2 ], [ 'Portugal', 'Senegal', 1 ], [ 'Portugal', 'Morocco', 1 ], [ 'Portugal', 'South Africa', 3 ], [ 'France', 'Angola', 1 ], [ 'France', 'Senegal', 3 ], [ 'France', 'Mali', 3 ], [ 'France', 'Morocco', 3 ], [ 'France', 'South Africa', 1 ], [ 'Spain', 'Senegal', 1 ], [ 'Spain', 'Morocco', 3 ], [ 'Spain', 'South Africa', 1 ], [ 'England', 'Angola', 1 ], [ 'England', 'Senegal', 1 ], [ 'England', 'Morocco', 2 ], [ 'England', 'South Africa', 7 ], [ 'South Africa', 'China', 5 ], [ 'South Africa', 'India', 1 ], [ 'South Africa', 'Japan', 3 ], [ 'Angola', 'China', 5 ], [ 'Angola', 'India', 1 ], [ 'Angola', 'Japan', 3 ], [ 'Senegal', 'China', 5 ], [ 'Senegal', 'India', 1 ], [ 'Senegal', 'Japan', 3 ], [ 'Mali', 'China', 5 ], [ 'Mali', 'India', 1 ], [ 'Mali', 'Japan', 3 ], [ 'Morocco', 'China', 5 ], [ 'Morocco', 'India', 1 ], [ 'Morocco', 'Japan', 3 ] ]); // Set chart options var options = { width: 600, }; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple')); chart.draw(data, options); } </script> </body> </html>
色を管理する
サンキー グラフでは、ノードとリンクにカスタムカラーを設定できます。ノードとリンクの両方に、それぞれ colors
オプション(それぞれ sankey.node.colors
と sankey.link.colors
)を使用してカスタム カラーパレットを指定できます。また、colorMode
オプションを使用して、異なるカラーリング モードを指定することもできます。
色をカスタマイズしない場合は、デフォルトで標準のマテリアル パレットが使用されます。
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f', '#cab2d6', '#ffff99', '#1f78b4', '#33a02c']; var options = { height: 400, sankey: { node: { colors: colors }, link: { colorMode: 'gradient', colors: colors } } };
構成オプションを使用して、リンク、ノード、ラベルの色を制御できます。ここでは、色合いは同じで明るさが異なる 3 つを選択します。
これらのオプションは次のようになります。
var options = { width: 600, sankey: { link: { color: { fill: '#d799ae' } }, node: { colors: [ '#a61d4c' ], label: { color: '#871b47' } }, } };
sankey.link.color.fillOpacity
オプションでリンクの透明性を制御することもできます。
var options = { width: 600, sankey: { link: { color: { fill: '#d799ae', fillOpacity: 0.8 } }, node: { colors: [ '#a61d4c' ], label: { color: '#871b47' } }, } };
リンクを囲む枠線を作成するには、sankey.link.color.stroke
オプションと sankey.link.color.strokeWidth
オプションを使用します。
ストロークの色は、RGB 形式または英語で指定できます。
var options = { width: 750, height: 400, sankey: { node: { colors: [ '#a61d4c' ] }, link: { color: { stroke: 'black', strokeWidth: 1 } }, } };
ラベルのカスタマイズ
サンキー グラフのテキストは、sankey.node.label.fontName
と友だちを使用してカスタマイズできます。
上のグラフのオプション スタンザは次のとおりです。
var options = { width: 600, sankey: { node: { label: { fontName: 'Times-Roman', fontSize: 14, color: '#871b47', bold: true, italic: true } } }, };
ラベルに対するノードの位置は、sankey.node.labelPadding
オプションを使用して調整できます。
上のグラフでは、ラベルとノード間に 30 ピクセルのパディングが追加されています。
var options = { width: 600, sankey: { node: { labelPadding: 30 } }, };
ノードの調整
ノードの幅は sankey.node.width
で制御できます。
上記では、ノードの幅を 2 に設定しています。
var options = { width: 600, sankey: { node: { width: 2 } }, };
ノード間の距離は sankey.node.nodePadding
で調整できます。
上のグラフでは、sankey.node.nodePadding
を 80 に設定しています。
var options = { width: 900, sankey: { node: { nodePadding: 80 } }, };
読み込んでいます
google.charts.load
パッケージ名は "sankey"
です。
google.charts.load("current" {packages: ["sankey"]});
可視化のクラス名は google.visualization.Sankey
です。
var visualization = new google.visualization.Sankey(container);
データ形式
行: テーブルの各行は 2 つのラベル間の接続を表します。3 列目はその接続の強度を示しており、ラベル間のパスの幅に反映されます。
Columns:
列 0 | 列 1 | 列 2 | … | 列 N(省略可) | |
---|---|---|---|---|---|
使用目的: | ソース | 宛先 | 値 | … | 省略可能なロール |
データの種類: | string | string | 数値 | … | |
ロール: | ドメイン | ドメイン | のデータ | … | |
オプションの列の役割: | なし |
なし |
なし |
… |
構成オプション
Name | |
---|---|
forceFrame |
グラフをインライン フレーム内に描画します。(IE8 では、このオプションは無視されます。すべての IE8 チャートは i フレームで描画されます)。 型: boolean
デフォルト: false
|
高さ |
グラフの高さ(ピクセル単位)。 タイプ: number
デフォルト: 含まれている要素の高さ
|
Sankey.反復処理 |
マルチレベルのサンキーを使用すると、最適な可読性を確保するためにノードを配置する場所が不明瞭になる場合があります。D3 レイアウト エンジンは、さまざまなノード レイアウトでテストを行い、 型: integer
デフォルト: 32
|
sankey.link |
ノード間の接続の属性を制御します。現在、以下の属性はすべて色に関連するものです。 sankey: { link: { color: { fill: '#efd', // Color of the link. fillOpacity: 0.8, // Transparency of the link. stroke: 'black', // Color of the link border. strokeWidth: 1 // Thickness of the link border (default 0). }, colors: [ '#a6cee3', // Custom color palette for sankey links. '#1f78b4', // Nodes will cycle through this palette '#b2df8a', // giving the links for that node the color. '#33a02c' ] } } タイプ: object
デフォルト: null
|
sankey.link.colorMode |
ノード間のリンクにカラーリング モードを設定します。考えられる値は次のとおりです。
このオプションは sankey.link.color をオーバーライドします。 型: string
デフォルト: 「none」
|
SanKey.Node |
ノードの属性(リンク間の縦棒): sankey: { node: { label: { fontName: 'Times-Roman', fontSize: 12, color: '#000', bold: true, italic: false }, interactivity: true, // Allows you to select nodes. labelPadding: 6, // Horizontal distance between the label and the node. nodePadding: 10, // Vertical distance between nodes. width: 5, // Thickness of the node. colors: [ '#a6cee3', // Custom color palette for sankey nodes. '#1f78b4', // Nodes will cycle through this palette '#b2df8a', // giving each node its own color. '#33a02c' ] } } タイプ: object
デフォルト: null
|
sankey.node.colorMode |
Sankey ノードの色分けモードを設定します。考えられる値は次のとおりです。
型: string
デフォルト: 'unique'
|
ツールチップ |
さまざまなツールチップ要素を構成するメンバーを持つオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 {textStyle: {color: '#FF0000'}, showColorCode: true} タイプ: object
デフォルト: null
|
tooltip.isHTML |
true に設定すると、(SVG レンダリングではなく)HTML レンダリングのツールチップが使用されます。詳細については、ツールチップの内容のカスタマイズをご覧ください。 注: ツールチップ列のデータロールによる HTML ツールチップ コンテンツのカスタマイズは、バブルチャートの可視化ではサポートされていません。 型: boolean
デフォルト: false
|
tooltip.textStyle |
ツールチップ テキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。 { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
タイプ: object
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
width |
グラフの幅(ピクセル単位)です。 タイプ: number
デフォルト: 含まれる要素の幅
|
方法
メソッド | |
---|---|
draw(data, options) |
グラフを描画します。グラフでは、 戻り値の型:なし
|
getBoundingBox(id) |
グラフ要素
値はグラフのコンテナからの相対値です。グラフの描画後に呼び出します。 戻り値の型:オブジェクト
|
getSelection() |
選択したグラフ エンティティの配列を返します。
選択可能なエンティティは、バー、凡例エントリ、カテゴリです。
このグラフでは、一度に 1 つのエンティティしか選択できません。
戻り値の型: 選択要素の配列
|
setSelection() |
指定したグラフ エンティティを選択します。前の選択内容をすべてキャンセルします。
選択可能なエンティティは、バー、凡例エントリ、カテゴリです。
このグラフでは、一度に選択できるエンティティは 1 つだけです。
戻り値の型:なし
|
clearChart() |
グラフをクリアし、割り当てられたすべてのリソースを解放します。 戻り値の型:なし
|
イベント
Name | |
---|---|
error |
グラフのレンダリング時にエラーが発生したときに呼び出されます。 プロパティ: id、message
|
onmouseover |
ユーザーがビジュアル エンティティにカーソルを合わせると呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを返します。バーはデータテーブルのセル、凡例のエントリは列(行インデックスは null)、カテゴリは行(列インデックスは null)に関連付けられます。 プロパティ: row、column
|
onmouseout |
ユーザーがビジュアル エンティティから離れると呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを返します。バーはデータテーブルのセル、凡例のエントリは列(行インデックスは null)、カテゴリは行(列インデックスは null)に関連付けられます。 プロパティ: row、column
|
ready |
グラフは外部メソッド呼び出しの準備ができています。グラフを操作し、描画後にメソッドを呼び出す場合は、 プロパティ:なし
|
select |
ユーザーがビジュアル エンティティをクリックすると呼び出されます。選択されている内容を確認するには、 プロパティ:なし
|
データポリシー
すべてのコードとデータはブラウザで処理され、レンダリングされます。データがサーバーに送信されることはありません。