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

# In[186]:


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        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\nconsole.write = function(content, element){\n    console.log(content);\n    $(element).append($(\'<p>\' + content + \'</p>\'))\n}\n')


# # Iteration 1

# In[337]:


get_ipython().run_cell_magic('javascript', '', '\nwindow.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})();\n')


# In[338]:


get_ipython().run_cell_magic('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})()\n")


# In[339]:


get_ipython().run_cell_magic('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})()\n")


# In[340]:


get_ipython().run_cell_magic('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})()\n")


# In[341]:


get_ipython().run_cell_magic('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})()\n")


# In[354]:


get_ipython().run_cell_magic('javascript', '', '\nwindow.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\nwindow.random = function(min, max){\n    return parseInt(Math.random() * max + min)\n}\n')


# In[355]:


get_ipython().run_cell_magic('javascript', '', '\nconsole.write(window.randomData(30, 0, 100), get_element(element))\n')


# In[344]:


get_ipython().run_cell_magic('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})();\n")


# # Iteration 2

# In[1]:


get_ipython().run_cell_magic('javascript', '', '\nwindow.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})();\n')


# In[375]:


get_ipython().run_cell_magic('javascript', '', "\nvar data = [5,9,8,3,10,9,8,9,8,2,0,3,9,3,8];\nvar height = 200;\n\nrequire(['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});\n")


# In[376]:


get_ipython().run_cell_magic('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})();\n")


# # Iteration 3

# In[153]:


get_ipython().run_cell_magic('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>\n')


# In[194]:


get_ipython().run_cell_magic('javascript', '', '\nwindow.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})();\n')


# In[195]:


get_ipython().run_cell_magic('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})();\n")


# In[191]:


get_ipython().run_cell_magic('javascript', '', "\n(function(){\n    require(['lodash'], function(){\n        console.log('abc')\n       console.log(_);\n    });\n})();\n")


# In[ ]: