#!/usr/bin/env python
# coding: utf-8

# In[117]:


get_ipython().run_cell_magic('javascript', '', '\n// Setup Javascript playground\nwindow.get_element = function(el){\n    if(el){ $(el).html(\'\') }\n    return (el !== undefined) ? el[0] : $(\'script\').last().parent()[0];\n};\n\nelement = undefined;\n\n// Define external scripts\nrequire.config({\n    paths: {\n        d3: "http://d3js.org/d3.v3.min"\n    }\n});\n\n// Helper functions\nconsole.write = function(content, element){\n    console.log(content);\n    $(element).append($(\'<p>\' + content + \'</p>\'))\n}\n')


# In[118]:


get_ipython().run_cell_magic('javascript', '', '(function(){\n    var target = get_element(element);\n    var draw = function(){\n        var data = [1, 1, 2, 3, 5, 8, 13, 21];\n\n        var width = 200,\n            height = 200,\n            radius = height / 2 - 10;\n\n        var arc = d3.svg.arc()\n            .innerRadius(radius - 40)\n            .outerRadius(radius)\n            .cornerRadius(5);\n\n        var pie = d3.layout.pie()\n            .padAngle(.02);\n\n        var color = d3.scale.category10();\n\n        var svg = d3.select(target)\n            .append("svg")\n            .attr("width", width)\n            .attr("height", height)\n            .append("g")\n            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");\n\n        svg.selectAll("path")\n            .data(pie(data))\n            .enter().append("path")\n            .style("fill", function(d, i) { return color(i); })\n            .attr("d", arc);\n    };\n\n    require([\'d3\'],  draw)\n})();\n')


# In[119]:


get_ipython().run_cell_magic('javascript', '', '\nwindow.Pie = (function(){\n    var Pie = function(target, data, width, height){\n        this.data = data || [1, 1, 2, 3, 5, 8, 13, 21];\n        this.width = width || 200,\n        this.height = height || 200,\n        this.radius = this.height / 2 - 10;\n        this.target = target\n    }\n\n    Pie.prototype.arc = function(){\n        return d3.svg.arc()\n            .innerRadius(this.radius - 40)\n            .outerRadius(this.radius)\n            .cornerRadius(5);\n    }\n    \n    Pie.prototype.pie = function(){\n        return d3.layout.pie()\n            .padAngle(.02);\n    }\n    \n    Pie.prototype.color = function(){\n        return d3.scale.category10();\n    }\n\n    Pie.prototype.svg = function(){\n        return d3.select(this.target)\n            .append("svg")\n            .attr("width", this.width)\n            .attr("height", this.height)\n            .append("g")\n            .attr("transform", "translate(" + this.width / 2 + "," + this.height / 2 + ")");\n    }\n\n    Pie.prototype.draw = function(){\n        var self = this;  \n        var color = this.color();\n        var pieData = this.pie()(this.data);\n        var arc = this.arc();\n        \n        return this.svg().selectAll("path")\n            .data(pieData)\n            .enter()\n            .append("path")\n            .style("fill", function(d, i) { return color(i); })\n            .attr("d", arc);\n    }\n    \n    return Pie;\n})();\n')


# In[120]:


get_ipython().run_cell_magic('javascript', '', "\n(function(){\n    var target = get_element(element);\n    var draw = function(){\n        var pie = new window.Pie(target);\n        pie.draw();\n    };\n\n    require(['d3'], draw);\n})();\n")


# In[121]:


get_ipython().run_cell_magic('javascript', '', "\n(function(){\n    var target = get_element(element);\n    var draw = function(){\n        var pie = new window.Pie(target);\n\n        pie.color = function(){\n            return d3.scale.category20b();\n        }\n\n        pie.draw();\n    };\n\n    require(['d3'], draw);\n})();\n")


# In[122]:


get_ipython().run_cell_magic('javascript', '', "\n(function(){\n    var target = get_element(element);\n    var draw = function(){\n        var pie = new window.Pie(target, [2, 3, 8, 10, 25, 30, 9, 8, 7, 7, 6]);\n        pie.draw();\n    };\n\n    require(['d3'], draw);\n})();\n")


# In[123]:


get_ipython().run_cell_magic('javascript', '', "\n(function(){\n    var target = get_element(element);\n    var draw = function(){\n        var pie1 = new window.Pie(target);\n        pie1.color = function(){return d3.scale.category20b();}\n\n        var pie2 = new window.Pie(target);\n        pie2.color = function(){return d3.scale.category20();}\n\n        var pie3 = new window.Pie(target);\n        pie3.color = function(){return d3.scale.category20c();}\n\n        pie1.draw();\n        pie2.draw();\n        pie3.draw();\n    };\n\n    require(['d3'], draw);\n})();\n")


# In[132]:


get_ipython().run_cell_magic('javascript', '', '\nwindow.Pie2 = function(target, data, width, height){\n    this.data = data || [1, 1, 2, 3, 5, 8, 13, 21];\n    this.width = width || 200,\n    this.height = height || 200,\n    this.radius = this.height / 2 - 10;\n    this.target = target\n}\n')


# In[133]:


get_ipython().run_cell_magic('javascript', '', '\nwindow.Pie2.prototype.arc = function(){\n    return d3.svg.arc()\n        .innerRadius(this.radius - 40)\n        .outerRadius(this.radius)\n        .cornerRadius(5);\n}\n')


# In[134]:


get_ipython().run_cell_magic('javascript', '', '\nwindow.Pie2.prototype.pie = function(){\n    return d3.layout.pie()\n        .padAngle(.02);\n}\n')


# In[135]:


get_ipython().run_cell_magic('javascript', '', '\nwindow.Pie2.prototype.color = function(){\n    return d3.scale.category20b();\n}\n')


# In[136]:


get_ipython().run_cell_magic('javascript', '', '\nwindow.Pie2.prototype.svg = function(){\n    return d3.select(this.target)\n        .append("svg")\n        .attr("width", this.width)\n        .attr("height", this.height)\n        .append("g")\n        .attr("transform", "translate(" + this.width / 2 + "," + this.height / 2 + ")");\n}\n')


# In[137]:


get_ipython().run_cell_magic('javascript', '', '\nwindow.Pie2.prototype.draw = function(){\n    var self = this;  \n    var color = this.color();\n    var pieData = this.pie()(this.data);\n    var arc = this.arc();\n\n    return this.svg().selectAll("path")\n        .data(pieData)\n        .enter()\n        .append("path")\n        .style("fill", function(d, i) { return color(i); })\n        .attr("d", arc);\n}\n')


# In[140]:


get_ipython().run_cell_magic('javascript', '', "\n(function(){\n    var target = get_element(element);\n    var draw = function(){\n        var pie = new window.Pie2(target);\n        pie.draw();\n    };\n\n    require(['d3'], draw);\n})();\n")


# In[ ]: