d3 exploration rect chart

by mnk

JavaScript

var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var bgColor = '#f9f9f9';
var canvas = d3.select('body').append('svg');

canvas.attr('width', 700)
    .attr('height', 400)
    .style('background-color', bgColor);

var rects = canvas.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('fill', bgColor)
    .attr('width', 0)
    .transition()
    .delay(1000)
    .duration(1000)
    .attr('width', function (d) {
    return d * 10
})
    .attr('height', 10)
    .attr('y', function (d, i) {
    return i * 20 + 20
})
.attr('x', 20)
    .attr('fill', function (d, i) {
    var tint = 235 - i * 10;
    return 'rgb(' + tint + ',' + tint + ',' + tint + ')'
})