d3 tutorial

d3 tutorial

by Nirvanachain

HTML

<!-- useful tutorial
http://alignedleft.com/tutorials/d3/the-power-of-data
-->

CSS

div.bar {
    display: inline-block;
    width: 20px;
    height: 75px; /** We'll override this **/
    background-color: teal;
    margin: 0 1em;
}

JavaScript

var dataset = [5, 10, 15, 20, 25];

d3.select('body')
    .selectAll('div')
    .data(dataset)
    .enter()
    .append('div')
    .attr('class', 'bar')
    .style('height', function(d) {
        var barHeight = d * 5; //scale up by a factor of 5
        return barHeight + 'px';
    });