d3_js_demo.ipynb

{
 "metadata": {
  "name": ""
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "#d3js demo for this video:\n",
      "<iframe width=\"853\" height=\"480\" src=\"//www.youtube.com/embed/8UtoIR2IEkI?list=UUrqGGYkH7y1W8yH1MbxLXYg\" frameborder=\"0\" allowfullscreen></iframe>"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "##the d3 example HTML is this (with some minor modifications)"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%writefile f1.template\n",
      "<!DOCTYPE html>\n",
      "<html>\n",
      "    <meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\"/>\n",
      "    <script type=\"text/javascript\" src=\"http://mbostock.github.io/d3/talk/20111018/d3/d3.js\"></script>\n",
      "    <script type=\"text/javascript\" src=\"http://mbostock.github.io/d3/talk/20111018/d3/d3.geom.js\"></script>\n",
      "    <script type=\"text/javascript\" src=\"http://mbostock.github.io/d3/talk/20111018/d3/d3.layout.js\"></script>\n",
      "    <style type=\"text/css\">\n",
      "\n",
      "circle {\n",
      "  stroke: #000;\n",
      "  stroke-opacity: .5;\n",
      "}\n",
      "\n",
      "    </style>\n",
      "  <body>\n",
      "    <div id=\"body\">\n",
      "    <script type=\"text/javascript\">\n",
      "\n",
      "var w = {width},\n",
      "    h = {height};\n",
      "\n",
      "var nodes = d3.range({ball_count}).map(function() { return {radius: Math.random() * {rad_fac} + {rad_min}}; }),\n",
      "    color = d3.scale.category10();\n",
      "\n",
      "var force = d3.layout.force()\n",
      "    .gravity(0.1)\n",
      "    .charge(function(d, i) { return i ? 0 : -2000; })\n",
      "    .nodes(nodes)\n",
      "    .size([w, h]);\n",
      "\n",
      "var root = nodes[0];\n",
      "root.radius = 0;\n",
      "root.fixed = true;\n",
      "\n",
      "force.start();\n",
      "\n",
      "var svg = d3.select(\"#body\").append(\"svg:svg\")\n",
      "    .attr(\"width\", w)\n",
      "    .attr(\"height\", h);\n",
      "\n",
      "svg.selectAll(\"circle\")\n",
      "    .data(nodes.slice(1))\n",
      "  .enter().append(\"svg:circle\")\n",
      "    .attr(\"r\", function(d) { return d.radius - 2; })\n",
      "    .style(\"fill\", function(d, i) { return color(i % {color_count}); });\n",
      "\n",
      "force.on(\"tick\", function(e) {\n",
      "  var q = d3.geom.quadtree(nodes),\n",
      "      i = 0,\n",
      "      n = nodes.length;\n",
      "\n",
      "  while (++i < n) {\n",
      "    q.visit(collide(nodes[i]));\n",
      "  }\n",
      "\n",
      "  svg.selectAll(\"circle\")\n",
      "      .attr(\"cx\", function(d) { return d.x; })\n",
      "      .attr(\"cy\", function(d) { return d.y; });\n",
      "});\n",
      "\n",
      "svg.on(\"mousemove\", function() {\n",
      "  var p1 = d3.svg.mouse(this);\n",
      "  root.px = p1[0];\n",
      "  root.py = p1[1];\n",
      "  force.resume();\n",
      "});\n",
      "\n",
      "function collide(node) {\n",
      "  var r = node.radius + 16,\n",
      "      nx1 = node.x - r,\n",
      "      nx2 = node.x + r,\n",
      "      ny1 = node.y - r,\n",
      "      ny2 = node.y + r;\n",
      "  return function(quad, x1, y1, x2, y2) {\n",
      "    if (quad.point && (quad.point !== node)) {\n",
      "      var x = node.x - quad.point.x,\n",
      "          y = node.y - quad.point.y,\n",
      "          l = Math.sqrt(x * x + y * y),\n",
      "          r = node.radius + quad.point.radius;\n",
      "      if (l < r) {\n",
      "        l = (l - r) / l * .5;\n",
      "        node.x -= x *= l;\n",
      "        node.y -= y *= l;\n",
      "        quad.point.x += x;\n",
      "        quad.point.y += y;\n",
      "      }\n",
      "    }\n",
      "    return x1 > nx2\n",
      "        || x2 < nx1\n",
      "        || y1 > ny2\n",
      "        || y2 < ny1;\n",
      "  };\n",
      "}\n",
      "\n",
      "    </script>\n",
      "  </body>\n",
      "</html>\n"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "##This is the code needed to embed the HTML:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import IFrame\n",
      "import re\n",
      "\n",
      "def replace_all(txt,d):\n",
      "    rep = dict((re.escape('{'+k+'}'), str(v)) for k, v in d.items())\n",
      "    pattern = re.compile(\"|\".join(rep.keys()))\n",
      "    return pattern.sub(lambda m: rep[re.escape(m.group(0))], txt)    \n",
      "\n",
      "count=0\n",
      "def serve_html(s,w,h):\n",
      "    import os\n",
      "    global count\n",
      "    count+=1\n",
      "    fn= '__tmp'+str(os.getpid())+'_'+str(count)+'.html'\n",
      "    with open(fn,'w') as f:\n",
      "        f.write(s)\n",
      "    return IFrame('files/'+fn,w,h)\n",
      "\n",
      "def f1(w=500,h=400,ball_count=150,rad_min=2,rad_fac=11,color_count=3):\n",
      "    d={\n",
      "       'width'      :w,\n",
      "       'height'     :h,\n",
      "       'ball_count' :ball_count,\n",
      "       'rad_min'    :rad_min,\n",
      "       'rad_fac'    :rad_fac,\n",
      "       'color_count':color_count\n",
      "       }\n",
      "    with open('f1.template','r') as f:\n",
      "        s=f.read()\n",
      "    s= replace_all(s,d)        \n",
      "    return serve_html(s,w+30,h+30)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 2
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "##and example usage:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "f1(ball_count=30, color_count=17, rad_fac=10, rad_min=3, w=600)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "\n",
        "        <iframe\n",
        "            width=\"630\"\n",
        "            height=430\"\n",
        "            src=\"files/__tmp7864_1.html\"\n",
        "            frameborder=\"0\"\n",
        "            allowfullscreen\n",
        "        ></iframe>\n",
        "        "
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 3,
       "text": [
        "<IPython.lib.display.IFrame at 0x66b0a20>"
       ]
      }
     ],
     "prompt_number": 3
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}