title: D3 Library — How To Access Data from JSON in this example
body: <p>I didn't explain the issue properly in the title... Sorry.</p>
  
  <p>I'm following the D3 Tag Cloud Simple example
  <a href="https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html" rel="nofollow">https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html</a></p>
  
  <p>I have a JSON file that consists of tweet tags, sentimental values and tweet text;
  (excerpt)</p>
  
  <pre><code>var words = [{"word":"disgrace","sentiment":"0.975","tweet":"Wheres Fred the weatherman? \nIn jail #disgrace #dirtyman @MrJimmyCorkhill"},{"word":"dirtyman","sentiment":"0.975","tweet":"Wheres Fred the weatherman? \nIn jail #disgrace #dirtyman @MrJimmyCorkhill"}];
  </code></pre>
  
  <p>I want to use the "tweet" value as a 'title' element of each 'text' element.
  I tried doing this by putting my tweet in the .words function (or .map, I don't know :s), as other data is accessed that way, but I can't extract my 'tweet' data;</p>
  
  <pre><code>var fill = d3.scale.category20();
  var words = &lt;?php echo $tweets-&gt;getTweetTags(); ?&gt;;
  
  d3.layout.cloud().size([1000, 1000])
  .words(words.map(function(d) {
  return {text: d.word, size: d.sentiment * 40, tweet: d.tweet};
  }))
  .rotate(function() { return ~~(Math.random() * 2) * Math.random() * 1; })
  .font("Impact")
  .fontSize(function(d) { return d.size; })
  .on("end", draw)
  .start();
  
  function draw(words) {
  d3.select("#vis").append("svg")
  .attr("width", 1000)
  .attr("height", 1000)
  .append("g")
  .attr("transform", "translate(500,400)")
  .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; })
  .append("svg:title").text(function(d) { return d.tweet; } );
  }
  </code></pre>
  
  <p>d.tweet returns undefined</p>
  
  <p>I can probably understand why I can't use my tweet in the .words or .map function, as they only expect certain parameters, but I don't know how else to get the 'tweet' data into the 'title' tags of each 'text' element.</p>
  
  <p>Can anyone help me with this? </p>
  
  <p><strong>Edit:</strong> Code with inside d3.json function;</p>
  
  <pre><code>var data; // a global
              d3.json("../../../assets/json/tweetTags.json", function(error, json) {
                if (error) return console.warn(error);
                data = json;
  
                var fill = d3.scale.category20();
  
                d3.layout.cloud().size([1000, 1000])
                    .words(data.map(function(d) {
                      return {text: d.word, size: d.sentiment * 40, tweet: d.tweet};
                    }))
                    .rotate(function() { return ~~(Math.random() * 2) * Math.random() * 1; })
                    .font("Impact")
                    .fontSize(function(d) { return d.size; })
                    .on("end", draw)
                    .start();
  
                function draw(data) {
                  d3.select("#vis").append("svg")
                      .attr("width", 1000)
                      .attr("height", 1000)
                    .append("g")
                      .attr("transform", "translate(500,400)")
                    .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; })
                      .append("svg:title").text(function(d) { return d.tweet; } );
                }
  
                d3.layout.cloud().size([300, 300])
                .data.map(function(d) {
                  return {text: d, size: 10 + Math.random() * 90};
                })
                .rotate(function() { return ~~(Math.random() * 2) * 90; })
                .font("Impact")
                .fontSize(function(d) { return d.size; })
                .on("end", draw)
                .start();
              });
  </code></pre>
  
  <p>I don't know how to get it working in like that. I have made the json file but now I can't access the data or run the cloud.</p>
  
  <p><strong>Edit:</strong> The text elements are appending outside of the closing body tag now :( </p>
  
  <pre><code>var data; // a global
              d3.json("../../../assets/json/tweetTags.json", function(error, json) {
                if (error) return console.warn(error);
                data = json;
  
                var fill = d3.scale.category20();
  
               d3.select("#vis").append("svg")
                   .attr("width", 1000)
                   .attr("height", 1000)
                   .append("g")
                   .attr("transform", "translate(500,400)")
                   .data(json)
                   .enter().append("text")
                   .style("font-size", function(d) { return d.sentiment * 40 + "px"; })
                   .style("font-family", "Impact")
                   .style("fill", function(d, i) { return fill(i); })
  
                   .text(function(d) {return d.word;})
                   .append("svg:title").text(function(d) { return d.tweet; } );
  
              });
  </code></pre>
  
  <p><strong>Edit: @Chris</strong> This is your exampled code in the D3 json function and with my customisations</p>
  
  <pre><code>d3.json("../../../assets/json/tweetTags.json", function(error, json) {
    if (error) return console.warn(error);
  
    var fill = d3.scale.category20();
  
    d3.layout.cloud().size([600, 500])
        .words(json.map(function(d) {;
              return {text: d.word, size: d.sentiment * 40, tweet: d.tweet};
         }))
        .rotate(function(d) { 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", 600).attr("height", 500)
            .append("g").attr("transform", "translate(350,350)")
            .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; }).append("svg:title")
            .text(function(d) { return d.tweet; } );
        }
  })
  </code></pre>
  
  <p>But I can't access d.tweet from the draw function :s</p>