bar chart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.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 canvasWidth = 700
    var canvasHeight = 500
    
    var margins = { top: 10, bottom: 30, left: 30, right: 20 }
    var translate = "translate(" + margins.left +", " + margins.top + ")"

// grab the svg tag
    var svg = d3.select("body").append("svg")
      .attr("width", canvasWidth)
      .attr("height", canvasHeight)
    	.style("background-color", "lightgrey")

var data = [{ x: 'A', y: 20, color: '#334499' },
                { x: 'B', y: 40, color: '#994455' },
                { x: 'C', y: 10, color: '#339999' },
                { x: 'D', y: 50, color: '#444499' },
                { x: 'E', y: 30, color: '#994455' }
                ];

canvasHeight -= (margins.top + margins.bottom)
    canvasWidth -= (margins.left + margins.right)

// use "group" to move bars into margins
    var g = svg.append('g').attr("transform", translate)
    
    var maxY = d3.max(data, function(d,i) {return d.y })
    var y_scale = d3.scale.linear()
       .domain([0, maxY])
    	 .range([canvasHeight, 0]);
    
		var x_scale = d3.scale.ordinal()
       .domain(data.map(function(d) { return d.x } ))
       .rangeRoundBands([0, canvasWidth], 0.1, 0.4)
    
    // create "bars" 
    var bars = g.selectAll('rect').data(data)
    bars.enter().append('rect')
    
    bars.attr({ x: function (d,i) { return x_scale(d.x) }, 
               y: function (d,i) { return y_scale(d.y) },
               width: x_scale.rangeBand(), 
               height: function (d,i) { return canvasHeight - y_scale(d.y) }
              })
    bars.style('fill', function (d,i) { return d.color })
  	  
    bars.exit().remove();
    
    var yAxis = d3.svg.axis()
    .scale(y_scale)
    .orient("left")
    
    var xAxis = d3.svg.axis()
    .scale(x_scale)
    .orient("bottom")
    
    g.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    
    var axisTranslate = "translate(0, " + canvasHeight + ")"
    g.append("g")
    .attr("class", "x axis")
    .attr("transform", axisTranslate)
    .call(xAxis)
    
    
    
    
  </script>
</body>

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