SVG, Raphael.js, Рисование

Я думаю, это скорее математический вопрос или, может быть, вопрос SVG. Я хотел изменить пример кода, который нашел на сайте raphael.js. Я уже изменил его, чтобы иметь пользовательскую центральную точку. Теперь я хочу изменить его, чтобы указать, под каким углом начинается дуга. (аналогично d3.js, поэтому я могу использовать его, чтобы иметь что-то вроде гистограммы с отсутствующей серединой).

Однако я понятия не имею, с чего и как начать. Моя математика ужасна, я понятия не имею, что такое альфа и что делает переменная. Или почему x и y вычисляются именно так. Я читал спецификацию SVG снова и снова, но мне не хватает некоторых важных базовых знаний, и я не знаю.

Может ли кто-нибудь указать мне правильное направление, чтобы я мог начать понимать этот материал?

window.onload = function () {
    var r = Raphael("holder", 600, 600),
        R = 200,
        init = true,
        param = {stroke: "#fff", "stroke-width": 30};
    // Custom Attribute
    r.customAttributes.arc = function (xPos, yPos, value, total, R) {
        var alpha = 360 / total * value,
        a = (90 - alpha) * Math.PI / 180,
        x = xPos + R * Math.cos(a),
        y = yPos - R * Math.sin(a),
        var path = [["M", xPos, yPos - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];
        return {path: path};
    };
    var sec = r.path().attr(param).attr({arc: [300, 300, 3, 60, R]});
};

Запуск кода производит:

<svg height="600" version="1.1" width="600" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;">
    <path style="" fill="none" stroke="#bfb5b5" d="M300,100A200,200,0,0,1,361.8033988749895,109.7886967409693" stroke-width="30">
</svg>

Также я понятия не имею, как параметры дуги работают вместе, чтобы рисовать то, что они рисуют.

Извиняюсь за отсутствие внимания к вопросу.

РЕДАКТИРОВАТЬ: Это основано на примере с полярными часами. http://raphaeljs.com/polar-clock.html