title: How to load a CSV and a JSON file and combine both datsets to one dataset using d3.json, d3.csv and d3.zip
body: <p>This is a follow-up question of the question <a href="https://stackoverflow.com/questions/9491885/csv-to-array-in-d3-js">here</a>. </p>
  
  <p>I would like to load several datasets using <code>d3.csv</code> and <code>d3.json</code> and then combine those datasets using <code>d3.zip</code>. In the example below I use only two. The first dataset will be stored in <code>xyData</code> and the second one in <code>colData</code>. My goal is to call something like </p>
  
  <pre><code>var combinedData = d3.zip(colData, xyData);
  </code></pre>
  
  <p>however, since these datasets are only accessible inside the <code>d3.csv</code> and <code>d3.json</code> scope, respectively, that does not work. Is there any workaround for that? How would one deal with that if one has even more datasets to load?</p>
  
  <p>The first dataset looks like this:</p>
  
  <pre><code>//xyData.csv
  x,y
  0,0.00e+000
  0.6981317,6.43e-001
  1.3962634,9.85e-001
  </code></pre>
  
  <p>My <code>JSON</code> dataset looks as follows:</p>
  
  <pre><code>//colData.json
  {
      "el1": [
          {"color": "green"},
          {"color": "purple"},
          {"color": "brown"}
      ],
  
      "el2": [
          {"color": "black"},
          {"color": "red"},
          {"color": "yellow"}
      ],
  
      "el3":[
          {"color": "brown"},
          {"color": "yellow"},
          {"color": "blue"}
      ]
  }
  </code></pre>
  
  <p>I read these datasets in as follows:</p>
  
  <pre><code>    //using foreach 
      var xyData = [];    
      d3.csv("xyData.csv", function(myData) {
          myData.forEach(function(d) {
              d.x = +d.x; //convert data to numbers
              d.y = +d.y;
            });
            console.log(myData[1]);
            xyData = myData;
            console.log(xyData[1])
      });
      console.log(xyData) //this will be an empty array
  
      //loading the json data
      var colData = [];        
      d3.json("colData.json", function(error, jsonData) {
        if (error) return console.warn(error);
        colData = jsonData;
        console.log(colData)
        console.log(colData.el1[0])
      });
      console.log(colData) //this will be an empty array
  
      //my goal would be:
      //var combinedData = d3.zip(colData, xyData);
  </code></pre>
  
  <p>My <code>console.log</code> looks like this:</p>
  
  <pre><code>Array [  ]
  Array [  ]
  Object { x: 0.6981317, y: 0.643 }
  Object { x: 0.6981317, y: 0.643 }
  Object { el1: Array[3], el2: Array[3], el3: Array[3] }
  Object { color: "green" }
  </code></pre>
  
  <p>Which shows that loading the data works as expected. But storing them as global variables does not work due to the asynchronous nature of these data loaders (therefore, the two arrays are still empty).</p>
  
  <p>My question is: What is the best way to combine two datasets to one dataset?</p>