D3v4でカテゴリカルなスケールのヒストグラムを書くベストプラクティスは何か考えてみた

最近、Riotxをある程度使えるようになった（気がする） ので、Riotxを使って複数のコンポーネントに跨ったチャートの状態を同期した拡張版crossfilterのようなものが書けないか検討しています。

試しに簡単なサンプルを作って見ようと、d3.histogramを使って書いて見ようとしたのですが、 d3.scaleOrdinalなデータをhistogramに変換できない。。 ということで、D3.jsでカテゴリー的スケールのヒストグラムを書く良い方法を検討してみました。

オブジェクトの配列を度数に変換する

ヒストグラム用のデータを作るなら当たり前の処理ですが、この処理をモジュール的に作っておこうと思います。

d3category.js

const d3category = {
  count: function (data, k) {
    const nestedData = d3.nest()
      .key(function(d) {return d[k]})
      .entries(data);

    const l = [];
    nestedData.forEach((d) => {
      const item = {}
      l.push({key: d.key …