Clipped Bar Chart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    .bar { 
      fill: red;
      opacity: .4;
    }
    
    .bar:hover {
      opacity: 1;
    }
    
    .bar text {
  fill: white;
  font: 16px sans-serif;
}
  </style>
</head>

<body>
  <script>
    var data = [
      {
        start: 100,
        count: 3
      },
      {
        start: 200,
        count: 5
      },
      {
        start: 300,
        count: 10
      },
      {
        start: 500,
        count: 4
      },
      {
        start: 600,
        count: 2
      },
    ]

var margin = {top: 20, right: 20, bottom: 20, left: 20},
    padding = {top: 60, right: 60, bottom: 60, left: 60},
    outerWidth = 960,
    outerHeight = 500,
    innerWidth = outerWidth - margin.left - margin.right,
    innerHeight = outerHeight - margin.top - margin.bottom,
    width = innerWidth - padding.left - padding.right,
    height = innerHeight - padding.top - padding.bottom;

.y(function(d) {
            return height - yLine(d.count);
        })

var animateLine = svg.append('clipPath')
    		.attr('id', 'ellipse-clip')
    		.append("path")
        .datum(dataLine)
        .attr("d", area)
  
    var barGroup = svg.append('g').attr("clip-path","url(#ellipse-clip)") 
    
		var bar = barGroup.selectAll(".bar")
	  .data(data)
	  .enter().append("g")
    .attr("class", "bar")

bar.append('rect').attr({
      x: function(d) { return x(d.start)},
      width: width / data.length,
      height: function(d) { return y(d.count)},
      y: function(d) { return height - y(d.count)}
    }).attr('class', 'bar')
    
    bar.append("text")
    .attr("dy", ".75em")
    .attr("y", height - 20)
    .attr("x", 
         function(d){return x(d.start) + 80 })
    .attr("text-anchor", "middle")
    .text(function(d) { return d.count; }); 
  </script>
</body>

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