title: D3.js not displaying chart
body: <p>I am using D3 for the first time and I have followed the instructions on their site to get to this point. I cannot seem to get the chart to display although there are no exceptions in the JS console in Chrome.</p>
  
  <p>Here's the JS in the header of my page:</p>
  
  <pre><code>&lt;script&gt;
      var margin = {
      top: 0,
      right: 0,
      bottom: 10,
      left: 0
  },
  width = 838 - margin.left - margin.right,
      height = 300 - margin.top - margin.bottom;
  
  var x = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1);
  
  var y = d3.scale.linear()
      .range([height, 0]);
  
  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");
  
  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");
  
  var chart = d3.select(".day_chart")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  d3.json("http://solarmonitoringaustralia.com.au/myphp/inverterdata.php?var=TEST1&amp;id=C120031", function (error, data) {
  
      data.forEach(function (d) {
          d.hour = +d.hour; // coerce to number
          d.max_energy = +d.max_energy;
  
          alert(d.hour + " -- " + d.max_energy);
      });
  
      x.domain(data.map(function (d) {
          return d.hour;
      }));
      y.domain([0, d3.max(data, function (d) {
          return d.max_energy;
      })]);
  
      chart.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);
  
      chart.append("g")
          .attr("class", "y axis")
          .call(yAxis);
  
      chart.selectAll(".bar")
          .data(data)
          .enter().append("rect")
          .attr("class", "bar")
          .attr("x", function (d) {
          return x(d.hour);
      })
          .attr("y", function (d) {
          return y(d.max_energy);
      })
          .attr("height", function (d) {
          return height - y(d.max_energy);
      })
          .attr("width", x.rangeBand());
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The code calls in a JSON request to a server side script. Here's the data it returns to the browser when executing the query:</p>
  
  <pre><code>[{"hour":"1","max_energy":"15.969"},{"hour":"2","max_energy":"19.065"},{"hour":"3","max_energy":"21.191"},{"hour":"4","max_energy":"23.151"},{"hour":"5","max_energy":"24.403"},{"hour":"6","max_energy":"25.082"},{"hour":"7","max_energy":"25.494"},{"hour":"8","max_energy":"25.499"},{"hour":"9","max_energy":"4.685"},{"hour":"10","max_energy":"7.309"},{"hour":"11","max_energy":"10.051"},{"hour":"12","max_energy":"13.119"}]
  </code></pre>
  
  <p>My HTML contains this tag where I want the chart to appear:</p>
  
  <pre><code>&lt;sgv class="day_chart"&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>I can see the data passing into the JS above via the "alert" function in the  data.forEach(function (d), so the data comes back.</p>
  
  <p>The page loads but it loads with a blank area where the chart would go, and no JS errors in the console. Thanks for any advice!</p>