notebooks/notebook_javascript_examples.ipynb

{
 "metadata": {
  "name": "notebook_javascript_examples"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "<script type=\"text/javascript\">\n",
      "    $('head').append(\n",
      "        \"<style type='text/css'>.coin {width: 55px;}</style>\"\n",
      "    );\n",
      "</script>"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "## show as coin flips?\n"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import HTML\n",
      "\n",
      "# http://en.wikipedia.org/wiki/File:2006_Quarter_Proof.png\n",
      "head = \"http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png\"\n",
      "# http://en.wikipedia.org/wiki/File:2012-ATB-Quarters-Unc-Hawaii.jpg\n",
      "tail = \"http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg\"\n",
      "\n",
      "head_img = \"<img class='coin' src='{0}'/>\".format(head)\n",
      "tail_img = \"<img class='coin' src='{0}'/>\".format(tail)\n",
      "\n",
      "\n",
      "HTML(head_img + tail_img)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/>"
       ],
       "output_type": "pyout",
       "prompt_number": 1,
       "text": [
        "<IPython.core.display.HTML at 0x4678ad0>"
       ]
      }
     ],
     "prompt_number": 1
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "**How to resize images?**\n",
      "\n",
      "Two ways I want to use here:\n",
      "\n",
      "* jQuery css\n",
      "* jQuery to attach a `style` element\n"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.core.display import Javascript\n",
      "from jinja2 import Template\n",
      "\n",
      "# http://en.wikipedia.org/wiki/File:2006_Quarter_Proof.png\n",
      "head = \"http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png\"\n",
      "# http://en.wikipedia.org/wiki/File:2012-ATB-Quarters-Unc-Hawaii.jpg\n",
      "tail = \"http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg\"\n",
      "\n",
      "head_img = \"<img class='coin' src='{0}'/>\".format(head)\n",
      "tail_img = \"<img class='coin' src='{0}'/>\".format(tail)\n",
      "\n",
      "coins_html = head_img + tail_img\n",
      "\n",
      "js_template = \"\"\"\n",
      "element.html(\"{{coins_html}}\");\n",
      "container.show();\n",
      "\n",
      "\n",
      "setTimeout(function(){\n",
      "\n",
      "  $('.coin').css('width', '50px');\n",
      "\n",
      "},0);\n",
      "\"\"\"\n",
      "\n",
      "js = Template(js_template).render(coins_html=coins_html)\n",
      "\n",
      "Javascript(data=js, lib=None, css=None)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "\n",
        "element.html(\"<img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/>\");\n",
        "container.show();\n",
        "\n",
        "\n",
        "setTimeout(function(){\n",
        "\n",
        "  $('.coin').css('width', '50px');\n",
        "\n",
        "},0);"
       ],
       "output_type": "pyout",
       "prompt_number": 2,
       "text": [
        "<IPython.core.display.Javascript at 0x46ee4f0>"
       ]
      }
     ],
     "prompt_number": 2
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.core.display import Javascript\n",
      "\n",
      "js = \"\"\"$('<style/>').html(\".coin {width: 55px;}\").appendTo('head')\"\"\"\n",
      "Javascript(data=js, lib=None, css=None)\n"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "$('<style/>').html(\".coin {width: 55px;}\").appendTo('head')"
       ],
       "output_type": "pyout",
       "prompt_number": 3,
       "text": [
        "<IPython.core.display.Javascript at 0x4678890>"
       ]
      }
     ],
     "prompt_number": 3
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "It'd be fun to turn this sequence into morse code, for example.  What are my options in Python? in the browser? I don't think \n",
      "there is any standard Python library for making sounds.\n",
      "\n",
      "The video http://www.youtube.com/watch?v=JhAF6puNTxI might help -- mentions wave library... http://docs.python.org/2/library/wave.html\n",
      "\n",
      "http://codingmess.blogspot.com/2010/02/how-to-make-wav-file-with-python.html -> to create a wav file \"by hand\"\n",
      "\n",
      "investigate `audiolab`: http://pypi.python.org/pypi/scikits.audiolab/"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "# http://my.safaribooksonline.com/book/-/9781449361600/4dot-scikit-taking-scipy-one-step-further/fourdot1_scikit_image_html\n",
      "# check to see whether we have libraries available\n",
      "\n",
      "import numpy as np\n",
      "import matplotlib.pyplot as mpl\n",
      "import scipy.ndimage as ndimage\n",
      "import skimage.filter as skif"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 4
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "from IPython.core.display import HTML\n",
      "import random\n",
      "\n",
      "# http://en.wikipedia.org/wiki/File:2006_Quarter_Proof.png\n",
      "head = \"http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png\"\n",
      "# http://en.wikipedia.org/wiki/File:2012-ATB-Quarters-Unc-Hawaii.jpg\n",
      "tail = \"http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg\"\n",
      "\n",
      "head_img = \"<img class='coin' src='{0}'/>\".format(head)\n",
      "tail_img = \"<img class='coin' src='{0}'/>\".format(tail)\n",
      "\n",
      "coin_toss = \"\"\n",
      "size = 100\n",
      "\n",
      "random.seed()\n",
      "\n",
      "for i in xrange(size):\n",
      "    toss = random.randint(0,1)\n",
      "    coin_toss += head_img if toss else tail_img\n",
      "\n",
      "HTML(coin_toss)\n",
      "\n"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/2012-ATB-Quarters-Unc-Hawaii.jpg/238px-2012-ATB-Quarters-Unc-Hawaii.jpg'/><img class='coin' src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/2006_Quarter_Proof.png/244px-2006_Quarter_Proof.png'/>"
       ],
       "output_type": "pyout",
       "prompt_number": 5,
       "text": [
        "<IPython.core.display.HTML at 0x4880830>"
       ]
      }
     ],
     "prompt_number": 5
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "# based on http://pastebin.com/yPTvFPeP\n",
      "\n",
      "from IPython.core.display import Javascript\n",
      "\n",
      "js = \"\"\"\n",
      "element.html(\"<svg></svg>\");\n",
      "container.show();\n",
      "\n",
      "var width = $('svg').width();\n",
      "var height = $('svg').height();\n",
      "var svg = d3.select('svg');\n",
      "\n",
      "svg\n",
      "  .attr('width', width)\n",
      "  .attr('height', height);\n",
      "\n",
      "svg.selectAll('circle')\n",
      "  .data([18, 57, 112, 323])\n",
      "  .enter().append('circle')\n",
      "  .attr('cy', 236)\n",
      "  .attr('cx', String)\n",
      "  .attr('r', Math.sqrt);\n",
      "\n",
      "\n",
      "\"\"\"\n",
      "\n",
      "d3_url = \"http://cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js\"\n",
      "\n",
      "Javascript(data=js, lib=d3_url)\n"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "$.getScript(\"http://cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js\", function () {\n",
        "\n",
        "element.html(\"<svg></svg>\");\n",
        "container.show();\n",
        "\n",
        "var width = $('svg').width();\n",
        "var height = $('svg').height();\n",
        "var svg = d3.select('svg');\n",
        "\n",
        "svg\n",
        "  .attr('width', width)\n",
        "  .attr('height', height);\n",
        "\n",
        "svg.selectAll('circle')\n",
        "  .data([18, 57, 112, 323])\n",
        "  .enter().append('circle')\n",
        "  .attr('cy', 236)\n",
        "  .attr('cx', String)\n",
        "  .attr('r', Math.sqrt);\n",
        "\n",
        "\n",
        "});\n"
       ],
       "output_type": "pyout",
       "prompt_number": 6,
       "text": [
        "<IPython.core.display.Javascript at 0x4880290>"
       ]
      }
     ],
     "prompt_number": 6
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "# http://www.datatables.net/\n",
      "# http://www.datatables.net/examples/data_sources/js_array.html\n",
      "\n",
      "from IPython.core.display import Javascript\n",
      "\n",
      "js = \"\"\"\n",
      "element.html('<div id=\"demo\"/>');\n",
      "container.show();\n",
      "\n",
      "$('#demo').html( '<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"display\" id=\"example\"></table>' );\n",
      "    $('#example').dataTable( {\n",
      "        \"aaData\": [\n",
      "            /* Reduced data set */\n",
      "            [ \"Trident\", \"Internet Explorer 4.0\", \"Win 95+\", 4, \"X\" ],\n",
      "            [ \"Trident\", \"Internet Explorer 5.0\", \"Win 95+\", 5, \"C\" ],\n",
      "            [ \"Trident\", \"Internet Explorer 5.5\", \"Win 95+\", 5.5, \"A\" ],\n",
      "            [ \"Trident\", \"Internet Explorer 6.0\", \"Win 98+\", 6, \"A\" ],\n",
      "            [ \"Trident\", \"Internet Explorer 7.0\", \"Win XP SP2+\", 7, \"A\" ],\n",
      "            [ \"Gecko\", \"Firefox 1.5\", \"Win 98+ / OSX.2+\", 1.8, \"A\" ],\n",
      "            [ \"Gecko\", \"Firefox 2\", \"Win 98+ / OSX.2+\", 1.8, \"A\" ],\n",
      "            [ \"Gecko\", \"Firefox 3\", \"Win 2k+ / OSX.3+\", 1.9, \"A\" ],\n",
      "            [ \"Webkit\", \"Safari 1.2\", \"OSX.3\", 125.5, \"A\" ],\n",
      "            [ \"Webkit\", \"Safari 1.3\", \"OSX.3\", 312.8, \"A\" ],\n",
      "            [ \"Webkit\", \"Safari 2.0\", \"OSX.4+\", 419.3, \"A\" ],\n",
      "            [ \"Webkit\", \"Safari 3.0\", \"OSX.4+\", 522.1, \"A\" ]\n",
      "        ],\n",
      "        \"aoColumns\": [\n",
      "            { \"sTitle\": \"Engine\" },\n",
      "            { \"sTitle\": \"Browser\" },\n",
      "            { \"sTitle\": \"Platform\" },\n",
      "            { \"sTitle\": \"Version\", \"sClass\": \"center\" },\n",
      "            { \"sTitle\": \"Grade\", \"sClass\": \"center\" }\n",
      "        ]\n",
      "    } );   \n",
      "\n",
      "\"\"\"\n",
      "\n",
      "css_url = \"http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css\"\n",
      "datatable_url = \"http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js\"\n",
      "\n",
      "Javascript(data=js, lib=datatable_url, css=css_url)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "$(\"head\").append($(\"<link/>\").attr({\n",
        "  rel:  \"stylesheet\",\n",
        "  type: \"text/css\",\n",
        "  href: \"http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css\"\n",
        "}));\n",
        "$.getScript(\"http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js\", function () {\n",
        "\n",
        "element.html('<div id=\"demo\"/>');\n",
        "container.show();\n",
        "\n",
        "$('#demo').html( '<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"display\" id=\"example\"></table>' );\n",
        "    $('#example').dataTable( {\n",
        "        \"aaData\": [\n",
        "            /* Reduced data set */\n",
        "            [ \"Trident\", \"Internet Explorer 4.0\", \"Win 95+\", 4, \"X\" ],\n",
        "            [ \"Trident\", \"Internet Explorer 5.0\", \"Win 95+\", 5, \"C\" ],\n",
        "            [ \"Trident\", \"Internet Explorer 5.5\", \"Win 95+\", 5.5, \"A\" ],\n",
        "            [ \"Trident\", \"Internet Explorer 6.0\", \"Win 98+\", 6, \"A\" ],\n",
        "            [ \"Trident\", \"Internet Explorer 7.0\", \"Win XP SP2+\", 7, \"A\" ],\n",
        "            [ \"Gecko\", \"Firefox 1.5\", \"Win 98+ / OSX.2+\", 1.8, \"A\" ],\n",
        "            [ \"Gecko\", \"Firefox 2\", \"Win 98+ / OSX.2+\", 1.8, \"A\" ],\n",
        "            [ \"Gecko\", \"Firefox 3\", \"Win 2k+ / OSX.3+\", 1.9, \"A\" ],\n",
        "            [ \"Webkit\", \"Safari 1.2\", \"OSX.3\", 125.5, \"A\" ],\n",
        "            [ \"Webkit\", \"Safari 1.3\", \"OSX.3\", 312.8, \"A\" ],\n",
        "            [ \"Webkit\", \"Safari 2.0\", \"OSX.4+\", 419.3, \"A\" ],\n",
        "            [ \"Webkit\", \"Safari 3.0\", \"OSX.4+\", 522.1, \"A\" ]\n",
        "        ],\n",
        "        \"aoColumns\": [\n",
        "            { \"sTitle\": \"Engine\" },\n",
        "            { \"sTitle\": \"Browser\" },\n",
        "            { \"sTitle\": \"Platform\" },\n",
        "            { \"sTitle\": \"Version\", \"sClass\": \"center\" },\n",
        "            { \"sTitle\": \"Grade\", \"sClass\": \"center\" }\n",
        "        ]\n",
        "    } );   \n",
        "\n",
        "});\n"
       ],
       "output_type": "pyout",
       "prompt_number": 7,
       "text": [
        "<IPython.core.display.Javascript at 0x4880370>"
       ]
      }
     ],
     "prompt_number": 7
    },
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "source": [
      "Vexflow examples"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "http://vexflow.com/docs/tutorial.html"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.core.display import Javascript\n",
      "\n",
      "js = \"\"\"\n",
      "element.html(\"<canvas width=700 height=100 id='music21Canvas0'></canvas>\");\n",
      "container.show();\n",
      "\n",
      "var canvas = $(\"#music21Canvas0\")[0];\n",
      "var renderer = new Vex.Flow.Renderer(canvas,\n",
      "    Vex.Flow.Renderer.Backends.CANVAS);\n",
      "\n",
      "var ctx = renderer.getContext();\n",
      "var stave = new Vex.Flow.Stave(10, 0, 500);\n",
      "stave.addClef(\"treble\").setContext(ctx).draw();\n",
      "\n",
      "\"\"\"\n",
      "\n",
      "js_libs = [\"http://vexflow.com/support/raphael.js\", \"http://vexflow.com/support/vexflow-min.js\"]\n",
      "\n",
      "Javascript(data=js, lib=js_libs)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "$.getScript(\"http://vexflow.com/support/raphael.js\", function () {\n",
        "$.getScript(\"http://vexflow.com/support/vexflow-min.js\", function () {\n",
        "\n",
        "element.html(\"<canvas width=700 height=100 id='music21Canvas0'></canvas>\");\n",
        "container.show();\n",
        "\n",
        "var canvas = $(\"#music21Canvas0\")[0];\n",
        "var renderer = new Vex.Flow.Renderer(canvas,\n",
        "    Vex.Flow.Renderer.Backends.CANVAS);\n",
        "\n",
        "var ctx = renderer.getContext();\n",
        "var stave = new Vex.Flow.Stave(10, 0, 500);\n",
        "stave.addClef(\"treble\").setContext(ctx).draw();\n",
        "\n",
        "});\n",
        "});\n"
       ],
       "output_type": "pyout",
       "prompt_number": 8,
       "text": [
        "<IPython.core.display.Javascript at 0x48802b0>"
       ]
      }
     ],
     "prompt_number": 8
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.core.display import Javascript\n",
      "\n",
      "js = \"\"\"\n",
      "element.html(\"<canvas width=700 height=100 id='music21Canvas1'></canvas>\");\n",
      "container.show();\n",
      "\n",
      "var canvas = $(\"#music21Canvas1\")[0];\n",
      "var renderer = new Vex.Flow.Renderer(canvas,\n",
      "Vex.Flow.Renderer.Backends.CANVAS);\n",
      "\n",
      "var ctx = renderer.getContext();\n",
      "var stave = new Vex.Flow.Stave(10, 0, 500);\n",
      "stave.addClef(\"treble\").setContext(ctx).draw();\n",
      "\n",
      "// Create the notes\n",
      "var notes = [\n",
      "// A quarter-note C.\n",
      "new Vex.Flow.StaveNote({ keys: [\"c/4\"], duration: \"q\" }),\n",
      "\n",
      "// A quarter-note D.\n",
      "new Vex.Flow.StaveNote({ keys: [\"d/4\"], duration: \"q\" }),\n",
      "\n",
      "// A quarter-note rest. Note that the key (b/4) specifies the vertical\n",
      "// position of the rest.\n",
      "new Vex.Flow.StaveNote({ keys: [\"b/4\"], duration: \"qr\" }),\n",
      "\n",
      "// A C-Major chord.\n",
      "new Vex.Flow.StaveNote({ keys: [\"c/4\", \"e/4\", \"g/4\"], duration: \"q\" })\n",
      "];\n",
      "\n",
      "// Create a voice in 4/4\n",
      "var voice = new Vex.Flow.Voice({\n",
      "num_beats: 4,\n",
      "beat_value: 4,\n",
      "resolution: Vex.Flow.RESOLUTION\n",
      "});\n",
      "\n",
      "// Add notes to voice\n",
      "voice.addTickables(notes);\n",
      "\n",
      "// Format and justify the notes to 500 pixels\n",
      "var formatter = new Vex.Flow.Formatter().\n",
      "joinVoices([voice]).format([voice], 500);\n",
      "\n",
      "// Render voice\n",
      "voice.draw(ctx, stave);\n",
      "\n",
      "\"\"\"\n",
      "\n",
      "js_libs = [\"http://vexflow.com/support/raphael.js\", \"http://vexflow.com/support/vexflow-min.js\"]\n",
      "\n",
      "Javascript(data=js, lib=js_libs)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "$.getScript(\"http://vexflow.com/support/raphael.js\", function () {\n",
        "$.getScript(\"http://vexflow.com/support/vexflow-min.js\", function () {\n",
        "\n",
        "element.html(\"<canvas width=700 height=100 id='music21Canvas1'></canvas>\");\n",
        "container.show();\n",
        "\n",
        "var canvas = $(\"#music21Canvas1\")[0];\n",
        "var renderer = new Vex.Flow.Renderer(canvas,\n",
        "Vex.Flow.Renderer.Backends.CANVAS);\n",
        "\n",
        "var ctx = renderer.getContext();\n",
        "var stave = new Vex.Flow.Stave(10, 0, 500);\n",
        "stave.addClef(\"treble\").setContext(ctx).draw();\n",
        "\n",
        "// Create the notes\n",
        "var notes = [\n",
        "// A quarter-note C.\n",
        "new Vex.Flow.StaveNote({ keys: [\"c/4\"], duration: \"q\" }),\n",
        "\n",
        "// A quarter-note D.\n",
        "new Vex.Flow.StaveNote({ keys: [\"d/4\"], duration: \"q\" }),\n",
        "\n",
        "// A quarter-note rest. Note that the key (b/4) specifies the vertical\n",
        "// position of the rest.\n",
        "new Vex.Flow.StaveNote({ keys: [\"b/4\"], duration: \"qr\" }),\n",
        "\n",
        "// A C-Major chord.\n",
        "new Vex.Flow.StaveNote({ keys: [\"c/4\", \"e/4\", \"g/4\"], duration: \"q\" })\n",
        "];\n",
        "\n",
        "// Create a voice in 4/4\n",
        "var voice = new Vex.Flow.Voice({\n",
        "num_beats: 4,\n",
        "beat_value: 4,\n",
        "resolution: Vex.Flow.RESOLUTION\n",
        "});\n",
        "\n",
        "// Add notes to voice\n",
        "voice.addTickables(notes);\n",
        "\n",
        "// Format and justify the notes to 500 pixels\n",
        "var formatter = new Vex.Flow.Formatter().\n",
        "joinVoices([voice]).format([voice], 500);\n",
        "\n",
        "// Render voice\n",
        "voice.draw(ctx, stave);\n",
        "\n",
        "});\n",
        "});\n"
       ],
       "output_type": "pyout",
       "prompt_number": 9,
       "text": [
        "<IPython.core.display.Javascript at 0x48802f0>"
       ]
      }
     ],
     "prompt_number": 9
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 9
    }
   ],
   "metadata": {}
  }
 ]
}