var canvasHeight = 200;
var dataSet = [108, 207, 306, 405, 504, 603, 702, 603, 504, 405, 306, 207, 108];
var heightRatio = d3.max(dataSet) / canvasHeight;
var canvas = d3.select("#chart")
.append("svg").attr("width", "100%")
.attr("height", canvasHeight + "px")
var rectWidth = canvas.style("width").replace("px", "") / dataSet.length;
var barPadding = rectWidth / 5;
//Chart
canvas.selectAll('rect')
.data(dataSet)
.enter()
.append('rect');
canvas.selectAll('rect')
.attr('x', function(d,i){return i*( rectWidth );})
.attr('y', function(d){return canvasHeight;})
.attr("height", function(d){return 0;})
.attr("width", rectWidth - barPadding)
.attr("fill", function(d){ return "rgb(0, " + Math.floor(200 - d/d3.max(dataSet) * 100 ) +", 0)"; });
//Animate the chart
canvas.selectAll('rect')
.transition().duration(3000)
.attr('y', function(d){return canvasHeight - d/heightRatio;})
.attr("height", function(d){return d/heightRatio;});
// Text
canvas.selectAll('text')
.data(dataSet)
.enter()
.append('text');
canvas.selectAll('text')
.attr('x', function(d,i){return i*( rectWidth ) + barPadding * 2 ;})
.attr('y', function(d){return canvasHeight - d/heightRatio + 15;})
.style("text-anchor", "middle")
.attr("font-family", "Open Sans,Arial,sans-serif")
.attr("font-size", "14px")
.attr("font-weight", "800")
.attr("fill", "#ffffff")
.text(function(d){return d;});
<body>
<div class="">
<div class="col-xs-10">
<div id="chart" class="chart-container">
</div>
</div>
</div>
</body>
.chart-container {
background-color: #e1e1e8;
padding: 10px 20px;
}