Ch. 5, Fig. 30 - D3.js in Action

This is the code for Chapter 5, Figure 30 from D3.js in Action used to create a word cloud with semantically meaningfully word color and rotation using d3.layout.cloud() (a layout created by Jason Davies that does not come in core D3).

<html>
<head>
  <title>D3 in Action Chapter 5 - Example 13</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="colorbrewer.js" type="text/JavaScript"></script>
<script src="d3.layout.cloud.js" type="text/JavaScript"></script>
</head>
<style>
  svg {
    height: 500px;
    width: 500px;
    border: 1px solid gray;
  }

</style>
<body>

<div id="viz">
  <svg>
  </svg>
</div>
<div id="controls" />
</body>
  <footer>
    
<script>
d3.csv("worddata.csv", function(data) {dataViz(data)});
    
    wordScale=d3.scale.linear().domain([0,100]).range([10,160]).clamp(true);
    var keywords = ["layout", "zoom", "circle", "style", "append", "attr"]

function dataViz(data) {
     d3.layout.cloud().size([500, 500])
      .words(data)
      .rotate(function(d) { return d.text.length > 5 ? 0 : 90; })
      .fontSize(function(d) { return wordScale(d.frequency); })
      .on("end", draw)
      .start();
      
      function draw(words) {
        
      var wordG = d3.select("svg").append("g").attr("id", "wordCloudG").attr("transform","translate(250,250)");

wordG.selectAll("text")
      .data(words)
      .enter()
      .append("text")
      .style("font-size", function(d) { return d.size + "px"; })
        .style("fill", function(d) { return (keywords.indexOf(d.text) > -1 ? "red" : "black"); })
        .style("opacity", .75)
        .attr("text-anchor", "middle")
        .attr("transform", function(d) {
          return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .text(function(d) { return d.text; });
      }

}
</script>
  </footer>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js