Duda animacion JQuery

[synatik]

vale ya he visto lo que me dices, mas o menos lo entiendo pero ando bastante perdido en javascript jeje

este es el codigo de mi animación, es un grafico de barras circulares, donde tendria que poner lo que tu me has dicho?

Tengo que ponerme enserio a estudiar javascript

Código HTML:

<script type="text/javascript">
var chartData = {
    "barCircleWeb":[
        {"index":0.3, "value":100, "fill":"#F70830", "label":"%  Learning"},
        {"index":0.4, "value":80, "fill":"#F82548", "label":"%  Ofimatica"},
        {"index":0.5, "value":80,  "fill":"#F93959", "label":"%  Sony Vegas Pro"},
        {"index":0.6, "value":70, "fill":"#F94D6A", "label":"%  HTML"},
        {"index":0.7, "value":70, "fill":"#FA617A", "label":"%  CSS3"},
        {"index":0.8, "value":60, "fill":"#FB748B", "label":"%  Photoshop"},
        {"index":0.9, "value":50, "fill":"#FB889B", "label":"%  PHP"},
        {"index":1, "value":50, "fill":"#FC9CAC", "label":"%  After Effects"},
        {"index":1.1, "value":50,  "fill":"#FDB0BD", "label":"%  mySQL/phpMyAdmin"},
        {"index":1.2, "value":30, "fill":"#FDC4CD", "label":"%  Javascript"}
    ]
};

function drawBarCircleChart(data,target,values,labels){
    var w = 362,
        h = 362,
        size = data[0].value * 1.15,
        radius = 200,
        sectorWidth = .1,
        radScale = 25,
        sectorScale = 1.45,
        target = d3.select(target),
        valueText = d3.select(values),
        labelText = d3.select(labels);


    var arc = d3.svg.arc()
        .innerRadius(function(d,i){return (d.index/sectorScale) * radius + radScale; })
        .outerRadius(function(d,i){return ((d.index/sectorScale) + (sectorWidth/sectorScale)) * radius + radScale; })
        .startAngle(Math.PI)
        .endAngle(function(d) { return Math.PI + (d.value / size) * 2 * Math.PI; });
    
    var path = target.selectAll("path")
        .data(data);

    //TODO: seperate color and index from data object, make it a pain to update object order
    path.enter().append("svg:path")
        .attr("fill",function(d,i){return d.fill})
        .attr("stroke","#000000")
        .transition()
        .ease("elastic")
        .duration(1000)
        .delay(function(d,i){return i*100})
        .attrTween("d", arcTween);
        
    valueText.selectAll("tspan").data(data).enter()
        .append("tspan")
        .attr({
            x:50,
            y:function(d,i){return i*14},       
            "text-anchor":"end"
        })
        .text(function(d,i){return data[i].value});
    
    labelText.selectAll("tspan").data(data).enter()
        .append("tspan")
        .attr({
            x:0,
            y:function(d,i){return i*14}
        })
        .text(function(d,i){return data[i].label});

    function arcTween(b) {
        var i = d3.interpolate({value: 0}, b);
        return function(t) {
            return arc(i(t));
        };
    }
}

// Animation Queue
setTimeout(function(){drawBarCircleChart(chartData.barCircleWeb,"#circleBar-web-chart","#circleBar-web-values","#circleBar-web-labels")},500);

d3.select("#circleBar-web-icon")
    .transition()
    .delay(500)
    .duration(500)
    .attr("opacity","1");
d3.select("#circleBar-web-text")
    .transition()
    .delay(750)
    .duration(500)
    .attr("opacity","1");

d3.select("#circleBar-web-clipLabels")
    .transition()
    .delay(600)
    .duration(1250)
    .attr("height","150");


</script>