Snippets for D3 Word Cloud blog

1.html

<script src="https://cdn.pubnub.com/pubnub-3.15.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="js/d3.layout.cloud.js"></script>

1.js

function calculateCloud(data) {
  d3.layout.cloud()
    .size([600, 400])
    .words(data) // data from PubNub
    .rotate(function() { return ~~(Math.random()*2) * 90;}) // 0 or 90deg
    .fontSize(function(d) { return d.size; })
    .on('end', drawCloud)
    .start();
}

2.js

function drawCloud(words) {
  d3.select('#cloud').append('svg')
    .attr('width', 600).attr('height', 400)
    .append('g')
    .selectAll('text')
    .data(words)
    .enter().append('text')
    .style('font-size', function(d) { return d.size + 'px'; })
    .style('font-family', function(d) { return d.font; })
    .style('fill', function(d, i) { return colors(i); })
    .attr('text-anchor', 'middle')
    .attr('transform', function(d) {
      return 'translate(' + [d.x, d.y] + ')rotate(' + d.rotate + ')';
    })
    .text(function(d) { return d.text; });
}

3.js

pubnub.history({
  channel: 'chat',
  count: 100,
  callback: function(m) {
    calculateCloud(processData(m[0]));
  }
});

4.js

function processData(messages) { 
  // Strip off punctuations from strings in ['message1', 'message2',...] 
  // Count frequency of words
  // Returns in key/value form for d3.layout.cloud  
  // See https://github.com/pubnub/d3-wordcloud for the entire code
  return wordCountArr // [{text: 'str', size: n},...]
}