{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true,
    "execution": {
     "iopub.execute_input": "2020-09-13T09:08:16.030334Z",
     "iopub.status.busy": "2020-09-13T09:08:16.028609Z",
     "iopub.status.idle": "2020-09-13T09:08:16.032740Z",
     "shell.execute_reply": "2020-09-13T09:08:16.033658Z"
    }
   },
   "outputs": [],
   "source": [
    "from IPython.display import Javascript, display"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": true,
    "execution": {
     "iopub.execute_input": "2020-09-13T09:08:16.043165Z",
     "iopub.status.busy": "2020-09-13T09:08:16.039602Z",
     "iopub.status.idle": "2020-09-13T09:08:16.046761Z",
     "shell.execute_reply": "2020-09-13T09:08:16.048634Z"
    }
   },
   "outputs": [],
   "source": [
    "s = (\n",
    "    'var canvas = document.createElement(\"canvas\");'\n",
    "    'canvas.height= 400;'\n",
    "    'canvas.width = 400;'\n",
    "    'document.body.appendChild(canvas);'\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false,
    "execution": {
     "iopub.execute_input": "2020-09-13T09:08:16.069928Z",
     "iopub.status.busy": "2020-09-13T09:08:16.068839Z",
     "iopub.status.idle": "2020-09-13T09:08:16.076093Z",
     "shell.execute_reply": "2020-09-13T09:08:16.077187Z"
    }
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "var canvas = document.createElement(\"canvas\");canvas.height= 400;canvas.width = 400;document.body.appendChild(canvas);"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display(Javascript(s))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false,
    "execution": {
     "iopub.execute_input": "2020-09-13T09:08:16.088904Z",
     "iopub.status.busy": "2020-09-13T09:08:16.087985Z",
     "iopub.status.idle": "2020-09-13T09:08:16.092913Z",
     "shell.execute_reply": "2020-09-13T09:08:16.091849Z"
    }
   },
   "outputs": [],
   "source": [
    "class MyCircle(object):\n",
    "    def __init__(self, center=(0.0, 0.0), radius=1.0, color='blue'):\n",
    "        self.center = center\n",
    "        self.radius = radius\n",
    "        self.color = color\n",
    "\n",
    "    def _repr_html_(self):\n",
    "        return \"&#x25CB; (<b>html</b>)\"\n",
    "\n",
    "    def _repr_svg_(self):\n",
    "        return \"\"\"<svg width=\"100px\" height=\"100px\">\n",
    "           <circle cx=\"50\" cy=\"50\" r=\"20\" stroke=\"black\" stroke-width=\"1\" fill=\"blue\"/>\n",
    "        </svg>\"\"\"\n",
    "\n",
    "    def _repr_latex_(self):\n",
    "        return r\"$\\bigcirc \\LaTeX$\"\n",
    "\n",
    "    def _repr_javascript_(self):\n",
    "        s = (\n",
    "            'var canvas = document.createElement(\"canvas\");'\n",
    "            'canvas.height= 400;'\n",
    "            'canvas.width = 400;'\n",
    "            'document.body.appendChild(canvas);'\n",
    "        )\n",
    "        return s"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": true,
    "execution": {
     "iopub.execute_input": "2020-09-13T09:08:16.098891Z",
     "iopub.status.busy": "2020-09-13T09:08:16.098101Z",
     "iopub.status.idle": "2020-09-13T09:08:16.101392Z",
     "shell.execute_reply": "2020-09-13T09:08:16.102053Z"
    }
   },
   "outputs": [],
   "source": [
    "a = MyCircle()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": false,
    "execution": {
     "iopub.execute_input": "2020-09-13T09:08:16.111968Z",
     "iopub.status.busy": "2020-09-13T09:08:16.110765Z",
     "iopub.status.idle": "2020-09-13T09:08:16.119092Z",
     "shell.execute_reply": "2020-09-13T09:08:16.117231Z"
    }
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "var canvas = document.createElement(\"canvas\");canvas.height= 400;canvas.width = 400;document.body.appendChild(canvas);"
      ],
      "image/svg+xml": [
       "<svg width=\"100px\" height=\"100px\">\n",
       "           <circle cx=\"50\" cy=\"50\" r=\"20\" stroke=\"black\" stroke-width=\"1\" fill=\"blue\"/>\n",
       "        </svg>"
      ],
      "text/html": [
       "&#x25CB; (<b>html</b>)"
      ],
      "text/latex": [
       "$\\bigcirc \\LaTeX$"
      ],
      "text/plain": [
       "<__main__.MyCircle at 0x7f7df19d5760>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "anaconda-cloud": {},
  "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.8.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}