title: d3.js: SVG bars appear outside the svg area
body: <p>I'm new to d3.js and I am building a simple bar chart.  The code shown below shows bars at the very bottom of the browser window, not within the svg region in the html code.  </p>
  
  <p>Here's the html code:</p>
  
  <pre><code>&lt;div class="C2_01"&gt;First paragraph.&lt;/div&gt;&lt;br&gt;
  
  &lt;div class="C2_02"&gt;Second paragraph.&lt;/div&gt;&lt;br&gt;
  
  &lt;svg&gt;&lt;/svg&gt;
  &lt;script src="JS\D3_BarChart.js"&gt;&lt;/script&gt;
  
  &lt;div class="C2_04"&gt;Third paragraph.&lt;/div&gt;
  </code></pre>
  
  <p>Here's the d3 javascript code:</p>
  
  <pre><code>var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];
  
  var svg = d3.select("body").append("svg")
            .attr("height","20%")
            .attr("width","20%");
  
  svg.selectAll("rect")
      .data(dataArray)
      .enter().append("rect")
            .attr("height","250")
            .attr("width","30")
            .attr("x", function(d, i) {return (i * 60) + 25})
            .attr("y","50")
            .attr("fill","white");
  </code></pre>
  
  <p>My only question is, why are the bars showing outside the svg area, far to  the bottom of the page?  </p>
  
  <p>Thanks for any help.  </p>