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

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

forked from emeeks's block: Ch. 5, Fig. 28 - D3.js in Action

<html>
<head>
  <title>D3 in Action Chapter 5 - Example 12</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></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>
</body>
  <footer>
    
<script>
    
    //d3.csv("worddata.csv", function(data) {dataViz(data)});
  d3.json("worddata.json", function(error, treeData) {
  root = treeData[0];
  update(root);
});
    
    wordScale=d3.scale.linear().domain([0,100]).range([10,160]).clamp(true);
    
    function dataViz(data) {

randomRotate=d3.scale.linear().domain([0,1]).range([-20,20]);

d3.layout.cloud().size([500, 500])
      .words(data)
      .rotate(0)
      .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("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