PubNub-Powered Dynamic Wordcloud

PubNub-powered dynamic wordcloud extended from the work of Jason Davies and Tomomi Imura.

(The API returns a blank object on occasion so there's some odd delays.)

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title></title>
<style>
path {
  fill: none;
  stroke: #000;
  stroke-width: .25px;
  stroke-linejoin: round;
}
</style>
</head>
<body> 
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="d3.layout.cloud.js"></script>
<script src="https://cdn.pubnub.com/pubnub-dev.js"></script>

colors = d3.scale.category20();

var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
      .append("g")
        .attr('transform', "translate(" + width / 2 + "," + height / 2 + ")")

function calculateCloud(wordCount) {
  d3.layout.cloud()
      .size([width, height])
      .words(wordCount)
      .padding(5)
      .rotate(0)
      .fontSize(function(d) { 
        return d.size * minFontSize; 
      })
      .on("end", draw)
      .start();
}

function draw(words) {

var duration = 1000,
    delay = 0;

var wordCloud = svg.selectAll("text")
    .data(words, function(d) { return d.text; });

// Values being updated
  wordCloud.transition()
    .duration(duration)
    .delay(function(d, i) {
      return i * 10;
    })
    .attr("transform", function(d) {
        return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
    })
    .style("font-size", function(d) {
      return d.size + "px";
    });

// New values being added
  wordCloud.enter().append("text")
    .attr("transform", function(d) {
        return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
      })
    .style("font-size", 0)
    .style("fill", function(d, i) {
      return colors(i);
    })
    .transition()
    .duration(duration)
    .style("font-size", function(d) {
      return d.size + "px";
    })
    .attr("text-anchor", "middle")
    .text(function(d) {return d.text; })

// Values being removed
  wordCloud.exit()
    .transition()
    .duration(duration)
    .style("font-size", 0);
}

// PubNub wiring

var channel = 'chat';

var pubnub = PUBNUB.init({
    subscribe_key: 'sub-c-f762fb78-2724-11e4-a4df-02ee2ddab7fe',
    publish_key:   'pub-c-156a6d5f-22bd-4a13-848d-b5b4d4b36695'
});

// Get the last 100 messages
function getData() {
  pubnub.history({
    channel: channel,
    count: ~~(Math.random() * 100),
    callback : function(messages) {
      var words = processData(messages[0]);
      if (words.length != 0) {
        calculateCloud(words);
      }
    }
  });
}

// Put the data in the proper format for d3.layout.cloud: [{text: 'string', size: n},...]

function processData(strings) {
  if(!strings) return;

// Convert the array to a long string
  strings = strings.join(' ');

// Strip the objects and punctuation
  strings = strings.replace(/object Object/g, '')
      .replace(/[\+\.,\/#!$%\^&\*\[\]{}=_`~]/g,'')
      .toLowerCase();

// Convert back into an array
  strings = strings.split(' ');

// Count frequency of word occurance
  var wordCount = {};

for(var i = 0; i < strings.length; i++) {
    // If they word doesn't exist in the object
    // initialize it with a count of 0
    if (!wordCount[strings[i]]) {
      wordCount[strings[i]] = 0
      }

// Increment the word count by one each time
    // it occurs
    wordCount[strings[i]]++;
  }

delete wordCount[""];
  console.log(wordCount);

var wordCountArr = [];

for(var word in wordCount) {
    wordCountArr.push({
      text: word,
      size: wordCount[word]
    });
  }

return wordCountArr;
}

getData();
setInterval(getData, 2000);

</script>

</body>
</html>

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

https://cdn.pubnub.com/pubnub-dev.js