title: Creating a rectangle chart with D3.js
body: <p>I am trying to make a d3 javascript that creates a rectangle whose color depends on a data set. All of the rectangles are adjacent to each other like:</p>
  
  <pre><code>         [][][][][][]
           [][][][][][]
  </code></pre>
  
  <p>I got my script to work to create rectangles for all of my data, but it overflows like:</p>
  
  <pre><code>          [][][][][][][][][][][][][][][][][][][][][][][][][][][]
  </code></pre>
  
  <p>How can I create width and height properties for my d3 script so it looks more like</p>
  
  <pre><code>        [][][][]
          [][][][]
          [][][][]
  </code></pre>
  
  <p>Here is my script:</p>
  
  <pre><code>    &lt;script&gt;
           //for whatever data set
           var data = [];
           //Make an SVG Container
       var svgContainer = d3.select("body").selectAll("svg")
                                   .data(data)
                                   .enter().append("svg")
                                   .attr("width", 38)
                                   .attr("height", 25);
  
      //Draw the rectangle
     var rectangle = svgContainer.append("rect")
                       .attr("x", 0)
                       .attr("y", 5)
                       .attr("width", 38)
                       .attr("height", 25);
      &lt;/script&gt;
  </code></pre>