bars

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!

var margin ={top:20, right: 30, bottom:30, left:30};
 
    var width = 600;
    var height = 600;
    
    var svg = d3.select("body").append("svg")
    	.attr({
        width: width,
        height: height
      })
			
    .style("background-color", "rgb(65, 244, 166)")
    
    
   var g = svg.append("g")
   	.attr("transform", "translate(" + margin .left + "," + margin.top + ",");

var data = [{ y:20, x:'a'},
              { y:10, x:'b'},
              { y:20, x:'c'},
              { y:50, x:'d'},
              { y:10, x:'e'},
              { y:20, x:'f'}
 		]; 
 
	var maxY = d3.max(data, function(d,i) {return d.y})
 	var yScale = d3.scale.linear()
  	.domain([0, maxY])
  	.range([0, height])

var xScale = d3.scale.ordinal()
  	.domain(data.map( function (d) {return d.x;} ))
  	.rangeRoundBands([0, width], 0.1, 0.2)
  
  
	var bars = g.selectAll("rect").data(data)
  
	bars.enter().append("rect")

bars.attr({
    x: function(d,i) {return xScale(d.x)},
    y: function(d,i) { return height - yScale(d.y)},
    width: xScale.rangeBand(),
    height: function(d, i) {return yScale(d.y)}
    
  })

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js