d3 ipython notebook

{
 "metadata": {
  "name": "",
  "signature": "sha256:cac0968acb6ed81120d6cd83c661c951e8f8930e429d0ee97e66bb68fbd65d99"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "window.prep_d3 = function(f) {\n",
      "    if(!d3) {\n",
      "        var s = document.createElement('script');\n",
      "        s.src = 'http://d3js.org/d3.v3.min.js';\n",
      "        document.head.appendChild(s);\n",
      "        s.onload = f;\n",
      "    }\n",
      "    else {\n",
      "        f();\n",
      "    }\n",
      "};"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "window.prep_d3 = function(f) {\n",
        "    var s = document.createElement('script');\n",
        "    s.src = 'http://d3js.org/d3.v3.min.js';\n",
        "    document.head.appendChild(s);\n",
        "    s.onload = f;\n",
        "};"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x10a219050>"
       ]
      }
     ],
     "prompt_number": 7
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<div id=\"ex1\"></div>\n",
      "<script>\n",
      "prep_d3(function() {\n",
      "    d3.select('#ex1')\n",
      "      .selectAll(\"p\")\n",
      "      .data([1,2,3,4,5])\n",
      "      .enter()\n",
      "      .append(\"p\")\n",
      "      .text(\"New paragraph!\");\n",
      "});\n",
      "</script>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<div id=\"ex1\"></div>\n",
        "<script>\n",
        "prep_d3(function() {\n",
        "    d3.select('#ex1')\n",
        "      .selectAll(\"p\")\n",
        "      .data([1,2,3,4,5])\n",
        "      .enter()\n",
        "      .append(\"p\")\n",
        "      .text(\"New paragraph!\");\n",
        "});\n",
        "</script>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x10a21de90>"
       ]
      }
     ],
     "prompt_number": 15
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<div id=\"ex2\"></div>\n",
      "<script>\n",
      "prep_d3(function() {\n",
      "    var w = 500;\n",
      "    var h = 100;\n",
      "\n",
      "    var dataset = d3.range(20);\n",
      "\n",
      "    var svg = d3.select('#ex2')\n",
      "        .append('svg')\n",
      "        .attr('width', w)\n",
      "        .attr('height', h);\n",
      "\n",
      "    svg.selectAll('rect')\n",
      "        .data(dataset)\n",
      "        .enter()\n",
      "        .append('rect')\n",
      "        .attr('x', 0)\n",
      "        .attr('y', 0)\n",
      "        .attr('width', 20)\n",
      "        .attr('height', 100);\n",
      "});\n",
      "</script>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<div id=\"ex2\"></div>\n",
        "<script>\n",
        "prep_d3(function() {\n",
        "    var w = 500;\n",
        "    var h = 100;\n",
        "\n",
        "    var dataset = d3.range(20);\n",
        "\n",
        "    var svg = d3.select('#ex2')\n",
        "        .append('svg')\n",
        "        .attr('width', w)\n",
        "        .attr('height', h);\n",
        "\n",
        "    svg.selectAll('rect')\n",
        "        .data(dataset)\n",
        "        .enter()\n",
        "        .append('rect')\n",
        "        .attr('x', 0)\n",
        "        .attr('y', 0)\n",
        "        .attr('width', 20)\n",
        "        .attr('height', 100);\n",
        "});\n",
        "</script>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x10a224110>"
       ]
      }
     ],
     "prompt_number": 16
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<div id=\"ex3\"></div>\n",
      "<script>\n",
      "prep_d3(function() {\n",
      "    window.dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25];\n",
      "    \n",
      "    var w = 500;\n",
      "    var h = 100;\n",
      "\n",
      "    var barPadding = 1;\n",
      "\n",
      "    var dataset = window.dataset; \n",
      "\n",
      "    var svg = d3.select('#ex3')\n",
      "        .append('svg')\n",
      "        .attr('width', w)\n",
      "        .attr('height', h);\n",
      "\n",
      "    svg.selectAll('rect')\n",
      "        .data(dataset)\n",
      "        .enter()\n",
      "        .append('rect')\n",
      "\n",
      "        // attr\uc5d0 \ud55c\uaebc\ubc88\uc5d0 \uc18d\uc131 \uc9c0\uc815\ud558\uae30\n",
      "        .attr({\n",
      "            x: function(d, i) { return i * w / window.dataset.length; },\n",
      "            y: function(d) { return h - (d * 4) },\n",
      "            width: w / dataset.length - barPadding,\n",
      "            height: function(d) { return d * 4 },\n",
      "            fill: function(d) { return 'rgb(0, 0,' + (d * 10) + ')'}\n",
      "        });\n",
      "});\n",
      "</script>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<div id=\"ex3\"></div>\n",
        "<script>\n",
        "prep_d3(function() {\n",
        "    window.dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25];\n",
        "    \n",
        "    var w = 500;\n",
        "    var h = 100;\n",
        "\n",
        "    var barPadding = 1;\n",
        "\n",
        "    var dataset = window.dataset; \n",
        "\n",
        "    var svg = d3.select('#ex3')\n",
        "        .append('svg')\n",
        "        .attr('width', w)\n",
        "        .attr('height', h);\n",
        "\n",
        "    svg.selectAll('rect')\n",
        "        .data(dataset)\n",
        "        .enter()\n",
        "        .append('rect')\n",
        "\n",
        "        // attr\uc5d0 \ud55c\uaebc\ubc88\uc5d0 \uc18d\uc131 \uc9c0\uc815\ud558\uae30\n",
        "        .attr({\n",
        "            x: function(d, i) { return i * w / window.dataset.length; },\n",
        "            y: function(d) { return h - (d * 4) },\n",
        "            width: w / dataset.length - barPadding,\n",
        "            height: function(d) { return d * 4 },\n",
        "            fill: function(d) { return 'rgb(0, 0,' + (d * 10) + ')'}\n",
        "        });\n",
        "});\n",
        "</script>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x10a2240d0>"
       ]
      }
     ],
     "prompt_number": 18
    }
   ],
   "metadata": {}
  }
 ]
}