gistfile1.txt

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style>\n",
       ".hello-world{\n",
       "    border: 1px solid black; \n",
       "    width: 300px; \n",
       "    height: 50px; \n",
       "    font-size: 2em; \n",
       "    padding: 0.3em;\n",
       "}\n",
       "</style>\n",
       "\n",
       "<div class='hello-world'>\n",
       "Hello ,html magic!\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "\n",
    "<style>\n",
    ".hello-world{\n",
    "    border: 1px solid black; \n",
    "    width: 300px; \n",
    "    height: 50px; \n",
    "    font-size: 2em; \n",
    "    padding: 0.3em;\n",
    "}\n",
    "</style>\n",
    "\n",
    "<div class='hello-world'>\n",
    "Hello ,html magic!\n",
    "</div>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "window.get_element = function(el){\n",
       "    if(el){ $(el).html('') }\n",
       "    return (el !== undefined) ? el[0] : $('script').last().parent()[0];\n",
       "};\n",
       "\n",
       "element = undefined;"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "window.get_element = function(el){\n",
    "    if(el){ $(el).html('') }\n",
    "    return (el !== undefined) ? el[0] : $('script').last().parent()[0];\n",
    "};\n",
    "\n",
    "element = undefined;"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "var target = get_element(element)\n",
       "$(target).append('<div class=\"hello-world\">Hello, js magic!</div>')"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "var target = get_element(element)\n",
    "$(target).append('<div class=\"hello-world\">Hello, js magic!</div>')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "require.config({\n",
       "    paths: {\n",
       "        d3: \"http://d3js.org/d3.v3.min\"\n",
       "    }\n",
       "});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "require.config({\n",
    "    paths: {\n",
    "        d3: \"http://d3js.org/d3.v3.min\"\n",
    "    }\n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(){\n",
       "    var targetElement = get_element(element);\n",
       "    require(['d3'], function(){\n",
       "        $(targetElement).append($('<p>' + d3 + '</p>'))\n",
       "    });\n",
       "})();"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "(function(){\n",
    "    var targetElement = get_element(element);\n",
    "    require(['d3'], function(){\n",
    "        $(targetElement).append($('<p>' + d3 + '</p>'))\n",
    "    });\n",
    "})();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(){\n",
       "    var targetElement = get_element(element);\n",
       "    require(['d3'], function(){\n",
       "        $(targetElement).append($('<p>' + d3.max([3,91,82,34,19]) + '</p>'))\n",
       "    });\n",
       "})();"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "(function(){\n",
    "    var targetElement = get_element(element);\n",
    "    require(['d3'], function(){\n",
    "        $(targetElement).append($('<p>' + d3.max([3,91,82,34,19]) + '</p>'))\n",
    "    });\n",
    "})();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(){\n",
       "    var targetElement = get_element(element);\n",
       "    require(['d3'], function(){\n",
       "        var data = [1, 2, 3, 4, 5, 6, 10]\n",
       "        var svg = d3.select(targetElement).append('svg')\n",
       "            .attr('width', '350px')\n",
       "            .attr('height', '100px')\n",
       "            .style('border', '1px solid lightgray');\n",
       "        \n",
       "        svg.selectAll('circle')\n",
       "            .data(data)\n",
       "            .enter()\n",
       "            .append('circle')\n",
       "            .style('fill', 'skyblue')\n",
       "            .attr('cx', function(d, i){ return i * (350/data.length) + 15})\n",
       "            .attr('cy', '50px')\n",
       "            .attr('r', function(d){ return d * 3})\n",
       "    });\n",
       "})();"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "(function(){\n",
    "    var targetElement = get_element(element);\n",
    "    require(['d3'], function(){\n",
    "        var data = [1, 2, 3, 4, 5, 6, 10]\n",
    "        var svg = d3.select(targetElement).append('svg')\n",
    "            .attr('width', '350px')\n",
    "            .attr('height', '100px')\n",
    "            .style('border', '1px solid lightgray');\n",
    "        \n",
    "        svg.selectAll('circle')\n",
    "            .data(data)\n",
    "            .enter()\n",
    "            .append('circle')\n",
    "            .style('fill', 'skyblue')\n",
    "            .attr('cx', function(d, i){ return i * (350/data.length) + 15})\n",
    "            .attr('cy', '50px')\n",
    "            .attr('r', function(d){ return d * 3})\n",
    "    });\n",
    "})();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "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.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}