概要
サンキー ダイアグラムは、ある値セットから別の値セットへのフローを示すために使用される可視化です。接続されているものはノードと呼ばれ、接続はリンクと呼ばれます。サンキーは、2 つのドメイン（大学や主要校など）間、または一連のステージを通る複数のパス（たとえば、Google アナリティクスではサンキーを使用して、ウェブサイト上のページから他のページへのトラフィック フロー）を表示する多対多マッピングを表示する場合に最適です。
名前は、サンキー船長にちなんで名付けました。サンキー船長は、熱損失に比例する幅の矢印を使用した蒸気エンジンの効率図を作成しました。
注: サンキーグラフは、Google Charts の今後のリリースで大幅に改訂される可能性があります。
サンキー ダイアグラムは、ユーザーのブラウザに適した SVG または VML を使用してブラウザに表示されます。Google のサンキー レイアウト コードは、D3 のサンキー レイアウト コードから派生しています。
注: Google サンキーグラフは、Microsoft Internet Explorer 8 以前のバージョンでは使用できません。
簡単な例
A と B の 2 つのカテゴリがあり、X、Y、Z という他の 3 つのカテゴリに接続しているとします。つながりのなかには 他のつながりよりも重いものもありますたとえば、B は X へのシン接続、Y へのシン コネクトなどです。
リンクの 1 つにカーソルを合わせて、つながりをハイライト表示してください。
サンキーグラフを作成するには、一連の行を用意し、各行に 1 つの接続（from、to、weight）に関する情報を含めます。次に、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 にリンクされていた C にリンクされていたりすると、グラフはレンダリングされません。
マルチレベルのサンキー
複数の接続レベルを含むサンキーグラフを作成できます。
サンキーグラフでは、必要に応じてレベルが追加され、自動的にレイアウトされます。上記のグラフの完全なコードは次のとおりです。
<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 | 数値 | ... | |
| ロール: | ドメイン | ドメイン | データ | ... | |
| オプションの列ロール: | まったく管理できない |
なし |
まったく管理できない |
... |
構成オプション
| 名前 | |
|---|---|
| forceIFrame |
インライン フレーム内にグラフを描画します。（IE8 ではこのオプションは無視されます。IE8 グラフはすべて i フレームに描画されます）。 型: boolean
デフォルト: false
|
| 身長 |
グラフの高さ（ピクセル単位）。 タイプ: 数値
デフォルト: 含まれる要素の高さ
|
| sankey.iterations |
マルチレベル サンキーでは、読みやすさを考慮してノードをどこに配置すべきかが明らかにならない場合があります。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'
]
}
}
タイプ: オブジェクト
デフォルト: 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'
]
}
}
タイプ: オブジェクト
デフォルト: null
|
| sankey.node.colorMode |
サンキーノードの配色モードを設定します。考えられる値は次のとおりです。
型: string
デフォルト: 「unique」
|
| ツールチップ |
さまざまなツールチップ要素を構成するメンバーを持つオブジェクト。このオブジェクトのプロパティを指定するには、次に示すようにオブジェクト リテラル表記を使用できます。 {textStyle: {color: '#FF0000'}, showColorCode: true}
タイプ: オブジェクト
デフォルト: null
|
| tooltip.isHtml |
true に設定した場合、SVG 表示ではなく HTML 表示のツールチップが使用されます。詳細については、ツールチップのコンテンツのカスタマイズをご覧ください。 注: ツールチップ列のデータロールによる HTML ツールチップ コンテンツのカスタマイズは、バブルチャートの可視化ではサポートされていません。 型: boolean
デフォルト: false
|
| tooltip.textStyle |
ツールチップのテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| 幅 |
グラフの幅（ピクセル単位）。 タイプ: 数値
デフォルト: 含まれる要素の幅
|
メソッド
| メソッド | |
|---|---|
draw(data, options) |
グラフを描画します。グラフは、 戻り値の型: none
|
getBoundingBox(id) |
グラフ要素
値はグラフのコンテナを基準とします。グラフが描画された後に呼び出されます。 戻り値の型: オブジェクト
|
getSelection() |
選択したグラフ エンティティの配列を返します。
選択可能なエンティティは、バー、凡例のエントリ、カテゴリです。
このグラフでは、任意の時点で選択できるエンティティは 1 つのみです。
戻り値の型: 選択要素の配列
|
setSelection() |
指定したグラフ エンティティを選択します。前の選択をキャンセルします。
選択可能なエンティティは、バー、凡例のエントリ、カテゴリです。
このグラフでは、一度に 1 つのエンティティしか選択できません。
戻り値の型: none
|
clearChart() |
チャートを消去し、割り当て済みリソースをすべて解放します。 戻り値の型: none
|
イベント
| 名前 | |
|---|---|
error |
グラフのレンダリング中にエラーが発生したときに呼び出されます。 プロパティ: id、message
|
onmouseover |
ユーザーがビジュアル エンティティにカーソルを合わせたときに呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを渡します。 バーはデータテーブルのセル、凡例のエントリは列に対応し（行インデックスは null）、カテゴリは行に関連付けられます（列インデックスは null）。 プロパティ: row、column
|
onmouseout |
ユーザーがビジュアル エンティティからマウス離れたときに呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを渡します。 バーはデータテーブルのセル、凡例のエントリは列に対応し（行インデックスは null）、カテゴリは行に関連付けられます（列インデックスは null）。 プロパティ: row、column
|
ready |
グラフで外部メソッド呼び出しの準備が整いました。グラフを操作し、描画後にメソッドを呼び出す場合は、 Properties（プロパティ）: なし
|
select |
ユーザーがビジュアル エンティティをクリックしたときに呼び出されます。選択された内容を確認するには、 Properties（プロパティ）: なし
|
データポリシー
すべてのコードとデータはブラウザで処理されてレンダリングされます。データはどのサーバーにも送信されません。