サンキー ダイアグラム

  1. 概要
  2. 簡単な例
  3. マルチレベルのサンキー
  4. 色を制御する
  5. フォントのカスタマイズ
  6. ノードの調整
  7. 読み込んでいます
  8. データ形式
  9. 構成オプション
  10. Methods
  11. イベント
  12. データポリシー

概要

サンキー ダイアグラムは、ある値から別の値のセットに流れを表すために使用される可視化です。接続されたものをノード、接続をリンクといいます。サンキーは、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 レイアウト エンジンは、さまざまなノード レイアウトでテストを行い、sankey.iterations が試行されると停止します。この数値が大きいほど、複雑な Sankey のレイアウトが楽しくなりますが、コストがかかります。Sankey はレンダリングに時間がかかります。数値を短くすると、グラフのレンダリングが速くなります。

型: 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

ノード間のリンクにカラーリング モードを設定します。考えられる値は次のとおりです。

  • 'source' - ソースノードの色は、すべてのターゲット ノードへのリンクに使用されます。
  • 'target' - ターゲット ノードの色は、ソースノードへのリンクに使用されます。
  • 'gradient' - ソースノードとターゲット ノードの間のリンクに、ソースノードの色からターゲット ノードの色へのグラデーションとして色付けされます。
  • 'none' - デフォルトのオプション。リンクの色はデフォルト（または sankey.link.color.fill と sankey.link.color.fillOpacity オプションで指定された色）に設定されます。

このオプションは 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 ノードの色分けモードを設定します。考えられる値は次のとおりです。

  • 'unique' - 各ノードに一意の色が適用されます。
型: 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> }

color には、任意の HTML カラー文字列（'red'、'#00cc00' など）を指定できます。fontName と fontSize もご覧ください。

タイプ: object
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
width

グラフの幅（ピクセル単位）です。

タイプ: number
デフォルト: 含まれる要素の幅

方法

メソッド
draw(data, options)

グラフを描画します。グラフでは、ready イベントが発生した後にのみ、メソッド呼び出しを受け付けます。Extended description。

戻り値の型:なし
getBoundingBox(id)

グラフ要素 id の左、上、幅、高さを含むオブジェクトを返します。id の形式はまだ文書化されていませんが、これらはイベント ハンドラの戻り値です。次に例を示します。

var cli = chart.getChartLayoutInterface();

グラフ領域の高さ
cli.getBoundingBox('chartarea').height
横棒グラフまたは縦棒グラフの 1 つ目の系列の 3 つ目の棒の幅
cli.getBoundingBox('bar#0#2').width
円グラフの 5 番目のウェッジの境界ボックス
cli.getBoundingBox('slice#4')
縦棒グラフ（縦棒グラフなど）のグラフデータの境界ボックス:
cli.getBoundingBox('vAxis#0#gridline')
横棒グラフ（棒グラフなど）のグラフデータの境界ボックス:
cli.getBoundingBox('hAxis#0#gridline')

値はグラフのコンテナからの相対値です。グラフの描画後に呼び出します。

戻り値の型:オブジェクト
getSelection()

選択したグラフ エンティティの配列を返します。 選択可能なエンティティは、バー、凡例エントリ、カテゴリです。 このグラフでは、一度に 1 つのエンティティしか選択できません。 Extended description

戻り値の型: 選択要素の配列
setSelection()

指定したグラフ エンティティを選択します。前の選択内容をすべてキャンセルします。 選択可能なエンティティは、バー、凡例エントリ、カテゴリです。 このグラフでは、一度に選択できるエンティティは 1 つだけです。 Extended description

戻り値の型:なし
clearChart()

グラフをクリアし、割り当てられたすべてのリソースを解放します。

戻り値の型:なし

イベント

Name
error

グラフのレンダリング時にエラーが発生したときに呼び出されます。

プロパティ: id、message
onmouseover

ユーザーがビジュアル エンティティにカーソルを合わせると呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを返します。バーはデータテーブルのセル、凡例のエントリは列（行インデックスは null）、カテゴリは行（列インデックスは null）に関連付けられます。

プロパティ: row、column
onmouseout

ユーザーがビジュアル エンティティから離れると呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを返します。バーはデータテーブルのセル、凡例のエントリは列（行インデックスは null）、カテゴリは行（列インデックスは null）に関連付けられます。

プロパティ: row、column
ready

グラフは外部メソッド呼び出しの準備ができています。グラフを操作し、描画後にメソッドを呼び出す場合は、draw メソッドを呼び出す前に、このイベントのリスナーを設定し、イベントが発生した後にのみ呼び出す必要があります。

プロパティ:なし
select

ユーザーがビジュアル エンティティをクリックすると呼び出されます。選択されている内容を確認するには、getSelection() を呼び出します。

プロパティ:なし

データポリシー

すべてのコードとデータはブラウザで処理され、レンダリングされます。データがサーバーに送信されることはありません。