bars with extras

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.4/d3.min.js"></script>
  <style>
    body {
  font: 13px sans-serif;
}

.axis path,
	.axis line {
	  fill: none;
	  stroke: #000;
	  shape-rendering: crispEdges;
	}

rect {
    shape-rendering: crispEdges;
  }
    
  body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  svg { width:100%; height: 100% }
  </style>
</head>

<body>
  <svg></svg>
  <script>
var d = [
  {name: "Alice",value: 7},
  {name: "Bob",  value: 20},
  {name: "Carol",value: 33},
  {name: "Dave", value: 9 },
  {name: "Erica",value: 1 },
  {name: "Frank",value: 44},
  {name: "Gwen", value: 15},
  {name: "Henry",value: 26}
];

var height = 300,
    width = 500,
	margin = { left: 40, right: 0, top: 20, bottom: 20},
    svg = d3.select("svg"),
    container, yScale, xScale, yAxis, xAxis, bars;

container = svg.append("g").attr("transform","translate(" + [margin.left, margin.top] + ")");

yScale = d3.scaleLinear()
	.domain([0,d3.max(d,function(d,i) { return d.value;})])
	.range([height, 0]);

xScale = d3.scaleBand()
	.domain(d.map(function(d) { return d.name } ))
	.rangeRound([0,width], 0.25)
	.paddingInner(0.2);

xAxis = d3.axisBottom().scale(xScale);
yAxis = d3.axisLeft().scale(yScale);

container.append("g")
  .attr("class","x axis")
	.attr("transform","translate(" + [0, height] + ")")
	.call(xAxis);

container.append("g")
  .attr("class","y axis")
	.call(yAxis);

bars = container.selectAll(".bars")
	.data(d);

bars.enter()
	.append("g")
	.append("rect")
	.classed("bars",true)
	.attr("x", function(d,i) { return xScale(d.name);})
  .attr("y", function(d,i) { return yScale(d.value);})
  .attr("width", xScale.bandwidth())
  .attr("height", function(d,i) { return height - yScale(d.value);})
	.style("fill","grey");

bars.append("text")
	.style("text-anchor", "middle")
	.attr("transform", function(d,i) { 
  	return "translate(" + [xScale(d.name) + 
             (xScale.rangeBand() / 2), yScale(d.value) - 2] + ")"
	})
	.text(function(d,i) { return d.value; });
  </script>
</body>

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