examples/ipythonDemo.ipynb

{
 "metadata": {
  "name": ""
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "<H2>nvd3 IPython integration demo</H2>\n",
      "\n",
      "For more information on nvd3, see https://github.com/areski/python-nvd3\n",
      "\n",
      "This notebook demonstrates simple ipython compatibility in the nvd3-python package, without making any\n",
      "major modifications to how the main package is structured.  It utilizes the IPython display-formatter functionality, as described at:\n",
      "\n",
      "http://nbviewer.ipython.org/github/ipython/ipython/blob/master/examples/notebooks/Custom%20Display%20Logic.ipynb\n",
      "\n",
      "For additional examples, see:\n",
      "\n",
      "https://github.com/sympy/sympy/blob/master/sympy/interactive/printing.py\n",
      "\n",
      "Usage of nvd3-python in IPython notebook should be the same as any other IPython-aware display type.  In any IPython interface which supports HTML views, nvd3-python will display nvd3 chart objects inline.\n"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "import random\n",
      "from IPython import display as d\n",
      "import nvd3\n",
      "nvd3.ipynb.initialize_javascript(use_remote=True)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "loaded nvd3 IPython extension\n",
        "run nvd3.IPython_wrapper.initialize_javascript() to set up the notebook\n",
        "help(nvd3.IPython_wrapper.initialize_javascript) for options\n"
       ]
      },
      {
       "html": [
        "<link media=\"all\" href=\"http://nvd3.org/assets/css/nv.d3.css\" type=\"text/css\" \n",
        "                        rel=\"stylesheet\"/>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x10aadf510>"
       ]
      },
      {
       "javascript": [
        "$.getScript(\"http://nvd3.org/assets/js/nv.d3.js\")"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x10aadf510>"
       ]
      },
      {
       "javascript": [
        "$.getScript(\"http://nvd3.org/assets/lib/d3.v3.js\", function() {\n",
        "                              $.getScript(\"http://nvd3.org/assets/js/nv.d3.js\", function() {})});"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x10aadf510>"
       ]
      },
      {
       "html": [
        "<script src=\"http://nvd3.org/assets/lib/d3.v3.js\"></script>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x10aadf510>"
       ]
      },
      {
       "html": [
        "<script src=\"http://nvd3.org/assets/js/nv.d3.js\"></script>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x10aadf510>"
       ]
      }
     ],
     "prompt_number": 1
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Note that the javascript packages for display of nvd3 charts must be loaded into the IPython notebook before charts will display.  By default, these are loaded from http://notebook-hostname:port/files/ - this is the default location where IPython 1.x serves files that are in the local working directory.  For normal usage, the preferred approach is to download d3.v3.js, nv.d3.js, and nv.d3.css and place them in your notebook working directory.\n",
      "\n",
      "However, if we want the notebook to display correctly when using http://nbviewer.ipython.org we must point to remotely hosted versions of the nvd3 and d3 javascript and css files.  Use_remote=true does just this, with the additional capability to individually define the URLs for each file (or use the defaults)."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "help(nvd3.ipynb.initialize_javascript)\n",
      "nvd3.ipynb.initialize_javascript(use_remote=True)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "Help on function initialize_javascript in module nvd3.ipynb:\n",
        "\n",
        "initialize_javascript(d3_js_url='http://nvd3.org/assets/lib/d3.v3.js', nvd3_js_url='http://nvd3.org/assets/js/nv.d3.js', nvd3_css_url='http://nvd3.org/assets/css/nv.d3.css', use_remote=False)\n",
        "    Initialize the ipython notebook to be able to display nvd3 results.\n",
        "    by instructing IPython to load the nvd3 JS and css files, and the d3 JS file.\n",
        "    \n",
        "    by default, it looks for the files in your IPython Notebook working directory.\n",
        "    \n",
        "    Takes the following options:\n",
        "    \n",
        "    use_remote: use remote hosts for d3.js, nvd3.js, and nv.d3.css (default False)\n",
        "    * Note:  the following options are ignored if use_remote is False:\n",
        "    nvd3_css_url: location of nvd3 css file (default http://nvd3.org/assets/css/nv.d3.css)\n",
        "    nvd3_js_url: location of nvd3 javascript file (default  http://nvd3.org/assets/js/nv.d3.js)\n",
        "    nvds_url: location of d3 javascript file (default http://nvd3.org/assets/lib/d3.v3.js)\n",
        "\n"
       ]
      },
      {
       "html": [
        "<link media=\"all\" href=\"http://nvd3.org/assets/css/nv.d3.css\" type=\"text/css\" \n",
        "                        rel=\"stylesheet\"/>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x10b991510>"
       ]
      },
      {
       "javascript": [
        "$.getScript(\"http://nvd3.org/assets/js/nv.d3.js\")"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x10b991510>"
       ]
      },
      {
       "javascript": [
        "$.getScript(\"http://nvd3.org/assets/lib/d3.v3.js\", function() {\n",
        "                              $.getScript(\"http://nvd3.org/assets/js/nv.d3.js\", function() {})});"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x10b991510>"
       ]
      },
      {
       "html": [
        "<script src=\"http://nvd3.org/assets/lib/d3.v3.js\"></script>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x10b991510>"
       ]
      },
      {
       "html": [
        "<script src=\"http://nvd3.org/assets/js/nv.d3.js\"></script>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x10b991510>"
       ]
      }
     ],
     "prompt_number": 16
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "** Stacked Area Chart **\n",
      "\n",
      "Here, we create a simple stacked area chart.\n",
      "\n",
      "Note that there is a potential bug with ipython display of the interactive guideline - the amount of space <i>above</i> the chart affects the placement of the tooltip when viewed in IPython notebook.  A simple workaround is to display the chart at the top of the notebook, rather than lower like we see here."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "type = 'stackedAreaChart'\n",
      "chart2 = nvd3.stackedAreaChart(name=type,height=450,use_interactive_guideline=True)\n",
      "nb_element = 50\n",
      "xdata = range(nb_element)\n",
      "ydata = [i * random.randint(1, 10) for i in range(nb_element)]\n",
      "ydata2 = [x * 2 for x in ydata]\n",
      "ydata3 = [x * 5 for x in ydata]\n",
      "chart2.add_serie(name=\"serie 1\", y=ydata, x=xdata)\n",
      "chart2.add_serie(name=\"serie 2\", y=ydata2, x=xdata)\n",
      "chart2.add_serie(name=\"serie 3\", y=ydata3, x=xdata)\n",
      "chart2\n"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<div id=\"stackedAreaChart\"><svg style=\"height:450px;\"></svg></div>\n",
        "\n",
        "<script>\n",
        "    nv.addGraph(function() {\n",
        "        var chart = nv.models.stackedAreaChart().useInteractiveGuideline(true);\n",
        "        chart.margin({top: 30, right: 60, bottom: 20, left: 60})\n",
        "        chart.xAxis\n",
        "            .tickFormat(d3.format(',.2f'));\n",
        "        chart.yAxis\n",
        "            .tickFormat(d3.format(',.2f'));\n",
        "        chart.showLegend(true);\n",
        "        d3.select('#stackedAreaChart svg')\n",
        "            .datum(data_stackedAreaChart)\n",
        "            .transition().duration(500)\n",
        "            .attr('height', 450)\n",
        "            .call(chart);\n",
        "\n",
        "    return chart;\n",
        "});data_stackedAreaChart=[{\"values\": [{\"y\": 0, \"x\": 0}, {\"y\": 1, \"x\": 1}, {\"y\": 4, \"x\": 2}, {\"y\": 18, \"x\": 3}, {\"y\": 24, \"x\": 4}, {\"y\": 50, \"x\": 5}, {\"y\": 18, \"x\": 6}, {\"y\": 28, \"x\": 7}, {\"y\": 48, \"x\": 8}, {\"y\": 27, \"x\": 9}, {\"y\": 90, \"x\": 10}, {\"y\": 33, \"x\": 11}, {\"y\": 96, \"x\": 12}, {\"y\": 52, \"x\": 13}, {\"y\": 28, \"x\": 14}, {\"y\": 45, \"x\": 15}, {\"y\": 16, \"x\": 16}, {\"y\": 51, \"x\": 17}, {\"y\": 126, \"x\": 18}, {\"y\": 171, \"x\": 19}, {\"y\": 100, \"x\": 20}, {\"y\": 63, \"x\": 21}, {\"y\": 110, \"x\": 22}, {\"y\": 69, \"x\": 23}, {\"y\": 240, \"x\": 24}, {\"y\": 200, \"x\": 25}, {\"y\": 156, \"x\": 26}, {\"y\": 162, \"x\": 27}, {\"y\": 280, \"x\": 28}, {\"y\": 261, \"x\": 29}, {\"y\": 300, \"x\": 30}, {\"y\": 217, \"x\": 31}, {\"y\": 320, \"x\": 32}, {\"y\": 198, \"x\": 33}, {\"y\": 34, \"x\": 34}, {\"y\": 245, \"x\": 35}, {\"y\": 180, \"x\": 36}, {\"y\": 148, \"x\": 37}, {\"y\": 228, \"x\": 38}, {\"y\": 234, \"x\": 39}, {\"y\": 360, \"x\": 40}, {\"y\": 369, \"x\": 41}, {\"y\": 84, \"x\": 42}, {\"y\": 215, \"x\": 43}, {\"y\": 308, \"x\": 44}, {\"y\": 90, \"x\": 45}, {\"y\": 138, \"x\": 46}, {\"y\": 329, \"x\": 47}, {\"y\": 240, \"x\": 48}, {\"y\": 294, \"x\": 49}], \"key\": \"serie 1\", \"yAxis\": \"1\"}, {\"values\": [{\"y\": 0, \"x\": 0}, {\"y\": 2, \"x\": 1}, {\"y\": 8, \"x\": 2}, {\"y\": 36, \"x\": 3}, {\"y\": 48, \"x\": 4}, {\"y\": 100, \"x\": 5}, {\"y\": 36, \"x\": 6}, {\"y\": 56, \"x\": 7}, {\"y\": 96, \"x\": 8}, {\"y\": 54, \"x\": 9}, {\"y\": 180, \"x\": 10}, {\"y\": 66, \"x\": 11}, {\"y\": 192, \"x\": 12}, {\"y\": 104, \"x\": 13}, {\"y\": 56, \"x\": 14}, {\"y\": 90, \"x\": 15}, {\"y\": 32, \"x\": 16}, {\"y\": 102, \"x\": 17}, {\"y\": 252, \"x\": 18}, {\"y\": 342, \"x\": 19}, {\"y\": 200, \"x\": 20}, {\"y\": 126, \"x\": 21}, {\"y\": 220, \"x\": 22}, {\"y\": 138, \"x\": 23}, {\"y\": 480, \"x\": 24}, {\"y\": 400, \"x\": 25}, {\"y\": 312, \"x\": 26}, {\"y\": 324, \"x\": 27}, {\"y\": 560, \"x\": 28}, {\"y\": 522, \"x\": 29}, {\"y\": 600, \"x\": 30}, {\"y\": 434, \"x\": 31}, {\"y\": 640, \"x\": 32}, {\"y\": 396, \"x\": 33}, {\"y\": 68, \"x\": 34}, {\"y\": 490, \"x\": 35}, {\"y\": 360, \"x\": 36}, {\"y\": 296, \"x\": 37}, {\"y\": 456, \"x\": 38}, {\"y\": 468, \"x\": 39}, {\"y\": 720, \"x\": 40}, {\"y\": 738, \"x\": 41}, {\"y\": 168, \"x\": 42}, {\"y\": 430, \"x\": 43}, {\"y\": 616, \"x\": 44}, {\"y\": 180, \"x\": 45}, {\"y\": 276, \"x\": 46}, {\"y\": 658, \"x\": 47}, {\"y\": 480, \"x\": 48}, {\"y\": 588, \"x\": 49}], \"key\": \"serie 2\", \"yAxis\": \"1\"}, {\"values\": [{\"y\": 0, \"x\": 0}, {\"y\": 5, \"x\": 1}, {\"y\": 20, \"x\": 2}, {\"y\": 90, \"x\": 3}, {\"y\": 120, \"x\": 4}, {\"y\": 250, \"x\": 5}, {\"y\": 90, \"x\": 6}, {\"y\": 140, \"x\": 7}, {\"y\": 240, \"x\": 8}, {\"y\": 135, \"x\": 9}, {\"y\": 450, \"x\": 10}, {\"y\": 165, \"x\": 11}, {\"y\": 480, \"x\": 12}, {\"y\": 260, \"x\": 13}, {\"y\": 140, \"x\": 14}, {\"y\": 225, \"x\": 15}, {\"y\": 80, \"x\": 16}, {\"y\": 255, \"x\": 17}, {\"y\": 630, \"x\": 18}, {\"y\": 855, \"x\": 19}, {\"y\": 500, \"x\": 20}, {\"y\": 315, \"x\": 21}, {\"y\": 550, \"x\": 22}, {\"y\": 345, \"x\": 23}, {\"y\": 1200, \"x\": 24}, {\"y\": 1000, \"x\": 25}, {\"y\": 780, \"x\": 26}, {\"y\": 810, \"x\": 27}, {\"y\": 1400, \"x\": 28}, {\"y\": 1305, \"x\": 29}, {\"y\": 1500, \"x\": 30}, {\"y\": 1085, \"x\": 31}, {\"y\": 1600, \"x\": 32}, {\"y\": 990, \"x\": 33}, {\"y\": 170, \"x\": 34}, {\"y\": 1225, \"x\": 35}, {\"y\": 900, \"x\": 36}, {\"y\": 740, \"x\": 37}, {\"y\": 1140, \"x\": 38}, {\"y\": 1170, \"x\": 39}, {\"y\": 1800, \"x\": 40}, {\"y\": 1845, \"x\": 41}, {\"y\": 420, \"x\": 42}, {\"y\": 1075, \"x\": 43}, {\"y\": 1540, \"x\": 44}, {\"y\": 450, \"x\": 45}, {\"y\": 690, \"x\": 46}, {\"y\": 1645, \"x\": 47}, {\"y\": 1200, \"x\": 48}, {\"y\": 1470, \"x\": 49}], \"key\": \"serie 3\", \"yAxis\": \"1\"}];\n",
        "</script>"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 17,
       "text": [
        "<nvd3.stackedAreaChart.stackedAreaChart instance at 0x10b99ce60>"
       ]
      }
     ],
     "prompt_number": 17
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "chart = nvd3.scatterChart(name='scatterChart_1', width=600, height=300, x_is_date=False)\n",
      "nb_element = 50\n",
      "xdata = [i + random.randint(1, 10) for i in range(nb_element)]\n",
      "ydata = [i * random.randint(1, 10) for i in range(nb_element)]\n",
      "ydata2 = [x * 2 for x in ydata]\n",
      "ydata3 = [x * 5 for x in ydata]\n",
      "\n",
      "kwargs1 = {'shape': 'circle', 'size': '1'}\n",
      "kwargs2 = {'shape': 'cross', 'size': '10'}\n",
      "kwargs3 = {'shape': 'triangle-up', 'size': '100'}\n",
      "\n",
      "extra_serie = {\"tooltip\": {\"y_start\": \"\", \"y_end\": \" calls\"}}\n",
      "chart.add_serie(name=\"serie 1\", y=ydata, x=xdata, extra=extra_serie, **kwargs1)\n",
      "chart.add_serie(name=\"serie 2\", y=ydata2, x=xdata, extra=extra_serie, **kwargs2)\n",
      "chart.add_serie(name=\"serie 3\", y=ydata3, x=xdata, extra=extra_serie, **kwargs3)\n",
      "chart"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<div id=\"scatterChart_1\"><svg style=\"width:600px;height:300px;\"></svg></div>\n",
        "\n",
        "<script>\n",
        "    nv.addGraph(function() {\n",
        "        var chart = nv.models.scatterChart()\n",
        "            .showDistX(true)\n",
        "            .showDistY(true)\n",
        "            .color(d3.scale.category10().range());\n",
        "        chart.margin({top: 30, right: 60, bottom: 20, left: 60})\n",
        "        chart.xAxis\n",
        "            .tickFormat(d3.format(',.02f'));\n",
        "        chart.yAxis\n",
        "            .tickFormat(d3.format(',.02f'));\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)  + ' calls';\n",
        "            }\n",
        "            if(key == 'serie 2'){\n",
        "                var y =  String(graph.point.y)  + ' calls';\n",
        "            }\n",
        "            if(key == 'serie 3'){\n",
        "                var y =  String(graph.point.y)  + ' calls';\n",
        "            }\n",
        "            tooltip_str = '<center><b>'+key+'</b></center>' + y + ' at ' + x;\n",
        "            return tooltip_str;\n",
        "        });\n",
        "chart.showLegend(true);\n",
        "        d3.select('#scatterChart_1 svg')\n",
        "            .datum(data_scatterChart_1)\n",
        "            .transition().duration(500)\n",
        "            .attr('width', 600)\n",
        ".attr('height', 300)\n",
        "            .call(chart);\n",
        "\n",
        "    return chart;\n",
        "});data_scatterChart_1=[{\"values\": [{\"y\": 0, \"x\": 4, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 4, \"x\": 4, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 16, \"x\": 8, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 15, \"x\": 13, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 12, \"x\": 8, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 35, \"x\": 14, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 18, \"x\": 8, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 35, \"x\": 16, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 80, \"x\": 18, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 36, \"x\": 18, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 20, \"x\": 12, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 22, \"x\": 21, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 72, \"x\": 13, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 65, \"x\": 20, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 126, \"x\": 21, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 15, \"x\": 23, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 160, \"x\": 25, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 136, \"x\": 20, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 180, \"x\": 23, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 76, \"x\": 25, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 100, \"x\": 29, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 210, \"x\": 31, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 154, \"x\": 24, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 46, \"x\": 24, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 48, \"x\": 31, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 100, \"x\": 28, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 156, \"x\": 33, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 162, \"x\": 35, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 112, \"x\": 35, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 29, \"x\": 38, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 30, \"x\": 33, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 124, \"x\": 32, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 160, \"x\": 40, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 231, \"x\": 38, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 34, \"x\": 36, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 35, \"x\": 41, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 252, \"x\": 44, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 185, \"x\": 42, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 304, \"x\": 39, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 351, \"x\": 40, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 280, \"x\": 46, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 82, \"x\": 47, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 420, \"x\": 48, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 43, \"x\": 46, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 396, \"x\": 54, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 405, \"x\": 54, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 276, \"x\": 50, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 376, \"x\": 48, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 240, \"x\": 57, \"shape\": \"circle\", \"size\": \"1\"}, {\"y\": 245, \"x\": 52, \"shape\": \"circle\", \"size\": \"1\"}], \"key\": \"serie 1\", \"yAxis\": \"1\"}, {\"values\": [{\"y\": 0, \"x\": 4, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 8, \"x\": 4, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 32, \"x\": 8, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 30, \"x\": 13, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 24, \"x\": 8, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 70, \"x\": 14, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 36, \"x\": 8, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 70, \"x\": 16, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 160, \"x\": 18, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 72, \"x\": 18, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 40, \"x\": 12, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 44, \"x\": 21, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 144, \"x\": 13, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 130, \"x\": 20, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 252, \"x\": 21, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 30, \"x\": 23, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 320, \"x\": 25, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 272, \"x\": 20, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 360, \"x\": 23, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 152, \"x\": 25, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 200, \"x\": 29, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 420, \"x\": 31, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 308, \"x\": 24, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 92, \"x\": 24, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 96, \"x\": 31, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 200, \"x\": 28, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 312, \"x\": 33, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 324, \"x\": 35, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 224, \"x\": 35, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 58, \"x\": 38, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 60, \"x\": 33, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 248, \"x\": 32, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 320, \"x\": 40, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 462, \"x\": 38, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 68, \"x\": 36, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 70, \"x\": 41, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 504, \"x\": 44, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 370, \"x\": 42, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 608, \"x\": 39, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 702, \"x\": 40, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 560, \"x\": 46, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 164, \"x\": 47, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 840, \"x\": 48, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 86, \"x\": 46, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 792, \"x\": 54, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 810, \"x\": 54, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 552, \"x\": 50, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 752, \"x\": 48, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 480, \"x\": 57, \"shape\": \"cross\", \"size\": \"10\"}, {\"y\": 490, \"x\": 52, \"shape\": \"cross\", \"size\": \"10\"}], \"key\": \"serie 2\", \"yAxis\": \"1\"}, {\"values\": [{\"y\": 0, \"x\": 4, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 20, \"x\": 4, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 80, \"x\": 8, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 75, \"x\": 13, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 60, \"x\": 8, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 175, \"x\": 14, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 90, \"x\": 8, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 175, \"x\": 16, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 400, \"x\": 18, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 180, \"x\": 18, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 100, \"x\": 12, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 110, \"x\": 21, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 360, \"x\": 13, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 325, \"x\": 20, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 630, \"x\": 21, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 75, \"x\": 23, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 800, \"x\": 25, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 680, \"x\": 20, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 900, \"x\": 23, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 380, \"x\": 25, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 500, \"x\": 29, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 1050, \"x\": 31, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 770, \"x\": 24, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 230, \"x\": 24, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 240, \"x\": 31, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 500, \"x\": 28, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 780, \"x\": 33, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 810, \"x\": 35, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 560, \"x\": 35, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 145, \"x\": 38, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 150, \"x\": 33, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 620, \"x\": 32, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 800, \"x\": 40, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 1155, \"x\": 38, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 170, \"x\": 36, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 175, \"x\": 41, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 1260, \"x\": 44, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 925, \"x\": 42, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 1520, \"x\": 39, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 1755, \"x\": 40, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 1400, \"x\": 46, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 410, \"x\": 47, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 2100, \"x\": 48, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 215, \"x\": 46, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 1980, \"x\": 54, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 2025, \"x\": 54, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 1380, \"x\": 50, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 1880, \"x\": 48, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 1200, \"x\": 57, \"shape\": \"triangle-up\", \"size\": \"100\"}, {\"y\": 1225, \"x\": 52, \"shape\": \"triangle-up\", \"size\": \"100\"}], \"key\": \"serie 3\", \"yAxis\": \"1\"}];\n",
        "</script>"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 18,
       "text": [
        "<nvd3.scatterChart.scatterChart instance at 0x10b992e18>"
       ]
      }
     ],
     "prompt_number": 18
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "type = 'pieChart'\n",
      "chart1 = nvd3.pieChart(name=type, color_category='category20c', height=450, width=450)\n",
      "chart1.set_containerheader(\"\\n\\n<h2>\" + type + \"</h2>\\n\\n\")\n",
      "\n",
      "#Create the keys\n",
      "xdata = [\"Orange\", \"Banana\", \"Pear\", \"Kiwi\", \"Apple\", \"Strawberry\", \"Pineapple\"]\n",
      "ydata = [3, 4, 0, 1, 5, 7, 3]\n",
      "\n",
      "#Add the serie\n",
      "extra_serie = {\"tooltip\": {\"y_start\": \"\", \"y_end\": \" cal\"}}\n",
      "chart1.add_serie(y=ydata, x=xdata, extra=extra_serie)\n",
      "chart1"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "\n",
        "\n",
        "<h2>pieChart</h2>\n",
        "\n",
        "<div id=\"pieChart\"><svg style=\"width:450px;height:450px;\"></svg></div>\n",
        "\n",
        "<script>\n",
        "    nv.addGraph(function() {\n",
        "        var chart = nv.models.pieChart();\n",
        "        chart.x(function(d) { return d.label })\n",
        "            .y(function(d) { return d.value });\n",
        "        chart.width(450);\n",
        "        chart.height(450);\n",
        "\n",
        "        chart.margin({top: 30, right: 60, bottom: 20, left: 60})\n",
        "        chart.tooltipContent(function(key, y, e, graph) {\n",
        "            var x = String(key);\n",
        "            var y =  String(y)  + ' cal';\n",
        "            tooltip_str = '<center><b>'+x+'</b></center>' + y;\n",
        "            return tooltip_str;\n",
        "        });\n",
        "        chart.showLegend(true);\n",
        "        chart.showLabels(true);\n",
        "        d3.select('#pieChart svg')\n",
        "            .datum(data_pieChart[0].values)\n",
        "            .transition().duration(500)\n",
        "            .attr('width', 450)\n",
        ".attr('height', 450)\n",
        "            .call(chart);\n",
        "\n",
        "    return chart;\n",
        "});data_pieChart=[{\"values\": [{\"value\": 3, \"label\": \"Orange\"}, {\"value\": 4, \"label\": \"Banana\"}, {\"value\": 0, \"label\": \"Pear\"}, {\"value\": 1, \"label\": \"Kiwi\"}, {\"value\": 5, \"label\": \"Apple\"}, {\"value\": 7, \"label\": \"Strawberry\"}, {\"value\": 3, \"label\": \"Pineapple\"}], \"key\": \"Serie 1\"}];\n",
        "</script>"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 19,
       "text": [
        "<nvd3.pieChart.pieChart instance at 0x10b99d518>"
       ]
      }
     ],
     "prompt_number": 19
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}