d3js-donut3.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 117,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "// Setup Javascript playground\n",
       "window.get_element = function(el){\n",
       "    if(el){ $(el).html('') }\n",
       "    return (el !== undefined) ? el[0] : $('script').last().parent()[0];\n",
       "};\n",
       "\n",
       "element = undefined;\n",
       "\n",
       "// Define external scripts\n",
       "require.config({\n",
       "    paths: {\n",
       "        d3: \"http://d3js.org/d3.v3.min\"\n",
       "    }\n",
       "});\n",
       "\n",
       "// Helper functions\n",
       "console.write = function(content, element){\n",
       "    console.log(content);\n",
       "    $(element).append($('<p>' + content + '</p>'))\n",
       "}"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "// Setup Javascript playground\n",
    "window.get_element = function(el){\n",
    "    if(el){ $(el).html('') }\n",
    "    return (el !== undefined) ? el[0] : $('script').last().parent()[0];\n",
    "};\n",
    "\n",
    "element = undefined;\n",
    "\n",
    "// Define external scripts\n",
    "require.config({\n",
    "    paths: {\n",
    "        d3: \"http://d3js.org/d3.v3.min\"\n",
    "    }\n",
    "});\n",
    "\n",
    "// Helper functions\n",
    "console.write = function(content, element){\n",
    "    console.log(content);\n",
    "    $(element).append($('<p>' + content + '</p>'))\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 118,
   "metadata": {
    "collapsed": false,
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "application/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",
       "})();"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "(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",
    "})();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 119,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "window.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",
       "})();"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "window.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",
    "})();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 120,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/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",
       "})();"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\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",
    "})();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 121,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/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",
       "})();"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\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",
    "})();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 122,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/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",
       "})();"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\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",
    "})();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 123,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/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",
       "})();"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\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",
    "})();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 132,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "window.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",
       "}"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "window.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",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 133,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "window.Pie2.prototype.arc = function(){\n",
       "    return d3.svg.arc()\n",
       "        .innerRadius(this.radius - 40)\n",
       "        .outerRadius(this.radius)\n",
       "        .cornerRadius(5);\n",
       "}"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "window.Pie2.prototype.arc = function(){\n",
    "    return d3.svg.arc()\n",
    "        .innerRadius(this.radius - 40)\n",
    "        .outerRadius(this.radius)\n",
    "        .cornerRadius(5);\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 134,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "window.Pie2.prototype.pie = function(){\n",
       "    return d3.layout.pie()\n",
       "        .padAngle(.02);\n",
       "}"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "window.Pie2.prototype.pie = function(){\n",
    "    return d3.layout.pie()\n",
    "        .padAngle(.02);\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 135,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "window.Pie2.prototype.color = function(){\n",
       "    return d3.scale.category20b();\n",
       "}"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "window.Pie2.prototype.color = function(){\n",
    "    return d3.scale.category20b();\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 136,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "window.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",
       "}"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "window.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",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 137,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "window.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",
       "}"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "window.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",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 140,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/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",
       "})();"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\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",
    "})();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.4.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}