title: Unable to create a bar chart from json data using d3.js
body: <p>I'm trying to get a bar chart running based on <a href="http://bl.ocks.org/mbostock/3885304" rel="nofollow">this</a> example.</p>
  
  <pre><code> &lt;body&gt;
      &lt;/body&gt;
      &lt;script&gt;
          var width = 960, height = 500;
          var margin = {top: 20, right: 20, bottom: 30, left: 40};
  
          //data
          var data = [ {"x":"A","y":0.15}, {"x":"B","y":0.10}, {"x":"C","y":0.35} ];
  
          //x and y Scales
          var xScale = d3.scale.ordinal()
              .rangeRoundBands([0, width], .1);
  
          var yScale = d3.scale.linear()
              .range([height, 0]);
  
          //x and y Axes
          var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom");
  
          var yAxis = d3.svg.axis()
              .scale(yScale)
              .orient("left")
              .ticks(10, "%");
  
          //create svg container
          var svg = d3.select("body")
              .append("svg")
              .attr("width", width + margin.left + margin.right)
              .attr("height", height + margin.top + margin.bottom)
              .append("g")
              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");        
  
          //create bars
          d3.selectAll(".bar")
              .data(data)
              .enter()
              .append("rect")
              .attr("class", "bar")
              .attr("x", function(d) { return xScale(d.letter); })
              .attr("width", xScale.rangeBand())
              .attr("y", function(d) { return yScale(d.frequency); })
              .attr("height", function(d) { return height - yScale(d.frequency); });
  
          //drawing the x axis on svg
          svg.append("g")
              .attr("class", "x axis")
              .attr("transform", "translate(0," + height + ")")
              .call(xAxis);
  
          //drawing the y axis on svg
          svg.append("g")
              .attr("class", "y axis")
              .call(yAxis)
              .append("text")
              .attr("transform", "rotate(-90)")
              .attr("y", 6)
              .attr("dy", ".71em")
              .style("text-anchor", "end")
              .text("Frequency");
      &lt;/script&gt;
  </code></pre>
  
  <p>All I see is the Y axis and nothing else. What am I missing? </p>