title: D3.js: create a fixed number of elements
body: <p>I'm trying to create a fixed number of elements using D3, taking this value from a json file. This means that, if the given json data is <strong>n</strong>, I want to print <strong>n</strong> elements into my svg.</p>
  
  <p>This is my code:</p>
  
  <pre class="lang-js prettyprint-override"><code>    // Defining the size of the svg element
      var w = 1000;
      var h = 50;
  
      // Defining the dataset
      d3.json("people.json", function(dataset) {
  
      // Iterating through the json
      for(var i=0; i&lt;dataset.length; i++) {
  
                  var svg = d3.select("body").append("svg")
                      .attr("width", w)
                      .attr("height", h);
  
              // Iterating through the value
              for(var j=0; j&lt;dataset[i].age; j++) {
  
                  svg.selectAll("rect")
                          .data(dataset)
                          .enter()
                          .append("rect")
                          .attr("width", 20)
                          .attr("height", 20)
                          .attr("x", function(d, j) { return j * 55 })
              }
  
          }
  
      });
  </code></pre>
  
  <p>This is my json example file (totally random values for ages):</p>
  
  <pre class="lang-json prettyprint-override"><code>  [{
      "name": "Larry",
      "last": "Page",
      "country": "USA",
      "city": "Mountain View",
      "age": 32
    }, {
      "name": "Sergey",
      "last": "Bean",
      "country": "USA",
      "city": "Mountain View",
      "age": 37
    }, {
      "name": "Bill",
      "last": "Gates",
      "country": "USA",
      "city": "Seattle",
      "age": 60
    }, {
      "name": "Mark",
      "last": "Zuckemberg",
      "country": "USA",
      "city": "Palo Alto",
      "age": 35
    }, {
      "name": "Sergio",
      "last": "Marchionne",
      "country": "Italy",
      "city": "Milan",
      "age": 65
    }
  ]
  </code></pre>
  
  <p>My expected result should be something like that ( [-] --> svg rectangle)</p>
  
  <ol>
  <li><p>Larry Page: 
  [-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-]</p></li>
  <li><p>Sergey Bean:
  [-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-]</p></li>
  </ol>
  
  <p>and so on...</p>
  
  <p>Can you help me to understand what I'm doing wrong?</p>
  
  <p>Thanks!</p>