Node Donut Menu

Click on the node to make the donut appear

by jamesdh

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<div id="holder"></div>

CSS

body {
    background: #FFF;
    color: #fff;
    font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
}
#holder {
    height: 600px;
    left: 50%;
    margin: -300px 0 0 -300px;
    position: absolute;
    top: 50%;
    width: 600px;
}

JavaScript

var MapNodeDonutView = Backbone.View.extend({
    initialize: function() {
        this.icon = this.options.icon;
        var attrs = this.icon.attrs;
        console.log(attrs);
        this.centerX = attrs.x + attrs.width/2;
        this.centerY = attrs.y + attrs.height/2;
        this.diameter = attrs.width > attrs.height ? attrs.width : attrs.height
        _.bind(this.render, this);
        
        if(!Raphael.fn.donutChart) {
            Raphael.fn.donutChart = function (cx, cy, r, rin, values, labels, stroke) {
                var paper = this,
                    rad = Math.PI / 180,
                    chart = this.set();
                
                function sector(cx, cy, r, startAngle, endAngle, params) {
                    var x1 = cx + r * Math.cos(-startAngle * rad),
                        x2 = cx + r * Math.cos(-endAngle * rad),
                        y1 = cy + r * Math.sin(-startAngle * rad),
                        y2 = cy + r * Math.sin(-endAngle * rad),
                        xx1 = cx + rin * Math.cos(-startAngle * rad),
                        xx2 = cx + rin * Math.cos(-endAngle * rad),
                        yy1 = cy + rin * Math.sin(-startAngle * rad),
                        yy2 = cy + rin * Math.sin(-endAngle * rad);
                    
                    return paper.path(["M", xx1, yy1,
                                       "L", x1, y1, 
                                       "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, 
                                       "L", xx2, yy2, 
                                       "A", rin, rin, 0, +(endAngle - startAngle > 180), 1, xx1, yy1, "z"]
                                     ).attr(params);
                    
                }
                
                var angle = 0,
                    total = 0,
                    start = 0,
                    process = function (j) {
                        var value = values[j],
                            angleplus = 360...