title: Processing a multidimensional data array with d3.js
body: <p>Currently I am learning some "D3.js" and attempting to get my head around the way data is processed and selected.</p>
  
  <p>I'm stuck on the following task I've created for myself.</p>
  
  <p>Ideally, I want something that is functionally equivalent to:</p>
  
  <pre><code>    &lt;svg&gt;
          &lt;circle r=​"20.5" cx=​"100" cy=​"200"&gt;​&lt;/circle&gt;​
          &lt;circle r=​"20.5" cx=​"300" cy=​"10"&gt;​&lt;/circle&gt;​
      &lt;/svg&gt;
  </code></pre>
  
  <p>What I have currently (with my logic) is: </p>
  
  <pre><code>    var matrix = [ [{ "x": 100, "y": 200 }], [{ "x": 300, "y": 10 }]];
  
      var result = d3.select("body").append("svg")  // Append SVG to end of Body
         .data(matrix) // select this data
         .selectAll("g") //g is a svg grouping tag
         .data(function (d) { return d; }) //Unwrap the first part of the array
         .enter() // Grab all the data that is new to the selection in each array
         .selectAll("g") 
         .data(function (d) { return d;}) // foreach each item inside the 1D array
         .enter() // For all the data that doesn't exist already in the SVG
         .append("circle") // Append Circle to the DOM with the following attributes
         .attr("r", 20.5)
         .attr("cx", function (d) { return d.x; })
         .attr("cy", function (d) { return d.y; });
      };
  </code></pre>
  
  <p>Weirdly enough the following :</p>
  
  <pre><code> var result = d3.select("body").append("svg")
          .data(matrix)
          .selectAll("g")         
          .enter()            
          .append("circle")
          .attr("r", 20.5)
          .attr("cx", function (d) { return d.x; })
          .attr("cy", function (d) { return d.y; });
      };
  </code></pre>
  
  <p>Seems somehow able to get the first item in the array but doesn't iterate correctly. I'm not quite sure how it's entering the array.</p>
  
  <p>D3 seems to be quite a big step away from the programming paradigms I'm used to, and more difficult to debug so it would be awesome if someone could explain where I'm going wrong.</p>
  
  <p>Oh, and while the example is quite useless and I could flatten it using the merge command - for the purposes of fully understanding D3 manipulation. I'd like to draw the couple of circles without the merge :)</p>
  
  <p>Thanks!</p>