D3-Circle-Animation.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 72,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from IPython.core.display import display, HTML\n",
    "from string import Template\n",
    "import json"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 64,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script src=\"lib/d3/d3.min.js\"></script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 64,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML('<script src=\"lib/d3/d3.min.js\"></script>')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 91,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "css_text = '''\n",
    "'''"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 89,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "js_text_template = Template('''\n",
    "       var bogoSVG = d3.select(\"#$bogoanimation\") \n",
    "          .append(\"svg\")\n",
    "          .attr(\"width\", 300)\n",
    "          .attr(\"height\", 300);    \n",
    "\n",
    "      var data = $python_data ;\n",
    "       bogoSVG.append(\"circle\")\n",
    "          .style(\"stroke\", \"gray\")\n",
    "          .style(\"fill\", \"cyan\")\n",
    "          .attr(\"r\", data[0]['r'])\n",
    "          .attr(\"cx\", data[0]['cx'])\n",
    "          .attr(\"cy\", data[0]['cy'])\n",
    "          .transition()\n",
    "             .delay(100)\n",
    "             .duration(20000)  \n",
    "             .attr(\"r\", 10)\n",
    "             .attr(\"cx\", data[0]['cx'])\n",
    "             .style(\"fill\", \"blue\"); \n",
    "''')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 86,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "html_template = Template('''\n",
    "<style> $css_text </style>\n",
    "<div id=\"animation\"></div>\n",
    "<script> $js_text </script>\n",
    "''')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 87,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "js_text = js_text_template.substitute({'python_data': json.dumps([{'r': 130, 'cx': 150, 'cy': 150}]),\n",
    "                                       'bogoanimation': 'animation'})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 92,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style> \n",
       " </style>\n",
       "<div id=\"animation\"></div>\n",
       "<script> \n",
       "       var bogoSVG = d3.select(\"#animation\") \n",
       "          .append(\"svg\")\n",
       "          .attr(\"width\", 300)\n",
       "          .attr(\"height\", 300);    \n",
       "\n",
       "      var data = [{\"cy\": 150, \"cx\": 150, \"r\": 130}] ;\n",
       "       bogoSVG.append(\"circle\")\n",
       "          .style(\"stroke\", \"gray\")\n",
       "          .style(\"fill\", \"cyan\")\n",
       "          .attr(\"r\", data[0]['r'])\n",
       "          .attr(\"cx\", data[0]['cx'])\n",
       "          .attr(\"cy\", data[0]['cy'])\n",
       "          .transition()\n",
       "             .delay(100)\n",
       "             .duration(100000)  \n",
       "             .attr(\"r\", 10)\n",
       "             .attr(\"cx\", data[0]['cx'])\n",
       "             .style(\"fill\", \"blue\"); \n",
       " </script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 92,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML(html_template.substitute({'css_text': css_text, 'js_text': js_text}))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  },
  {
   "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.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}