gistfile1.txt

{
 "metadata": {
  "name": "",
  "signature": "sha256:d0e242ec0ee3bf0798a38aba54eda99ab710de1890ddab0f0b6fd91939170314"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Basic display objects"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Try using the basic display classes in a notebook:\n",
      "\n",
      "* Find an image on the internet and display it in a notebook using the `Image` class. You can either save the image in the notebook's directory or load it by its URL.\n",
      "* Use the `HTML` class and the `%%html` cell magic to display a snippet of HTML.\n",
      "* Use the `JavaScript` class and the `%%javascript` cell magic to run a snippet of JavaScript.\n",
      "* Try displaying these objects by both returning them from an expression and by passing them to `display`."
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Find an image on the internet and display it in a notebook using the Image class. You can either save the image in the notebook's directory or load it by its URL"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import display, display_png, Image\n",
      "image = Image(url='http://www.parsely.com/media/img/dash-masthead-hires.png')\n",
      "display(image)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<img src=\"http://www.parsely.com/media/img/dash-masthead-hires.png\"/>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Image at 0x102968250>"
       ]
      }
     ],
     "prompt_number": 9
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Use the HTML class and the %%html cell magic to display a snippet of HTML."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import HTML\n",
      "html = HTML(\"\"\"\n",
      "<table>\n",
      "    <tr>\n",
      "        <th>First Name</th>\n",
      "        <th>Last Name</th>\n",
      "    </tr>\n",
      "    <tr>\n",
      "        <td>Mike</td>\n",
      "        <td>Sukmanowsky</td>\n",
      "    </tr>\n",
      "</table>\"\"\")\n",
      "display(html)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "\n",
        "<table>\n",
        "    <tr>\n",
        "        <th>First Name</th>\n",
        "        <th>Last Name</th>\n",
        "    </tr>\n",
        "    <tr>\n",
        "        <td>Mike</td>\n",
        "        <td>Sukmanowsky</td>\n",
        "    </tr>\n",
        "</table>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x1031aa110>"
       ]
      }
     ],
     "prompt_number": 14
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<table>\n",
      "    <tr>\n",
      "        <th>First Name</th>\n",
      "        <th>Last Name</th>\n",
      "    </tr>\n",
      "    <tr>\n",
      "        <td>Mike</td>\n",
      "        <td>Sukmanowsky</td>\n",
      "    </tr>\n",
      "</table>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<table>\n",
        "    <tr>\n",
        "        <th>First Name</th>\n",
        "        <th>Last Name</th>\n",
        "    </tr>\n",
        "    <tr>\n",
        "        <td>Mike</td>\n",
        "        <td>Sukmanowsky</td>\n",
        "    </tr>\n",
        "</table>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x102968950>"
       ]
      }
     ],
     "prompt_number": 13
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Use the JavaScript class and the %%javascript cell magic to run a snippet of JavaScript."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import Javascript\n",
      "js = Javascript(\"\"\"\n",
      "window.alert('hello, mike');\"\"\")\n",
      "display(js)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "\n",
        "window.alert('hello, mike');"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x1031aa4d0>"
       ]
      }
     ],
     "prompt_number": 15
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "window.alert('hello, mike');"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "window.alert('hello, mike');"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x1031aa390>"
       ]
      }
     ],
     "prompt_number": 16
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "SoundCloud"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Go to [SoundCloud](http://soundcloud.com) and search for a sound clip you want to embed in your notebook.  To find the HTML code to embed the sound, click on the \"Share\" link and copy the \"Embed\" URL. Paste it into a cell using the `%%html` magic."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<iframe width=\"100%\" height=\"450\" scrolling=\"no\" frameborder=\"no\" src=\"https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/41671460&amp;auto_play=false&amp;hide_related=false&amp;visual=true\"></iframe>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<iframe width=\"100%\" height=\"450\" scrolling=\"no\" frameborder=\"no\" src=\"https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/41671460&amp;auto_play=false&amp;hide_related=false&amp;visual=true\"></iframe>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x10317aa10>"
       ]
      }
     ],
     "prompt_number": 19
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Rich output on nbviewer"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Rich output is also supported on http://nbviewer.ipython.org. To test this create a new notebook that has different types of rich output:\n",
      "\n",
      "* HTML\n",
      "* JPEG/PNG (use matplotlib)\n",
      "* JavaScript\n",
      "* LaTeX\n",
      "\n",
      "After creating this notebook, upload it to http://gist.github.com and then view the notebook on http://nbviewer.ipython.org."
     ]
    }
   ],
   "metadata": {}
  }
 ]
}