Skip to content

Instantly share code, notes, and snippets.

@ddm
Last active September 22, 2017 21:19
Show Gist options
  • Save ddm/23742014a7db2573f3631c754e2cd7d1 to your computer and use it in GitHub Desktop.
Save ddm/23742014a7db2573f3631c754e2cd7d1 to your computer and use it in GitHub Desktop.
docker run -p 127.0.0.1:8888:8888 -v `pwd`:/work dimdm/notebook
Display the source blob
Display the rendered blob
Raw
{
"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
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment