javascript - 単語の頻度のヒストグラムを作成する

Question

これで、数値の頻度のヒストグラムを正常に作成できました。言葉でも同じことをしたい。

bins = [1,1,1,2,3,4,4,4,4,5,5,6,6,6,2,2,3,3,1,23,54,6,6,7,6,5,4]

@svg = d3
  .select('.histogram')
  .append('svg')
  .attr('width', @model.get('width'))
  .attr('height', @model.get('height'))
  .append('g')
data = d3
  .layout
  .histogram().bins(bins.length)(bins)
bar = @svg
  .selectAll('.bar')
  .data(data)
  .enter()
  .append('g')
bar
  .append('rect')
  .attr('x', 0)
  .attr('y', (d) -> return d.x*5)
  .attr("width", (d) -> return d.y * 20)
  .attr("height", 5)
  .attr('fill','steel')

このような配列の頻度のヒストグラムを作成したいと思います-

    bins = ['hello','hello','goodbye','goodbye','beatles','kill','harry','harry']

どうすればそれを行うことができますか？ヒストグラム レイアウトの値関数を使用するのは良い方法のようですが、それは何らかの方法で状態を維持する必要があることを意味します。また、関連するバーの横に単語がラベルとして表示されるようにしたいと思います。

ありがとう