Showing a D3 bar chart inside IPython, taking advantage of the `new Function` alternative syntax in Javascript for creating functions

ipython_display_d3.ipynb

{
 "metadata": {
  "name": ""
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "import json\n",
      "\n",
      "class BarChart(object):\n",
      "    def __init__(self, val, values):\n",
      "        self.val = val\n",
      "        self.values = values\n",
      "        \n",
      "    def _repr_html_(self):\n",
      "        \n",
      "        def function(code, args=None):\n",
      "            script = \"\\\\\\n\".join(code.split(\"\\n\"))\n",
      "            if not args:\n",
      "                return \"\"\"new Function(\"{0}\")\"\"\".format(script)\n",
      "            else:\n",
      "                return \"\"\"new Function(\"{0}\", \"{1}\")\"\"\".format(\n",
      "                    '\", \"'.join(args),\n",
      "                    script\n",
      "                )\n",
      "        datum_x = function(\n",
      "            args=[\"datum\", \"index\"],\n",
      "            code=\"return x(index);\"\n",
      "        )\n",
      "        datum_y = function(\n",
      "            args=[\"datum\"],\n",
      "            code=\"return height - y(datum.books);\"\n",
      "        )\n",
      "        datum_height = function(\n",
      "            args=[\"datum\"],\n",
      "            code=\"return y(datum.books);\"\n",
      "        )\n",
      "        datum_books = function(\n",
      "            args=[\"datum\"],\n",
      "            code=\"return datum.books;\"\n",
      "        )\n",
      "        load_chart = function(\n",
      "            args=[\"data\"],\n",
      "            code=\"\"\"\n",
      "            var barDemo = d3.select('#t{id}').\n",
      "              append('svg:svg').\n",
      "              attr('width', width).\n",
      "              attr('height', height);\n",
      "            \n",
      "            barDemo.selectAll('rect').\n",
      "              data(data).\n",
      "              enter().\n",
      "              append('svg:rect').\n",
      "              attr('x', {datum_x}).\n",
      "              attr('y', {datum_y}).\n",
      "              attr('height', {datum_height}).\n",
      "              attr('width', barWidth).\n",
      "              attr('fill', '#2d578b');\n",
      "            \"\"\"\n",
      "        ).format(\n",
      "            id=id(self.val),\n",
      "            datum_x=datum_x.replace('\"', \"'\"),\n",
      "            datum_y=datum_y.replace('\"', \"'\"),\n",
      "            datum_height=datum_height.replace('\"', \"'\"),\n",
      "        )\n",
      "        render_chart = function(\n",
      "            code=\"\"\"\n",
      "            x = d3.scale.linear().domain([0, data.length]).range([0, width]);\n",
      "            y = d3.scale.linear().domain([0, d3.max(data, {datum_books})]).rangeRound([0, height]);\n",
      "\n",
      "            return loadChart(data)\"\"\"\n",
      "        ).format(datum_books=datum_books.replace('\"', \"'\"))\n",
      "        script = \"\"\"\n",
      "        <script>\n",
      "        var data = JSON.parse('{values}');\n",
      "        var barWidth = 40;\n",
      "        var width = (barWidth + 10) * data.length;\n",
      "        var height = 200;\n",
      "        var x, y;\n",
      "        \n",
      "        var loadChart = {load_chart};\n",
      "        var renderChart = {render_chart};\n",
      "        if(typeof(d3) === 'undefined') {{\n",
      "            jQuery.getScript( 'http://d3js.org/d3.v3.min.js')\n",
      "                .done(renderChart);\n",
      "        }} else {{\n",
      "            loadChart(data);\n",
      "        }}\n",
      "        </script>\n",
      "        <marquee><em>{val}</em></marquee>\n",
      "        <div id=\"t{id}\"></div>\n",
      "        \"\"\".format(\n",
      "            val=self.val,\n",
      "            values=json.dumps(self.values),\n",
      "            id=id(self.val),\n",
      "            datum_books=datum_books,\n",
      "            load_chart=load_chart,\n",
      "            render_chart=render_chart,\n",
      "        )\n",
      "        return script\n",
      "\n",
      "BarChart(\"This may help you with your ouput! :-D\", [\n",
      "    {\"year\": 2006, \"books\": 54},\n",
      "    {\"year\": 2007, \"books\": 43},\n",
      "    {\"year\": 2008, \"books\": 41},\n",
      "    {\"year\": 2009, \"books\": 44},\n",
      "    {\"year\": 2010, \"books\": 35}\n",
      "])"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "\n",
        "        <script>\n",
        "        var data = JSON.parse('[{\"books\": 54, \"year\": 2006}, {\"books\": 43, \"year\": 2007}, {\"books\": 41, \"year\": 2008}, {\"books\": 44, \"year\": 2009}, {\"books\": 35, \"year\": 2010}]');\n",
        "        var barWidth = 40;\n",
        "        var width = (barWidth + 10) * data.length;\n",
        "        var height = 200;\n",
        "        var x, y;\n",
        "        \n",
        "        var loadChart = new Function(\"data\", \"\\\n",
        "            var barDemo = d3.select('#t62871632').\\\n",
        "              append('svg:svg').\\\n",
        "              attr('width', width).\\\n",
        "              attr('height', height);\\\n",
        "            \\\n",
        "            barDemo.selectAll('rect').\\\n",
        "              data(data).\\\n",
        "              enter().\\\n",
        "              append('svg:rect').\\\n",
        "              attr('x', new Function('datum', 'index', 'return x(index);')).\\\n",
        "              attr('y', new Function('datum', 'return height - y(datum.books);')).\\\n",
        "              attr('height', new Function('datum', 'return y(datum.books);')).\\\n",
        "              attr('width', barWidth).\\\n",
        "              attr('fill', '#2d578b');\\\n",
        "            \");\n",
        "        var renderChart = new Function(\"\\\n",
        "            x = d3.scale.linear().domain([0, data.length]).range([0, width]);\\\n",
        "            y = d3.scale.linear().domain([0, d3.max(data, new Function('datum', 'return datum.books;'))]).rangeRound([0, height]);\\\n",
        "\\\n",
        "            return loadChart(data)\");\n",
        "        if(typeof(d3) === 'undefined') {\n",
        "            jQuery.getScript( 'http://d3js.org/d3.v3.min.js')\n",
        "                .done(renderChart);\n",
        "        } else {\n",
        "            loadChart(data);\n",
        "        }\n",
        "        </script>\n",
        "        <marquee><em>This may help you with your ouput! :-D</em></marquee>\n",
        "        <div id=\"t62871632\"></div>\n",
        "        "
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 1,
       "text": [
        "<__main__.BarChart at 0x3bf2ed0>"
       ]
      }
     ],
     "prompt_number": 1
    }
   ],
   "metadata": {}
  }
 ]
}