title: Dynamically sized word-cloud using d3-cloud
body: <p>I am creating a wordcloud by modifying code from : <a href="https://github.com/jasondavies/d3-cloud" rel="nofollow noreferrer">https://github.com/jasondavies/d3-cloud</a>. I can change the size by modifying w &amp; h but I want to scale the word cloud as the browser window changes. What would be the best method to achieve this?</p>
  
  <p>Code also posted at <a href="http://plnkr.co/edit/AZIi1gFuq1Vdt06VIETn?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/AZIi1gFuq1Vdt06VIETn?p=preview</a></p>
  
  <pre><code>&lt;script&gt;
  
   myArray = [{"text":"First","size":15},{"text":"Not","size":29},{"text":"Bird","size":80},    {"text":"Hello","size":40},{"text":"Word","size":76},{"text":"Marketplaces","size":75}]
  var fillColor = d3.scale.category20b();
  var w = 400, // if you modify this also modify .append("g") .attr -- as half of this
    h = 600;
  
  d3.layout.cloud().size([w, h])
    .words(myArray) // from list.js
    .padding(5)
    .rotate(0)      
    .font("Impact")
    .fontSize(function(d) { return d.size; })
    .on("end", drawCloud)
    .start();
  
  function drawCloud(words) {
  d3.select("body").append("svg")
      .attr("width", w)
      .attr("height", h)
    .append("g")
    .attr("transform", "translate(" + w/2 + "," + h/2 + ")")
    .selectAll("text")
      .data(words)
      .enter().append("text")
      .style("font-size", function(d) { return (d.size) + "px"; })
      .style("font-family", "Impact")
      .style("fill", function(d, i) { return fillColor(i); })
      .attr("text-anchor", "middle")
      .attr("transform", function(d,i) {
            return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
          }
      )
    .text(function(d) { return d.text; });
   }
   &lt;/script&gt;
  </code></pre>