In [117]:
%%javascript

// Setup Javascript playground
window.get_element = function(el){
    if(el){ $(el).html('') }
    return (el !== undefined) ? el[0] : $('script').last().parent()[0];
};

element = undefined;

// Define external scripts
require.config({
    paths: {
        d3: "http://d3js.org/d3.v3.min"
    }
});

// Helper functions
console.write = function(content, element){
    console.log(content);
    $(element).append($('<p>' + content + '</p>'))
}
In [118]:
%%javascript
(function(){
    var target = get_element(element);
    var draw = function(){
        var data = [1, 1, 2, 3, 5, 8, 13, 21];

        var width = 200,
            height = 200,
            radius = height / 2 - 10;

        var arc = d3.svg.arc()
            .innerRadius(radius - 40)
            .outerRadius(radius)
            .cornerRadius(5);

        var pie = d3.layout.pie()
            .padAngle(.02);

        var color = d3.scale.category10();

        var svg = d3.select(target)
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        svg.selectAll("path")
            .data(pie(data))
            .enter().append("path")
            .style("fill", function(d, i) { return color(i); })
            .attr("d", arc);
    };

    require(['d3'],  draw)
})();
In [119]:
%%javascript

window.Pie = (function(){
    var Pie = function(target, data, width, height){
        this.data = data || [1, 1, 2, 3, 5, 8, 13, 21];
        this.width = width || 200,
        this.height = height || 200,
        this.radius = this.height / 2 - 10;
        this.target = target
    }

    Pie.prototype.arc = function(){
        return d3.svg.arc()
            .innerRadius(this.radius - 40)
            .outerRadius(this.radius)
            .cornerRadius(5);
    }
    
    Pie.prototype.pie = function(){
        return d3.layout.pie()
            .padAngle(.02);
    }
    
    Pie.prototype.color = function(){
        return d3.scale.category10();
    }

    Pie.prototype.svg = function(){
        return d3.select(this.target)
            .append("svg")
            .attr("width", this.width)
            .attr("height", this.height)
            .append("g")
            .attr("transform", "translate(" + this.width / 2 + "," + this.height / 2 + ")");
    }

    Pie.prototype.draw = function(){
        var self = this;  
        var color = this.color();
        var pieData = this.pie()(this.data);
        var arc = this.arc();
        
        return this.svg().selectAll("path")
            .data(pieData)
            .enter()
            .append("path")
            .style("fill", function(d, i) { return color(i); })
            .attr("d", arc);
    }
    
    return Pie;
})();
In [120]:
%%javascript

(function(){
    var target = get_element(element);
    var draw = function(){
        var pie = new window.Pie(target);
        pie.draw();
    };

    require(['d3'], draw);
})();
In [121]:
%%javascript

(function(){
    var target = get_element(element);
    var draw = function(){
        var pie = new window.Pie(target);

        pie.color = function(){
            return d3.scale.category20b();
        }

        pie.draw();
    };

    require(['d3'], draw);
})();
In [122]:
%%javascript

(function(){
    var target = get_element(element);
    var draw = function(){
        var pie = new window.Pie(target, [2, 3, 8, 10, 25, 30, 9, 8, 7, 7, 6]);
        pie.draw();
    };

    require(['d3'], draw);
})();
In [123]:
%%javascript

(function(){
    var target = get_element(element);
    var draw = function(){
        var pie1 = new window.Pie(target);
        pie1.color = function(){return d3.scale.category20b();}

        var pie2 = new window.Pie(target);
        pie2.color = function(){return d3.scale.category20();}

        var pie3 = new window.Pie(target);
        pie3.color = function(){return d3.scale.category20c();}

        pie1.draw();
        pie2.draw();
        pie3.draw();
    };

    require(['d3'], draw);
})();
In [132]:
%%javascript

window.Pie2 = function(target, data, width, height){
    this.data = data || [1, 1, 2, 3, 5, 8, 13, 21];
    this.width = width || 200,
    this.height = height || 200,
    this.radius = this.height / 2 - 10;
    this.target = target
}
In [133]:
%%javascript

window.Pie2.prototype.arc = function(){
    return d3.svg.arc()
        .innerRadius(this.radius - 40)
        .outerRadius(this.radius)
        .cornerRadius(5);
}
In [134]:
%%javascript

window.Pie2.prototype.pie = function(){
    return d3.layout.pie()
        .padAngle(.02);
}
In [135]:
%%javascript

window.Pie2.prototype.color = function(){
    return d3.scale.category20b();
}
In [136]:
%%javascript

window.Pie2.prototype.svg = function(){
    return d3.select(this.target)
        .append("svg")
        .attr("width", this.width)
        .attr("height", this.height)
        .append("g")
        .attr("transform", "translate(" + this.width / 2 + "," + this.height / 2 + ")");
}
In [137]:
%%javascript

window.Pie2.prototype.draw = function(){
    var self = this;  
    var color = this.color();
    var pieData = this.pie()(this.data);
    var arc = this.arc();

    return this.svg().selectAll("path")
        .data(pieData)
        .enter()
        .append("path")
        .style("fill", function(d, i) { return color(i); })
        .attr("d", arc);
}
In [140]:
%%javascript

(function(){
    var target = get_element(element);
    var draw = function(){
        var pie = new window.Pie2(target);
        pie.draw();
    };

    require(['d3'], draw);
})();