D3.jsと言えばデータのビジュアライズを行うJavaScriptライブラリです。多彩なグラフィックスを描けますが、高度な機能だけに使いこなすのも難しいという印象があります。 そこで今回はKotoを紹介します。D3.jsをベースに、グラフを描くライブラリです。

Kotoの使い方

Kotoのデモグラフです。

そのコードです。JavaScriptなのでコールバックが多数つけられるのが特徴的です。

// Basic Example
class BarChart extends Koto {
  constructor(selection){
    // setup chart
    var bars = this.base.append('g').classed('bars', true);

    // define layer
    var layer = this.layer('bars', bars, {
      dataBind: function (data) {
        return this.selectAll('rect').data(data);
      },
      insert: function () {
        this.append('rect');
      }
    });

    // Setup life-cycle events on layers
    bars.on('enter', function () {
      // this => enter selection
    })
    .on('merge', function () {
      // this => base selection
    })
    .on('exit', function () {
      // this => exit selection
    });
  }
  preDraw(data) {
    // [Optional] Do something before draw
  }
}

var barChart = new BarChart(d3.select('#vis'));
barChart.draw(data);

Kotoでは今のところ機能は多くありません（棒グラフのみのようです）。d3.chartにインスパイアされて開発されているとのことで、現状ではd3.chartのが高機能と思われます。しかしd3.chartに関わる開発者が減ってきているとのことで、それを危惧してKotoがはじまったようです。本家が提供するものだけでなく、多様性が広がるのは良いことでしょう。

KotoはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Koto kotojs/kotojs: A framework for building reusable components with d3.js