Created
May 11, 2015 14:25
Revisions
-
nacyot created this gist
May 11, 2015 .There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,795 @@ { "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 }