D3 Library — How To Access Data from JSON in this example

Question

I didn't explain the issue properly in the title... Sorry. I'm following the D3 Tag Cloud Simple example https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html I have a JSON file that consists of tweet tags, sentimental values and tweet text; (excerpt) ``` var words = [{"word":"disgrace","sentiment":"0.975","tweet":"Wheres Fred the weatherman? 
In jail #disgrace #dirtyman @MrJimmyCorkhill"},{"word":"dirtyman","sentiment":"0.975","tweet":"Wheres Fred the weatherman? 
In jail #disgrace #dirtyman @MrJimmyCorkhill"}]; ``` 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; ``` var fill = d3.scale.category20(); var words = <?php echo $tweets->getTweetTags(); ?>; d3.layout.cloud().size([1000, 1000]) .words(words.map(function(d) { return {text: d.word, size: d.sentiment * 40, tweet: d.tw…

Accepted Answer

I suggest you should use the built-in import function for json instead of php. I think that the problem you have is that the reading of the data is asynchronous, so `words` is not filled before using it in clouds.

The principle behind `d3.json()` is to do everything in this function, which will be executed when the json is loaded:

```
var data; // a global
d3.json("path/to/file.json", function(error, json) {
  if (error) return console.warn(error);
  data = json;
  visualizeit();
});
```

EDIT

Here is an example of the code that should work, I just added the d3 cloud example inside the json function.

```
d3.json("../../../assets/json/tweetTags.json", function(error, json) {
  if (error) return console.warn(error);

var fill = d3.scale.category20();

d3.layout.cloud().size([300, 300])    
      .words([  // To be replaced with data
        "Hello", "world", "normally", "you", "want", "more", "words",
        "than", "this"].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();

Then, when this version works you can just replace the `.words()` by:

```
.words(json.map(function(d) {
  return {text: d.word, size: d.sentiment * 40, tweet: d.tweet};
}))
```

D3 Library — How To Access Data from JSON in this example

Solution

Problem