Example notebook to demonstrate javascript functionality

parcoords.ipnb

{
 "metadata": {
  "name": "parcoords"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "import time\n",
      "from IPython.core.display import display_javascript, display_html"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 20
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "It is possible to append css programmatically. In this case however, I appended the contens of d3.parcoords.css to the custom.css in the profile directory"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "js = \"\"\"\n",
      "    var css = $('<link></link>')\n",
      "    css.attr({\n",
      "      rel:  \"stylesheet\",\n",
      "      type: \"text/css\",\n",
      "      href: \"https://raw.github.com/syntagmatic/parallel-coordinates/master/d3.parcoords.css\"\n",
      "    });\n",
      "    $('head').append(css);\n",
      "\n",
      "    \"\"\"\n",
      "#display_javascript(js, raw=True)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 12
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "javascript are loaded from an array - either remotely, locally in the ipython static folder (inside the profile directory), or locally relative to the notebook file itself (via 'files/')"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "externals = ['http://d3js.org/d3.v2.js']\n",
      "externals.append('static/d3.parcoords.js')\n",
      "print externals"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "['http://d3js.org/d3.v2.js', 'static/d3.parcoords.js']\n"
       ]
      }
     ],
     "prompt_number": 13
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "# loading from a remote location\n",
      "from IPython.display import Javascript, display\n",
      "js = \"\"\"\n",
      "container.show();\n",
      "\n",
      "var xtkdiv = $('<div id=\"example\" class=\"parcoords\" style=\"width:500px;height:150px\"></div>');\n",
      "xtkdiv.css('background-color','#fff');\n",
      "element.append(xtkdiv);\n",
      "\n",
      "var pc = d3.parcoords()(\"#example\")\n",
      "  .data([\n",
      "    [0,-0,0,0,0,3 ],\n",
      "    [1,-1,1,2,1,6 ],\n",
      "    [2,-2,4,4,0.5,2],\n",
      "    [3,-3,9,6,0.33,4],\n",
      "    [4,-4,16,8,0.25,9]\n",
      "  ])\n",
      "  .render()\n",
      "  .createAxes();\n",
      "\n",
      "\"\"\"\n",
      "display(Javascript(js, lib=externals))"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "$.getScript(\"http://d3js.org/d3.v2.js\", function () {\n",
        "$.getScript(\"static/d3.parcoords.js\", function () {\n",
        "\n",
        "container.show();\n",
        "\n",
        "var xtkdiv = $('<div id=\"example\" class=\"parcoords\" style=\"width:500px;height:150px\"></div>');\n",
        "xtkdiv.css('background-color','#fff');\n",
        "element.append(xtkdiv);\n",
        "\n",
        "var pc = d3.parcoords()(\"#example\")\n",
        "  .data([\n",
        "    [0,-0,0,0,0,3 ],\n",
        "    [1,-1,1,2,1,6 ],\n",
        "    [2,-2,4,4,0.5,2],\n",
        "    [3,-3,9,6,0.33,4],\n",
        "    [4,-4,16,8,0.25,9]\n",
        "  ])\n",
        "  .render()\n",
        "  .createAxes();\n",
        "\n",
        "});\n",
        "});\n"
       ],
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x2328a50>"
       ]
      }
     ],
     "prompt_number": 14
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "# create a global variable - this will get updated by the javascript on('brush' callback\n",
      "brushed_selection = []"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 15
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "#The example below uses the 'files/' relative path. This maps to the same directory as the ipython notebook\n",
      "\n",
      "!ls *.csv"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "cars.csv\r\n"
       ]
      }
     ],
     "prompt_number": 16
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import Javascript, display\n",
      "\n",
      "import string\n",
      "import random\n",
      "lst = [random.choice(string.ascii_letters + string.digits) for n in xrange(10)]\n",
      "graphid = \"\".join(lst)\n",
      "\n",
      "js = \"\"\"\n",
      "\n",
      "container.show();\n",
      "var kernel = IPython.notebook.kernel;\n",
      "\n",
      "var xtkdiv = $('<div id=\"%s\" class=\"parcoords\" style=\"width:750px;height:300px\"></div>');\n",
      "xtkdiv.css('background-color','#fff');\n",
      "element.append(xtkdiv);\n",
      "\n",
      "var blue_to_brown = d3.scale.linear()\n",
      "  .domain([9, 50])\n",
      "  .range([\"steelblue\", \"brown\"])\n",
      "  .interpolate(d3.interpolateLab);\n",
      "\n",
      "var color = function(d) { return blue_to_brown(d['economy (mpg)']); };\n",
      "\n",
      "var brushListener = function(event) { \n",
      "//    console.log(event.length); \n",
      "    kernel.execute(\"brushed_selection=\" + JSON.stringify(event))\n",
      "    };\n",
      "\n",
      "// load csv file and create the chart\n",
      "d3.csv('files/cars.csv', function(data) {\n",
      "  d3.parcoords()(\"#%s\")\n",
      "    .data(data)\n",
      "    .color(color)\n",
      "    .alpha(0.4)\n",
      "    .render()\n",
      "    .shadows()\n",
      "    .brushable()  // enable brushing\n",
      "    .on('brush', brushListener);\n",
      "}); \n",
      "\n",
      "\n",
      "\"\"\" % (graphid, graphid)\n",
      "\n",
      "display(Javascript(js, lib=externals))\n",
      "\n",
      "print graphid"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "$.getScript(\"http://d3js.org/d3.v2.js\", function () {\n",
        "$.getScript(\"static/d3.parcoords.js\", function () {\n",
        "\n",
        "\n",
        "container.show();\n",
        "var kernel = IPython.notebook.kernel;\n",
        "\n",
        "var xtkdiv = $('<div id=\"dKkhJqQg0K\" class=\"parcoords\" style=\"width:750px;height:300px\"></div>');\n",
        "xtkdiv.css('background-color','#fff');\n",
        "element.append(xtkdiv);\n",
        "\n",
        "var blue_to_brown = d3.scale.linear()\n",
        "  .domain([9, 50])\n",
        "  .range([\"steelblue\", \"brown\"])\n",
        "  .interpolate(d3.interpolateLab);\n",
        "\n",
        "var color = function(d) { return blue_to_brown(d['economy (mpg)']); };\n",
        "\n",
        "var brushListener = function(event) { \n",
        "//    console.log(event.length); \n",
        "    kernel.execute(\"brushed_selection=\" + JSON.stringify(event))\n",
        "    };\n",
        "\n",
        "// load csv file and create the chart\n",
        "d3.csv('files/cars.csv', function(data) {\n",
        "  d3.parcoords()(\"#dKkhJqQg0K\")\n",
        "    .data(data)\n",
        "    .color(color)\n",
        "    .alpha(0.4)\n",
        "    .render()\n",
        "    .shadows()\n",
        "    .brushable()  // enable brushing\n",
        "    .on('brush', brushListener);\n",
        "}); \n",
        "\n",
        "\n",
        "});\n",
        "});\n"
       ],
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x2490090>"
       ]
      },
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "dKkhJqQg0K\n"
       ]
      }
     ],
     "prompt_number": 17
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "#select some objects via brushing above first\n",
      "print len(brushed_selection)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "78\n"
       ]
      }
     ],
     "prompt_number": 18
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import display_pretty\n",
      "display_pretty(brushed_selection[0])"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "display_data",
       "text": [
        "{'0-60 mph (s)': '11',\n",
        " 'cylinders': '8',\n",
        " 'displacement (cc)': '360',\n",
        " 'economy (mpg)': '13',\n",
        " 'name': 'AMC Ambassador Brougham',\n",
        " 'power (hp)': '175',\n",
        " 'weight (lb)': '3821',\n",
        " 'year': '73'}"
       ]
      }
     ],
     "prompt_number": 19
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}