title: Create wordcloud d3.js from elasticsearch
body: <p>I am using the following example as base and want to make it dynamic word cloud <a href="https://github.com/jasondavies/d3-cloud" rel="nofollow">https://github.com/jasondavies/d3-cloud</a></p>
  
  <pre><code>define(['scripts/d3.v3', 'scripts/elasticsearch'], function (d3, elasticsearch) {
  
  "use strict";
  var client = new elasticsearch.Client();
  
  client.search({
      index: 'nfl',
      size: 5,
      body: {
          // Begin query.
          query: {
              // Boolean query for matching and excluding items.
              bool: {
                  must: { match: { "description": "TOUCHDOWN" }},
                  must_not: { match: { "qtr": 5 }}
              }
          },
          // Aggregate on the results
          aggs: {
              touchdowns: {
                  terms: {
                      field: "qtr",
                      order: { "_term" : "asc" }
                  }
              }
          }
          // End query.
      }
  }).then(function (resp) {
          console.log(resp);
  
          // D3 code goes here.
          var touchdowns = resp.aggregations.touchdowns.buckets;
  
          // d3 donut chart
          var width = 600,
              height = 300,
              radius = Math.min(width, height) / 2;
  
          var color = ['#ff7f0e', '#d62728', '#2ca02c', '#1f77b4'];
  
          var arc = d3.svg.arc()
              .outerRadius(radius - 60)
              .innerRadius(120);
  
          var pie = d3.layout.pie()
              .sort(null)
              .value(function (d) { return d.doc_count; });
  
          var svg = d3.select("#donut-chart").append("svg")
              .attr("width", width)
              .attr("height", height)
              .append("g")
              .attr("transform", "translate(" + width/1.4 + "," + height/2 + ")");
  
          var g = svg.selectAll(".arc")
              .data(pie(touchdowns))
              .enter()
              .append("g")
              .attr("class", "arc");
  
          g.append("path")
              .attr("d", arc)
              .style("fill", function (d, i) {
                  return color[i];
              });
  
          g.append("text")
              .attr("transform", function (d) { return "translate(" + arc.centroid(d) + ")"; })
              .attr("dy", ".35em")
              .style("text-anchor", "middle")
              .style("fill", "white")
              .text(function (d) { return d.data.key; });
  });
  </code></pre>
  
  <p>this is example code from elasticsearch website how to use with d3</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;body&gt;
  &lt;script src="../lib/d3/d3.js"&gt;&lt;/script&gt;
  &lt;script src="../d3.layout.cloud.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    var fill = d3.scale.category20();
    d3.layout.cloud().size([300, 300])
        .words([
          "Hello", "world", "normally", "you", "want", "more", "words",
          "than", "this"].map(function(d) {
          return {text: d, size: 10 + Math.random() * 90};
        }))
        .padding(5)
        .rotate(function() { return ~~(Math.random() * 2) * 90; })
        .font("Impact")
        .fontSize(function(d) { return d.size; })
        .on("end", draw)
        .start();
    function draw(words) {
      d3.select("body").append("svg")
          .attr("width", 300)
          .attr("height", 300)
        .append("g")
          .attr("transform", "translate(150,150)")
        .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 fill(i); })
          .attr("text-anchor", "middle")
          .attr("transform", function(d) {
            return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
          })
          .text(function(d) { return d.text; });
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is code from d3 jason davies about wordcloud</p>
  
  <p>How to make d3 wordcloud to listen data from elasticsearch ?</p>