rich_output.ipynb

rich_output.ipynb

{
 "metadata": {
  "name": "",
  "signature": "sha256:6e9cbea2b9feff9598f68fcb799b39b55326c6b2be96f7fdb856816583ef3f16"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Markdown\n",
      "========\n",
      "\n",
      "* simple\n",
      "* short\n",
      "* intuitive"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "HTML\n",
      "==="
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import HTML\n",
      "html = HTML(\"\"\"\n",
      "<table>\n",
      "    <tr>\n",
      "        <th>Name</th>\n",
      "        <th>Age</th>\n",
      "    </tr>\n",
      "    <tr>\n",
      "        <td>Alice</td>\n",
      "        <td>23</td>\n",
      "    </tr>\n",
      "    <tr>\n",
      "        <td>Bobby</td>\n",
      "        <td>43</td>\n",
      "    </tr>\n",
      "    <tr>\n",
      "        <td>Gimli</td>\n",
      "        <td>40</td>\n",
      "    </tr>\n",
      "</table>\n",
      "\"\"\")\n",
      "html"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "\n",
        "<table>\n",
        "    <tr>\n",
        "        <th>Name</th>\n",
        "        <th>Age</th>\n",
        "    </tr>\n",
        "    <tr>\n",
        "        <td>Alice</td>\n",
        "        <td>23</td>\n",
        "    </tr>\n",
        "    <tr>\n",
        "        <td>Bobby</td>\n",
        "        <td>43</td>\n",
        "    </tr>\n",
        "    <tr>\n",
        "        <td>Gimli</td>\n",
        "        <td>40</td>\n",
        "    </tr>\n",
        "</table>\n"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 1,
       "text": [
        "<IPython.core.display.HTML at 0x102bbaf50>"
       ]
      }
     ],
     "prompt_number": 1
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Images\n",
      "======"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import Image\n",
      "Image(url=\"http://www.mountainphotography.com/images/large/norway_reinePano.jpg\")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<img src=\"http://www.mountainphotography.com/images/large/norway_reinePano.jpg\"/>"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 2,
       "text": [
        "<IPython.core.display.Image at 0x102bbaed0>"
       ]
      }
     ],
     "prompt_number": 2
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Audio\n",
      "===="
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import Audio\n",
      "Audio(url=\"http://www.lettersnstuff.com/sounds/nature/storm2.wav\")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "\n",
        "                <audio controls=\"controls\" >\n",
        "                    <source src=\"http://www.lettersnstuff.com/sounds/nature/storm2.wav\" type=\"audio/x-wav\" />\n",
        "                    Your browser does not support the audio element.\n",
        "                </audio>\n",
        "              "
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 3,
       "text": [
        "<IPython.lib.display.Audio at 0x102bbafd0>"
       ]
      }
     ],
     "prompt_number": 3
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Video\n",
      "====="
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import YouTubeVideo\n",
      "YouTubeVideo(\"jofNR_WkoCE\")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "\n",
        "        <iframe\n",
        "            width=\"400\"\n",
        "            height=300\"\n",
        "            src=\"https://www.youtube.com/embed/jofNR_WkoCE\"\n",
        "            frameborder=\"0\"\n",
        "            allowfullscreen\n",
        "        ></iframe>\n",
        "        "
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 4,
       "text": [
        "<IPython.lib.display.YouTubeVideo at 0x102bbad10>"
       ]
      }
     ],
     "prompt_number": 4
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "d3.js\n",
      "====="
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import Javascript, HTML\n",
      "\n",
      "Javascript(\"\"\"$.getScript(\"http://d3js.org/d3.v3.min.js\")\"\"\")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "$.getScript(\"http://d3js.org/d3.v3.min.js\")"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 5,
       "text": [
        "<IPython.core.display.Javascript at 0x1030c1590>"
       ]
      }
     ],
     "prompt_number": 5
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<style>\n",
      "    canvas {\n",
      "        \n",
      "    }\n",
      "</style>\n",
      "<div id=\"fps\">FPS: <span>?</span></div>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<style>\n",
        "    canvas {\n",
        "        \n",
        "    }\n",
        "</style>\n",
        "<div id=\"fps\">FPS: <span>?</span></div>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x1030c1490>"
       ]
      }
     ],
     "prompt_number": 6
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "\n",
      "var fps = d3.select(\"#fps span\");\n",
      "\n",
      "// element is the jQuery element we will append to\n",
      "var e = element.get(0);\n",
      "\n",
      "var data = d3.range(100).map(function() {\n",
      "  return {xloc: 0, yloc: 0, xvel: 0, yvel: 0};\n",
      "});\n",
      "\n",
      "var width = 960,\n",
      "    height = 500,\n",
      "    angle = 2 * Math.PI;\n",
      "\n",
      "var x = d3.scale.linear()\n",
      "    .domain([-5, 5])\n",
      "    .range([0, width]);\n",
      "\n",
      "var y = d3.scale.linear()\n",
      "    .domain([-5, 5])\n",
      "    .range([0, height]);\n",
      "\n",
      "var time0 = Date.now(),\n",
      "    time1;\n",
      "\n",
      "var canvas = d3.select(e).append(\"canvas\")\n",
      "    .attr(\"width\", width)\n",
      "    .attr(\"height\", height);\n",
      "\n",
      "var context = canvas.node().getContext(\"2d\");\n",
      "context.fillStyle = \"yellowgreen\";\n",
      "context.strokeStyle = \"#666\";\n",
      "context.strokeWidth = 1.5;\n",
      "\n",
      "d3.timer(function() {\n",
      "  context.clearRect(0, 0, width, height);\n",
      "\n",
      "  data.forEach(function(d) {\n",
      "    d.xloc += d.xvel;\n",
      "    d.yloc += d.yvel;\n",
      "    d.xvel += 0.04 * (Math.random() - .5) - 0.05 * d.xvel - 0.0005 * d.xloc;\n",
      "    d.yvel += 0.04 * (Math.random() - .5) - 0.05 * d.yvel - 0.0005 * d.yloc;\n",
      "    context.beginPath();\n",
      "    context.arc(x(d.xloc), y(d.yloc), Math.min(1 + 1000 * Math.abs(d.xvel * d.yvel), 10), 0, angle);\n",
      "    context.fill();\n",
      "    context.stroke();\n",
      "  });\n",
      "\n",
      "  time1 = Date.now();\n",
      "  fps.text(Math.round(1000 / (time1 - time0)));\n",
      "  time0 = time1;\n",
      "});"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "\n",
        "var fps = d3.select(\"#fps span\");\n",
        "\n",
        "// element is the jQuery element we will append to\n",
        "var e = element.get(0);\n",
        "\n",
        "var data = d3.range(100).map(function() {\n",
        "  return {xloc: 0, yloc: 0, xvel: 0, yvel: 0};\n",
        "});\n",
        "\n",
        "var width = 960,\n",
        "    height = 500,\n",
        "    angle = 2 * Math.PI;\n",
        "\n",
        "var x = d3.scale.linear()\n",
        "    .domain([-5, 5])\n",
        "    .range([0, width]);\n",
        "\n",
        "var y = d3.scale.linear()\n",
        "    .domain([-5, 5])\n",
        "    .range([0, height]);\n",
        "\n",
        "var time0 = Date.now(),\n",
        "    time1;\n",
        "\n",
        "var canvas = d3.select(e).append(\"canvas\")\n",
        "    .attr(\"width\", width)\n",
        "    .attr(\"height\", height);\n",
        "\n",
        "var context = canvas.node().getContext(\"2d\");\n",
        "context.fillStyle = \"yellowgreen\";\n",
        "context.strokeStyle = \"#666\";\n",
        "context.strokeWidth = 1.5;\n",
        "\n",
        "d3.timer(function() {\n",
        "  context.clearRect(0, 0, width, height);\n",
        "\n",
        "  data.forEach(function(d) {\n",
        "    d.xloc += d.xvel;\n",
        "    d.yloc += d.yvel;\n",
        "    d.xvel += 0.04 * (Math.random() - .5) - 0.05 * d.xvel - 0.0005 * d.xloc;\n",
        "    d.yvel += 0.04 * (Math.random() - .5) - 0.05 * d.yvel - 0.0005 * d.yloc;\n",
        "    context.beginPath();\n",
        "    context.arc(x(d.xloc), y(d.yloc), Math.min(1 + 1000 * Math.abs(d.xvel * d.yvel), 10), 0, angle);\n",
        "    context.fill();\n",
        "    context.stroke();\n",
        "  });\n",
        "\n",
        "  time1 = Date.now();\n",
        "  fps.text(Math.round(1000 / (time1 - time0)));\n",
        "  time0 = time1;\n",
        "});"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x1030c15d0>"
       ]
      }
     ],
     "prompt_number": 7
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}