PieChart

by kalar su

HTML

<div id="progress"></div>

JavaScript

// Chart dimensions
    var w = 400,
		h = 400,
		r = 100;  // was tested with values between 5 and 200

    // Progress variables
    var elapsed = 95;
    var remaining = 100 - elapsed;
    var overTime = 0;

    var refreshRate = 1000; // in milliseconds

		var arc = d3.svg.arc()
        .outerRadius(r)
        .innerRadius( r - (r/3) );

		var pie = d3.layout.pie().value(function (d) { return d.value });

    var chart = d3.select("#progress")
        .append("svg")
        .attr("width", w)
        .attr("height", h)
        .attr("style", "display:block; margin: 0 auto;")
        .append("g")
				.attr("transform", "translate(" + r + "," + r + ")");
			
    function arcTween(a) {
        var i = d3.interpolate(this._current, a);
        this._current = i(0);
        return function(t) {
            return arc(i(t));
        };
    } 

    // Hand picked colors for categories
    var color = d3.scale.ordinal()
        .domain(["elapsed", "remaining", "over-time"])
        .range(["#339933", "#E6E6E6", "#FF9900"]); // repectively: green, gray, orange

    function update(data) { 
        if( elapsed < 100 ) {
            elapsed += (refreshRate/1000);
            remaining -= (refreshRate/1000);
        } else {
            overTime += (refreshRate/1000);
        }
        
        data = data ? data : { 
            "elapsed": elapsed,
            "remaining": remaining,
            "overTime": overTime
        };
        
        var slices = d3.entries(data);
        var path = chart.selectAll("path").data(pie(slices));	
        path.enter()
            .append("path")
            .attr("fill", function(d, i) { return color(i); } )
            .attr("d", arc)
            .each(function(d) { this._current = d; });					
        path.transition()
            .duration(100)
            .attrTween("d", arcTween);
              
        // refresh progress label if font size allows
        chart.selectAll("text").remove();
        chart.append("text") 
         ...