Progressive pie chart 1

forked from Sokrates86's block: Progressive pie chart 1

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }

body {
    background-color: #1B1F2A;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    height: 100%;
}

.widget {
    margin: 0 auto;
    width:350px;
    margin-top:50px;
    background-color: #222D3A;
    border-radius: 5px;
    box-shadow: 0px 0px 1px 0px #06060d;

}

.header{
    background-color: #29384D;
    height:40px;
    color:#929DAF;
    text-align: center;
    line-height: 40px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    font-weight: 400;
    font-size: 1.5em;
    text-shadow: 1px 1px #06060d;
}

.chart-container{
    padding:25px;
}

.shadow {
    -webkit-filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.5) );
    filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.5) );
}
  </style>
</head>

<body>
  
  <div class="widget">
    <div class="header">Progress Status</div>
    <div id="chart" class="chart-container">

</div>
</div>
  <script>
var createGradient=function(svg,id,color1,color2){
 
	var defs = svg.append("svg:defs");
 
	var red_gradient = defs.append("svg:linearGradient")
        .attr("id", id)
        .attr("x1", "0%")
        .attr("y1", "0%")
        .attr("x2", "50%")
        .attr("y2", "100%")
        .attr("spreadMethod", "pad");
 
	red_gradient.append("svg:stop")
        .attr("offset", "50%")
        .attr("stop-color", color1)
        .attr("stop-opacity", 1);
 
	red_gradient.append("svg:stop")
        .attr("offset", "100%")
        .attr("stop-color", color2)
        .attr("stop-opacity", 1);
};
 
var percent = 65;
 
var ratio=percent/100;
 
var pie=d3.layout.pie()
    .value(function(d){return d})
    .sort(null);
 
var w=300,h=300;
 
var outerRadius=(w/2)-10;
var innerRadius=110;
 
var color = ['#f2503f','#ea0859','#404F70'];
 
var svg=d3.select("#chart")
    .append("svg")
    .attr({
        width:w,
        height:h,
        class:'shadow'
    }).append('g')
    .attr({
        transform:'translate('+w/2+','+h/2+')'
    });
 
createGradient(svg,'gradient',color[0],color[1]);
 
var arc=d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius)
    .startAngle(0)
    .endAngle(2*Math.PI);
 
var arcLine=d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius)
    .startAngle(0);
 
 
var pathBackground=svg.append('path')
 
    .attr({
        d:arc
    })
    .style({
        fill:color[2]
    });
 
 
var pathChart=svg.append('path')
    .datum({endAngle:0})
    .attr({
        d:arcLine
    })
    .style({
        fill:'url(#gradient)'
    });
 
var middleCount=svg.append('text')
    .text(function(d){
        return d;
    })
 
    .attr({
        class:'middleText',
        'text-anchor':'middle',
        dy:30,
        dx:-15
    })
    .style({
        fill:color[1],
        'font-size':'90px'
 
    });
svg.append('text')
    .text('%')
    .attr({
        class:'percent',
        'text-anchor':'middle',
        dx:50,
        dy:-5
 
    })
    .style({
        fill:color[1],
        'font-size':'40px'
 
    });
 
 
var arcTween=function(transition, newAngle) {
    transition.attrTween("d", function (d) {
        var interpolate = d3.interpolate(d.endAngle, newAngle);
        var interpolateCount = d3.interpolate(0, percent);
        return function (t) {
            d.endAngle = interpolate(t);
            middleCount.text(Math.floor(interpolateCount(t)));
            return arcLine(d);
        };
    });
};
 
 
var animate=function(){
    pathChart.transition()
            .duration(750)
            .ease('cubic')
            .call(arcTween,((2*Math.PI))*ratio);
 
 
};
 
 
setTimeout(animate,0);
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js