サンキー ダイアグラム

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

概要

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

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

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

  • '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'
    ]
  }
}
タイプ: オブジェクト
デフォルト: null
sankey.node.colorMode

サンキーノードの配色モードを設定します。考えられる値は次のとおりです。

  • 'unique' - 各ノードに一意の色を指定します。
型: 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 には、'red' や '#00cc00' などの任意の HTML カラー文字列を指定できます。fontName と fontSize もご覧ください。

タイプ: オブジェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
幅

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

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

メソッド

メソッド
draw(data, options)

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

戻り値の型: none
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 。

戻り値の型: none
clearChart()

チャートを消去し、割り当て済みリソースをすべて解放します。

戻り値の型: none

イベント

名前
error

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

プロパティ: id、message
onmouseover

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

プロパティ: row、column
onmouseout

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

プロパティ: row、column
ready

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

Properties（プロパティ）: なし
select

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

Properties（プロパティ）: なし

データポリシー

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