setTimeout() animation

by Joe LeMonnier

HTML

<div id= 'canvas'> </div>

JavaScript

var paper= Raphael('canvas' , 500,500);


var data = [
    {
        name: 'Taiwan',
        population: 0.9,
        density: 1
    },
    {
        name: 'South Korea',
        population: 0.32,
        density: 0.5
    },
    {
        name: 'T',
        population: 0.1,
        density: 1
    },
    {
        name: 'Korea',
        population: 0.32,
        density: 0.5
    }
   
];



paper.customAttributes.popDensity = function(population, density) {
    var radius = 25 + (40 * population),
     //   fillColor = 'hsb(0, 200,' + (1 - density) + ')';

fillColor = 'hsb(0, '+(density*200)+ ',' + (1 - density) + ')';

    return {
        fill: fillColor,
        r: radius
    };
};

var currentX = 70;
var currentY=100;
for(var i = 0, ii = data.length; i < ii; i+=1) {
    var country = data[i];



var circle = paper.circle(currentX, currentY, 50).attr({
        popDensity: [0, 0],
        'stroke-width': 4
    });

    circle.animate({
        popDensity: [country.population, country.density]
    }, 10000);

    paper.text(currentX, currentY, country.name).attr({
        'font-size': 14
    });


setTimeout();
    currentY += 100;
}