scatterplot.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [],
   "source": [
    "# from IPython.display import HTML\n",
    "randomData = [2,3,6,19,23,35]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 106,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<html>\n",
       "  <head>\n",
       "    <script type=\"text/javascript\">\n",
       "        circleData = [2, 3, 6, 19, 23, 35]; \n",
       "    </script>\n",
       "  </head>\n",
       "  <body>\n",
       "      Here is the graph\n",
       "      <div id=\"graph1\"></div>\n",
       "      Here is the end of the graph. \n",
       "      Graph looks pretty ugly at this point.\n",
       "  </body>\n",
       "</html>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 106,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "html_code =\"\"\"\n",
    "<html>\n",
    "  <head>\n",
    "    <script type=\"text/javascript\">\n",
    "        circleData = %s; \n",
    "    </script>\n",
    "  </head>\n",
    "  <body>\n",
    "      Here is the graph\n",
    "      <div id=\"graph1\"></div>\n",
    "      Here is the end of the graph. \n",
    "      Graph looks pretty ugly at this point.\n",
    "  </body>\n",
    "</html>\"\"\" % (randomData)\n",
    "HTML(html_code)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 107,
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "require.config({paths: {d3: \"//d3js.org/d3.v4.min\",}});\n",
       "\n",
       "require([\"d3\"], function(d3) {\n",
       "\n",
       "    // Use this to keep the screen clean\n",
       "   d3.select(\"div#graph1\").selectAll(\"*\").remove();\n",
       "    \n",
       "    // Same as example 5, just condensed \n",
       "    var vis = d3.select(\"div#graph1\").append(\"svg\")\n",
       "        .attr(\"width\", \"400px\")\n",
       "        .attr(\"height\", \"400px\");\n",
       "    console.log(circleData)\n",
       "    // Update the data with circleData! \t\n",
       "    var newCircles = vis.selectAll(\"circle\").data(circleData);\n",
       "    // Nothing happens at this point because the data is not entered yet\n",
       "    // So let's enter the data and use it to position (cx,cy) and size (r) the circles\n",
       "    newCircles.enter().append(\"circle\")\n",
       "        .attr(\"cx\", function(d) { return d; })\n",
       "        .attr(\"cy\", function(d) { return d; })\n",
       "        .attr(\"r\", function(d) { return d; })\n",
       "})"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "require.config({paths: {d3: \"//d3js.org/d3.v4.min\",}});\n",
    "\n",
    "require([\"d3\"], function(d3) {\n",
    "\n",
    "    // Use this to keep the screen clean\n",
    "   d3.select(\"div#graph1\").selectAll(\"*\").remove();\n",
    "    \n",
    "    // Same as example 5, just condensed \n",
    "    var vis = d3.select(\"div#graph1\").append(\"svg\")\n",
    "        .attr(\"width\", \"400px\")\n",
    "        .attr(\"height\", \"400px\");\n",
    "    console.log(circleData)\n",
    "    // Update the data with circleData! \t\n",
    "    var newCircles = vis.selectAll(\"circle\").data(circleData);\n",
    "    // Nothing happens at this point because the data is not entered yet\n",
    "    // So let's enter the data and use it to position (cx,cy) and size (r) the circles\n",
    "    newCircles.enter().append(\"circle\")\n",
    "        .attr(\"cx\", function(d) { return d; })\n",
    "        .attr(\"cy\", function(d) { return d; })\n",
    "        .attr(\"r\", function(d) { return d; })\n",
    "})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 108,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<html>\n",
       "  <head>\n",
       "    <script type=\"text/javascript\">\n",
       "        circleData = [2, 3, 6, 19, 23, 35]; \n",
       "    </script>\n",
       "  </head>\n",
       "  <body>\n",
       "      Here is the graph\n",
       "      <div id=\"graph2\"></div>\n",
       "      Here is the end of the graph\n",
       "  </body>\n",
       "</html>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 108,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "html_code =\"\"\"\n",
    "<html>\n",
    "  <head>\n",
    "    <script type=\"text/javascript\">\n",
    "        circleData = %s; \n",
    "    </script>\n",
    "  </head>\n",
    "  <body>\n",
    "      Here is the graph\n",
    "      <div id=\"graph2\"></div>\n",
    "      Here is the end of the graph\n",
    "  </body>\n",
    "</html>\"\"\" % (randomData)\n",
    "HTML(html_code)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 109,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "require.config({paths: {d3: \"//d3js.org/d3.v4.min\",}});\n",
       "\n",
       "require([\"d3\"], function(d3) {\n",
       "\n",
       "    // Use this to keep the screen clean\n",
       "   d3.select(\"div#graph2\").selectAll(\"*\").remove();\n",
       "    \n",
       "    // Same as example 5, just condensed \n",
       "    var vis = d3.select(\"div#graph2\").append(\"svg\")\n",
       "        .attr(\"width\", \"400px\")\n",
       "        .attr(\"height\", \"400px\");\n",
       "    \n",
       "    // Update the data with circleData! \t\n",
       "    var newCircles = vis.selectAll(\"circle\").data(circleData);\n",
       "    // Nothing happens at this point because the data is not entered yet\n",
       "    // So let's enter the data and use it to position (cx,cy) and size (r) the circles\n",
       "    newCircles.enter().append(\"circle\")\n",
       "        .attr(\"cx\", function(d) { return d*5; })\n",
       "        .attr(\"cy\", function(d) { return d*5; })\n",
       "        .attr(\"r\", function(d) { return d; })\n",
       "})"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "require.config({paths: {d3: \"//d3js.org/d3.v4.min\",}});\n",
    "\n",
    "require([\"d3\"], function(d3) {\n",
    "\n",
    "    // Use this to keep the screen clean\n",
    "   d3.select(\"div#graph2\").selectAll(\"*\").remove();\n",
    "    \n",
    "    // Same as example 5, just condensed \n",
    "    var vis = d3.select(\"div#graph2\").append(\"svg\")\n",
    "        .attr(\"width\", \"400px\")\n",
    "        .attr(\"height\", \"400px\");\n",
    "    \n",
    "    // Update the data with circleData! \t\n",
    "    var newCircles = vis.selectAll(\"circle\").data(circleData);\n",
    "    // Nothing happens at this point because the data is not entered yet\n",
    "    // So let's enter the data and use it to position (cx,cy) and size (r) the circles\n",
    "    newCircles.enter().append(\"circle\")\n",
    "        .attr(\"cx\", function(d) { return d*5; })\n",
    "        .attr(\"cy\", function(d) { return d*5; })\n",
    "        .attr(\"r\", function(d) { return d; })\n",
    "})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 110,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<html>\n",
       "  <head>\n",
       "    <script type=\"text/javascript\">\n",
       "        circleData = [2, 3, 6, 19, 23, 35]; \n",
       "    </script>\n",
       "  </head>\n",
       "  <body>\n",
       "      Here is the graph\n",
       "      <div id=\"graph3\"></div>\n",
       "      Here is the end of the graph\n",
       "  </body>\n",
       "</html>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 110,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "html_code =\"\"\"\n",
    "<html>\n",
    "  <head>\n",
    "    <script type=\"text/javascript\">\n",
    "        circleData = %s; \n",
    "    </script>\n",
    "  </head>\n",
    "  <body>\n",
    "      Here is the graph\n",
    "      <div id=\"graph3\"></div>\n",
    "      Here is the end of the graph\n",
    "  </body>\n",
    "</html>\"\"\" % (randomData)\n",
    "HTML(html_code)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 111,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "require.config({paths: {d3: \"//d3js.org/d3.v4.min\",}});\n",
       "\n",
       "require([\"d3\"], function(d3) {\n",
       "\n",
       "    // Use this to keep the screen clean\n",
       "    d3.select(\"div#graph3\").selectAll(\"*\").remove();\n",
       "    \n",
       "    var width = 400, height = 400;\n",
       "    var x = d3.scaleLinear().range([0, width-50]).domain(d3.extent(circleData));\n",
       "    var y = d3.scaleLinear().range([height, 50]).domain(d3.extent(circleData));\n",
       "    // Same as example 5, just condensed \n",
       "    var vis = d3.select(\"div#graph3\").append(\"svg\")\n",
       "        .attr(\"width\", width+\"px\")\n",
       "        .attr(\"height\", height+\"px\");\n",
       "    \n",
       "    // Update the data with circleData! \t\n",
       "    var newCircles = vis.selectAll(\"circle\").data(circleData);\n",
       "\n",
       "    // Nothing happens at this point because the data is not entered yet\n",
       "    // So let's enter the data and use it to position (cx,cy) and size (r) the circles\n",
       "    newCircles.enter().append(\"circle\")\n",
       "        .attr(\"cx\", function(d) { return x(d); })\n",
       "        .attr(\"cy\", function(d) { return y(d); })\n",
       "        .attr(\"r\", function(d) { return d; })\n",
       "})"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "require.config({paths: {d3: \"//d3js.org/d3.v4.min\",}});\n",
    "\n",
    "require([\"d3\"], function(d3) {\n",
    "\n",
    "    // Use this to keep the screen clean\n",
    "    d3.select(\"div#graph3\").selectAll(\"*\").remove();\n",
    "    \n",
    "    var width = 400, height = 400;\n",
    "    var x = d3.scaleLinear().range([0, width-50]).domain(d3.extent(circleData));\n",
    "    var y = d3.scaleLinear().range([height, 50]).domain(d3.extent(circleData));\n",
    "    // Same as example 5, just condensed \n",
    "    var vis = d3.select(\"div#graph3\").append(\"svg\")\n",
    "        .attr(\"width\", width+\"px\")\n",
    "        .attr(\"height\", height+\"px\");\n",
    "    \n",
    "    // Update the data with circleData! \t\n",
    "    var newCircles = vis.selectAll(\"circle\").data(circleData);\n",
    "\n",
    "    // Nothing happens at this point because the data is not entered yet\n",
    "    // So let's enter the data and use it to position (cx,cy) and size (r) the circles\n",
    "    newCircles.enter().append(\"circle\")\n",
    "        .attr(\"cx\", function(d) { return x(d); })\n",
    "        .attr(\"cy\", function(d) { return y(d); })\n",
    "        .attr(\"r\", function(d) { return d; })\n",
    "})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 112,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<html>\n",
       "  <head>\n",
       "    <script type=\"text/javascript\">\n",
       "        circleData = [2, 3, 6, 19, 23, 35]; \n",
       "    </script>\n",
       "  </head>\n",
       "  <body>\n",
       "      Here is the graph\n",
       "      <div id=\"graph4\"></div>\n",
       "      Here is the end of the graph\n",
       "  </body>\n",
       "</html>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 112,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "html_code =\"\"\"\n",
    "<html>\n",
    "  <head>\n",
    "    <script type=\"text/javascript\">\n",
    "        circleData = %s; \n",
    "    </script>\n",
    "  </head>\n",
    "  <body>\n",
    "      Here is the graph\n",
    "      <div id=\"graph4\"></div>\n",
    "      Here is the end of the graph\n",
    "  </body>\n",
    "</html>\"\"\" % (randomData)\n",
    "HTML(html_code)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 113,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "require.config({paths: {d3: \"//d3js.org/d3.v4.min\",}});\n",
       "\n",
       "require([\"d3\"], function(d3) {\n",
       "\n",
       "    // Use this to keep the screen clean\n",
       "    d3.select(\"div#graph4\").selectAll(\"*\").remove();\n",
       "    \n",
       "    var width = 400, height = 400;\n",
       "    var color = d3.scaleOrdinal(d3.schemeCategory10);\n",
       "    var x = d3.scaleLinear().range([0, width-50]).domain(d3.extent(circleData));\n",
       "    var y = d3.scaleLinear().range([height, 50]).domain(d3.extent(circleData));    \n",
       "    \n",
       "    // Same as example 5, just condensed \n",
       "    var vis = d3.select(\"div#graph4\").append(\"svg\")\n",
       "        .attr(\"width\", width+\"px\")\n",
       "        .attr(\"height\", height+\"px\");\n",
       "    \n",
       "    // Update the data with circleData! \t\n",
       "    var newCircles = vis.selectAll(\"circle\").data(circleData);\n",
       "\n",
       "    // Nothing happens at this point because the data is not entered yet\n",
       "    // So let's enter the data and use it to position (cx,cy) and size (r) the circles\n",
       "    newCircles.enter().append(\"circle\")\n",
       "        .attr(\"cx\", function(d) { return x(d); })\n",
       "        .attr(\"cy\", function(d) { return y(d); })\n",
       "        .attr(\"r\", function(d) { return d; })\n",
       "        .style(\"fill\", function(d,i) { return color(i); })\n",
       "})"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "require.config({paths: {d3: \"//d3js.org/d3.v4.min\",}});\n",
    "\n",
    "require([\"d3\"], function(d3) {\n",
    "\n",
    "    // Use this to keep the screen clean\n",
    "    d3.select(\"div#graph4\").selectAll(\"*\").remove();\n",
    "    \n",
    "    var width = 400, height = 400;\n",
    "    var color = d3.scaleOrdinal(d3.schemeCategory10);\n",
    "    var x = d3.scaleLinear().range([0, width-50]).domain(d3.extent(circleData));\n",
    "    var y = d3.scaleLinear().range([height, 50]).domain(d3.extent(circleData));    \n",
    "    \n",
    "    // Same as example 5, just condensed \n",
    "    var vis = d3.select(\"div#graph4\").append(\"svg\")\n",
    "        .attr(\"width\", width+\"px\")\n",
    "        .attr(\"height\", height+\"px\");\n",
    "    \n",
    "    // Update the data with circleData! \t\n",
    "    var newCircles = vis.selectAll(\"circle\").data(circleData);\n",
    "\n",
    "    // Nothing happens at this point because the data is not entered yet\n",
    "    // So let's enter the data and use it to position (cx,cy) and size (r) the circles\n",
    "    newCircles.enter().append(\"circle\")\n",
    "        .attr(\"cx\", function(d) { return x(d); })\n",
    "        .attr(\"cy\", function(d) { return y(d); })\n",
    "        .attr(\"r\", function(d) { return d; })\n",
    "        .style(\"fill\", function(d,i) { return color(i); })\n",
    "})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 114,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<html>\n",
       "  <head>\n",
       "    <script type=\"text/javascript\">\n",
       "        circleData = [2, 3, 6, 19, 23, 35]; \n",
       "    </script>\n",
       "  </head>\n",
       "  <body>\n",
       "      Here is the graph\n",
       "      <div id=\"graph5\"></div>\n",
       "      Here is the end of the graph\n",
       "  </body>\n",
       "</html>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 114,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "html_code =\"\"\"\n",
    "<html>\n",
    "  <head>\n",
    "    <script type=\"text/javascript\">\n",
    "        circleData = %s; \n",
    "    </script>\n",
    "  </head>\n",
    "  <body>\n",
    "      Here is the graph\n",
    "      <div id=\"graph5\"></div>\n",
    "      Here is the end of the graph\n",
    "  </body>\n",
    "</html>\"\"\" % (randomData)\n",
    "HTML(html_code)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 115,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "require.config({paths: {d3: \"//d3js.org/d3.v4.min\",}});\n",
       "\n",
       "require([\"d3\"], function(d3) {\n",
       "\n",
       "    // Use this to keep the screen clean\n",
       "    d3.select(\"div#graph5\").selectAll(\"*\").remove();\n",
       "    \n",
       "    var width = 400, height = 400;\n",
       "    var color = d3.scaleOrdinal(d3.schemeCategory10);\n",
       "    var margin = {top: 20, right: 20, bottom: 50, left: 70}\n",
       "    var x = d3.scaleLinear().range([0, width]).domain([0,d3.max(circleData)]);\n",
       "    var y = d3.scaleLinear().range([height, 0]).domain([0,d3.max(circleData)]);    \n",
       "    var r = d3.scalePow().exponent(.5).range([2,5]).domain(d3.extent(circleData));\n",
       "    // Same as example 5, just condensed \n",
       "    var vis = d3.select(\"div#graph5\").append(\"svg\")\n",
       "        .attr(\"width\", (width + margin.left + margin.right)+\"px\")\n",
       "        .attr(\"height\", (height + margin.top + margin.bottom)+\"px\")\n",
       "        .append(\"g\")\n",
       "        .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n",
       "    \n",
       "    vis.append(\"g\")\n",
       "        .attr(\"transform\", \"translate(0,\" + height + \")\")\n",
       "        .call(d3.axisBottom(x));\n",
       "    \n",
       "     vis.append(\"g\")\n",
       "      .call(d3.axisLeft(y));\n",
       "    // Update the data with circleData! \t\n",
       "    var newCircles = vis.selectAll(\"circle\").data(circleData);\n",
       "    console.log(circleData)\n",
       "    // Nothing happens at this point because the data is not entered yet\n",
       "    // So let's enter the data and use it to position (cx,cy) and size (r) the circles\n",
       "    newCircles.enter().append(\"circle\")\n",
       "        .attr(\"cx\", function(d) { return x(d); })\n",
       "        .attr(\"cy\", function(d) { return y(d); })\n",
       "        .attr(\"r\", function(d) { return r(d); })\n",
       "        .style(\"fill\", function(d,i) { return color(i); })\n",
       "})"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "require.config({paths: {d3: \"//d3js.org/d3.v4.min\",}});\n",
    "\n",
    "require([\"d3\"], function(d3) {\n",
    "\n",
    "    // Use this to keep the screen clean\n",
    "    d3.select(\"div#graph5\").selectAll(\"*\").remove();\n",
    "    \n",
    "    var width = 400, height = 400;\n",
    "    var color = d3.scaleOrdinal(d3.schemeCategory10);\n",
    "    var margin = {top: 20, right: 20, bottom: 50, left: 70}\n",
    "    var x = d3.scaleLinear().range([0, width]).domain([0,d3.max(circleData)]);\n",
    "    var y = d3.scaleLinear().range([height, 0]).domain([0,d3.max(circleData)]);    \n",
    "    var r = d3.scalePow().exponent(.5).range([2,5]).domain(d3.extent(circleData));\n",
    "    // Same as example 5, just condensed \n",
    "    var vis = d3.select(\"div#graph5\").append(\"svg\")\n",
    "        .attr(\"width\", (width + margin.left + margin.right)+\"px\")\n",
    "        .attr(\"height\", (height + margin.top + margin.bottom)+\"px\")\n",
    "        .append(\"g\")\n",
    "        .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n",
    "    \n",
    "    vis.append(\"g\")\n",
    "        .attr(\"transform\", \"translate(0,\" + height + \")\")\n",
    "        .call(d3.axisBottom(x));\n",
    "    \n",
    "     vis.append(\"g\")\n",
    "      .call(d3.axisLeft(y));\n",
    "    // Update the data with circleData! \t\n",
    "    var newCircles = vis.selectAll(\"circle\").data(circleData);\n",
    "    console.log(circleData)\n",
    "    // Nothing happens at this point because the data is not entered yet\n",
    "    // So let's enter the data and use it to position (cx,cy) and size (r) the circles\n",
    "    newCircles.enter().append(\"circle\")\n",
    "        .attr(\"cx\", function(d) { return x(d); })\n",
    "        .attr(\"cy\", function(d) { return y(d); })\n",
    "        .attr(\"r\", function(d) { return r(d); })\n",
    "        .style(\"fill\", function(d,i) { return color(i); })\n",
    "})"
   ]
  }
 ],
 "metadata": {
  "celltoolbar": "Slideshow",
  "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.14"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}