Test d3.js Bar chart

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, 306, 702, 1008, 702, 306, 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;})//Important
.attr("width", rectWidth - barPadding)
.attr("height", 0)
.attr("fill", "#5cb85c");


// Text
canvas.selectAll('text')
    .data(dataSet)
    .enter()
    .append('text');

canvas.selectAll('text')
.attr('x', function(d,i){return i*( rectWidth ) + barPadding * 2 ;}) //barPadding
.attr('y',  function(d){return canvasHeight;}) //20
.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;});


//Animation Chart
canvas.selectAll('rect')
.transition().duration(1000)
.attr('y',  function(d){return canvasHeight - d/heightRatio;})
.attr("height", function(d){return d/heightRatio;});

//Animation Text
canvas.selectAll('text')
.transition().duration(1000)
.attr('y',  function(d){return canvasHeight - d/heightRatio + 15;}) //20