hello_dom.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Hello DOM!\n",
    "\n",
    "A one-step at a time introduction to using D3 in Jupyter"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from IPython.core.display import HTML"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<h1>Hello DOM!</h1>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML('''\n",
    "<h1>Hello DOM!</h1>\n",
    "''')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style scoped>\n",
       ".steely {\n",
       "  color: steelblue;\n",
       "  font: 16px script;\n",
       "}\n",
       "</style>\n",
       "<h1 class=\"steely\">Hello DOM!</h1>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML('''\n",
    "<style scoped>\n",
    ".steely {\n",
    "  color: steelblue;\n",
    "  font: 16px script;\n",
    "}\n",
    "</style>\n",
    "<h1 class=\"steely\">Hello DOM!</h1>\n",
    "''')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style scoped>\n",
       ".steely {\n",
       "  color: steelblue;\n",
       "  font: 16px script;\n",
       "}\n",
       "</style>\n",
       "<h1 class=\"steely\" id=\"steely-DOM\">Hello DOM!</h1>\n",
       "<script>$(\"#steely-DOM\").text(\"Hello JavaScript!!\")</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML('''\n",
    "<style scoped>\n",
    ".steely {\n",
    "  color: steelblue;\n",
    "  font: 16px script;\n",
    "}\n",
    "</style>\n",
    "<h1 class=\"steely\" id=\"steely-DOM\">Hello DOM!</h1>\n",
    "<script>$(\"#steely-DOM\").text(\"Hello JavaScript!!\")</script>\n",
    "''')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---------"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script src=\"lib/d3/d3.min.js\"></script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML('<script src=\"lib/d3/d3.min.js\"></script>')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style scoped>\n",
       ".bedazzled {\n",
       "  color: orange;\n",
       "}\n",
       "</style>\n",
       "<div id=\"d3-div-1\"></div>\n",
       "<script>\n",
       "\n",
       "var size_data = [10,20,30];\n",
       "\n",
       "d3.select(\"#d3-div-1\").selectAll('.bedazzled')\n",
       "    .data(size_data)\n",
       "    .enter().append('p')\n",
       "      .attr(\"class\",\"bedazzled\")\n",
       "      .style(\"font-size\", function(d){ return \"\" + d + \"px\";})\n",
       "      .text(\"Hello D3!\");\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML('''\n",
    "<style scoped>\n",
    ".bedazzled {\n",
    "  color: orange;\n",
    "}\n",
    "</style>\n",
    "<div id=\"d3-div-1\"></div>\n",
    "<script>\n",
    "\n",
    "var size_data = [10,20,30];\n",
    "\n",
    "d3.select(\"#d3-div-1\").selectAll('.bedazzled')\n",
    "    .data(size_data)\n",
    "    .enter().append('p')\n",
    "      .attr(\"class\",\"bedazzled\")\n",
    "      .style(\"font-size\", function(d){ return \"\" + d + \"px\";})\n",
    "      .text(\"Hello D3!\");\n",
    "\n",
    "</script>\n",
    "''')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "-----------"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "size_data = [15,30,45]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style scoped> .bedazzled {color: orange;} </style>\n",
       "<div id=\"d3-div-2\"></div>\n",
       "<script>\n",
       "\n",
       "var size_data = [15, 30, 45] ;\n",
       "\n",
       "d3.select(\"#d3-div-2\").selectAll('.bedazzled')\n",
       "    .data(size_data)\n",
       "    .enter().append('p')\n",
       "      .attr(\"class\",\"bedazzled\")\n",
       "      .style(\"font-size\", function(d){ return \"\" + d + \"px\";})\n",
       "      .text(\"Hello D3 with Python data!\");\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from string import Template\n",
    "html_template = Template('''\n",
    "<style scoped> .bedazzled {color: orange;} </style>\n",
    "<div id=\"d3-div-2\"></div>\n",
    "<script>\n",
    "\n",
    "var size_data = $size_data_python ;\n",
    "\n",
    "d3.select(\"#d3-div-2\").selectAll('.bedazzled')\n",
    "    .data(size_data)\n",
    "    .enter().append('p')\n",
    "      .attr(\"class\",\"bedazzled\")\n",
    "      .style(\"font-size\", function(d){ return \"\" + d + \"px\";})\n",
    "      .text(\"Hello D3 with Python data!\");\n",
    "\n",
    "</script>\n",
    "''')\n",
    "HTML(html_template.substitute({'size_data_python': str(size_data)}))"
   ]
  }
 ],
 "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
}