https://strategamagazine.com/wp-content/themes/temastrategawp/scripts/circle_diagram.js

1circleDiagram = function (diagramId, w, h, diagramData) {
2  'use strict';
3  var o = {
4    init: function(){
5      this.diagram();
6    },
7    random: function(l, u){
8      return Math.floor((Math.random()*(u-l+1))+l);
9    },
10    diagram: function(){
11      var r = new Raphael(diagramId, w, h),
12          rad = 73,
13          rw = w/2,
14          rh = h/2,
15          circlerad = h/6.5,    // radius of central circle
16          strokew = h/25,     // width of arc stroke
17          strokehvr = h/12.5; // stroke on hover
18
19      r.circle(rw, rh, circlerad).attr({ stroke: 'none', fill: '#193340' });
20
21      var title = r.text(rw, rh, 'Skills').attr({
22          font: '20px Arial',
23          fill: '#fff'
24      }).toFront();
25
26      r.customAttributes.arc = function(value, color, rad){
27        var v = 3.6*value,
28            alpha = v === 360 ? 359.99 : v,
29            random = o.random(91, 240),
30            a = (random-alpha) * Math.PI/180,
31            b = random * Math.PI/180,
32            sx = rw + rad * Math.cos(b),
33            sy = rh - rad * Math.sin(b),
34            x = rw + rad * Math.cos(a),
35            y = rh - rad * Math.sin(a),
36            path = [['M', sx, sy], ['A', rad, rad, 0, +(alpha > 180), 1, x, y]];
37        return { path: path, stroke: color };
38      };
39
40      $(diagramData).find('.arc').each(function() {
41        var t = $(this),
42            color = t.find('.color').val(),
43            value = t.find('.percent').val(),
44            text = t.find('.text').text();
45        rad += 20;
46        var z = r.path().attr({ arc: [value, color, rad], 'stroke-width': strokew });
47        z.mouseover(function(){
48          this.animate({ 'stroke-width': strokehvr, opacity: 0.75 }, 1000, 'elastic');
49          if(Raphael.type !== 'VML') {//solves IE problem
50            this.toFront();
51          }
52          title.animate({ opacity: 0 }, 500, '>', function() {
53              this.attr({ text: text + '\n' + value + '%' }).animate({ opacity: 1 }, 500, '<');
54          });
55        }).mouseout(function(){
56          this.animate({ 'stroke-width': strokew, opacity: 1 }, 1000, 'elastic');
57        });
58      });
59    }
60  };
61  return o.init();
62};