D3 Examples - Hexagon Word List

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title></title>
<style>
path {
  fill: white;
  stroke: #000;
  stroke-width: 1px;
  stroke-linejoin: round;
}
text {
  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
}
</style>
</head>
<body> 
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="hexbin.js" ></script>
<script src="chance.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
​
<script>
var width = 960,
    height = 500.
    duration = 1000;
​
var hexbin = d3.hexbin()
    .size([width, height])
    .radius(270);
​
var center = [width / 2, height / 2];
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
svg.append("g")
    .datum(center)
    .append("path")
    .attr("class", "hexagon")
    .attr("d", hexbin.hexagon())
    // Transformations are applied right-to-left
    .attr("transform", function(d) { return "translate(" + width / 2 + "," + height / 2 + ") rotate(90, 0, 0)"; });
​
// Create a set of words that will remain the same
// for the entire session
var numWords = 12;
wordHash = {};
for (var i = 0; i < numWords; i++) {
  var word = chance.word({syllables: 4});
  wordHash[word] = chance.integer({min: 1, max: 100});
}
​
// Put this into a D3-friendly array
var wordSet = [];
for (var word in wordHash) {
  wordSet.push({ key: word, value: wordHash[word]});
}
// Sort in descending order
wordSet = _.sortBy(wordSet, function(word) {
    return -1 * word.value;
});
​
var textGroup = svg.append("g");
​
var updateWordSet = function(wordHash) {
    wordSet = [];
    for (var word in wordHash) {
      wordHash[word] = wordHash[word] + chance.integer({min: -20, max: 20});
      wordSet.push({ key: word, value: wordHash[word]});
    }
    // Sort in descending order
    wordSet = _.sortBy(wordSet, function(word) {
        return -1 * word.value;
    });
    return wordSet;
}
​
// An array for storing the vertical position of the words in the hexagon, as a fraction of its height
var vPos = [
    {"position": 0},
    {"position": -0.18},
    {"position": 0.164},
    {"position": -0.31},
    {"position": 0.303},
    {"position": -0.43},
    {"position": 0.413}
];
​
var textScale = d3.scale
  .pow()
  .exponent(.4)
  .domain([0,6])
  .range([80, 20]);
​
var drawWords = function(wordSet) {
  // Generate a set of words and grab the first 7. We don't take all of them as we want there to be some that enter and exit the screen 
  words = _.first(updateWordSet(wordHash), 7);
  var hexHeight = 0.935 * height;
​
  // Create a selection for the words
  var textList = textGroup.selectAll("text")
    .data(words, function(d) {return d.key;});
​
  // Values being updated
  textList.transition()
    .duration(duration)
    .delay(function(d, i) {
      return i * 100;
    })
    .attr("y", function(d, i) {
        var middleHeight = height / 2;
        return middleHeight + hexHeight * vPos[i].position;
    })
    .style("font-size", function(d, i) {
      return textScale(i) + "px";
    });
​
  // New values being added
  textList.enter().append("text")
    .attr("text-anchor", "middle")
    .attr("x", width / 2)
    .attr("y", function(d, i) {
        var middleHeight = height / 2;
        return middleHeight + hexHeight * vPos[i].position;
    })
    .style("font-size", 0)
    .transition()
    .duration(duration)
    .attr("dy", "0.35em")
    .style("font-size", function(d, i) {
      return textScale(i) + "px";
    })
    .text(function(d) {return d.key; });
​
  // Values being removed
  textList.exit()
    .transition()
    .duration(duration)
    .style("font-size", 0);
​
}
​
drawWords();
setInterval(drawWords, 2000);
​
</script>
​
</body>
</html>
    