Horizontal Bars

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>  
  
  <h2>D3 Tutorial</h2>
  <div id="chart"></div>
  <p>Arturo</p>  
</head>

<body>
  <script>
    var myData = [50, 20,7,250, 90];
    var width = 800;
    var height = 800;
    var barWidth = 20;
    var widthScale = d3.scaleLinear().range([0, 400]);
    var colorScale = d3.scaleOrdinal().range(d3.schemeCategory20);
    var margin = {top: 20, left:20, right:20, bottom:20};
    
    var chart = d3.select("#chart")
    							.append("svg")
    							.attr("width",width)
    						  .attr("height",height);
    
    widthScale.domain([0, d3.max(myData)]);
  	var rects = chart.selectAll(".bar")
	  								   .data(myData);
    
	  //Create
		rects.enter()
		  	.append("rect")
		    .attr("class", "bar") // enter
		  	.merge(rects) // enter + update
		      .attr("x", 0)
		      .attr("y", function (d, i) {	return i * (barWidth+1); })
	     		.attr("width", function (d) { return widthScale(d); })
	     		.attr("height", barWidth);
	     
    
	  //Remove
	  rects.exit()
		   	.remove();    
    	    
	</script>  
</body>

https://d3js.org/d3.v4.min.js