Hexagon Word List

An automatically sorting list of words that fit into a hexagon. Words are currently gibberish.

<!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>

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");

// 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>

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

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js