docker run -p 127.0.0.1:8888:8888 -v `pwd`:/work dimdm/notebook

JavaScript.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# JavaScript\n",
    "\n",
    "`&&javascript` sets the notebook to JavaScript"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "element.html(\"<p style='text-decoration:overline;background-color:lightgreen;'>DOM manipulations</p>\");\n",
       "element.append(\"...\");"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "element.html(\"<p style='text-decoration:overline;background-color:lightgreen;'>DOM manipulations</p>\");\n",
    "element.append(\"...\");"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<p style=\"text-decoration:underline;background-color:lightblue;\">Plain HTML</p>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "\n",
    "<p style=\"text-decoration:underline;background-color:lightblue;\">Plain HTML</p>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## [D3.js](https://d3js.org)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "const data = [\n",
       "    { x: 30, y: 30, r: 20, value: \"#F00\"   },\n",
       "    { x: 60, y: 60, r: 20, value: \"#0F0\" },\n",
       "    { x: 90, y: 90, r: 20, value: \"#00F\"  }\n",
       "];\n",
       "element.html(\"<div id='circles'></div>\");\n",
       "require.config({paths:{d3:\"https://d3js.org/d3.v4.min\"}});\n",
       "require([\"d3\"], function (d3) {\n",
       "    d3.select(\"#circles\")\n",
       "        .append(\"svg\").attr(\"width\", 110).attr(\"height\", 110)\n",
       "        .selectAll(\"circle\").data(data).enter().append(\"circle\")\n",
       "            .attr(\"cx\", function (d) { return d.x; })\n",
       "            .attr(\"cy\", function (d) { return d.y; })\n",
       "            .attr(\"r\" , function (d) { return d.r; })\n",
       "            .style(\"fill\", function (d) { return d.value; })\n",
       "            .on(\"mouseover\", function (d) { d3.select(this).style(\"fill\", \"#B0B\"); })\n",
       "            .on(\"mouseout\", function(d) { d3.select(this).style(\"fill\", d.value); });\n",
       "});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "const data = [\n",
    "    { x: 30, y: 30, r: 20, value: \"#F00\"   },\n",
    "    { x: 60, y: 60, r: 20, value: \"#0F0\" },\n",
    "    { x: 90, y: 90, r: 20, value: \"#00F\"  }\n",
    "];\n",
    "element.html(\"<div id='circles'></div>\");\n",
    "require.config({paths:{d3:\"https://d3js.org/d3.v4.min\"}});\n",
    "require([\"d3\"], function (d3) {\n",
    "    d3.select(\"#circles\")\n",
    "        .append(\"svg\").attr(\"width\", 110).attr(\"height\", 110)\n",
    "        .selectAll(\"circle\").data(data).enter().append(\"circle\")\n",
    "            .attr(\"cx\", function (d) { return d.x; })\n",
    "            .attr(\"cy\", function (d) { return d.y; })\n",
    "            .attr(\"r\" , function (d) { return d.r; })\n",
    "            .style(\"fill\", function (d) { return d.value; })\n",
    "            .on(\"mouseover\", function (d) { d3.select(this).style(\"fill\", \"#B0B\"); })\n",
    "            .on(\"mouseout\", function(d) { d3.select(this).style(\"fill\", d.value); });\n",
    "});"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Use CORS-friendly data sources"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "element.html(\"<div id='dependencies'></div>\");\n",
       "require.config({\n",
       "    paths:{\n",
       "        d3:\"https://d3js.org/d3.v4.min\",\n",
       "        underscore:\"http://localhost:1880/edit/swagger-ui/reqs/lib/underscore-min\"\n",
       "    }\n",
       "});\n",
       "require([\"d3\", \"underscore\"], function (d3, _) {\n",
       "    d3.json(\"http://localhost:1880/endpoints/package.json\", function (error, data) {\n",
       "        const font = { name: \"Consolas\", size: 14 };\n",
       "        const dependencies = _.keys(data.dependencies);\n",
       "        const versionHidden = function (packageName) { return `${packageName} → ?`; };\n",
       "        const versionShown = function (packageName) { return `${packageName} → ${data.dependencies[packageName]}`; };\n",
       "        const maxLength = _.max(Object.values(_.map(dependencies, function (e) {\n",
       "            return e.length + 3 + data.dependencies[e].length;\n",
       "        })));\n",
       "        let offset = 0;\n",
       "        d3.select(\"#dependencies\")\n",
       "            .append(\"svg\").attr(\"width\", maxLength * font.size).attr(\"height\", dependencies.length * font.size)\n",
       "            .selectAll(\"text\").data(dependencies).enter().append(\"text\")\n",
       "                .attr(\"x\", 0)\n",
       "                .attr(\"y\", function () { return offset+=font.size; })\n",
       "                .attr(\"font-family\", font.name)\n",
       "                .attr(\"font-size\", font.size)\n",
       "                .text(versionHidden)\n",
       "                .on(\"mouseover\", function (d) {\n",
       "                    d3.select(this).style(\"cursor\", \"pointer\").text(versionShown);\n",
       "                })\n",
       "                .on(\"mouseout\", function (d) {\n",
       "                    d3.select(this).style(\"cursor\", \"default\").text(versionHidden);\n",
       "                })\n",
       "                .on(\"click\", function (d) {\n",
       "                    d3.select(this).text(\"Click!\");\n",
       "                });\n",
       "    });\n",
       "});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "element.html(\"<div id='dependencies'></div>\");\n",
    "require.config({\n",
    "    paths:{\n",
    "        d3:\"https://d3js.org/d3.v4.min\",\n",
    "        underscore:\"http://localhost:1880/edit/swagger-ui/reqs/lib/underscore-min\"\n",
    "    }\n",
    "});\n",
    "require([\"d3\", \"underscore\"], function (d3, _) {\n",
    "    d3.json(\"http://localhost:1880/endpoints/package.json\", function (error, data) {\n",
    "        const font = { name: \"Consolas\", size: 14 };\n",
    "        const dependencies = _.keys(data.dependencies);\n",
    "        const versionHidden = function (packageName) { return `${packageName} → ?`; };\n",
    "        const versionShown = function (packageName) { return `${packageName} → ${data.dependencies[packageName]}`; };\n",
    "        const maxLength = _.max(Object.values(_.map(dependencies, function (e) {\n",
    "            return e.length + 3 + data.dependencies[e].length;\n",
    "        })));\n",
    "        let offset = 0;\n",
    "        d3.select(\"#dependencies\")\n",
    "            .append(\"svg\").attr(\"width\", maxLength * font.size).attr(\"height\", dependencies.length * font.size)\n",
    "            .selectAll(\"text\").data(dependencies).enter().append(\"text\")\n",
    "                .attr(\"x\", 0)\n",
    "                .attr(\"y\", function () { return offset+=font.size; })\n",
    "                .attr(\"font-family\", font.name)\n",
    "                .attr(\"font-size\", font.size)\n",
    "                .text(versionHidden)\n",
    "                .on(\"mouseover\", function (d) {\n",
    "                    d3.select(this).style(\"cursor\", \"pointer\").text(versionShown);\n",
    "                })\n",
    "                .on(\"mouseout\", function (d) {\n",
    "                    d3.select(this).style(\"cursor\", \"default\").text(versionHidden);\n",
    "                })\n",
    "                .on(\"click\", function (d) {\n",
    "                    d3.select(this).text(\"Click!\");\n",
    "                });\n",
    "    });\n",
    "});"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# [Polymer.js](https://www.polymer-project.org/1.0/)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "element.append(`\n",
       "    <link rel=\"import\" href=\"http://localhost:1880/endpoints/polymer.html\">\n",
       "    <dom-module id=\"my-component\">\n",
       "        <template>\n",
       "            <ul>\n",
       "                <template\n",
       "                    is=\"dom-repeat\"\n",
       "                    items=\"[[methods]]\"\n",
       "                    as=\"method\">\n",
       "                    <li>[[method]]</li>\n",
       "                </template>\n",
       "            </ul>\n",
       "        </template>\n",
       "    </dom-module>\n",
       "    <template is=\"dom-bind\">\n",
       "        <h2>Polymer settings</h2>\n",
       "        <my-component></my-component>\n",
       "    </template>\n",
       "`);\n",
       "\n",
       "$.getScript(\"http://localhost:1880/lib/webcomponentsjs/webcomponents-lite.js\");\n",
       "\n",
       "Polymer({\n",
       "    is: \"my-component\",\n",
       "    properties: {\n",
       "        methods: {\n",
       "            type: Array,\n",
       "            readonly: true,\n",
       "            value: Object.keys(Polymer.Settings)\n",
       "        }\n",
       "    }\n",
       "});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "element.append(`\n",
    "    <link rel=\"import\" href=\"http://localhost:1880/endpoints/polymer.html\">\n",
    "    <dom-module id=\"my-component\">\n",
    "        <template>\n",
    "            <ul>\n",
    "                <template\n",
    "                    is=\"dom-repeat\"\n",
    "                    items=\"[[methods]]\"\n",
    "                    as=\"method\">\n",
    "                    <li>[[method]]</li>\n",
    "                </template>\n",
    "            </ul>\n",
    "        </template>\n",
    "    </dom-module>\n",
    "    <template is=\"dom-bind\">\n",
    "        <h2>Polymer settings</h2>\n",
    "        <my-component></my-component>\n",
    "    </template>\n",
    "`);\n",
    "\n",
    "$.getScript(\"http://localhost:1880/lib/webcomponentsjs/webcomponents-lite.js\");\n",
    "\n",
    "Polymer({\n",
    "    is: \"my-component\",\n",
    "    properties: {\n",
    "        methods: {\n",
    "            type: Array,\n",
    "            readonly: true,\n",
    "            value: Object.keys(Polymer.Settings)\n",
    "        }\n",
    "    }\n",
    "});"
   ]
  },
  {
   "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.5.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}