nvd3 attempt using require.js

ifsharp_nvd3_2.ipynb

{
 "metadata": {
  "language": "fsharp",
  "name": "",
  "signature": "sha256:f604e32654e8709c4f1f53e135a75e69f051846889327cf1e72ff7dcebd7f034"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "\"\"\"<link rel=\"stylesheet\" type=\"text/css\" href=\"//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css\">\n",
      "\n",
      "<style> #chart svg { height: 400px; } </style>\n",
      "\n",
      "<div id=\"chart\"> <svg></svg> </div>\n",
      "\n",
      "<!--script type=\"text/javascript\" src=\"//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js\"></script-->\n",
      "\n",
      "<script type=\"text/javascript\">\n",
      "    require.config({\n",
      "        paths: {\n",
      "            d3: \"//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min\",\n",
      "            nvd3: \"//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min\"\n",
      "        }\n",
      "    });\n",
      "\n",
      "    require([\"d3\", \"nvd3\"], function(d3, nvd3) {\n",
      "\n",
      "                var data = function() {\n",
      "                    var sin = [], cos = [];\n",
      "\n",
      "                    for (var i = 0; i < 100; i++) {\n",
      "                        sin.push({x: i, y: Math.sin(i/10)});\n",
      "                        cos.push({x: i, y: .5 * Math.cos(i/10)});\n",
      "                    }\n",
      "\n",
      "                    return [\n",
      "                        {\n",
      "                            values: sin,\n",
      "                            key: 'Sine Wave',\n",
      "                            color: '#ff7f0e'\n",
      "                        },\n",
      "                        {\n",
      "                            values: cos,\n",
      "                            key: 'Cosine Wave',\n",
      "                            color: '#2ca02c'\n",
      "                        }\n",
      "                    ];\n",
      "                };\n",
      "\n",
      "                nv.addGraph(function() {\n",
      "                    var chart = nv.models.lineChart()\n",
      "                                    .useInteractiveGuideline(true)\n",
      "                            ;\n",
      "\n",
      "                    chart.xAxis\n",
      "                            .axisLabel('Time (ms)')\n",
      "                            .tickFormat(d3.format('.1f'))\n",
      "                    ;\n",
      "\n",
      "                    chart.yAxis\n",
      "                            .axisLabel('Voltage (v)')\n",
      "                            .tickFormat(d3.format('.02f'))\n",
      "                    ;\n",
      "\n",
      "                    d3.select('#chart svg')\n",
      "                            .datum(data())\n",
      "                            .transition().duration(500)\n",
      "                            .call(chart)\n",
      "                    ;\n",
      "\n",
      "                    nv.utils.windowResize(chart.update);\n",
      "\n",
      "                    return chart;\n",
      "                });\n",
      "            }\n",
      "    );\n",
      "\n",
      "</script>\"\"\"\n",
      "|> Util.Html"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<link rel=\"stylesheet\" type=\"text/css\" href=\"//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css\">\n",
        "\n",
        "<style> #chart svg { height: 400px; } </style>\n",
        "\n",
        "<div id=\"chart\"> <svg></svg> </div>\n",
        "\n",
        "<!--script type=\"text/javascript\" src=\"//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js\"></script-->\n",
        "\n",
        "<script type=\"text/javascript\">\n",
        "    require.config({\n",
        "        paths: {\n",
        "            d3: \"//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min\",\n",
        "            nvd3: \"//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min\"\n",
        "        }\n",
        "    });\n",
        "\n",
        "    require([\"d3\", \"nvd3\"], function(d3, nvd3) {\n",
        "\n",
        "                var data = function() {\n",
        "                    var sin = [], cos = [];\n",
        "\n",
        "                    for (var i = 0; i < 100; i++) {\n",
        "                        sin.push({x: i, y: Math.sin(i/10)});\n",
        "                        cos.push({x: i, y: .5 * Math.cos(i/10)});\n",
        "                    }\n",
        "\n",
        "                    return [\n",
        "                        {\n",
        "                            values: sin,\n",
        "                            key: 'Sine Wave',\n",
        "                            color: '#ff7f0e'\n",
        "                        },\n",
        "                        {\n",
        "                            values: cos,\n",
        "                            key: 'Cosine Wave',\n",
        "                            color: '#2ca02c'\n",
        "                        }\n",
        "                    ];\n",
        "                };\n",
        "\n",
        "                nv.addGraph(function() {\n",
        "                    var chart = nv.models.lineChart()\n",
        "                                    .useInteractiveGuideline(true)\n",
        "                            ;\n",
        "\n",
        "                    chart.xAxis\n",
        "                            .axisLabel('Time (ms)')\n",
        "                            .tickFormat(d3.format('.1f'))\n",
        "                    ;\n",
        "\n",
        "                    chart.yAxis\n",
        "                            .axisLabel('Voltage (v)')\n",
        "                            .tickFormat(d3.format('.02f'))\n",
        "                    ;\n",
        "\n",
        "                    d3.select('#chart svg')\n",
        "                            .datum(data())\n",
        "                            .transition().duration(500)\n",
        "                            .call(chart)\n",
        "                    ;\n",
        "\n",
        "                    nv.utils.windowResize(chart.update);\n",
        "\n",
        "                    return chart;\n",
        "                });\n",
        "            }\n",
        "    );\n",
        "\n",
        "</script>"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 2
      }
     ],
     "prompt_number": 2
    }
   ],
   "metadata": {}
  }
 ]
}