D3 Examples - Word Cloud

xxxxxxxxxx
 
<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>
  <script src="https://unpkg.com/d3-force-attract@latest"></script>
  <script src="https://unpkg.com/d3-force-cluster@latest"></script>
</head>
<style>
  svg {
    height: 500px;
    width: 500px;
    border: 1px solid gray;
  }
​
</style>
<body>
​
<div id="viz">
  <!--<svg>
  </svg>-->
</div>
</body>
  <footer>
    
<script>
​
    var height = 500;
    var width = 500;
  
var tooltip = d3.select("body")
      .append("div")
      .style("position", "absolute")
      .style("z-index", "10")
      .style("visibility", "hidden")
      .text("a simple tooltip");
  
var datos = [
  {text: "Emp",    frequency:  31},
  {text: "Pro",    frequency:  20},
  {text: "Can",     frequency: 58},
  {text: "No",   frequency: 25},
  {text: "Cli",    frequency:  31},
  {text: "Epa",    frequency:  20},
  {text: "Prd",     frequency: 58},
  {text: "Cie",   frequency: 25},
  {text: "Ent",    frequency:  31},
  {text: "Noh",    frequency:  20},
  {text: "Cen",     frequency: 58},
  {text: "Otros",   frequency: 25}
];
    //d3.csv("worddata.csv", function() {dataViz(datos)});
    
    wordScale=d3.scale.linear().domain([0,100]).range([10,160]).clamp(true);
    
    function dataViz() {
​
    randomRotate=d3.scale.linear().domain([0,1]).range([-20,20]);
​
     d3.layout.cloud().size([500, 500])
      .words(datos)
      .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; });
      }
​
    }
  var svg = d3.select("body")
        .append("svg")
        .attr("height", height)
        .attr("width", width);
        var g = svg.append("g");
        g.datum(datos);
        
        var node = g.selectAll("circle")
          .data(function(d) { return d; })
          .enter()
          .append("circle")
            .attr("r", function(d) { return d.frequency; })
            .attr("fill", function(){ return "hsl(" + Math.random() * 360 + ",100%,50%)";})
        .attr("transform", function(d) {
          return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .attr("cx", function() {
         return Math.floor(Math.random() * 300) + 50; 
        })
            .attr("cy", function() {
         return Math.floor(Math.random() * 300) + 50; 
        });
  var simulation = d3.forceSimulation()
  // keep entire simulation balanced around screen center
  .force('center', d3.forceCenter(width/2, height/2))
  
  // pull toward center
  .force('attract', d3.forceAttract()
    .target([width/2, height/2])
    .strength(0.01))
​
  // cluster by section
  .force('cluster', d3.forceCluster()
    .centers(function (d) { return clusters[d.cluster]; })
    .strength(0.5)
    .centerInertia(0.1))
​
  // apply collision with padding
  .force('collide', d3.forceCollide(function (d) { return d.radius + padding; })
    .strength(0))
​
  .on('tick', layoutTick)
  .nodes(nodes);
</script>
  </footer>
​
</html>
​
    