D3.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "![alt text](https://github.com/callysto/callysto-sample-notebooks/blob/master/notebooks/images/Callysto_Notebook-Banner_Top_06.06.18.jpg?raw=true)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Animations in D3\n",
    "\n",
    "D3 is an amazing collection of tools for creating data driving documents (ddd=D3). It is also a great tool for creating animations. You can read about it here: https://d3js.org/\n",
    "\n",
    "Two issues arise in using D3. First, it is written in Javascript so you need to learn Javascript to do this well. Second, your Jupyter notebook has security measures in place to avoid what it suspects might be malicious (dangerous) code.\n",
    "\n",
    "To learn Javascript you can search online for tutorials.\n",
    "\n",
    "To get your notebook tobypass the security: we write the Javascript code in the notebook, then save it as a .html file. We then use some Python code to load in this .html code. \n",
    "\n",
    "Here is an example.\n",
    "\n",
    "**First step** is to load in the IFrame tool, which will be used to display the animation encoded in the .html file. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import IFrame"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Next,** we create a file called myFile.html, and write the following Javascript code into the file. \n",
    "\n",
    "This .html file is rather complex. Main things to notice is that in the <head> section, it loads in the D3 code from a remote site. In the <body> section, it creates an svg canvas where the animation will happen. The animation involves a bunch of balls that bounce into each other. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Overwriting myFile.html\n"
     ]
    }
   ],
   "source": [
    "%%writefile myFile.html\n",
    "<!DOCTYPE html>\n",
    "<html>\n",
    "<head>\n",
    "    <script src=\"//cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js\"></script>\n",
    "    <script src=\"//unpkg.com/d3-force-bounce\"></script>\n",
    "    <script src=\"//unpkg.com/d3-force-constant\"></script>\n",
    "</head>\n",
    "\n",
    "<style>\n",
    "body {\n",
    "    margin: 0;\n",
    "    text-align: center;\n",
    "}\n",
    "\n",
    ".ball {\n",
    "    cursor: grab;\n",
    "    cursor: -webkit-grab;\n",
    "}\n",
    "\n",
    ".ball:active {\n",
    "    cursor: grabbing;\n",
    "    cursor: -webkit-grabbing;\n",
    "}\n",
    "</style>\n",
    "\n",
    "<body>\n",
    "    <svg id=\"canvas\">\n",
    "        <defs>\n",
    "            <radialGradient id=\"sphere-gradient\">\n",
    "                <stop offset=\"0%\" stop-color=\"MediumPurple\"></stop>\n",
    "                <stop offset=\"100%\" stop-color=\"Indigo\"></stop>\n",
    "            </radialGradient>\n",
    "        </defs>\n",
    "    </svg>\n",
    "</body>\n",
    "\n",
    "<script>\n",
    "\n",
    "var width = 400, height = 400\n",
    "const BALL_SIZE = 20,\n",
    "\tBALL_OFFSET = window.innerHeight/8,\n",
    "\tBALL_SPEED = 3;\n",
    "\n",
    "const canvasWidth = window.innerWidth,\n",
    "\tcanvasHeight = window.innerHeight;\n",
    "\n",
    "// DOM nodes\n",
    "const svgCanvas = d3.select('svg#canvas')\n",
    "\t\t.attr('width', canvasWidth)\n",
    "\t\t.attr('height', canvasHeight),\n",
    "\twiresG = svgCanvas.append('g'),\n",
    "\tballsG = svgCanvas.append('g');\n",
    "\n",
    "const balls = [\n",
    "\t\t{ id: '0', init: { x: canvasWidth/2 - 6*BALL_SIZE, y: canvasHeight*1/3, vx: 0, vy: 0 } },\n",
    "\t\t{ id: '1', init: { x: canvasWidth/2 - 3*BALL_SIZE, y: canvasHeight*(1/3 + .01), vx: 0, vy: 0 } },\n",
    "\t\t{ id: '2', init: { x: canvasWidth/2 - 0*BALL_SIZE, y: canvasHeight*1/3, vx: 0, vy: 0 } },\n",
    "\t\t{ id: '3', init: { x: canvasWidth/2 + 3*BALL_SIZE, y: canvasHeight*1/3, vx: 0, vy: 0 } },\n",
    "\t\t{ id: '4', init: { x: canvasWidth/2 + 6*BALL_SIZE, y: canvasHeight*1/3, vx: 0, vy: 0 } }\n",
    "\t];\n",
    "\n",
    "\t// start the left ball moving\n",
    "\tballs[0].init.x -= BALL_OFFSET;\n",
    "\tballs[0].init.y -= 0;\n",
    "    balls[0].init.vx = BALL_SPEED;\n",
    "\n",
    "let init = false;\n",
    "\n",
    "const forceSim = d3.forceSimulation()\n",
    "\t.alphaDecay(0)\n",
    "\t.velocityDecay(0)\n",
    "\t.nodes([...balls])\n",
    "\t.force('elastic', d3.forceBounce()\n",
    "\t\t.radius(node => BALL_SIZE)\n",
    "        .elasticity(1)\n",
    "\t)\n",
    "\t.force('init', () => {\n",
    "\t\tif (!init) {\n",
    "\t\t\tballs.forEach((ball) => {\n",
    "\t\t\t\tball.x = ball.init.x;\n",
    "\t\t\t\tball.y = ball.init.y;\n",
    "\t\t\t\tball.vx = ball.init.vx;\n",
    "\t\t\t\tball.vy = ball.init.vy;\n",
    "\t\t\t});\n",
    "\t\t\tinit = true;\n",
    "\t\t}\n",
    "\t})\n",
    "\t.on('tick', () => { ballDigest(); });\n",
    "\n",
    "//\n",
    "\n",
    "// Periodical kickstart\n",
    "kickStart();\n",
    "setInterval(kickStart, 5000);\n",
    "\n",
    "function ballDigest() {\n",
    "\tlet ball = ballsG.selectAll('circle.ball').data(balls);\n",
    "\n",
    "\tball.exit().remove();\n",
    "\n",
    "\tball.merge(\n",
    "\t\tball.enter().append('circle')\n",
    "\t\t\t.classed('ball', true)\n",
    "\t\t\t.attr('r', BALL_SIZE)\n",
    "\t\t\t.attr('fill', 'url(#sphere-gradient)')\n",
    "\t\t\t.call(d3.drag()\n",
    "\t\t\t\t.on(\"start\", d => { d.fx = d.x; d.fy = d.y; })\n",
    "\t\t\t\t.on(\"drag\", d => { d.fx = d3.event.x; d.fy = d3.event.y; })\n",
    "\t\t\t\t.on(\"end\", d => { d.fx = null; d.fy = null; })\n",
    "\t\t\t)\n",
    "\t)\n",
    "\t\t.attr('cx', d => d.x)\n",
    "\t\t.attr('cy', d => d.y);\n",
    "}\n",
    "\n",
    "function kickStart() {\n",
    "\t\t\tballs.forEach((ball) => {\n",
    "\t\t\t\tball.x = ball.init.x;\n",
    "\t\t\t\tball.y = ball.init.y;\n",
    "\t\t\t\tball.vx = ball.init.vx;\n",
    "\t\t\t\tball.vy = ball.init.vy;\n",
    "\t\t\t});\n",
    "}\n",
    "\n",
    "\n",
    "  </script>\n",
    "</html>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Finally,** we call us IFrame to load in the .html file and make it run."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "        <iframe\n",
       "            width=\"500\"\n",
       "            height=\"500\"\n",
       "            src=\"myFile.html\"\n",
       "            frameborder=\"0\"\n",
       "            allowfullscreen\n",
       "        ></iframe>\n",
       "        "
      ],
      "text/plain": [
       "<IPython.lib.display.IFrame at 0x7fa680d2e5c0>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "IFrame('myFile.html',500,500)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "![Callysto Logo](CallystoLogo.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Example 2\n",
    "\n",
    "Here is a remote PNG file displayed, loaded in from the internet. The code is\n",
    "```\n",
    "![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Example 3\n",
    "\n",
    "Here is a local PNG file displayed, in HTML syntax. Here, we can control the width of the displayed image. The code is\n",
    "```\n",
    "<img src=\"CallystoLogo.png\" alt=\"drawing\" width=\"200\"/>\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<img src=\"CallystoLogo.png\" alt=\"drawing\" width=\"200\"/>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Example 4\n",
    "\n",
    "Finally, here we load in a remote PNG file for display, in HTML syntax. Here, we can control the width of the displayed image. The code is\n",
    "```\n",
    "<img src=\"https://octodex.github.com/images/yaktocat.png\" alt=\"drawing\" width=\"200\"/>\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<img src=\"https://octodex.github.com/images/yaktocat.png\" alt=\"drawing\" width=\"200\"/>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "![alt text](https://github.com/callysto/callysto-sample-notebooks/blob/master/notebooks/images/Callysto_Notebook-Banners_Bottom_06.06.18.jpg?raw=true)"
   ]
  }
 ],
 "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.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}