Simple d3.js bar chart

Base: simple #2: bottom down transition

by benedict_chan

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
    
    <div class="">

        <div class="col-xs-10">
            <div id="chart" class="chart-container">
            
            </div>
        </div>
    </div>
    
</body>

CSS

.chart-container {
    background-color: #e1e1e8;
    padding: 10px 20px;
}

JavaScript

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 0;})
.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;});