%%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>'))
}
%%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)
})();
%%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;
})();
%%javascript
(function(){
var target = get_element(element);
var draw = function(){
var pie = new window.Pie(target);
pie.draw();
};
require(['d3'], draw);
})();
%%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);
})();
%%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);
})();
%%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);
})();
%%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
}
%%javascript
window.Pie2.prototype.arc = function(){
return d3.svg.arc()
.innerRadius(this.radius - 40)
.outerRadius(this.radius)
.cornerRadius(5);
}
%%javascript
window.Pie2.prototype.pie = function(){
return d3.layout.pie()
.padAngle(.02);
}
%%javascript
window.Pie2.prototype.color = function(){
return d3.scale.category20b();
}
%%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 + ")");
}
%%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);
}
%%javascript
(function(){
var target = get_element(element);
var draw = function(){
var pie = new window.Pie2(target);
pie.draw();
};
require(['d3'], draw);
})();