JavaScript and HTML in the notebook.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Displaying rich HTML elements in the Notebook"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Displaying SVG in the Notebook"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "def svg_disc(radius, color):\n",
    "    return \"\"\"<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\">\n",
    "          <circle cx=\"{0:d}\" cy=\"{0:d}\" r=\"{0:d}\" fill=\"{1:s}\" />\n",
    "          </svg>\"\"\".format(radius, color)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "class Disc(object):\n",
    "    def __init__(self, radius, color='red'):\n",
    "        self.radius = radius\n",
    "        self.color = color\n",
    "\n",
    "    def _repr_svg_(self):\n",
    "        return svg_disc(self.radius, self.color)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "Disc(60, 'purple')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### JavaScript and D3 in the Notebook"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from IPython.display import display_javascript"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "JS_TEMPLATE = \"\"\"\n",
    "// We load the d3.js library from the Web.\n",
    "require.config({paths: {d3: \"http://d3js.org/d3.v3.min\"}});\n",
    "require([\"d3\"], function(d3) {\n",
    "    // Example from http://bost.ocks.org/mike/bar/\n",
    "\n",
    "    // Define the data.\n",
    "    var data = %s;\n",
    "\n",
    "    // We normalize the data.\n",
    "    var x = d3.scale.linear()\n",
    "        .domain([0, d3.max(data)])\n",
    "        .range([0, 420]);\n",
    "\n",
    "    // We define a categorical color map.\n",
    "    var color = d3.scale.category10();\n",
    "\n",
    "    // We create the chart.\n",
    "    d3.select(\".chart\")\n",
    "      .selectAll(\"div\")\n",
    "        .data(data)\n",
    "      .enter().append(\"div\")\n",
    "        .style(\"width\", function(d) { return x(d) + \"px\"; })\n",
    "        .text(function(d) { return d; });\n",
    "\n",
    "});\n",
    "\"\"\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "my_list = [2, 3, 5, 7, 11, 13]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "JS = JS_TEMPLATE % str(my_list)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style>\n",
       ".chart div {\n",
       "  font: 18px sans-serif;\n",
       "  background-color: steelblue;\n",
       "  text-align: right;\n",
       "  padding: 5px;\n",
       "  margin: 3px;\n",
       "  color: white;\n",
       "}\n",
       "</style>\n",
       "<div class=\"chart\"></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%HTML\n",
    "<style>\n",
    ".chart div {\n",
    "  font: 18px sans-serif;\n",
    "  background-color: steelblue;\n",
    "  text-align: right;\n",
    "  padding: 5px;\n",
    "  margin: 3px;\n",
    "  color: white;\n",
    "}\n",
    "</style>\n",
    "<div class=\"chart\"></div>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "// We load the d3.js library from the Web.\n",
       "require.config({paths: {d3: \"http://d3js.org/d3.v3.min\"}});\n",
       "require([\"d3\"], function(d3) {\n",
       "    // Example from http://bost.ocks.org/mike/bar/\n",
       "\n",
       "    // Define the data.\n",
       "    var data = [2, 3, 5, 7, 11, 13];\n",
       "\n",
       "    // We normalize the data.\n",
       "    var x = d3.scale.linear()\n",
       "        .domain([0, d3.max(data)])\n",
       "        .range([0, 420]);\n",
       "\n",
       "    // We define a categorical color map.\n",
       "    var color = d3.scale.category10();\n",
       "\n",
       "    // We create the chart.\n",
       "    d3.select(\".chart\")\n",
       "      .selectAll(\"div\")\n",
       "        .data(data)\n",
       "      .enter().append(\"div\")\n",
       "        .style(\"width\", function(d) { return x(d) + \"px\"; })\n",
       "        .text(function(d) { return d; });\n",
       "\n",
       "});\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display_javascript(JS, raw=True)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.1"
  },
  "varInspector": {
   "cols": {
    "lenName": 16,
    "lenType": 16,
    "lenVar": 40
   },
   "kernels_config": {
    "python": {
     "delete_cmd_postfix": "",
     "delete_cmd_prefix": "del ",
     "library": "var_list.py",
     "varRefreshCmd": "print(var_dic_list())"
    },
    "r": {
     "delete_cmd_postfix": ") ",
     "delete_cmd_prefix": "rm(",
     "library": "var_list.r",
     "varRefreshCmd": "cat(var_dic_list()) "
    }
   },
   "types_to_exclude": [
    "module",
    "function",
    "builtin_function_or_method",
    "instance",
    "_Feature"
   ],
   "window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}