https://www.sportsprediction.asia/js/circlebar.js

1var chartData = {
2    "barCircleWeb":[
3        {"index":0.3, "value":488490, "fill":"#105fe7", "label":"Success Tips"},
4        {"index":0.5, "value":260662, "fill":"#f26522", "label":"Draw Tips"},
5        {"index":0.7, "value":163463, "fill":"#2d9834", "label":"Failed Tips"},
6    ]
7};
8
9function drawBarCircleChart(data,target,values,labels){
10    var w = 362,
11        h = 362,
12        size = data[0].value * 1.15,
13        radius = 200,
14        sectorWidth = .15,
15        radScale = 35,
16        sectorScale = 1.45,
17        target = d3.select(target),
18        valueText = d3.select(values),
19        labelText = d3.select(labels);
20
21
22    var arc = d3.svg.arc()
23        .innerRadius(function(d,i){return (d.index/sectorScale) * radius + radScale; })
24        .outerRadius(function(d,i){return ((d.index/sectorScale) + (sectorWidth/sectorScale)) * radius + radScale; })
25        .startAngle(Math.PI)
26        .endAngle(function(d) { return Math.PI + (d.value / size) * 2 * Math.PI; });
27    
28    var path = target.selectAll("path")
29        .data(data);
30
31    //TODO: seperate color and index from data object, make it a pain to update object order
32    path.enter().append("svg:path")
33        .attr("fill",function(d,i){return d.fill})
34        .attr("stroke","#D1D3D4")
35        .transition()
36        .ease("elastic")
37        .duration(1000)
38        .delay(function(d,i){return i*100})
39        .attrTween("d", arcTween);
40        
41    valueText.selectAll("tspan").data(data).enter()
42        .append("tspan")
43        .attr({
44            x:50,
45            y:function(d,i){return i*27},       
46            "text-anchor":"end"
47        })
48        .text(function(d,i){return data[i].value});
49    
50    labelText.selectAll("tspan").data(data).enter()
51        .append("tspan")
52        .attr({
53            x:0,
54            y:function(d,i){return i*27}
55        })
56        .text(function(d,i){return data[i].label});
57
58    function arcTween(b) {
59        var i = d3.interpolate({value: 0}, b);
60        return function(t) {
61            return arc(i(t));
62        };
63    }
64}
65
66// Animation Queue
67setTimeout(function(){drawBarCircleChart(chartData.barCircleWeb,"#circleBar-web-chart","#circleBar-web-values","#circleBar-web-labels")},500);
68
69
70d3.select("#circleBar-web-text")
71    .transition()
72    .delay(750)
73    .duration(500)
74    .attr("opacity","1");
75d3.select("#circleBar-web-text1")
76    .transition()
77    .delay(750)
78    .duration(500)
79    .attr("opacity","1");
80	
81d3.select("#circleBar-web-clipLabels")
82    .transition()
83    .delay(600)
84    .duration(1250)
85    .attr("height","150");
86
87d3.select("#circleBar-mobile-icon")
88    .transition()
89    .delay(800)
90    .duration(500)
91    .attr("opacity","1");
92d3.select("#circleBar-mobile-text")
93    .transition()
94    .delay(1050)
95    .duration(500)
96    .attr("opacity","1");
97d3.select("#circleBar-mobile-clipLabels")
98    .transition()
99    .delay(900)
100    .duration(1250)
101    .attr("height","150");