{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Chapter1\n",
    "D3.js in Actionの1章の勉強ノートです。\n",
    "\n",
    "これまで、d3.v3.min.jsを以下のようにロードしていましたが、nvd3のinitialize_javascriptでこれが不要になりました。\n",
    "\n",
    "ただし、kernelはPython2を使用するため、sageは%load_extでロードします。\n",
    "\n",
    "``` html\n",
    "<script src=\"http://d3js.org/d3.v3.min.js\" charset=\"utf-8\"></script>\n",
    "```\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "loaded nvd3 IPython extension\n",
      "run nvd3.ipynb.initialize_javascript() to set up the notebook\n",
      "help(nvd3.ipynb.initialize_javascript) for options\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<link media=\"all\" href=\"https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.css\" type=\"text/css\"\n",
       "                        rel=\"stylesheet\"/>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "$.getScript(\"https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js\")"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "$.getScript(\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js\", function() {\n",
       "                              $.getScript(\"https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js\", function() {})});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js\"></script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js\"></script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%load_ext sage\n",
    "from IPython.core.display import HTML\n",
    "from string import Template\n",
    "import json\n",
    "import nvd3\n",
    "nvd3.ipynb.initialize_javascript(use_remote=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 要素の選択とデータバインド\n",
    "要素の選択には、select, selectAll関数が用意されいます。要素の選択パターンはjQueryと同じです。\n",
    "- #<要素のID>: 要素のIDで選択\n",
    "- <タグ>: HTMLタグ名で選択\n",
    "- .<クラス>: 要素のclass名で選択\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### リスト1.1をjupyterでためす\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"someDiv\" style=\"width:200px;height:100px;border:black 1px solid;\">\n",
       "<input id=\"someCheckbox\" type=\"checkbox\" />\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<div id=\"someDiv\" style=\"width:200px;height:100px;border:black 1px solid;\">\n",
    "<input id=\"someCheckbox\" type=\"checkbox\" />\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "javascriptのmagic関数をこんな形で使うことは考えたことがなかったので、とても重宝します。\n",
    "\n",
    "通常はhtmlのscriptタグかブラウザのconsoleでしかjavascriptを操作できないのですが、\n",
    "jupyterノートブックでは、このように結果を確認しながら処理を進めることができます。\n",
    "\n",
    "以下の例では、以下の処理をします。\n",
    "- divタグのid=someDivのstyleをborder=\"5px darkgray dashed\"に変更\n",
    "- divタグのid=someDivのidをnewIDに変更\n",
    "- inputタグのid=someCheckboxの変数checkedをtrueにセット\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "d3.select(\"#someDiv\").style(\"border\", \"5px darkgray dashed\");\n",
       "d3.select(\"#someDiv\").attr(\"id\", \"newID\");\n",
       "d3.select(\"#someCheckbox\").property(\"checked\", true);"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "d3.select(\"#someDiv\").style(\"border\", \"5px darkgray dashed\");\n",
    "d3.select(\"#someDiv\").attr(\"id\", \"newID\");\n",
    "d3.select(\"#someCheckbox\").property(\"checked\", true);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "Chromeの「表示」>「開発/管理」から「デベロッパーツール」を開くと上記の処理でどのようにHTMLが変化したか確認することができます。\n",
    "\n",
    "![Developer-Tool](images/developer-tool.png)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### データバインディング\n",
    "次に「データバインディング」を使ってみます。\n",
    "\n",
    "データバインディングは、選択された要素に配列で与えられた個々のデータを割り当てる機能です。\n",
    "\n",
    "以下の例では、４個のdivにsomeDataの４つの文字列をバインドします。\n",
    "- html関数のfunction (d)で個々のデータが渡されます\n",
    "\n",
    "次の行を実行すると、「データバインディングの例です」と表示し、%%javascriptを実行すると\n",
    "<pre>\n",
    "Test1\n",
    "Test2\n",
    "Test3\n",
    "Test4\n",
    "</pre>\n",
    "が追加されます。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"ex2\">\n",
       "データバインディングの例です。\n",
       "    <div></div>\n",
       "    <div></div>\n",
       "    <div></div>\n",
       "    <div></div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%HTML\n",
    "<div id=\"ex2\">\n",
    "データバインディングの例です。\n",
    "    <div></div>\n",
    "    <div></div>\n",
    "    <div></div>\n",
    "    <div></div>\n",
    "</div>\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "var someData = [\"Test1\", \"Test2\", \"Test3\", \"Test4\"];\n",
       "\n",
       "d3.select(\"#ex2\").selectAll(\"div\")\n",
       "    .data(someData)\n",
       "    .append(\"div\")\n",
       "    .html(function (d) { return d;});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "var someData = [\"Test1\", \"Test2\", \"Test3\", \"Test4\"];\n",
    "\n",
    "d3.select(\"#ex2\").selectAll(\"div\")\n",
    "    .data(someData)\n",
    "    .append(\"div\")\n",
    "    .html(function (d) { return d;});"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "### D3.js のHello Worldを試す\n",
    "D3アプリのHello Worldとして、円を動かす例が紹介されているので、これをjupyterで試してみます。\n",
    "\n",
    "最初にHTMLを定義します。\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"ex3\">\n",
       "    <svg style=\"width:300px;height:300px;border:1px lightgray solid;\" />\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%HTML\n",
    "<div id=\"ex3\">\n",
    "    <svg style=\"width:300px;height:300px;border:1px lightgray solid;\" />\n",
    "</div>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "SVGキャンパスに様々な図形を追加します。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "d3.select(\"#ex3\").select(\"svg\")\n",
       "  .append(\"line\")\n",
       "      .attr(\"x1\", 20).attr(\"y1\", 20)\n",
       "      .attr(\"x2\",250).attr(\"y2\",250)\n",
       "      .style(\"stroke\", \"black\").style(\"stroke-width\",\"2px\");\n",
       "d3.select(\"svg\")\n",
       "  .append(\"text\")\n",
       "      .attr(\"x\",20).attr(\"y\",20)\n",
       "      .text(\"HELLO\");\n",
       "d3.select(\"svg\")\n",
       "  .append(\"circle\")\n",
       "      .attr(\"r\", 20).attr(\"cx\",20).attr(\"cy\",20)\n",
       "      .style(\"fill\",\"red\");\n",
       "d3.select(\"svg\")\n",
       "  .append(\"circle\")\n",
       "      .attr(\"r\", 50).attr(\"cx\",250).attr(\"cy\",250)\n",
       "      .style(\"fill\",\"lightblue\");\n",
       "d3.select(\"svg\")\n",
       "  .append(\"text\")\n",
       "      .attr(\"x\",250).attr(\"y\",250)\n",
       "      .text(\"WORLD\");"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "d3.select(\"#ex3\").select(\"svg\")\n",
    "  .append(\"line\")\n",
    "      .attr(\"x1\", 20).attr(\"y1\", 20)\n",
    "      .attr(\"x2\",250).attr(\"y2\",250)\n",
    "      .style(\"stroke\", \"black\").style(\"stroke-width\",\"2px\");\n",
    "d3.select(\"svg\")\n",
    "  .append(\"text\")\n",
    "      .attr(\"x\",20).attr(\"y\",20)\n",
    "      .text(\"HELLO\");\n",
    "d3.select(\"svg\")\n",
    "  .append(\"circle\")\n",
    "      .attr(\"r\", 20).attr(\"cx\",20).attr(\"cy\",20)\n",
    "      .style(\"fill\",\"red\");\n",
    "d3.select(\"svg\")\n",
    "  .append(\"circle\")\n",
    "      .attr(\"r\", 50).attr(\"cx\",250).attr(\"cy\",250)\n",
    "      .style(\"fill\",\"lightblue\");\n",
    "d3.select(\"svg\")\n",
    "  .append(\"text\")\n",
    "      .attr(\"x\",250).attr(\"y\",250)\n",
    "      .text(\"WORLD\");"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "SVGでは表示順序で上書きするので、HELLOの文字が赤い丸に潰されています。\n",
    "\n",
    "次の例は、アニメーションです。\n",
    "これもtransitionとdurationを使ってとても簡単に実現しています。\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"ex4\">\n",
       "    <svg style=\"width:300px;height:300px;border:1px lightgray solid;\" />\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%HTML\n",
    "<div id=\"ex4\">\n",
    "    <svg style=\"width:300px;height:300px;border:1px lightgray solid;\" />\n",
    "</div>\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "d3.select(\"#ex4\").select(\"svg\")\n",
       "    .append(\"circle\")\n",
       "        .attr(\"r\", 20).attr(\"cx\",20).attr(\"cy\",20).style(\"fill\",\"red\");\n",
       "d3.select(\"#ex4\").select(\"svg\")\n",
       "    .append(\"text\")\n",
       "        .attr(\"id\", \"a\").attr(\"x\",20).style(\"opacity\", 0).attr(\"y\",20)\n",
       "        .text(\"HELLO WORLD\");\n",
       "d3.select(\"#ex4\").select(\"svg\")\n",
       "    .append(\"circle\")\n",
       "        .attr(\"r\", 50).attr(\"cx\",250).attr(\"cy\",250).style(\"fill\",\"lightblue\");\n",
       "d3.select(\"#ex4\").select(\"svg\")\n",
       "    .append(\"text\")\n",
       "        .attr(\"id\", \"b\").attr(\"x\",250).attr(\"y\",250).style(\"opacity\", 0).text(\"Uh, hi.\");\n",
       "\n",
       "d3.select(\"#a\").transition().delay(1000).style(\"opacity\", 1);\n",
       "d3.select(\"#b\").transition().delay(3000).style(\"opacity\", .75);\n",
       "\n",
       "d3.select(\"#ex4\").selectAll(\"circle\").transition().duration(4000).attr(\"cy\", 150);"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "d3.select(\"#ex4\").select(\"svg\")\n",
    "    .append(\"circle\")\n",
    "        .attr(\"r\", 20).attr(\"cx\",20).attr(\"cy\",20).style(\"fill\",\"red\");\n",
    "d3.select(\"#ex4\").select(\"svg\")\n",
    "    .append(\"text\")\n",
    "        .attr(\"id\", \"a\").attr(\"x\",20).style(\"opacity\", 0).attr(\"y\",20)\n",
    "        .text(\"HELLO WORLD\");\n",
    "d3.select(\"#ex4\").select(\"svg\")\n",
    "    .append(\"circle\")\n",
    "        .attr(\"r\", 50).attr(\"cx\",250).attr(\"cy\",250).style(\"fill\",\"lightblue\");\n",
    "d3.select(\"#ex4\").select(\"svg\")\n",
    "    .append(\"text\")\n",
    "        .attr(\"id\", \"b\").attr(\"x\",250).attr(\"y\",250).style(\"opacity\", 0).text(\"Uh, hi.\");\n",
    "\n",
    "d3.select(\"#a\").transition().delay(1000).style(\"opacity\", 1);\n",
    "d3.select(\"#b\").transition().delay(3000).style(\"opacity\", .75);\n",
    "\n",
    "d3.select(\"#ex4\").selectAll(\"circle\").transition().duration(4000).attr(\"cy\", 150);"
   ]
  },
  {
   "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.10"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}