title: JSON keys for x axis, values for y
body: <p>Basically, I am trying to recreate this graph which was created in Excel: </p>
  
  <p><img src="https://i.stack.imgur.com/dHs5f.png" alt="enter image description here"></p>
  
  <p>My code so far is this...</p>
  
  <pre><code>    var theData = [
        {
          'FB':4,
          'Mv':4,
          'CB':5,
          'SL':3,
          'CH':2,
          'OT':2,
          'Ctrl':6,
          'Cmd':6,
          'Del':5,
          'AA':6,
         },
        {
          'FB':2,
          'Mv':3,
          'CB':4,
          'SL':5,
          'CH':4,
          'OT':3,
          'Ctrl':5,
          'Cmd':6,
          'Del':6,
          'AA':5,
         },
         etc...
      ];
  
      var margin = {top:10, right:10, bottom:30, left:40},
          width = 600 - margin.left - margin.right,
          height = 400 - margin.top - margin.bottom;
  
      var x = d3.scale.ordinal()
          .domain(d3.keys(theData[0]))
          .rangeRoundBands([0, width]);
  
      var y = d3.scale.linear()
          .domain([2,8])
          .range([height,0]);
  
      var xAx = d3.svg.axis()
          .scale(x)
          .orient('bottom')
      var yAx = d3.svg.axis()
          .scale(y)
          .orient('left')
          .ticks(3);
  
      var svgContainer = d3.select('#d3Stuff').append('svg')
          .attr('width',width + margin.left + margin.right)
          .attr('height',height + margin.top + margin.bottom)
          .style('border','1px solid black')
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
      svgContainer.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAx)
          .append("text")
          .attr("class", "label")
          .attr("x", width)
          .attr("y", -6)
          .style("text-anchor", "end");
  
      svgContainer.append("g")
          .attr("class", "y axis")
          .call(yAx)
          .append("text")
          .attr("class", "label")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end");
  </code></pre>
  
  <p>I'm having problems trying to get circles to appear for the values in the data object. I would like them to line up with the x axis keys, obviously. If I can at least get the initial values to show, I can calculate the min/max/avg later.</p>
  
  <p>Here is what the code creates so far:</p>
  
  <p><img src="https://i.stack.imgur.com/ZWDvT.png" alt="enter image description here"></p>
  
  <p>Any help would be awesome!</p>