Line Graph.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 186,
   "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",
       "        lodash: \"http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min\",\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",
    "        lodash: \"http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min\",\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": "markdown",
   "metadata": {},
   "source": [
    "# Iteration 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 337,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "window.LineGraph = (function(){\n",
       "    var LineGraph = function(target, data){\n",
       "        this.target = target;\n",
       "        this.data = data || [5,9,8,3,10,9,8,9,8,2,0,3,9,3,8];\n",
       "        this.width = 600;\n",
       "        this.height = 200;\n",
       "\n",
       "        this.svg = d3.select(this.target)\n",
       "            .append('svg')\n",
       "            .attr('width', this.width)\n",
       "            .attr('height', this.height)\n",
       "            .style('border', '1px solid lightgray');\n",
       "    }\n",
       "\n",
       "    LineGraph.prototype = {\n",
       "        line: function(){\n",
       "            return d3.svg.line()\n",
       "                 .x(function(d, i) { return i * 30; })\n",
       "                 .y(function(d) { return 200 - d * 10; })\n",
       "                 .interpolate(\"linear\");\n",
       "        },\n",
       "        \n",
       "        drawCircles: function(){\n",
       "            this.svg.selectAll('circle')\n",
       "                .data(this.data)\n",
       "                .enter()\n",
       "                .append('circle')\n",
       "                .style('fill', 'black')\n",
       "                .attr('cx', function(d, i){ return i * 30})\n",
       "                .attr('cy', function(d){ return 200 - d * 10})\n",
       "                .attr('r', '3px')\n",
       "\n",
       "        },\n",
       "        \n",
       "        drawLine: function(){\n",
       "            this.svg.append(\"path\")\n",
       "                .attr(\"d\", this.line()(this.data))\n",
       "                .attr(\"stroke\", \"skyblue\")\n",
       "                .attr(\"stroke-width\", 2)\n",
       "                .attr(\"fill\", \"none\");\n",
       "        \n",
       "        },\n",
       "        \n",
       "        drawText: function(){\n",
       "            this.svg.selectAll('text')\n",
       "                .data(this.data)\n",
       "                .enter()\n",
       "                .append('text')\n",
       "                .attr('x', function(d, i){ return i * 30 - 5})\n",
       "                .attr('y', function(d){ return 200 - d * 10 - 5})\n",
       "                .style('size', '8px')\n",
       "                .text(function(d){ return d});\n",
       "        },\n",
       "        \n",
       "        draw: function(){\n",
       "            this.drawLine();\n",
       "            this.drawCircles();\n",
       "            this.drawText();\n",
       "        }\n",
       "    }\n",
       "    \n",
       "    return LineGraph;\n",
       "})();"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "window.LineGraph = (function(){\n",
    "    var LineGraph = function(target, data){\n",
    "        this.target = target;\n",
    "        this.data = data || [5,9,8,3,10,9,8,9,8,2,0,3,9,3,8];\n",
    "        this.width = 600;\n",
    "        this.height = 200;\n",
    "\n",
    "        this.svg = d3.select(this.target)\n",
    "            .append('svg')\n",
    "            .attr('width', this.width)\n",
    "            .attr('height', this.height)\n",
    "            .style('border', '1px solid lightgray');\n",
    "    }\n",
    "\n",
    "    LineGraph.prototype = {\n",
    "        line: function(){\n",
    "            return d3.svg.line()\n",
    "                 .x(function(d, i) { return i * 30; })\n",
    "                 .y(function(d) { return 200 - d * 10; })\n",
    "                 .interpolate(\"linear\");\n",
    "        },\n",
    "        \n",
    "        drawCircles: function(){\n",
    "            this.svg.selectAll('circle')\n",
    "                .data(this.data)\n",
    "                .enter()\n",
    "                .append('circle')\n",
    "                .style('fill', 'black')\n",
    "                .attr('cx', function(d, i){ return i * 30})\n",
    "                .attr('cy', function(d){ return 200 - d * 10})\n",
    "                .attr('r', '3px')\n",
    "\n",
    "        },\n",
    "        \n",
    "        drawLine: function(){\n",
    "            this.svg.append(\"path\")\n",
    "                .attr(\"d\", this.line()(this.data))\n",
    "                .attr(\"stroke\", \"skyblue\")\n",
    "                .attr(\"stroke-width\", 2)\n",
    "                .attr(\"fill\", \"none\");\n",
    "        \n",
    "        },\n",
    "        \n",
    "        drawText: function(){\n",
    "            this.svg.selectAll('text')\n",
    "                .data(this.data)\n",
    "                .enter()\n",
    "                .append('text')\n",
    "                .attr('x', function(d, i){ return i * 30 - 5})\n",
    "                .attr('y', function(d){ return 200 - d * 10 - 5})\n",
    "                .style('size', '8px')\n",
    "                .text(function(d){ return d});\n",
    "        },\n",
    "        \n",
    "        draw: function(){\n",
    "            this.drawLine();\n",
    "            this.drawCircles();\n",
    "            this.drawText();\n",
    "        }\n",
    "    }\n",
    "    \n",
    "    return LineGraph;\n",
    "})();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 338,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(){\n",
       "    var target = get_element(element);\n",
       "    \n",
       "    var draw = function(){\n",
       "        var lineGraph = new window.LineGraph(target);\n",
       "        lineGraph.drawLine();\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",
    "    \n",
    "    var draw = function(){\n",
    "        var lineGraph = new window.LineGraph(target);\n",
    "        lineGraph.drawLine();\n",
    "    }\n",
    "    \n",
    "    require(['d3'], draw);\n",
    "})()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 339,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(){\n",
       "    var target = get_element(element);\n",
       "    \n",
       "    var draw = function(){\n",
       "        var lineGraph = new window.LineGraph(target);\n",
       "        lineGraph.drawCircles();\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",
    "    \n",
    "    var draw = function(){\n",
    "        var lineGraph = new window.LineGraph(target);\n",
    "        lineGraph.drawCircles();\n",
    "    }\n",
    "    \n",
    "    require(['d3'], draw);\n",
    "})()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 340,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(){\n",
       "    var target = get_element(element);\n",
       "    \n",
       "    var draw = function(){\n",
       "        var lineGraph = new window.LineGraph(target);\n",
       "        lineGraph.drawText();\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",
    "    \n",
    "    var draw = function(){\n",
    "        var lineGraph = new window.LineGraph(target);\n",
    "        lineGraph.drawText();\n",
    "    }\n",
    "    \n",
    "    require(['d3'], draw);\n",
    "})()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 341,
   "metadata": {
    "collapsed": false,
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(){\n",
       "    var target = get_element(element);\n",
       "    \n",
       "    var draw = function(){\n",
       "        var lineGraph = new window.LineGraph(target);\n",
       "        lineGraph.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",
    "    \n",
    "    var draw = function(){\n",
    "        var lineGraph = new window.LineGraph(target);\n",
    "        lineGraph.draw();\n",
    "    }\n",
    "    \n",
    "    require(['d3'], draw);\n",
    "})()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 354,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "window.randomData = function(count, min, max){\n",
       "    var array = [];\n",
       "\n",
       "    var i = 0;\n",
       "    while(i < count){\n",
       "        array.push(window.random(min, max));\n",
       "        i++;\n",
       "    }\n",
       "    \n",
       "    console.log(array);\n",
       "    \n",
       "    return array;\n",
       "};\n",
       "\n",
       "window.random = function(min, max){\n",
       "    return parseInt(Math.random() * max + min)\n",
       "}"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "window.randomData = function(count, min, max){\n",
    "    var array = [];\n",
    "\n",
    "    var i = 0;\n",
    "    while(i < count){\n",
    "        array.push(window.random(min, max));\n",
    "        i++;\n",
    "    }\n",
    "    \n",
    "    console.log(array);\n",
    "    \n",
    "    return array;\n",
    "};\n",
    "\n",
    "window.random = function(min, max){\n",
    "    return parseInt(Math.random() * max + min)\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 355,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "console.write(window.randomData(30, 0, 100), get_element(element))"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "console.write(window.randomData(30, 0, 100), get_element(element))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 344,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(){\n",
       "    var target = get_element(element);\n",
       "    \n",
       "    var draw = function(){\n",
       "        var data = window.randomData(30, 0, 20);\n",
       "        var lineGraph = new window.LineGraph(target, data);\n",
       "        lineGraph.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",
    "    \n",
    "    var draw = function(){\n",
    "        var data = window.randomData(30, 0, 20);\n",
    "        var lineGraph = new window.LineGraph(target, data);\n",
    "        lineGraph.draw();\n",
    "    }\n",
    "    \n",
    "    require(['d3'], draw);\n",
    "})();"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Iteration 2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "window.LineGraph2 = (function(){\n",
       "    var LineGraph = function(target, data){\n",
       "        var self = this;\n",
       "        \n",
       "        this.target = target;\n",
       "        this.data = data || [5,9,8,3,10,9,8,9,8,2,0,3,9,3,8];\n",
       "        this.width = 600;\n",
       "        this.height = 200;\n",
       "\n",
       "        this.svg = d3.select(this.target)\n",
       "            .append('svg')\n",
       "            .attr('width', this.width)\n",
       "            .attr('height', this.height)\n",
       "            .style('border', '1px solid lightgray');\n",
       "        \n",
       "        this.refreshScale(this.data);\n",
       "        \n",
       "        this.svg.on('click', function(event){\n",
       "            var count = window.random(20, 100);\n",
       "            var max = window.random(50, 200);\n",
       "            self.update(window.randomData(count, 0, max));\n",
       "        });\n",
       "    }\n",
       "\n",
       "    LineGraph.prototype = {\n",
       "        refreshScale: function(data){\n",
       "            this.yScale = d3.scale.linear()\n",
       "                .domain([d3.min(data), d3.max(data)])\n",
       "                .range([0, this.height])\n",
       "\n",
       "            this.xScale = d3.scale.linear()\n",
       "                .domain([0, data.length])\n",
       "                .range([0, this.width])            \n",
       "        },\n",
       "        \n",
       "        line: function(){\n",
       "            var self = this;\n",
       "            return d3.svg.line()\n",
       "                 .x(function(d, i) { return self.xScale(i); })\n",
       "                 .y(function(d) { return self.yScale(d); })\n",
       "                 .interpolate(\"linear\");\n",
       "        },\n",
       "        \n",
       "        drawCircles: function(){\n",
       "            var self = this;\n",
       "            this.svg.selectAll('circle')\n",
       "                .data(this.data)\n",
       "                .enter()\n",
       "                .append('circle')\n",
       "                .style('fill', 'gray')\n",
       "                .attr('cx', function(d, i){ return self.xScale(i);})\n",
       "                .attr('cy', function(d){ return self.yScale(d);})\n",
       "                .attr('r', '2px')\n",
       "\n",
       "        },\n",
       "        \n",
       "        drawLine: function(){\n",
       "            this.svg.append(\"path\")\n",
       "                .attr(\"d\", this.line()(this.data))\n",
       "                .attr(\"stroke\", \"skyblue\")\n",
       "                .attr(\"stroke-width\", 2)\n",
       "                .attr(\"fill\", \"none\");\n",
       "        },\n",
       "        \n",
       "        drawText: function(){\n",
       "            var self = this;\n",
       "            this.svg.selectAll('text')\n",
       "                .data(this.data)\n",
       "                .enter()\n",
       "                .append('text')\n",
       "                .attr('x', function(d, i){ return self.xScale(i);} )\n",
       "                .attr('y', function(d){ return self.yScale(d)})\n",
       "                .style('size', '8px')\n",
       "                .text(function(d){ return d});\n",
       "        },\n",
       "        \n",
       "        draw: function(){\n",
       "            this.drawLine();\n",
       "            this.drawCircles();\n",
       "            this.drawText();\n",
       "        },\n",
       "\n",
       "        updateCircles: function(data){\n",
       "            var self = this;\n",
       "            this.svg.selectAll('circle')\n",
       "                .data(data)\n",
       "                .transition()\n",
       "                .duration(300)\n",
       "                .style('fill', 'gray')\n",
       "                .attr('cx', function(d, i){ return self.xScale(i);})\n",
       "                .attr('cy', function(d){ return self.yScale(d);})\n",
       "                .attr('r', '2px')\n",
       "            \n",
       "            this.svg.selectAll('circle')\n",
       "                .data(data)\n",
       "                .enter()\n",
       "                .append('circle')\n",
       "                .transition()\n",
       "                .duration(300)\n",
       "                .style('fill', 'gray')\n",
       "                .attr('cx', function(d, i){ return self.xScale(i);})\n",
       "                .attr('cy', function(d){ return self.yScale(d);})\n",
       "                .attr('r', '2px')\n",
       "            \n",
       "            this.svg.selectAll('circle')\n",
       "                .data(data)\n",
       "                .exit()\n",
       "                .remove()\n",
       "        },\n",
       "        \n",
       "        updateLine: function(data){\n",
       "            this.svg.selectAll('path')\n",
       "                .transition()\n",
       "                .duration(300)\n",
       "                .attr('d', this.line()(data))\n",
       "            \n",
       "        },\n",
       "        \n",
       "        updateText: function(data){\n",
       "            var self = this;\n",
       "            this.svg.selectAll('text')\n",
       "                .data(data)\n",
       "                .transition()\n",
       "                .duration(300)\n",
       "                .attr('x', function(d, i){ return self.xScale(i);} )\n",
       "                .attr('y', function(d){ return self.yScale(d)})\n",
       "                .style('size', '8px')\n",
       "                .text(function(d){ return d});\n",
       "            \n",
       "            this.svg.selectAll('text')\n",
       "                .data(data)\n",
       "                .enter()\n",
       "                .append('text')\n",
       "                .transition()\n",
       "                .duration(300)\n",
       "                .attr('x', function(d, i){ return self.xScale(i);} )\n",
       "                .attr('y', function(d){ return self.yScale(d)})\n",
       "                .style('size', '8px')\n",
       "                .text(function(d){ return d});\n",
       "            \n",
       "            this.svg.selectAll('text')\n",
       "                .data(data)\n",
       "                .exit()\n",
       "                .remove()\n",
       "        },\n",
       "        \n",
       "        update: function(data){\n",
       "            this.refreshScale(data);\n",
       "            this.updateCircles(data);\n",
       "            this.updateLine(data);\n",
       "            this.updateText(data);\n",
       "        }\n",
       "    };\n",
       "    \n",
       "    return LineGraph;\n",
       "})();"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "window.LineGraph2 = (function(){\n",
    "    var LineGraph = function(target, data){\n",
    "        var self = this;\n",
    "        \n",
    "        this.target = target;\n",
    "        this.data = data || [5,9,8,3,10,9,8,9,8,2,0,3,9,3,8];\n",
    "        this.width = 600;\n",
    "        this.height = 200;\n",
    "\n",
    "        this.svg = d3.select(this.target)\n",
    "            .append('svg')\n",
    "            .attr('width', this.width)\n",
    "            .attr('height', this.height)\n",
    "            .style('border', '1px solid lightgray');\n",
    "        \n",
    "        this.refreshScale(this.data);\n",
    "        \n",
    "        this.svg.on('click', function(event){\n",
    "            var count = window.random(20, 100);\n",
    "            var max = window.random(50, 200);\n",
    "            self.update(window.randomData(count, 0, max));\n",
    "        });\n",
    "    }\n",
    "\n",
    "    LineGraph.prototype = {\n",
    "        refreshScale: function(data){\n",
    "            this.yScale = d3.scale.linear()\n",
    "                .domain([d3.min(data), d3.max(data)])\n",
    "                .range([0, this.height])\n",
    "\n",
    "            this.xScale = d3.scale.linear()\n",
    "                .domain([0, data.length])\n",
    "                .range([0, this.width])            \n",
    "        },\n",
    "        \n",
    "        line: function(){\n",
    "            var self = this;\n",
    "            return d3.svg.line()\n",
    "                 .x(function(d, i) { return self.xScale(i); })\n",
    "                 .y(function(d) { return self.yScale(d); })\n",
    "                 .interpolate(\"linear\");\n",
    "        },\n",
    "        \n",
    "        drawCircles: function(){\n",
    "            var self = this;\n",
    "            this.svg.selectAll('circle')\n",
    "                .data(this.data)\n",
    "                .enter()\n",
    "                .append('circle')\n",
    "                .style('fill', 'gray')\n",
    "                .attr('cx', function(d, i){ return self.xScale(i);})\n",
    "                .attr('cy', function(d){ return self.yScale(d);})\n",
    "                .attr('r', '2px')\n",
    "\n",
    "        },\n",
    "        \n",
    "        drawLine: function(){\n",
    "            this.svg.append(\"path\")\n",
    "                .attr(\"d\", this.line()(this.data))\n",
    "                .attr(\"stroke\", \"skyblue\")\n",
    "                .attr(\"stroke-width\", 2)\n",
    "                .attr(\"fill\", \"none\");\n",
    "        },\n",
    "        \n",
    "        drawText: function(){\n",
    "            var self = this;\n",
    "            this.svg.selectAll('text')\n",
    "                .data(this.data)\n",
    "                .enter()\n",
    "                .append('text')\n",
    "                .attr('x', function(d, i){ return self.xScale(i);} )\n",
    "                .attr('y', function(d){ return self.yScale(d)})\n",
    "                .style('size', '8px')\n",
    "                .text(function(d){ return d});\n",
    "        },\n",
    "        \n",
    "        draw: function(){\n",
    "            this.drawLine();\n",
    "            this.drawCircles();\n",
    "            this.drawText();\n",
    "        },\n",
    "\n",
    "        updateCircles: function(data){\n",
    "            var self = this;\n",
    "            this.svg.selectAll('circle')\n",
    "                .data(data)\n",
    "                .transition()\n",
    "                .duration(300)\n",
    "                .style('fill', 'gray')\n",
    "                .attr('cx', function(d, i){ return self.xScale(i);})\n",
    "                .attr('cy', function(d){ return self.yScale(d);})\n",
    "                .attr('r', '2px')\n",
    "            \n",
    "            this.svg.selectAll('circle')\n",
    "                .data(data)\n",
    "                .enter()\n",
    "                .append('circle')\n",
    "                .transition()\n",
    "                .duration(300)\n",
    "                .style('fill', 'gray')\n",
    "                .attr('cx', function(d, i){ return self.xScale(i);})\n",
    "                .attr('cy', function(d){ return self.yScale(d);})\n",
    "                .attr('r', '2px')\n",
    "            \n",
    "            this.svg.selectAll('circle')\n",
    "                .data(data)\n",
    "                .exit()\n",
    "                .remove()\n",
    "        },\n",
    "        \n",
    "        updateLine: function(data){\n",
    "            this.svg.selectAll('path')\n",
    "                .transition()\n",
    "                .duration(300)\n",
    "                .attr('d', this.line()(data))\n",
    "            \n",
    "        },\n",
    "        \n",
    "        updateText: function(data){\n",
    "            var self = this;\n",
    "            this.svg.selectAll('text')\n",
    "                .data(data)\n",
    "                .transition()\n",
    "                .duration(300)\n",
    "                .attr('x', function(d, i){ return self.xScale(i);} )\n",
    "                .attr('y', function(d){ return self.yScale(d)})\n",
    "                .style('size', '8px')\n",
    "                .text(function(d){ return d});\n",
    "            \n",
    "            this.svg.selectAll('text')\n",
    "                .data(data)\n",
    "                .enter()\n",
    "                .append('text')\n",
    "                .transition()\n",
    "                .duration(300)\n",
    "                .attr('x', function(d, i){ return self.xScale(i);} )\n",
    "                .attr('y', function(d){ return self.yScale(d)})\n",
    "                .style('size', '8px')\n",
    "                .text(function(d){ return d});\n",
    "            \n",
    "            this.svg.selectAll('text')\n",
    "                .data(data)\n",
    "                .exit()\n",
    "                .remove()\n",
    "        },\n",
    "        \n",
    "        update: function(data){\n",
    "            this.refreshScale(data);\n",
    "            this.updateCircles(data);\n",
    "            this.updateLine(data);\n",
    "            this.updateText(data);\n",
    "        }\n",
    "    };\n",
    "    \n",
    "    return LineGraph;\n",
    "})();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 375,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "var data = [5,9,8,3,10,9,8,9,8,2,0,3,9,3,8];\n",
       "var height = 200;\n",
       "\n",
       "require(['d3'], function(){\n",
       "    var yScale = d3.scale.linear()\n",
       "        .domain([d3.min(data), d3.max(data)])\n",
       "        .range([0, height])\n",
       "\n",
       "    console.write(yScale(10) ,get_element(element))\n",
       "});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "var data = [5,9,8,3,10,9,8,9,8,2,0,3,9,3,8];\n",
    "var height = 200;\n",
    "\n",
    "require(['d3'], function(){\n",
    "    var yScale = d3.scale.linear()\n",
    "        .domain([d3.min(data), d3.max(data)])\n",
    "        .range([0, height])\n",
    "\n",
    "    console.write(yScale(10) ,get_element(element))\n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 376,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(){\n",
       "    var target = get_element(element);\n",
       "    \n",
       "    var draw = function(){\n",
       "        var data = window.randomData(30, 0, 80);\n",
       "        var lineGraph = new window.LineGraph2(target, data);\n",
       "        lineGraph.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",
    "    \n",
    "    var draw = function(){\n",
    "        var data = window.randomData(30, 0, 80);\n",
    "        var lineGraph = new window.LineGraph2(target, data);\n",
    "        lineGraph.draw();\n",
    "    }\n",
    "    \n",
    "    require(['d3'], draw);\n",
    "})();"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Iteration 3"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 153,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style>\n",
       ".axis path,\n",
       ".axis line {\n",
       "   fill: none;\n",
       "   stroke: black;\n",
       "   shape-rendering: crispEdges;\n",
       "}\n",
       "\n",
       ".axis text {\n",
       "   font-family: sans-serif;\n",
       "   font-size: 11px;\n",
       "}\n",
       "\n",
       ".itemValueText {\n",
       "    fill: gray\n",
       "}\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "\n",
    "<style>\n",
    ".axis path,\n",
    ".axis line {\n",
    "   fill: none;\n",
    "   stroke: black;\n",
    "   shape-rendering: crispEdges;\n",
    "}\n",
    "\n",
    ".axis text {\n",
    "   font-family: sans-serif;\n",
    "   font-size: 11px;\n",
    "}\n",
    "\n",
    ".itemValueText {\n",
    "    fill: gray\n",
    "}\n",
    "</style>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 194,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "window.LineGraph3 = (function(){\n",
       "    var LineGraph = function(target, data){\n",
       "        var self = this;\n",
       "        \n",
       "        this.target = target;\n",
       "        this.data = data || [5,9,8,3,10,9,8,9,8,2,0,3,9,3,8];\n",
       "        this.width = 900;\n",
       "        this.height = 250;\n",
       "        this.padding = 40;\n",
       "\n",
       "        this.svg = d3.select(this.target)\n",
       "            .append('svg')\n",
       "            .attr('width', this.width)\n",
       "            .attr('height', this.height)\n",
       "            .style('border', '1px solid lightgray');\n",
       "        \n",
       "        this.refreshScale(this.data);\n",
       "        \n",
       "        this.svg.on('click', function(event){\n",
       "            var count = window.random(20, 100);\n",
       "            var max = window.random(50, 200);\n",
       "            self.update(window.randomData(count, 0, max));\n",
       "        });\n",
       "    }\n",
       "\n",
       "    LineGraph.prototype = {\n",
       "        refreshScale: function(data){\n",
       "            this.yScale = d3.scale.linear()\n",
       "                .domain([d3.max(data), d3.min(data)])\n",
       "                .range([0 + this.padding, this.height - this.padding])\n",
       "\n",
       "            this.xScale = d3.scale.linear()\n",
       "                .domain([0, data.length])\n",
       "                .range([0 + this.padding, this.width - this.padding])\n",
       "            \n",
       "            this.xAxis = d3.svg.axis()\n",
       "                .scale(this.xScale)\n",
       "                .orient(\"bottom\");\n",
       "            \n",
       "            this.yAxis = d3.svg.axis()\n",
       "                .scale(this.yScale)\n",
       "                .orient(\"left\")\n",
       "        },\n",
       "        \n",
       "        line: function(){\n",
       "            var self = this;\n",
       "            return d3.svg.line()\n",
       "                 .x(function(d, i) { return self.xScale(i); })\n",
       "                 .y(function(d) { return self.yScale(d); })\n",
       "                 .interpolate(\"linear\");\n",
       "        },\n",
       "        \n",
       "        drawCircles: function(){\n",
       "            var self = this;\n",
       "            this.svg.selectAll('circle')\n",
       "                .data(this.data)\n",
       "                .enter()\n",
       "                .append('circle')\n",
       "                .style('fill', 'gray')\n",
       "                .attr('cx', function(d, i){ return self.xScale(i);})\n",
       "                .attr('cy', function(d){ return self.yScale(d);})\n",
       "                .attr('r', '2px')\n",
       "\n",
       "        },\n",
       "        \n",
       "        drawLine: function(){\n",
       "            this.svg.append(\"path\")\n",
       "                .attr('class', 'itemLine')\n",
       "                .attr(\"d\", this.line()(this.data))\n",
       "                .attr(\"stroke\", \"skyblue\")\n",
       "                .attr(\"stroke-width\", 2)\n",
       "                .attr(\"fill\", \"none\");\n",
       "        },\n",
       "        \n",
       "        drawText: function(){\n",
       "            var self = this;\n",
       "            this.svg.selectAll('text')\n",
       "                .data(this.data)\n",
       "                .enter()\n",
       "                .append('text')\n",
       "                .attr('class', 'itemValueText')\n",
       "                .attr('x', function(d, i){ return self.xScale(i);} )\n",
       "                .attr('y', function(d){ return self.yScale(d)})\n",
       "                .style('size', '8px')\n",
       "                .text(function(d){ return d});\n",
       "        },\n",
       "        \n",
       "        drawAxis: function(){\n",
       "            this.svg.append(\"g\")\n",
       "                .attr(\"class\", \"xAxis axis\")\n",
       "                .attr(\"transform\", \"translate(0,\" + (this.height - this.padding) + \")\")\n",
       "                .call(this.xAxis);\n",
       "\n",
       "            this.svg.append(\"g\")\n",
       "                .attr(\"class\", \"yAxis axis\")\n",
       "                .attr(\"transform\", \"translate(\" + this.padding + \",0)\")\n",
       "                .call(this.yAxis)  \n",
       "        },\n",
       "        \n",
       "        \n",
       "        draw: function(){\n",
       "            this.drawLine();\n",
       "            this.drawCircles();\n",
       "            this.drawText();\n",
       "            this.drawAxis();\n",
       "        },\n",
       "\n",
       "        updateCircles: function(data){\n",
       "            var self = this;\n",
       "            this.svg.selectAll('circle')\n",
       "                .data(data)\n",
       "                .transition()\n",
       "                .duration(300)\n",
       "                .style('fill', 'gray')\n",
       "                .attr('cx', function(d, i){ return self.xScale(i);})\n",
       "                .attr('cy', function(d){ return self.yScale(d);})\n",
       "                .attr('r', '2px')\n",
       "            \n",
       "            this.svg.selectAll('circle')\n",
       "                .data(data)\n",
       "                .enter()\n",
       "                .append('circle')\n",
       "                .transition()\n",
       "                .duration(300)\n",
       "                .style('fill', 'gray')\n",
       "                .attr('cx', function(d, i){ return self.xScale(i);})\n",
       "                .attr('cy', function(d){ return self.yScale(d);})\n",
       "                .attr('r', '2px')\n",
       "            \n",
       "            this.svg.selectAll('circle')\n",
       "                .data(data)\n",
       "                .exit()\n",
       "                .remove()\n",
       "        },\n",
       "        \n",
       "        updateLine: function(data){\n",
       "            this.svg.selectAll('path.itemLine')\n",
       "                .transition()\n",
       "                .duration(300)\n",
       "                .attr('d', this.line()(data))\n",
       "            \n",
       "        },\n",
       "        \n",
       "        updateText: function(data){\n",
       "            var self = this;\n",
       "            this.svg.selectAll('text.itemValueText')\n",
       "                .data(data)\n",
       "                .transition()\n",
       "                .duration(300)\n",
       "                .attr('x', function(d, i){ return self.xScale(i);} )\n",
       "                .attr('y', function(d){ return self.yScale(d)})\n",
       "                .style('size', '8px')\n",
       "                .text(function(d){ return d});\n",
       "            \n",
       "            this.svg.selectAll('text.itemValueText')\n",
       "                .data(data)\n",
       "                .enter()\n",
       "                .append('text')\n",
       "                .transition()\n",
       "                .duration(300)\n",
       "                .attr('class', 'itemValueText')\n",
       "                .attr('x', function(d, i){ return self.xScale(i);} )\n",
       "                .attr('y', function(d){ return self.yScale(d)})\n",
       "                .style('size', '8px')\n",
       "                .text(function(d){ return d});\n",
       "            \n",
       "            this.svg.selectAll('text.itemValueText')\n",
       "                .data(data)\n",
       "                .exit()\n",
       "                .remove()\n",
       "        },\n",
       "        \n",
       "        updateAxis: function(){\n",
       "            this.svg.select('.xAxis')\n",
       "                .attr(\"transform\", \"translate(0,\" + (this.height - this.padding) + \")\")\n",
       "                .call(this.xAxis)\n",
       "            \n",
       "            this.svg.select('.yAxis')\n",
       "                .attr(\"transform\", \"translate(\" + this.padding + \",0)\")\n",
       "                .call(this.yAxis)\n",
       "            \n",
       "            console.log(this.svg.select('.yAxis'));\n",
       "        },\n",
       "        \n",
       "        update: function(data){\n",
       "            this.refreshScale(data);\n",
       "            this.updateCircles(data);\n",
       "            this.updateLine(data);\n",
       "            this.updateText(data);\n",
       "            this.updateAxis();\n",
       "        }\n",
       "    };\n",
       "    \n",
       "    return LineGraph;\n",
       "})();"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "window.LineGraph3 = (function(){\n",
    "    var LineGraph = function(target, data){\n",
    "        var self = this;\n",
    "        \n",
    "        this.target = target;\n",
    "        this.data = data || [5,9,8,3,10,9,8,9,8,2,0,3,9,3,8];\n",
    "        this.width = 900;\n",
    "        this.height = 250;\n",
    "        this.padding = 40;\n",
    "\n",
    "        this.svg = d3.select(this.target)\n",
    "            .append('svg')\n",
    "            .attr('width', this.width)\n",
    "            .attr('height', this.height)\n",
    "            .style('border', '1px solid lightgray');\n",
    "        \n",
    "        this.refreshScale(this.data);\n",
    "        \n",
    "        this.svg.on('click', function(event){\n",
    "            var count = window.random(20, 100);\n",
    "            var max = window.random(50, 200);\n",
    "            self.update(window.randomData(count, 0, max));\n",
    "        });\n",
    "    }\n",
    "\n",
    "    LineGraph.prototype = {\n",
    "        refreshScale: function(data){\n",
    "            this.yScale = d3.scale.linear()\n",
    "                .domain([d3.max(data), d3.min(data)])\n",
    "                .range([0 + this.padding, this.height - this.padding])\n",
    "\n",
    "            this.xScale = d3.scale.linear()\n",
    "                .domain([0, data.length])\n",
    "                .range([0 + this.padding, this.width - this.padding])\n",
    "            \n",
    "            this.xAxis = d3.svg.axis()\n",
    "                .scale(this.xScale)\n",
    "                .orient(\"bottom\");\n",
    "            \n",
    "            this.yAxis = d3.svg.axis()\n",
    "                .scale(this.yScale)\n",
    "                .orient(\"left\")\n",
    "        },\n",
    "        \n",
    "        line: function(){\n",
    "            var self = this;\n",
    "            return d3.svg.line()\n",
    "                 .x(function(d, i) { return self.xScale(i); })\n",
    "                 .y(function(d) { return self.yScale(d); })\n",
    "                 .interpolate(\"linear\");\n",
    "        },\n",
    "        \n",
    "        drawCircles: function(){\n",
    "            var self = this;\n",
    "            this.svg.selectAll('circle')\n",
    "                .data(this.data)\n",
    "                .enter()\n",
    "                .append('circle')\n",
    "                .style('fill', 'gray')\n",
    "                .attr('cx', function(d, i){ return self.xScale(i);})\n",
    "                .attr('cy', function(d){ return self.yScale(d);})\n",
    "                .attr('r', '2px')\n",
    "\n",
    "        },\n",
    "        \n",
    "        drawLine: function(){\n",
    "            this.svg.append(\"path\")\n",
    "                .attr('class', 'itemLine')\n",
    "                .attr(\"d\", this.line()(this.data))\n",
    "                .attr(\"stroke\", \"skyblue\")\n",
    "                .attr(\"stroke-width\", 2)\n",
    "                .attr(\"fill\", \"none\");\n",
    "        },\n",
    "        \n",
    "        drawText: function(){\n",
    "            var self = this;\n",
    "            this.svg.selectAll('text')\n",
    "                .data(this.data)\n",
    "                .enter()\n",
    "                .append('text')\n",
    "                .attr('class', 'itemValueText')\n",
    "                .attr('x', function(d, i){ return self.xScale(i);} )\n",
    "                .attr('y', function(d){ return self.yScale(d)})\n",
    "                .style('size', '8px')\n",
    "                .text(function(d){ return d});\n",
    "        },\n",
    "        \n",
    "        drawAxis: function(){\n",
    "            this.svg.append(\"g\")\n",
    "                .attr(\"class\", \"xAxis axis\")\n",
    "                .attr(\"transform\", \"translate(0,\" + (this.height - this.padding) + \")\")\n",
    "                .call(this.xAxis);\n",
    "\n",
    "            this.svg.append(\"g\")\n",
    "                .attr(\"class\", \"yAxis axis\")\n",
    "                .attr(\"transform\", \"translate(\" + this.padding + \",0)\")\n",
    "                .call(this.yAxis)  \n",
    "        },\n",
    "        \n",
    "        \n",
    "        draw: function(){\n",
    "            this.drawLine();\n",
    "            this.drawCircles();\n",
    "            this.drawText();\n",
    "            this.drawAxis();\n",
    "        },\n",
    "\n",
    "        updateCircles: function(data){\n",
    "            var self = this;\n",
    "            this.svg.selectAll('circle')\n",
    "                .data(data)\n",
    "                .transition()\n",
    "                .duration(300)\n",
    "                .style('fill', 'gray')\n",
    "                .attr('cx', function(d, i){ return self.xScale(i);})\n",
    "                .attr('cy', function(d){ return self.yScale(d);})\n",
    "                .attr('r', '2px')\n",
    "            \n",
    "            this.svg.selectAll('circle')\n",
    "                .data(data)\n",
    "                .enter()\n",
    "                .append('circle')\n",
    "                .transition()\n",
    "                .duration(300)\n",
    "                .style('fill', 'gray')\n",
    "                .attr('cx', function(d, i){ return self.xScale(i);})\n",
    "                .attr('cy', function(d){ return self.yScale(d);})\n",
    "                .attr('r', '2px')\n",
    "            \n",
    "            this.svg.selectAll('circle')\n",
    "                .data(data)\n",
    "                .exit()\n",
    "                .remove()\n",
    "        },\n",
    "        \n",
    "        updateLine: function(data){\n",
    "            this.svg.selectAll('path.itemLine')\n",
    "                .transition()\n",
    "                .duration(300)\n",
    "                .attr('d', this.line()(data))\n",
    "            \n",
    "        },\n",
    "        \n",
    "        updateText: function(data){\n",
    "            var self = this;\n",
    "            this.svg.selectAll('text.itemValueText')\n",
    "                .data(data)\n",
    "                .transition()\n",
    "                .duration(300)\n",
    "                .attr('x', function(d, i){ return self.xScale(i);} )\n",
    "                .attr('y', function(d){ return self.yScale(d)})\n",
    "                .style('size', '8px')\n",
    "                .text(function(d){ return d});\n",
    "            \n",
    "            this.svg.selectAll('text.itemValueText')\n",
    "                .data(data)\n",
    "                .enter()\n",
    "                .append('text')\n",
    "                .transition()\n",
    "                .duration(300)\n",
    "                .attr('class', 'itemValueText')\n",
    "                .attr('x', function(d, i){ return self.xScale(i);} )\n",
    "                .attr('y', function(d){ return self.yScale(d)})\n",
    "                .style('size', '8px')\n",
    "                .text(function(d){ return d});\n",
    "            \n",
    "            this.svg.selectAll('text.itemValueText')\n",
    "                .data(data)\n",
    "                .exit()\n",
    "                .remove()\n",
    "        },\n",
    "        \n",
    "        updateAxis: function(){\n",
    "            this.svg.select('.xAxis')\n",
    "                .attr(\"transform\", \"translate(0,\" + (this.height - this.padding) + \")\")\n",
    "                .call(this.xAxis)\n",
    "            \n",
    "            this.svg.select('.yAxis')\n",
    "                .attr(\"transform\", \"translate(\" + this.padding + \",0)\")\n",
    "                .call(this.yAxis)\n",
    "            \n",
    "            console.log(this.svg.select('.yAxis'));\n",
    "        },\n",
    "        \n",
    "        update: function(data){\n",
    "            this.refreshScale(data);\n",
    "            this.updateCircles(data);\n",
    "            this.updateLine(data);\n",
    "            this.updateText(data);\n",
    "            this.updateAxis();\n",
    "        }\n",
    "    };\n",
    "    \n",
    "    return LineGraph;\n",
    "})();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 195,
   "metadata": {
    "collapsed": false,
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(){\n",
       "    var target = get_element(element);\n",
       "    \n",
       "    var draw = function(){\n",
       "        var data = window.randomData(30, 0, 80);\n",
       "        var lineGraph = new window.LineGraph3(target, data);\n",
       "        lineGraph.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",
    "    \n",
    "    var draw = function(){\n",
    "        var data = window.randomData(30, 0, 80);\n",
    "        var lineGraph = new window.LineGraph3(target, data);\n",
    "        lineGraph.draw();\n",
    "    }\n",
    "    \n",
    "    require(['d3'], draw);\n",
    "})();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 191,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(){\n",
       "    require(['lodash'], function(){\n",
       "        console.log('abc')\n",
       "       console.log(_);\n",
       "    });\n",
       "})();"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "(function(){\n",
    "    require(['lodash'], function(){\n",
    "        console.log('abc')\n",
    "       console.log(_);\n",
    "    });\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
}