Skip to content

Instantly share code, notes, and snippets.

@rdhyee

rdhyee/notebook_javascript_examples.ipynb

Last active December 20, 2015 12:29
Show Gist options
  • Save rdhyee/6131622 to your computer and use it in GitHub Desktop.
Save rdhyee/6131622 to your computer and use it in GitHub Desktop.
Download ZIP
some primitive examples of integrating JavaScript into IPython notebook (including vexflow)
Display the source blob
Display the rendered blob
Raw
notebook_javascript_examples.ipynb
{
"metadata": {
"name": "notebook_javascript_examples"
},
"nbformat": 3,
"nbformat_minor": 0,
"worksheets": [
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"<style>\n",
" .coin {width: 55px;}\n",
"</style>"
]
},
{
"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": 10,
"text": [
"<IPython.core.display.HTML at 0x47bf4b0>"
]
}
],
"prompt_number": 10
},
{
"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": 11,
"text": [
"<IPython.core.display.Javascript at 0x47bf870>"
]
}
],
"prompt_number": 11
},
{
"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": 12,
"text": [
"<IPython.core.display.Javascript at 0x47bf250>"
]
}
],
"prompt_number": 12
},
{
"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": 13
},
{
"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/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/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/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/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/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/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/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/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/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/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/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/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/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'/>"
],
"output_type": "pyout",
"prompt_number": 14,
"text": [
"<IPython.core.display.HTML at 0x47bfc10>"
]
}
],
"prompt_number": 14
},
{
"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": 15,
"text": [
"<IPython.core.display.Javascript at 0x47bf410>"
]
}
],
"prompt_number": 15
},
{
"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": 16,
"text": [
"<IPython.core.display.Javascript at 0x47bf5b0>"
]
}
],
"prompt_number": 16
},
{
"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": 17,
"text": [
"<IPython.core.display.Javascript at 0x47bf550>"
]
}
],
"prompt_number": 17
},
{
"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": 18,
"text": [
"<IPython.core.display.Javascript at 0x47bf670>"
]
}
],
"prompt_number": 18
},
{
"cell_type": "code",
"collapsed": false,
"input": [],
"language": "python",
"metadata": {},
"outputs": []
}
],
"metadata": {}
}
]
}
@KelSolaar
Copy link

@rdhyee: Does the datatable cell still works for you?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment