randomized_sketch.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Randomized Sketch"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This is a demonstration of importing a SVG and modifying it with D3."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from IPython.core.display import display, HTML\n",
    "from string import Template\n",
    "import pandas as pd\n",
    "import json, random"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script src=\"lib/d3/d3.min.js\"></script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML('<script src=\"lib/d3/d3.min.js\"></script>')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->\n",
       "<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n",
       "\t viewBox=\"0 0 792 365\" style=\"enable-background:new 0 0 792 365;\" xml:space=\"preserve\">\n",
       "<style type=\"text/css\">\n",
       "\t.st0{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}\n",
       "</style>\n",
       "<circle class=\"st0\" cx=\"152.5\" cy=\"160.5\" r=\"20.5\"/>\n",
       "<circle class=\"st0\" cx=\"308\" cy=\"204\" r=\"10\"/>\n",
       "<circle class=\"st0\" cx=\"372.5\" cy=\"113.5\" r=\"17.5\"/>\n",
       "<circle class=\"st0\" cx=\"229.5\" cy=\"38.5\" r=\"9.5\"/>\n",
       "<circle class=\"st0\" cx=\"209.5\" cy=\"302.5\" r=\"10.5\"/>\n",
       "<circle class=\"st0\" cx=\"474\" cy=\"229\" r=\"15\"/>\n",
       "<rect x=\"74\" y=\"77\" class=\"st0\" width=\"31\" height=\"31\"/>\n",
       "<rect x=\"308\" y=\"276\" class=\"st0\" width=\"42\" height=\"42\"/>\n",
       "<rect x=\"249\" y=\"131\" class=\"st0\" width=\"69\" height=\"21\"/>\n",
       "</svg>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML('''\n",
    "<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->\n",
    "<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n",
    "\t viewBox=\"0 0 792 365\" style=\"enable-background:new 0 0 792 365;\" xml:space=\"preserve\">\n",
    "<style type=\"text/css\">\n",
    "\t.st0{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}\n",
    "</style>\n",
    "<circle class=\"st0\" cx=\"152.5\" cy=\"160.5\" r=\"20.5\"/>\n",
    "<circle class=\"st0\" cx=\"308\" cy=\"204\" r=\"10\"/>\n",
    "<circle class=\"st0\" cx=\"372.5\" cy=\"113.5\" r=\"17.5\"/>\n",
    "<circle class=\"st0\" cx=\"229.5\" cy=\"38.5\" r=\"9.5\"/>\n",
    "<circle class=\"st0\" cx=\"209.5\" cy=\"302.5\" r=\"10.5\"/>\n",
    "<circle class=\"st0\" cx=\"474\" cy=\"229\" r=\"15\"/>\n",
    "<rect x=\"74\" y=\"77\" class=\"st0\" width=\"31\" height=\"31\"/>\n",
    "<rect x=\"308\" y=\"276\" class=\"st0\" width=\"42\" height=\"42\"/>\n",
    "<rect x=\"249\" y=\"131\" class=\"st0\" width=\"69\" height=\"21\"/>\n",
    "</svg>\n",
    "''')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "dx_max, dy_max = 100, 70"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "\n",
       "var a = setInterval(function() {\n",
       "  d3.select(\"svg\").selectAll(\"circle\")\n",
       "    .transition(1000)\n",
       "      .attr(\"transform\", function(d){ \n",
       "        return \"translate(\" + Math.random() * 50 + \",\" + Math.random() * 50  + \")\";\n",
       "      });\n",
       "}, 1000)\n",
       "\n",
       "</script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML(Template('''<script>\n",
    "\n",
    "var a = setInterval(function() {\n",
    "  d3.select(\"svg\").selectAll(\"circle\")\n",
    "    .transition(1000)\n",
    "      .attr(\"transform\", function(d){ \n",
    "        return \"translate(\" + Math.random() * 50 + \",\" + Math.random() * 50  + \")\";\n",
    "      });\n",
    "}, 1000)\n",
    "\n",
    "</script>''').substitute({'dx_max': dx_max, 'dy_max': dy_max}))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<script> clearInterval(a) </script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML('''\n",
    "<script> clearInterval(a) </script>\n",
    "''')"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.10"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}