notebooks/Day_16_A_DimpleJS_Example.ipynb

{
 "metadata": {
  "name": "",
  "signature": "sha256:28c0575360c33b350d3740244d28cd8a5d2b0d656e714cb5922b801e5e447a02"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "# http://stackoverflow.com/questions/22185527/how-can-i-successfully-load-dimple-js-when-require-js-is-present\n",
      "\n",
      "# Answer: https://github.com/PMSI-AlignAlytics/dimple/pull/56#issuecomment-37480189"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 1
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<style type=\"text/css\">\n",
      " /* https://github.com/PMSI-AlignAlytics/dimple/pull/56#issuecomment-37480189 */\n",
      " .tooltip {\n",
      "  opacity: 1 !Important;\n",
      "}   \n",
      "\n",
      "</style>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<style type=\"text/css\">\n",
        " /* https://github.com/PMSI-AlignAlytics/dimple/pull/56#issuecomment-37480189 */\n",
        " .tooltip {\n",
        "  opacity: 1 !Important;\n",
        "}   \n",
        "\n",
        "</style>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x101bb8410>"
       ]
      }
     ],
     "prompt_number": 2
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "\n",
      "require.config({\n",
      "    shim: {\n",
      "        d3: { exports: \"d3\" },\n",
      "        dimple: {\n",
      "            exports: \"dimple\",\n",
      "            deps: [\"d3\"]\n",
      "        }\n",
      "    },\n",
      "    paths: {\n",
      "        d3: \"http://d3js.org/d3.v3.min\",\n",
      "        dimple: \"http://mashupguide.net/wwod14/dimple.v1.1.5.amd\",\n",
      "        queue: \"http://d3js.org/queue.v1.min\",\n",
      "        topojson: \"http://d3js.org/topojson.v1.min\"\n",
      "    }\n",
      "});\n",
      "\n",
      "\n",
      "require([\"d3\", \"queue\", \"topojson\", \"dimple\"], function(d3, queue, topojson, dimple) {\n",
      "  console.log(d3.version);\n",
      "  console.log(queue.version);\n",
      "  console.log(topojson.version);\n",
      "  console.log(dimple.version);\n",
      "});"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "\n",
        "require.config({\n",
        "    shim: {\n",
        "        d3: { exports: \"d3\" },\n",
        "        dimple: {\n",
        "            exports: \"dimple\",\n",
        "            deps: [\"d3\"]\n",
        "        }\n",
        "    },\n",
        "    paths: {\n",
        "        d3: \"http://d3js.org/d3.v3.min\",\n",
        "        dimple: \"http://mashupguide.net/wwod14/dimple.v1.1.5.amd\",\n",
        "        queue: \"http://d3js.org/queue.v1.min\",\n",
        "        topojson: \"http://d3js.org/topojson.v1.min\"\n",
        "    }\n",
        "});\n",
        "\n",
        "\n",
        "require([\"d3\", \"queue\", \"topojson\", \"dimple\"], function(d3, queue, topojson, dimple) {\n",
        "  console.log(d3.version);\n",
        "  console.log(queue.version);\n",
        "  console.log(topojson.version);\n",
        "  console.log(dimple.version);\n",
        "});"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x101bb4250>"
       ]
      }
     ],
     "prompt_number": 3
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<div id=\"bar_chart\" style=\"height:600px; width:800px\"></div>\n",
      "<script src=\"http://dimplejs.org/dist/dimple.v1.1.5.min.js\"></script>\n",
      "<script>\n",
      "\n",
      "require([\"d3\", \"queue\", \"topojson\", \"dimple\"], function(d3, queue, topojson, dimple) {\n",
      "  console.log(d3.version);\n",
      "  console.log(queue.version);\n",
      "  console.log(topojson.version);\n",
      "  console.log(dimple.version);\n",
      "\n",
      "  // dimple requires d3 to be in global namespace\n",
      "  //window.d3 = d3;\n",
      "  //window.dimple = dimple;\n",
      "\n",
      "  var svg = dimple.newSvg(\"#bar_chart\", 800, 600);\n",
      "  var data = [\n",
      "    { \"Word\":\"Hello\", \"Awesomeness\":2000 },\n",
      "    { \"Word\":\"World\", \"Awesomeness\":3000 }\n",
      "  ];\n",
      "  var chart = new dimple.chart(svg, data);\n",
      "  chart.addCategoryAxis(\"x\", \"Word\");\n",
      "  chart.addMeasureAxis(\"y\", \"Awesomeness\");\n",
      "  chart.addSeries(null, dimple.plot.bar);\n",
      "  chart.draw();\n",
      "\n",
      "\n",
      "});\n",
      "\n",
      "</script>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<div id=\"bar_chart\" style=\"height:600px; width:800px\"></div>\n",
        "<script src=\"http://dimplejs.org/dist/dimple.v1.1.5.min.js\"></script>\n",
        "<script>\n",
        "\n",
        "require([\"d3\", \"queue\", \"topojson\", \"dimple\"], function(d3, queue, topojson, dimple) {\n",
        "  console.log(d3.version);\n",
        "  console.log(queue.version);\n",
        "  console.log(topojson.version);\n",
        "  console.log(dimple.version);\n",
        "\n",
        "  // dimple requires d3 to be in global namespace\n",
        "  //window.d3 = d3;\n",
        "  //window.dimple = dimple;\n",
        "\n",
        "  var svg = dimple.newSvg(\"#bar_chart\", 800, 600);\n",
        "  var data = [\n",
        "    { \"Word\":\"Hello\", \"Awesomeness\":2000 },\n",
        "    { \"Word\":\"World\", \"Awesomeness\":3000 }\n",
        "  ];\n",
        "  var chart = new dimple.chart(svg, data);\n",
        "  chart.addCategoryAxis(\"x\", \"Word\");\n",
        "  chart.addMeasureAxis(\"y\", \"Awesomeness\");\n",
        "  chart.addSeries(null, dimple.plot.bar);\n",
        "  chart.draw();\n",
        "\n",
        "\n",
        "});\n",
        "\n",
        "</script>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x101bb8650>"
       ]
      }
     ],
     "prompt_number": 4
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<div id=\"chartContainer\" style=\"height:600px; width:800px\"></div>\n",
      "<script>\n",
      "require([\"d3\", \"queue\", \"topojson\", \"dimple\"], function(d3, queue, topojson, dimple) {\n",
      "  console.log(d3.version);\n",
      "  console.log(queue.version);\n",
      "  console.log(topojson.version);\n",
      "  console.log(dimple.version);\n",
      "\n",
      "  // dimple requires d3 to be in global namespace\n",
      "  //window.d3 = d3;\n",
      "  // window.dimple = dimple;\n",
      "\n",
      "    var svg = dimple.newSvg(\"#chartContainer\", 590, 400);\n",
      "\n",
      "    // The default data set for these examples has regular times\n",
      "    // and the point of this demo is to show the time axis\n",
      "    // functionality, therefore a small bespoke data set is used.\n",
      "    data = [\n",
      "      { \"Shift\":\"Early\",\"Date\":\"12 Jul 2010 10:00\",\"Value\":1000 },\n",
      "      { \"Shift\":\"Early\",\"Date\":\"20 Jul 2010 10:20\",\"Value\":1200 },\n",
      "      { \"Shift\":\"Early\",\"Date\":\"1 Aug 2010 10:40\",\"Value\":1600 },\n",
      "      { \"Shift\":\"Early\",\"Date\":\"8 Aug 2010 10:10\",\"Value\":1300 },\n",
      "      { \"Shift\":\"Early\",\"Date\":\"20 Aug 2010 11:00\",\"Value\":1900 },\n",
      "      { \"Shift\":\"Early\",\"Date\":\"7 Sep 2010 09:50\",\"Value\":1100 },\n",
      "      { \"Shift\":\"Early\",\"Date\":\"13 Sep 2010 10:10\",\"Value\":1000 },\n",
      "      { \"Shift\":\"Early\",\"Date\":\"1 Oct 2010 12:00\",\"Value\":2000 },\n",
      "      { \"Shift\":\"Early\",\"Date\":\"6 Oct 2010 10:10\",\"Value\":1900 },\n",
      "      { \"Shift\":\"Early\",\"Date\":\"19 Oct 2010 11:40\",\"Value\":1800 },\n",
      "      { \"Shift\":\"Early\",\"Date\":\"24 Oct 2010 10:30\",\"Value\":1200 },\n",
      "      { \"Shift\":\"Early\",\"Date\":\"3 Nov 2010 09:30\",\"Value\":1800 },\n",
      "      { \"Shift\":\"Early\",\"Date\":\"12 Nov 2010 10:50\",\"Value\":1800 },\n",
      "      { \"Shift\":\"Early\",\"Date\":\"20 Nov 2010 10:10\",\"Value\":1900 },\n",
      "      { \"Shift\":\"Early\",\"Date\":\"5 Dec 2010 10:50\",\"Value\":1600 },\n",
      "      { \"Shift\":\"Early\",\"Date\":\"9 Dec 2010 12:20\",\"Value\":1700 },\n",
      "      { \"Shift\":\"Early\",\"Date\":\"15 Dec 2010 10:10\",\"Value\":1400 },\n",
      "      { \"Shift\":\"Early\",\"Date\":\"20 Dec 2010 10:00\",\"Value\":1200 },\n",
      "      { \"Shift\":\"Late\",\"Date\":\"11 Jul 2010 16:00\",\"Value\":2400 },\n",
      "      { \"Shift\":\"Late\",\"Date\":\"30 Jul 2010 17:30\",\"Value\":2000 },\n",
      "      { \"Shift\":\"Late\",\"Date\":\"1 Aug 2010 15:40\",\"Value\":1600 },\n",
      "      { \"Shift\":\"Late\",\"Date\":\"5 Aug 2010 13:10\",\"Value\":1700 },\n",
      "      { \"Shift\":\"Late\",\"Date\":\"1 Sep 2010 15:00\",\"Value\":1900 },\n",
      "      { \"Shift\":\"Late\",\"Date\":\"7 Sep 2010 15:50\",\"Value\":1100 },\n",
      "      { \"Shift\":\"Late\",\"Date\":\"13 Sep 2010 14:10\",\"Value\":1500 },\n",
      "      { \"Shift\":\"Late\",\"Date\":\"30 Sep 2010 13:00\",\"Value\":1000 },\n",
      "      { \"Shift\":\"Late\",\"Date\":\"1 Nov 2010 15:50\",\"Value\":1800 },\n",
      "      { \"Shift\":\"Late\",\"Date\":\"24 Nov 2010 15:10\",\"Value\":1900 },\n",
      "      { \"Shift\":\"Late\",\"Date\":\"1 Dec 2010 15:50\",\"Value\":1600 },\n",
      "      { \"Shift\":\"Late\",\"Date\":\"5 Dec 2010 15:20\",\"Value\":1700 },\n",
      "      { \"Shift\":\"Late\",\"Date\":\"13 Dec 2010 15:10\",\"Value\":1400 },\n",
      "      { \"Shift\":\"Late\",\"Date\":\"25 Dec 2010 15:00\",\"Value\":1200 }\n",
      "    ];\n",
      "\n",
      "    // Create Separate Date and Time, this allows us to draw them\n",
      "    // on separate axes.  Despite the time axis only displaying\n",
      "    // the time portion, the whole date is used so they need to\n",
      "    // have the same date allocated\n",
      "    data.forEach(function (d) {\n",
      "        d[\"Day\"] = d[\"Date\"].substring(0, d[\"Date\"].length - 6);\n",
      "        d[\"Time of Day\"] =\n",
      "            \"2000-01-01 \" + d[\"Date\"].substring(d[\"Date\"].length - 5);\n",
      "    }, this);\n",
      "\n",
      "    // Create the chart as usual\n",
      "    var myChart = new dimple.chart(svg, data);\n",
      "    myChart.setBounds(70, 40, 490, 320)\n",
      "\n",
      "    // Add the x axis reading dates in the format 01 Jan 2012\n",
      "    // and displaying them 01 Jan\n",
      "    var x = myChart.addTimeAxis(\"x\", \"Day\", \"%d %b %Y\", \"%d %b\");\n",
      "\n",
      "    // Add the y axis reading dates and times but only outputting\n",
      "    // times.  \n",
      "    var y = myChart.addTimeAxis(\"y\", \"Time of Day\",\n",
      "        \"%Y-%m-%d %H:%M\", \"%H:%M\");\n",
      "\n",
      "    // Size the bubbles by volume\n",
      "    var z = myChart.addMeasureAxis(\"z\", \"Value\");\n",
      "\n",
      "    // Setting min and max dates requires them to be set\n",
      "    // as actual javascript date objects\n",
      "    x.overrideMin = new Date(\"2010-06-20\");\n",
      "    x.overrideMax = new Date(\"2011-01-02\");\n",
      "    y.overrideMin = new Date(\"01/01/2000 9:00 am\");\n",
      "    y.overrideMax = new Date(\"01/01/2000 6:00 pm\");\n",
      "\n",
      "    // Show a label for every 4 weeks.\n",
      "    x.timePeriod = d3.time.weeks;\n",
      "    x.timeInterval = 4;\n",
      "\n",
      "    // Control bubble sizes by setting the max and min values    \n",
      "    z.overrideMin = 900;\n",
      "    z.overrideMax = 3000;\n",
      "\n",
      "    // Add the bubble series for shift values first so that it is\n",
      "    // drawn behind the lines\n",
      "    myChart.addSeries(\"Shift\", dimple.plot.bubble);\n",
      "\n",
      "    // Add the line series on top of the bubbles.  The bubbles\n",
      "    // and line points will naturally fall in the same places\n",
      "    var s = myChart.addSeries(\"Shift\", dimple.plot.line);\n",
      "\n",
      "    // Add line markers to the line because it looks nice\n",
      "    s.lineMarkers = true;\n",
      "\n",
      "    // Show a legend\n",
      "    myChart.addLegend(180, 10, 360, 20, \"right\");\n",
      "\n",
      "    // Draw everything\n",
      "    myChart.draw();\n",
      "\n",
      " \n",
      "\n",
      "});\n",
      "</script>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<div id=\"chartContainer\" style=\"height:600px; width:800px\"></div>\n",
        "<script>\n",
        "require([\"d3\", \"queue\", \"topojson\", \"dimple\"], function(d3, queue, topojson, dimple) {\n",
        "  console.log(d3.version);\n",
        "  console.log(queue.version);\n",
        "  console.log(topojson.version);\n",
        "  console.log(dimple.version);\n",
        "\n",
        "  // dimple requires d3 to be in global namespace\n",
        "  //window.d3 = d3;\n",
        "  // window.dimple = dimple;\n",
        "\n",
        "    var svg = dimple.newSvg(\"#chartContainer\", 590, 400);\n",
        "\n",
        "    // The default data set for these examples has regular times\n",
        "    // and the point of this demo is to show the time axis\n",
        "    // functionality, therefore a small bespoke data set is used.\n",
        "    data = [\n",
        "      { \"Shift\":\"Early\",\"Date\":\"12 Jul 2010 10:00\",\"Value\":1000 },\n",
        "      { \"Shift\":\"Early\",\"Date\":\"20 Jul 2010 10:20\",\"Value\":1200 },\n",
        "      { \"Shift\":\"Early\",\"Date\":\"1 Aug 2010 10:40\",\"Value\":1600 },\n",
        "      { \"Shift\":\"Early\",\"Date\":\"8 Aug 2010 10:10\",\"Value\":1300 },\n",
        "      { \"Shift\":\"Early\",\"Date\":\"20 Aug 2010 11:00\",\"Value\":1900 },\n",
        "      { \"Shift\":\"Early\",\"Date\":\"7 Sep 2010 09:50\",\"Value\":1100 },\n",
        "      { \"Shift\":\"Early\",\"Date\":\"13 Sep 2010 10:10\",\"Value\":1000 },\n",
        "      { \"Shift\":\"Early\",\"Date\":\"1 Oct 2010 12:00\",\"Value\":2000 },\n",
        "      { \"Shift\":\"Early\",\"Date\":\"6 Oct 2010 10:10\",\"Value\":1900 },\n",
        "      { \"Shift\":\"Early\",\"Date\":\"19 Oct 2010 11:40\",\"Value\":1800 },\n",
        "      { \"Shift\":\"Early\",\"Date\":\"24 Oct 2010 10:30\",\"Value\":1200 },\n",
        "      { \"Shift\":\"Early\",\"Date\":\"3 Nov 2010 09:30\",\"Value\":1800 },\n",
        "      { \"Shift\":\"Early\",\"Date\":\"12 Nov 2010 10:50\",\"Value\":1800 },\n",
        "      { \"Shift\":\"Early\",\"Date\":\"20 Nov 2010 10:10\",\"Value\":1900 },\n",
        "      { \"Shift\":\"Early\",\"Date\":\"5 Dec 2010 10:50\",\"Value\":1600 },\n",
        "      { \"Shift\":\"Early\",\"Date\":\"9 Dec 2010 12:20\",\"Value\":1700 },\n",
        "      { \"Shift\":\"Early\",\"Date\":\"15 Dec 2010 10:10\",\"Value\":1400 },\n",
        "      { \"Shift\":\"Early\",\"Date\":\"20 Dec 2010 10:00\",\"Value\":1200 },\n",
        "      { \"Shift\":\"Late\",\"Date\":\"11 Jul 2010 16:00\",\"Value\":2400 },\n",
        "      { \"Shift\":\"Late\",\"Date\":\"30 Jul 2010 17:30\",\"Value\":2000 },\n",
        "      { \"Shift\":\"Late\",\"Date\":\"1 Aug 2010 15:40\",\"Value\":1600 },\n",
        "      { \"Shift\":\"Late\",\"Date\":\"5 Aug 2010 13:10\",\"Value\":1700 },\n",
        "      { \"Shift\":\"Late\",\"Date\":\"1 Sep 2010 15:00\",\"Value\":1900 },\n",
        "      { \"Shift\":\"Late\",\"Date\":\"7 Sep 2010 15:50\",\"Value\":1100 },\n",
        "      { \"Shift\":\"Late\",\"Date\":\"13 Sep 2010 14:10\",\"Value\":1500 },\n",
        "      { \"Shift\":\"Late\",\"Date\":\"30 Sep 2010 13:00\",\"Value\":1000 },\n",
        "      { \"Shift\":\"Late\",\"Date\":\"1 Nov 2010 15:50\",\"Value\":1800 },\n",
        "      { \"Shift\":\"Late\",\"Date\":\"24 Nov 2010 15:10\",\"Value\":1900 },\n",
        "      { \"Shift\":\"Late\",\"Date\":\"1 Dec 2010 15:50\",\"Value\":1600 },\n",
        "      { \"Shift\":\"Late\",\"Date\":\"5 Dec 2010 15:20\",\"Value\":1700 },\n",
        "      { \"Shift\":\"Late\",\"Date\":\"13 Dec 2010 15:10\",\"Value\":1400 },\n",
        "      { \"Shift\":\"Late\",\"Date\":\"25 Dec 2010 15:00\",\"Value\":1200 }\n",
        "    ];\n",
        "\n",
        "    // Create Separate Date and Time, this allows us to draw them\n",
        "    // on separate axes.  Despite the time axis only displaying\n",
        "    // the time portion, the whole date is used so they need to\n",
        "    // have the same date allocated\n",
        "    data.forEach(function (d) {\n",
        "        d[\"Day\"] = d[\"Date\"].substring(0, d[\"Date\"].length - 6);\n",
        "        d[\"Time of Day\"] =\n",
        "            \"2000-01-01 \" + d[\"Date\"].substring(d[\"Date\"].length - 5);\n",
        "    }, this);\n",
        "\n",
        "    // Create the chart as usual\n",
        "    var myChart = new dimple.chart(svg, data);\n",
        "    myChart.setBounds(70, 40, 490, 320)\n",
        "\n",
        "    // Add the x axis reading dates in the format 01 Jan 2012\n",
        "    // and displaying them 01 Jan\n",
        "    var x = myChart.addTimeAxis(\"x\", \"Day\", \"%d %b %Y\", \"%d %b\");\n",
        "\n",
        "    // Add the y axis reading dates and times but only outputting\n",
        "    // times.  \n",
        "    var y = myChart.addTimeAxis(\"y\", \"Time of Day\",\n",
        "        \"%Y-%m-%d %H:%M\", \"%H:%M\");\n",
        "\n",
        "    // Size the bubbles by volume\n",
        "    var z = myChart.addMeasureAxis(\"z\", \"Value\");\n",
        "\n",
        "    // Setting min and max dates requires them to be set\n",
        "    // as actual javascript date objects\n",
        "    x.overrideMin = new Date(\"2010-06-20\");\n",
        "    x.overrideMax = new Date(\"2011-01-02\");\n",
        "    y.overrideMin = new Date(\"01/01/2000 9:00 am\");\n",
        "    y.overrideMax = new Date(\"01/01/2000 6:00 pm\");\n",
        "\n",
        "    // Show a label for every 4 weeks.\n",
        "    x.timePeriod = d3.time.weeks;\n",
        "    x.timeInterval = 4;\n",
        "\n",
        "    // Control bubble sizes by setting the max and min values    \n",
        "    z.overrideMin = 900;\n",
        "    z.overrideMax = 3000;\n",
        "\n",
        "    // Add the bubble series for shift values first so that it is\n",
        "    // drawn behind the lines\n",
        "    myChart.addSeries(\"Shift\", dimple.plot.bubble);\n",
        "\n",
        "    // Add the line series on top of the bubbles.  The bubbles\n",
        "    // and line points will naturally fall in the same places\n",
        "    var s = myChart.addSeries(\"Shift\", dimple.plot.line);\n",
        "\n",
        "    // Add line markers to the line because it looks nice\n",
        "    s.lineMarkers = true;\n",
        "\n",
        "    // Show a legend\n",
        "    myChart.addLegend(180, 10, 360, 20, \"right\");\n",
        "\n",
        "    // Draw everything\n",
        "    myChart.draw();\n",
        "\n",
        " \n",
        "\n",
        "});\n",
        "</script>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x101cc1b10>"
       ]
      }
     ],
     "prompt_number": 5
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}