{
 "metadata": {
  "name": ""
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "scratch notebook for testing the rendering of D3 and NVD3 based plots in IPython"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "import IPython.core.display"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 8
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%load_ext autoreload\n",
      "%autoreload 2"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "The autoreload extension is already loaded. To reload it, use:\n",
        "  %reload_ext autoreload\n"
       ]
      }
     ],
     "prompt_number": 9
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "#Testing basic D3 barplot"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "html_src = \"\"\"\n",
      "                <h2>Simple D3 plot</h2>\n",
      "                <div id=\"chart\"></div>\n",
      "           \"\"\"\n",
      "\n",
      "test_d3_js = \"\"\"\n",
      "                    var width = 600;\n",
      "                    var height = 100;\n",
      "                    var root = d3.select('#chart').append('svg')\n",
      "                        .attr({\n",
      "                          'width': width,\n",
      "                          'height': height,\n",
      "                        })\n",
      "                        .style('border', '1px solid black');\n",
      "                    \n",
      "                    var evenNumbers = [0, 2, 4, 6, 8, 10];\n",
      "                    var maxDataValue = d3.max(evenNumbers);\n",
      "                    var barHeight = height / evenNumbers.length;\n",
      "                    var barWidth = function(datum) {\n",
      "                      return datum * (width / maxDataValue);\n",
      "                    };\n",
      "                    var barX = 0;\n",
      "                    var barY = function(datum, index) {\n",
      "                      return index * barHeight;\n",
      "                    };\n",
      "                    root.selectAll('rect.number')\n",
      "                        .data(evenNumbers).enter()\n",
      "                      .append('rect')\n",
      "                        .attr({\n",
      "                          'class': 'number',\n",
      "                          'x': barX,\n",
      "                          'y': barY,\n",
      "                          'width': barWidth,\n",
      "                          'height': barHeight,\n",
      "                          'fill': '#A6D854',\n",
      "                          'stroke': '#444',\n",
      "                     });    \n",
      "             \"\"\"\n",
      "\n",
      "js_libs = ['http://rawgithub.com/mbostock/d3/master/d3.min.js']\n"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 10
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "IPython.core.display.display_html(IPython.core.display.HTML(data=html_src))\n",
      "IPython.core.display.display_javascript( IPython.core.display.Javascript(data=test_d3_js,\n",
      "                                                                         lib= js_libs))"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "\n",
        "                <h2>Simple D3 plot</h2>\n",
        "                <div id=\"chart\"></div>\n",
        "           "
       ],
       "metadata": {},
       "output_type": "display_data"
      },
      {
       "javascript": [
        "$.getScript(\"http://rawgithub.com/mbostock/d3/master/d3.min.js\", function () {\n",
        "\n",
        "                    var width = 600;\n",
        "                    var height = 100;\n",
        "                    var root = d3.select('#chart').append('svg')\n",
        "                        .attr({\n",
        "                          'width': width,\n",
        "                          'height': height,\n",
        "                        })\n",
        "                        .style('border', '1px solid black');\n",
        "                    \n",
        "                    var evenNumbers = [0, 2, 4, 6, 8, 10];\n",
        "                    var maxDataValue = d3.max(evenNumbers);\n",
        "                    var barHeight = height / evenNumbers.length;\n",
        "                    var barWidth = function(datum) {\n",
        "                      return datum * (width / maxDataValue);\n",
        "                    };\n",
        "                    var barX = 0;\n",
        "                    var barY = function(datum, index) {\n",
        "                      return index * barHeight;\n",
        "                    };\n",
        "                    root.selectAll('rect.number')\n",
        "                        .data(evenNumbers).enter()\n",
        "                      .append('rect')\n",
        "                        .attr({\n",
        "                          'class': 'number',\n",
        "                          'x': barX,\n",
        "                          'y': barY,\n",
        "                          'width': barWidth,\n",
        "                          'height': barHeight,\n",
        "                          'fill': '#A6D854',\n",
        "                          'stroke': '#444',\n",
        "                     });    \n",
        "             });\n"
       ],
       "metadata": {},
       "output_type": "display_data"
      }
     ],
     "prompt_number": 11
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 4,
     "metadata": {},
     "source": [
      "Testing NVD3 Plotting"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "test_nvd3_js  = '''\n",
      "            <script>\n",
      "            $(function(){nv.addGraph(function() {\n",
      "                var chart = nv.models.discreteBarChart();\n",
      "                chart.xAxis\n",
      "                chart.tooltipContent(function(key, y, e, graph) {\n",
      "                    var x = String(graph.point.x);\n",
      "                    var y = String(graph.point.y);\n",
      "                    if(key == 'Serie 1'){\n",
      "                        var y =  String(graph.point.y)  + ' cal';\n",
      "                    }\n",
      "                    tooltip_str = '<center><b>'+key+'</b></center>' + y + ' at ' + x;\n",
      "                    return tooltip_str;\n",
      "                });\n",
      "                d3.select('#mygraphname svg')\n",
      "                    .datum(data_mygraphname)\n",
      "                    .transition().duration(500)\n",
      "                    .attr('height', 400)\n",
      "                    .call(chart);\n",
      "            return chart;\n",
      "                });\n",
      "                });\n",
      "        data_mygraphname=[{\"values\": [{\"y\": 3, \"x\": \"A\"}, {\"y\": 12, \"x\": \"B\"}, {\"y\": -10, \"x\": \"C\"}, {\"y\": 5, \"x\": \"D\"}, {\"y\": 25, \"x\": \"E\"}, {\"y\": -7, \"x\": \"F\"}, {\"y\": 2, \"x\": \"G\"}], \"key\": \"Serie 1\", \"yAxis\": \"1\"}];\n",
      "        </script>\n",
      "            '''\n",
      "\n",
      "html_src_nvd3 = \"\"\"\n",
      "                <h2>Discrete Bar Chart </h2>\n",
      "                <div id=\"mygraphname\"><svg style=\"height:400px;\"></svg></div>\n",
      "           \"\"\"\n",
      "\n",
      "\n",
      "\n",
      "js_libs = ['http://rawgithub.com/mbostock/d3/master/d3.min.js',\n",
      "           'http://rawgithub.com/novus/nvd3/master/nv.d3.min.js' ]\n",
      "css_style_sheets = ['http://rawgithub.com/novus/nvd3/master/nv.d3.css']\n"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 93
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "IPython.core.display.display_html(IPython.core.display.HTML(data=html_src_nvd3))\n",
      "IPython.core.display.display_javascript( IPython.core.display.Javascript(data=test_d3_js,\n",
      "                                                                         lib= js_libs,\n",
      "                                                                         css = css_style_sheets))                                                                   "
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "\n",
        "                <h2>Discrete Bar Chart </h2>\n",
        "                <div id=\"mygraphname\"><svg style=\"height:400px;\"></svg></div>\n",
        "           "
       ],
       "metadata": {},
       "output_type": "display_data"
      },
      {
       "javascript": [
        "$(\"head\").append($(\"<link/>\").attr({\n",
        "  rel:  \"stylesheet\",\n",
        "  type: \"text/css\",\n",
        "  href: \"http://rawgithub.com/novus/nvd3/master/nv.d3.css\"\n",
        "}));\n",
        "$.getScript(\"http://rawgithub.com/mbostock/d3/master/d3.min.js\", function () {\n",
        "$.getScript(\"http://rawgithub.com/novus/nvd3/master/nv.d3.min.js\", function () {\n",
        "\n",
        "                    var width = 600;\n",
        "                    var height = 100;\n",
        "                    var root = d3.select('#chart').append('svg')\n",
        "                        .attr({\n",
        "                          'width': width,\n",
        "                          'height': height,\n",
        "                        })\n",
        "                        .style('border', '1px solid black');\n",
        "                    \n",
        "                    var evenNumbers = [0, 2, 4, 6, 8, 10];\n",
        "                    var maxDataValue = d3.max(evenNumbers);\n",
        "                    var barHeight = height / evenNumbers.length;\n",
        "                    var barWidth = function(datum) {\n",
        "                      return datum * (width / maxDataValue);\n",
        "                    };\n",
        "                    var barX = 0;\n",
        "                    var barY = function(datum, index) {\n",
        "                      return index * barHeight;\n",
        "                    };\n",
        "                    root.selectAll('rect.number')\n",
        "                        .data(evenNumbers).enter()\n",
        "                      .append('rect')\n",
        "                        .attr({\n",
        "                          'class': 'number',\n",
        "                          'x': barX,\n",
        "                          'y': barY,\n",
        "                          'width': barWidth,\n",
        "                          'height': barHeight,\n",
        "                          'fill': '#A6D854',\n",
        "                          'stroke': '#444',\n",
        "                     });    \n",
        "             });\n",
        "});\n"
       ],
       "metadata": {},
       "output_type": "display_data"
      }
     ],
     "prompt_number": 94
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "\n"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 79
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "#Spitting out HTML for explicit testing if the code works"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "html_text = '''\n",
      "<!DOCTYPE html>\n",
      "<html lang=\"en\">\n",
      "<head>\n",
      "<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"></script>\n",
      "<link media=\"all\" href=\"http://rawgithub.com/novus/nvd3/master/nv.d3.css\" type=\"text/css\" rel=\"stylesheet\" />\n",
      "<script src=\"http://rawgithub.com/mbostock/d3/master/d3.min.js\" type=\"text/javascript\"></script>\n",
      "<script src=\"http://rawgithub.com/novus/nvd3/master/nv.d3.min.js\" type=\"text/javascript\"></script>\n",
      "</head>\n",
      "\n",
      "\n",
      "\n",
      "<h2>discreteBarChart</h2>\n",
      "\n",
      "<div id=\"mygraphname\"><svg style=\"height:400px;\"></svg></div>\n",
      "\n",
      "\n",
      "<script>\n",
      "    $(function(){nv.addGraph(function() {\n",
      "        var chart = nv.models.discreteBarChart();\n",
      "        chart.xAxis\n",
      "        chart.tooltipContent(function(key, y, e, graph) {\n",
      "            var x = String(graph.point.x);\n",
      "            var y = String(graph.point.y);\n",
      "            if(key == 'Serie 1'){\n",
      "                var y =  String(graph.point.y)  + ' cal';\n",
      "            }\n",
      "            tooltip_str = '<center><b>'+key+'</b></center>' + y + ' at ' + x;\n",
      "            return tooltip_str;\n",
      "        });\n",
      "        d3.select('#mygraphname svg')\n",
      "            .datum(data_mygraphname)\n",
      "            .transition().duration(500)\n",
      "            .attr('height', 400)\n",
      "            .call(chart);\n",
      "\n",
      "    return chart;\n",
      "});\n",
      "});data_mygraphname=[{\"values\": [{\"y\": 3, \"x\": \"A\"}, {\"y\": 12, \"x\": \"B\"}, {\"y\": -10, \"x\": \"C\"}, {\"y\": 5, \"x\": \"D\"}, {\"y\": 25, \"x\": \"E\"}, {\"y\": -7, \"x\": \"F\"}, {\"y\": 2, \"x\": \"G\"}], \"key\": \"Serie 1\", \"yAxis\": \"1\"}];\n",
      "</script>\n",
      "</body></html>\n",
      "'''\n",
      "\n",
      "fh = open('test.html','w')\n",
      "fh.write(html_text)\n",
      "fh.close()"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 142
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}