サンキーダイアグラム

工程間流量図（サンキーダイアグラム）とは、フローチャートのように流れを見ながらも、どちらかというとそのフロー間の流量に注目したグラフであり、要素と要素の間でどれだけの量が流れているのか？に着目するためのものです。通常のフローチャートでは、単純に１本の線で結ばれているだけなのですが、サンキーダイアグラムは、その流量によって、線の太さを変えて表現してくれます。莫大なデータを蓄積・集計し、要素間でどれだけの量が流れているのか？を見るのには最適なチャートです。

今回は、とある病院のから病院への転院人数を集計し、それを流量でグラフ化したものをつくったサンプルです。この他にも、拠点間の物量把握であったり、トラフィックを視覚化したり、いろいろ使い勝手がありそうです。

グラフ本体

ソースコード

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="sample1" scaling="true" scrolling="true" />
<Content type="html">
<![CDATA[
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>

<script type="text/javascript"

src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['sankey']}]}">

</script>


<script type="text/javascript">

google.setOnLoadCallback(initialize);

      function initialize() {
        // The URL of the spreadsheet to source data from.
        var query = new google.visualization.Query(
            'https://docs.google.com/spreadsheet/pub?key=0AjN10lCzkUqkdHJqaUxkaUdyOUR3VGQwM3VHWTdWcGc&gid=13');
        query.send(draw);
      }
      function draw(response) {
        if (response.isError()) {
          alert('Error in query');
        }
        var data = response.getDataTable();
        var chart = new google.visualization.Sankey(document.getElementById('chart_div'));


//行の数を取得する

var numRows = response.getDataTable().getNumberOfRows();

//カラムを設定し、データテーブルを用意

var dataTable = new google.visualization.DataTable();

dataTable.addColumn({ type: 'string', id: data.getValue(0,0) });

dataTable.addColumn({ type: 'string', id: data.getValue(0,1) });

dataTable.addColumn({ type: 'number', id: data.getValue(0,2) });


var cnt = numRows -1;

//データテーブルにデータを流し込む

for(i=1;i<cnt;i++){

var row = [];

row.push(data.getValue(i, 0));

row.push(data.getValue(i, 1));

row.push(data.getValue(i, 2));

dataTable.addRow(row);

}

//グラフオプションの指定

var options = {

width: 600,

sankey: {

link: { color: { fill: '#d799ae' } },

node: { color: { fill: '#a61d4c' },

label: { color: '#871b47' },

nodePadding: 20,

},

}

};


//グラフの描画

        chart.draw(dataTable, options);

}

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="chart_div"></div>
  </body>
</html>
]]>
</Content>
</Module>

ポイント

まだ、登場したばかりの新チャートであるため、オプション項目が少なく、それぞれの流量ラインにツールチップすら表示もできないのですが、今後拡張されたら、４カラム目あたりにツールチップ表示内容などをコメントで残し、それを読み込むなんてこともできるようになるのでは？と期待しています。

今回は、集計をせず作図しているため、ひとつの要素から複数のラインが同じ要素に流れている為、若干グラフとしては見づらいのですが、これらをきちんと集計し１本のグラフに集約することで、より見やすいグラフへと変わると思います。

また、このグラフは、response.getDataTableで帰ってきた値をそのままチャートに流し込めないので、データテーブルを用意し、カラムを用意して流し込んでいます。カラム自体今回のグラフには出てこないのですが、一応設定しておきます。

参考リンク