このメモの狙い

複数ステップでの物やエネルギーの流れを表現するサンキー図を d3-sankey-diagram ライブラリで描きました¹ が、この流れの時系列変化をアニメーションで表現するコードを調べたので、まとめておきます。

使用したライブラリー

d3-sankey-diagram

完成品

日本のエネルギーバランス 2006-2016

データの準備

ここでは「データ総合エネルギー統計」（エネルギーバランス表）を 2006 年から2016 年まで、1 年おきにダウンロードして、データを抽出しました。
（追加で計算した内容は、生成された電力の利用先の割り付けです。企業・事業所他で消費する電力の起源を、事業用発電の一部と自家用発電の全部に割り付けました。）
各年度のフロー量を配列として、JSON 形式のデータにしました。

{
  "nodes": [ {(略)}],
  "links": [
    {"source": "1hp", "target": "3pg", "type": "3", 
      "value": ["699", "603", "575", "516", "562", "633"]},
    {"source": "1ru", "target": "3pg", "type": "3", 
      "value": ["0", "0", "6", "7", "7", "114"]},
    ...], }

グラフを更新する部分のコード

update という関数の中に、図を更新する部分を書きます。リンクの数値を SVG のテキストとして置いている部分が、細かなコードの積み重ねになっています。これがなければ、かなりシンプルです。

  d3.json('ja_energy_history.json', function(energy) {
    layout
        .linkValue(function (d) {return d.value[idx];})
        .rankSets(energy.rankSets)
        .ordering(energy.order);
    svg
        .datum(layout(energy))
        .call(diagram.groups(energy.groups));
    var linklab = d3.select('svg')
        .selectAll('.link')
        .append("text")
          .attr("x", function(d) {return d.points[0].x;})
          .attr("y", function(d) {return d.points[0].y;})
          .attr("dx", "1.5em")
          .attr("dy", "0.4em")
          .text(function(d) { return d.value[idx] > 1000 ? fmt(d.value[idx]) + ' PJ' : ""; });

    d3.interval(update, 3000);  

    function update() {
      idx++;
      if(idx > 5) idx = 0;
      layout(energy);	
      svg
        .transition().duration(1000).ease(d3.easeCubic)
        .call(diagram);
      linklab
        .transition().duration(1000)
        .text(function(d) { return d.value[idx] > 1000 ? fmt(d.value[idx]) + ' PJ' : ""; })
          .attr("x", function(d) {return d.points[0].x;})
          .attr("y", function(d) {return d.points[0].y;})
      d3.select('h2').text(energy.year[idx]);
    }  
  });

原子力発電のノードとそこにつながるリンクのラベルは、きちんと消えたり復活したりします。

コード全体は、github に貼りました。

終わりに

現状では、まだ切り貼りを試しながら動かしている状態で、分かったという感覚には至っていません。一応動くコードになったので、それを保存しておくための記事でした。

サンキー図の作成 ― d3-sankey-diagram のカスタマイズ ↩