02-Plotly in notebook.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 在Notebook中使用Plotly绘图"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Plotly是一套Javascript绘图库，它能够绘制曲线图、散列图、柱状图、三维曲线、曲面等多种图表。它提供了Python调用接口，可以使用Python生成绘图所需的Javascript代码。在Python中有在线和离线两种方式。在线方式需要用户申请Plotly的帐号，所有生成的图表都会保存在Plotly的服务器中。而离线方式则是在页面中插入Plotly提供的Javascript库，然后调用该库提供的API函数绘图。在命令行中可以输入下面的命令安装`plotly`库。\n",
    "\n",
    "```\n",
    "pip install plotly\n",
    "```\n",
    "\n",
    "然后在Notebook中执行如下代码初始化离线的Notebook模式。\n",
    "\n",
    "```python\n",
    "from plotly.offline import init_notebook_mode\n",
    "init_notebook_mode()\n",
    "```\n",
    "\n",
    "调用`init_notebook_mode()`会将Plotly的整个Javascript库插入到Notebook的单元输出之中，这样做会增加Notebook的字节数，因此本节提供两种引用Plotly的Javascript库的方法，能极大地减小Notebook文件的大小。\n",
    "\n",
    "下面的`init_plotly_online_mode()`从Plotly的网站上载入Plotly库。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "def init_plotly_online_mode():\n",
    "    from IPython.display import display_javascript\n",
    "    from plotly import offline\n",
    "    offline.offline.__PLOTLY_OFFLINE_INITIALIZED = True\n",
    "    jscode = \"\"\"\n",
    "    require.config({\n",
    "      paths: {\n",
    "        d3: 'http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min',\n",
    "        plotly: 'http://cdn.plot.ly/plotly-1.10.0.min',\n",
    "        jquery: 'https://code.jquery.com/jquery-migrate-1.4.1.min'\n",
    "      },\n",
    "\n",
    "      shim: {\n",
    "        plotly: {\n",
    "          deps: ['d3', 'jquery'],\n",
    "          exports: 'plotly'\n",
    "        }\n",
    "      }\n",
    "    });\n",
    "\n",
    "    require(['d3', 'plotly'], function(d3, plotly) {\n",
    "        window.Plotly = plotly;\n",
    "    });\n",
    "    \"\"\"\n",
    "    display_javascript(jscode, raw=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "下面的`init_plotly_offline_mode()`将`plotly`库自带的`plotly.min.js`复制到与Notebook相同路径之下，并在客户端载入该文件："
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "def init_plotly_offline_mode():\n",
    "    from IPython.display import display_javascript\n",
    "    import shutil\n",
    "    from plotly import offline\n",
    "    from os import path\n",
    "    offline.offline.__PLOTLY_OFFLINE_INITIALIZED = True\n",
    "    shutil.copy(path.join(offline.__path__[0], \"plotly.min.js\"), \".\")\n",
    "\n",
    "    jscode = \"\"\"\n",
    "    require.config({\n",
    "      paths: {\n",
    "        plotly: \"/files/\" + Jupyter.notebook.notebook_path + \"/../\" + \"plotly.min\"\n",
    "      },\n",
    "\n",
    "      shim: {\n",
    "        plotly: {\n",
    "          deps: [],\n",
    "          exports: 'plotly'\n",
    "        }\n",
    "      }\n",
    "    });\n",
    "\n",
    "    require(['plotly'], function(plotly) {\n",
    "        window.Plotly = plotly;\n",
    "        console.log(\"Plotly loaded\");\n",
    "    });\n",
    "    \"\"\"\n",
    "    display_javascript(jscode, raw=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "如果一切正常，运行下面的代码会在客户端载入Plotly库，并在调试窗口中显示`Plotly loaded`。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "    require.config({\n",
       "      paths: {\n",
       "        d3: 'http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min',\n",
       "        plotly: 'http://cdn.plot.ly/plotly-1.10.0.min',\n",
       "        jquery: 'https://code.jquery.com/jquery-migrate-1.4.1.min'\n",
       "      },\n",
       "\n",
       "      shim: {\n",
       "        plotly: {\n",
       "          deps: ['d3', 'jquery'],\n",
       "          exports: 'plotly'\n",
       "        }\n",
       "      }\n",
       "    });\n",
       "\n",
       "    require(['d3', 'plotly'], function(d3, plotly) {\n",
       "        window.Plotly = plotly;\n",
       "    });\n",
       "    "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "#init_plotly_offline_mode()\n",
    "init_plotly_online_mode()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "下面调用`iplot()`创建一幅曲线图，它的唯一参数是一个描述图表的字典，其中`data`键对应一个包含两条曲线的列表，`layout`键对应描述图表属性的字典。每条曲线也是由字典描述的，其`x`和`y`键对应曲线上各点的坐标。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"a42086ab-c31f-4b28-aded-583e46ef0dab\" style=\"height: 400; width: 600px;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"a42086ab-c31f-4b28-aded-583e46ef0dab\", [{\"x\": [0.0, 0.12693303650867852, 0.25386607301735703, 0.3807991095260356, 0.5077321460347141, 0.6346651825433925, 0.7615982190520711, 0.8885312555607496, 1.0154642920694281, 1.1423973285781066, 1.269330365086785, 1.3962634015954636, 1.5231964381041423, 1.6501294746128208, 1.7770625111214993, 1.9039955476301778, 2.0309285841388562, 2.1578616206475347, 2.284794657156213, 2.4117276936648917, 2.53866073017357, 2.6655937666822487, 2.792526803190927, 2.9194598396996057, 3.0463928762082846, 3.173325912716963, 3.3002589492256416, 3.42719198573432, 3.5541250222429985, 3.681058058751677, 3.8079910952603555, 3.934924131769034, 4.0618571682777125, 4.188790204786391, 4.3157232412950695, 4.442656277803748, 4.569589314312426, 4.696522350821105, 4.823455387329783, 4.950388423838462, 5.07732146034714, 5.204254496855819, 5.331187533364497, 5.458120569873176, 5.585053606381854, 5.711986642890533, 5.838919679399211, 5.96585271590789, 6.092785752416569, 6.219718788925247, 6.346651825433926, 6.473584861942604, 6.600517898451283, 6.727450934959961, 6.85438397146864, 6.981317007977318, 7.108250044485997, 7.235183080994675, 7.362116117503354, 7.489049154012032, 7.615982190520711, 7.742915227029389, 7.869848263538068, 7.996781300046746, 8.123714336555425, 8.250647373064103, 8.377580409572783, 8.50451344608146, 8.631446482590139, 8.758379519098817, 8.885312555607497, 9.012245592116175, 9.139178628624853, 9.266111665133531, 9.39304470164221, 9.519977738150889, 9.646910774659567, 9.773843811168245, 9.900776847676925, 10.027709884185603, 10.15464292069428, 10.28157595720296, 10.408508993711639, 10.535442030220317, 10.662375066728995, 10.789308103237675, 10.916241139746353, 11.04317417625503, 11.170107212763709, 11.297040249272388, 11.423973285781067, 11.550906322289745, 11.677839358798423, 11.804772395307102, 11.93170543181578, 12.058638468324459, 12.185571504833138, 12.312504541341816, 12.439437577850494, 12.566370614359172], \"line\": {\"color\": \"blue\", \"width\": 3}, \"y\": [0.0, 0.12659245357374926, 0.2511479871810792, 0.3716624556603276, 0.4861967361004687, 0.5929079290546404, 0.690079011482112, 0.7761464642917568, 0.8497254299495144, 0.9096319953545183, 0.9549022414440739, 0.984807753012208, 0.998867339183008, 0.9968547759519424, 0.9788024462147787, 0.9450008187146685, 0.8959937742913359, 0.8325698546347714, 0.7557495743542583, 0.6667690005162917, 0.5670598638627709, 0.4582265217274105, 0.3420201433256689, 0.2203105327865408, 0.09505604330418244, -0.03172793349806786, -0.15800139597335008, -0.28173255684142984, -0.4009305354066138, -0.5136773915734064, -0.6181589862206053, -0.7126941713788629, -0.7957618405308321, -0.8660254037844388, -0.9223542941045814, -0.9638421585599422, -0.9898214418809327, -0.9998741276738751, -0.9938384644612541, -0.9718115683235417, -0.9341478602651068, -0.881453363447582, -0.8145759520503358, -0.7345917086575332, -0.6427876096865396, -0.5406408174555974, -0.4297949120891719, -0.31203344569848707, -0.18925124436040974, -0.06342391965656452, 0.06342391965656492, 0.18925124436041013, 0.31203344569848745, 0.4297949120891715, 0.5406408174555978, 0.6427876096865391, 0.7345917086575334, 0.8145759520503356, 0.8814533634475821, 0.9341478602651067, 0.9718115683235418, 0.9938384644612541, 0.9998741276738751, 0.9898214418809328, 0.963842158559942, 0.9223542941045816, 0.8660254037844383, 0.7957618405308319, 0.7126941713788629, 0.6181589862206056, 0.5136773915734058, 0.40093053540661344, 0.2817325568414299, 0.15800139597335056, 0.03172793349806701, -0.09505604330418282, -0.22031053278654034, -0.342020143325668, -0.45822652172741085, -0.5670598638627707, -0.6667690005162913, -0.7557495743542588, -0.8325698546347716, -0.8959937742913359, -0.9450008187146683, -0.9788024462147789, -0.9968547759519424, -0.998867339183008, -0.9848077530122081, -0.9549022414440737, -0.9096319953545183, -0.8497254299495145, -0.7761464642917573, -0.6900790114821116, -0.5929079290546404, -0.48619673610046904, -0.3716624556603267, -0.2511479871810788, -0.1265924535737493, -4.898587196589413e-16], \"name\": \"sin\", \"opacity\": 0.5}, {\"y\": [-0.15338509179911267, -0.02794507123597828, 0.2904355380422946, 0.24176895550706848, 0.5084752619603877, 0.507974605084588, 0.7260056707174737, 0.8213965054561113, 0.9398192645183379, 0.7607868884742961, 0.915404479184352, 1.185668532669166, 1.0230136473641693, 0.9882584492218822, 1.012334636603953, 0.9811148530949654, 0.907886168547481, 0.7916958976427075, 0.563045793714638, 0.5300526135491022, 0.6752579699795814, 0.425124675654778, 0.36806359032620484, 0.2308222540053409, 0.14800502535125198, 0.02225664026265381, -0.24005665095716122, -0.411596154866546, -0.41873210209612965, -0.6012534427994234, -0.6532113404985248, -0.6569039652221527, -0.9127769080756494, -0.8081998187426868, -1.0007343851317076, -1.0184881822503913, -0.9531975236970737, -0.8053011908028027, -1.0180961378390316, -0.9807764366637837, -1.0402074383673707, -0.7973338416477831, -0.6949170102389024, -0.8059012659901285, -0.6538869011083014, -0.44121014833852923, -0.49483633771160573, -0.10775199708938529, -0.1820127388450939, -0.18148240153767412, 0.11626038082721783, 0.17939121669600083, 0.2821402008131634, 0.18998696385777164, 0.5847623697612749, 0.70238715536798, 0.8656977729449302, 0.6882863159609919, 0.7685188549529351, 0.8694600239327986, 1.0068519923893162, 0.9892229550924185, 1.079862017242793, 1.0581024578503306, 0.969341646905385, 1.0522038586550084, 0.8121946206801294, 0.7213926696757768, 0.6438221361887777, 0.5413161067635588, 0.571012615649285, 0.401507390269303, 0.22457100145880288, 0.11016897976053397, -0.016869186348259513, -0.05293191632417447, -0.2029099743930203, -0.16430015907623585, -0.2934010335859345, -0.6969445709187648, -0.6349760957985346, -0.7343981791994132, -0.9101555240983672, -0.8284881637465515, -1.1006490587335258, -0.9822621084620091, -1.003442866554004, -1.1219392711039715, -0.8878320013902534, -0.749754889451363, -0.8198745727010215, -0.8991917101685305, -0.5795051436858543, -0.6228408937881206, -0.6844776744224815, -0.418847024765288, -0.44301812435612403, -0.2618527134505307, -0.22662990970641783, 0.14094365572756107], \"x\": [0.0, 0.12693303650867852, 0.25386607301735703, 0.3807991095260356, 0.5077321460347141, 0.6346651825433925, 0.7615982190520711, 0.8885312555607496, 1.0154642920694281, 1.1423973285781066, 1.269330365086785, 1.3962634015954636, 1.5231964381041423, 1.6501294746128208, 1.7770625111214993, 1.9039955476301778, 2.0309285841388562, 2.1578616206475347, 2.284794657156213, 2.4117276936648917, 2.53866073017357, 2.6655937666822487, 2.792526803190927, 2.9194598396996057, 3.0463928762082846, 3.173325912716963, 3.3002589492256416, 3.42719198573432, 3.5541250222429985, 3.681058058751677, 3.8079910952603555, 3.934924131769034, 4.0618571682777125, 4.188790204786391, 4.3157232412950695, 4.442656277803748, 4.569589314312426, 4.696522350821105, 4.823455387329783, 4.950388423838462, 5.07732146034714, 5.204254496855819, 5.331187533364497, 5.458120569873176, 5.585053606381854, 5.711986642890533, 5.838919679399211, 5.96585271590789, 6.092785752416569, 6.219718788925247, 6.346651825433926, 6.473584861942604, 6.600517898451283, 6.727450934959961, 6.85438397146864, 6.981317007977318, 7.108250044485997, 7.235183080994675, 7.362116117503354, 7.489049154012032, 7.615982190520711, 7.742915227029389, 7.869848263538068, 7.996781300046746, 8.123714336555425, 8.250647373064103, 8.377580409572783, 8.50451344608146, 8.631446482590139, 8.758379519098817, 8.885312555607497, 9.012245592116175, 9.139178628624853, 9.266111665133531, 9.39304470164221, 9.519977738150889, 9.646910774659567, 9.773843811168245, 9.900776847676925, 10.027709884185603, 10.15464292069428, 10.28157595720296, 10.408508993711639, 10.535442030220317, 10.662375066728995, 10.789308103237675, 10.916241139746353, 11.04317417625503, 11.170107212763709, 11.297040249272388, 11.423973285781067, 11.550906322289745, 11.677839358798423, 11.804772395307102, 11.93170543181578, 12.058638468324459, 12.185571504833138, 12.312504541341816, 12.439437577850494, 12.566370614359172], \"name\": \"sin + noise\", \"opacity\": 0.7}], {\"title\": \"Plotly Example\", \"height\": 400, \"width\": 600}, {\"linkText\": \"Export to plot.ly\", \"showLink\": true})});</script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from plotly.offline import iplot\n",
    "import numpy as np\n",
    "\n",
    "x = np.linspace(0, 4*np.pi, 100)\n",
    "y = np.sin(x)\n",
    "y2 = y + np.random.normal(0, 0.1, len(x))\n",
    "\n",
    "line = {\"x\":x, \"y\":y, \"name\":\"sin\", \"line\":{\"width\":3, \"color\":\"blue\"}, \"opacity\":0.5}\n",
    "line2 = {\"x\":x, \"y\":y2, \"name\":\"sin + noise\", \"opacity\":0.7}\n",
    "layout = {\"title\": \"Plotly Example\", \"width\":600, \"height\":400}\n",
    "fig = {\"data\":[line, line2], \"layout\":layout}\n",
    "iplot(fig)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 使用`cufflinks`库快速绘图"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "使用`iplot()`绘图需要用户自己创建表示图表的字典，所需的代码量比较大。如果读者希望快速绘图，可以使用`cufflinks`。\n",
    "该绘图库为`pandas`的`DataFrame`对象提供了`iplot()`方法。`\n",
    "\n",
    "调用下面的命令安装`cufflinks`:\n",
    "\n",
    "```pip install cufflinks```\n",
    "\n",
    "为了让`cufflinks`使用离线方式绘图，需要调用其`go_offline()`函数："
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "import cufflinks\n",
    "cufflinks.go_offline()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "接下来创建`DataFrame`对象，并调用其`iplot()`方法绘图。注意`iplot()`是`cufflinks`为`DataFrame`类添加的方法，因此需要首先运行上面的单元。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"3942084d-474e-43a1-b2b7-1372f90fe558\" style=\"height: 400; width: 600px;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"3942084d-474e-43a1-b2b7-1372f90fe558\", [{\"line\": {\"dash\": \"solid\", \"color\": \"rgba(255, 153, 51, 1.0)\", \"width\": 2}, \"y\": [0.0, 0.12659245357374926, 0.2511479871810792, 0.3716624556603276, 0.4861967361004687, 0.5929079290546404, 0.690079011482112, 0.7761464642917568, 0.8497254299495144, 0.9096319953545183, 0.9549022414440739, 0.984807753012208, 0.998867339183008, 0.9968547759519424, 0.9788024462147787, 0.9450008187146685, 0.8959937742913359, 0.8325698546347714, 0.7557495743542583, 0.6667690005162917, 0.5670598638627709, 0.4582265217274105, 0.3420201433256689, 0.2203105327865408, 0.09505604330418244, -0.03172793349806786, -0.15800139597335008, -0.28173255684142984, -0.4009305354066138, -0.5136773915734064, -0.6181589862206053, -0.7126941713788629, -0.7957618405308321, -0.8660254037844388, -0.9223542941045814, -0.9638421585599422, -0.9898214418809327, -0.9998741276738751, -0.9938384644612541, -0.9718115683235417, -0.9341478602651068, -0.881453363447582, -0.8145759520503358, -0.7345917086575332, -0.6427876096865396, -0.5406408174555974, -0.4297949120891719, -0.31203344569848707, -0.18925124436040974, -0.06342391965656452, 0.06342391965656492, 0.18925124436041013, 0.31203344569848745, 0.4297949120891715, 0.5406408174555978, 0.6427876096865391, 0.7345917086575334, 0.8145759520503356, 0.8814533634475821, 0.9341478602651067, 0.9718115683235418, 0.9938384644612541, 0.9998741276738751, 0.9898214418809328, 0.963842158559942, 0.9223542941045816, 0.8660254037844383, 0.7957618405308319, 0.7126941713788629, 0.6181589862206056, 0.5136773915734058, 0.40093053540661344, 0.2817325568414299, 0.15800139597335056, 0.03172793349806701, -0.09505604330418282, -0.22031053278654034, -0.342020143325668, -0.45822652172741085, -0.5670598638627707, -0.6667690005162913, -0.7557495743542588, -0.8325698546347716, -0.8959937742913359, -0.9450008187146683, -0.9788024462147789, -0.9968547759519424, -0.998867339183008, -0.9848077530122081, -0.9549022414440737, -0.9096319953545183, -0.8497254299495145, -0.7761464642917573, -0.6900790114821116, -0.5929079290546404, -0.48619673610046904, -0.3716624556603267, -0.2511479871810788, -0.1265924535737493, -4.898587196589413e-16], \"text\": \"\", \"mode\": \"lines\", \"x\": [0.0, 0.12693303650867852, 0.25386607301735703, 0.3807991095260356, 0.5077321460347141, 0.6346651825433925, 0.7615982190520711, 0.8885312555607496, 1.0154642920694281, 1.1423973285781066, 1.269330365086785, 1.3962634015954636, 1.5231964381041423, 1.6501294746128208, 1.7770625111214993, 1.9039955476301778, 2.0309285841388562, 2.1578616206475347, 2.284794657156213, 2.4117276936648917, 2.53866073017357, 2.6655937666822487, 2.792526803190927, 2.9194598396996057, 3.0463928762082846, 3.173325912716963, 3.3002589492256416, 3.42719198573432, 3.5541250222429985, 3.681058058751677, 3.8079910952603555, 3.934924131769034, 4.0618571682777125, 4.188790204786391, 4.3157232412950695, 4.442656277803748, 4.569589314312426, 4.696522350821105, 4.823455387329783, 4.950388423838462, 5.07732146034714, 5.204254496855819, 5.331187533364497, 5.458120569873176, 5.585053606381854, 5.711986642890533, 5.838919679399211, 5.96585271590789, 6.092785752416569, 6.219718788925247, 6.346651825433926, 6.473584861942604, 6.600517898451283, 6.727450934959961, 6.85438397146864, 6.981317007977318, 7.108250044485997, 7.235183080994675, 7.362116117503354, 7.489049154012032, 7.615982190520711, 7.742915227029389, 7.869848263538068, 7.996781300046746, 8.123714336555425, 8.250647373064103, 8.377580409572783, 8.50451344608146, 8.631446482590139, 8.758379519098817, 8.885312555607497, 9.012245592116175, 9.139178628624853, 9.266111665133531, 9.39304470164221, 9.519977738150889, 9.646910774659567, 9.773843811168245, 9.900776847676925, 10.027709884185603, 10.15464292069428, 10.28157595720296, 10.408508993711639, 10.535442030220317, 10.662375066728995, 10.789308103237675, 10.916241139746353, 11.04317417625503, 11.170107212763709, 11.297040249272388, 11.423973285781067, 11.550906322289745, 11.677839358798423, 11.804772395307102, 11.93170543181578, 12.058638468324459, 12.185571504833138, 12.312504541341816, 12.439437577850494, 12.566370614359172], \"type\": \"scatter\", \"name\": \"sin\"}, {\"line\": {\"dash\": \"solid\", \"color\": \"rgba(55, 128, 191, 1.0)\", \"width\": 2}, \"y\": [-0.15338509179911267, -0.02794507123597828, 0.2904355380422946, 0.24176895550706848, 0.5084752619603877, 0.507974605084588, 0.7260056707174737, 0.8213965054561113, 0.9398192645183379, 0.7607868884742961, 0.915404479184352, 1.185668532669166, 1.0230136473641693, 0.9882584492218822, 1.012334636603953, 0.9811148530949654, 0.907886168547481, 0.7916958976427075, 0.563045793714638, 0.5300526135491022, 0.6752579699795814, 0.425124675654778, 0.36806359032620484, 0.2308222540053409, 0.14800502535125198, 0.02225664026265381, -0.24005665095716122, -0.411596154866546, -0.41873210209612965, -0.6012534427994234, -0.6532113404985248, -0.6569039652221527, -0.9127769080756494, -0.8081998187426868, -1.0007343851317076, -1.0184881822503913, -0.9531975236970737, -0.8053011908028027, -1.0180961378390316, -0.9807764366637837, -1.0402074383673707, -0.7973338416477831, -0.6949170102389024, -0.8059012659901285, -0.6538869011083014, -0.44121014833852923, -0.49483633771160573, -0.10775199708938529, -0.1820127388450939, -0.18148240153767412, 0.11626038082721783, 0.17939121669600083, 0.2821402008131634, 0.18998696385777164, 0.5847623697612749, 0.70238715536798, 0.8656977729449302, 0.6882863159609919, 0.7685188549529351, 0.8694600239327986, 1.0068519923893162, 0.9892229550924185, 1.079862017242793, 1.0581024578503306, 0.969341646905385, 1.0522038586550084, 0.8121946206801294, 0.7213926696757768, 0.6438221361887777, 0.5413161067635588, 0.571012615649285, 0.401507390269303, 0.22457100145880288, 0.11016897976053397, -0.016869186348259513, -0.05293191632417447, -0.2029099743930203, -0.16430015907623585, -0.2934010335859345, -0.6969445709187648, -0.6349760957985346, -0.7343981791994132, -0.9101555240983672, -0.8284881637465515, -1.1006490587335258, -0.9822621084620091, -1.003442866554004, -1.1219392711039715, -0.8878320013902534, -0.749754889451363, -0.8198745727010215, -0.8991917101685305, -0.5795051436858543, -0.6228408937881206, -0.6844776744224815, -0.418847024765288, -0.44301812435612403, -0.2618527134505307, -0.22662990970641783, 0.14094365572756107], \"text\": \"\", \"mode\": \"lines\", \"x\": [0.0, 0.12693303650867852, 0.25386607301735703, 0.3807991095260356, 0.5077321460347141, 0.6346651825433925, 0.7615982190520711, 0.8885312555607496, 1.0154642920694281, 1.1423973285781066, 1.269330365086785, 1.3962634015954636, 1.5231964381041423, 1.6501294746128208, 1.7770625111214993, 1.9039955476301778, 2.0309285841388562, 2.1578616206475347, 2.284794657156213, 2.4117276936648917, 2.53866073017357, 2.6655937666822487, 2.792526803190927, 2.9194598396996057, 3.0463928762082846, 3.173325912716963, 3.3002589492256416, 3.42719198573432, 3.5541250222429985, 3.681058058751677, 3.8079910952603555, 3.934924131769034, 4.0618571682777125, 4.188790204786391, 4.3157232412950695, 4.442656277803748, 4.569589314312426, 4.696522350821105, 4.823455387329783, 4.950388423838462, 5.07732146034714, 5.204254496855819, 5.331187533364497, 5.458120569873176, 5.585053606381854, 5.711986642890533, 5.838919679399211, 5.96585271590789, 6.092785752416569, 6.219718788925247, 6.346651825433926, 6.473584861942604, 6.600517898451283, 6.727450934959961, 6.85438397146864, 6.981317007977318, 7.108250044485997, 7.235183080994675, 7.362116117503354, 7.489049154012032, 7.615982190520711, 7.742915227029389, 7.869848263538068, 7.996781300046746, 8.123714336555425, 8.250647373064103, 8.377580409572783, 8.50451344608146, 8.631446482590139, 8.758379519098817, 8.885312555607497, 9.012245592116175, 9.139178628624853, 9.266111665133531, 9.39304470164221, 9.519977738150889, 9.646910774659567, 9.773843811168245, 9.900776847676925, 10.027709884185603, 10.15464292069428, 10.28157595720296, 10.408508993711639, 10.535442030220317, 10.662375066728995, 10.789308103237675, 10.916241139746353, 11.04317417625503, 11.170107212763709, 11.297040249272388, 11.423973285781067, 11.550906322289745, 11.677839358798423, 11.804772395307102, 11.93170543181578, 12.058638468324459, 12.185571504833138, 12.312504541341816, 12.439437577850494, 12.566370614359172], \"type\": \"scatter\", \"name\": \"sin+noise\"}], {\"yaxis1\": {\"title\": \"\", \"titlefont\": {\"color\": \"#4D5663\"}, \"showgrid\": true, \"zerolinecolor\": \"#E1E5ED\", \"tickfont\": {\"color\": \"#4D5663\"}, \"gridcolor\": \"#E1E5ED\"}, \"paper_bgcolor\": \"#F5F6F9\", \"xaxis1\": {\"title\": \"x\", \"titlefont\": {\"color\": \"#4D5663\"}, \"showgrid\": true, \"zerolinecolor\": \"#E1E5ED\", \"tickfont\": {\"color\": \"#4D5663\"}, \"gridcolor\": \"#E1E5ED\"}, \"plot_bgcolor\": \"#F5F6F9\", \"width\": 600, \"legend\": {\"font\": {\"color\": \"#4D5663\"}, \"bgcolor\": \"#F5F6F9\"}, \"height\": 400, \"titlefont\": {\"color\": \"#4D5663\"}}, {\"linkText\": \"Export to plot.ly\", \"showLink\": true})});</script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import pandas as pd\n",
    "df = pd.DataFrame(np.c_[x, y, y2], columns=[\"x\", \"sin\", \"sin+noise\"])\n",
    "df.iplot(x=\"x\", y=[\"sin\", \"sin+noise\"], dimensions=[600, 400], width=2, xTitle=\"x\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "如果设置`iplot()`方法的`asFigure`参数为`True`，则返回可以使用`iplot()`函数绘图的图表对象："
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "plotly.graph_objs.graph_objs.Figure"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "fig = df.iplot(x=\"x\", y=[\"sin\", \"sin+noise\"], \n",
    "               dimensions=[600, 400], width=2, xTitle=\"x\", asFigure=True)\n",
    "type(fig)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "上面的`fig`对象几乎和前面的`fig`字典相同，不过它还提供了通过属性访问键值的功能，例如下面是第一条曲线的绘图属性："
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "{'color': 'rgba(255, 153, 51, 1.0)', 'dash': 'solid', 'width': 2}"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "fig.data[0].line"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "下面修改第一条曲线的粗细之后调用`iplot()`函数输出图表："
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"9bf3b8f8-2b08-4326-8638-ebee642fef67\" style=\"height: 400; width: 600px;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"9bf3b8f8-2b08-4326-8638-ebee642fef67\", [{\"line\": {\"dash\": \"solid\", \"color\": \"rgba(255, 153, 51, 1.0)\", \"width\": 4}, \"y\": [0.0, 0.12659245357374926, 0.2511479871810792, 0.3716624556603276, 0.4861967361004687, 0.5929079290546404, 0.690079011482112, 0.7761464642917568, 0.8497254299495144, 0.9096319953545183, 0.9549022414440739, 0.984807753012208, 0.998867339183008, 0.9968547759519424, 0.9788024462147787, 0.9450008187146685, 0.8959937742913359, 0.8325698546347714, 0.7557495743542583, 0.6667690005162917, 0.5670598638627709, 0.4582265217274105, 0.3420201433256689, 0.2203105327865408, 0.09505604330418244, -0.03172793349806786, -0.15800139597335008, -0.28173255684142984, -0.4009305354066138, -0.5136773915734064, -0.6181589862206053, -0.7126941713788629, -0.7957618405308321, -0.8660254037844388, -0.9223542941045814, -0.9638421585599422, -0.9898214418809327, -0.9998741276738751, -0.9938384644612541, -0.9718115683235417, -0.9341478602651068, -0.881453363447582, -0.8145759520503358, -0.7345917086575332, -0.6427876096865396, -0.5406408174555974, -0.4297949120891719, -0.31203344569848707, -0.18925124436040974, -0.06342391965656452, 0.06342391965656492, 0.18925124436041013, 0.31203344569848745, 0.4297949120891715, 0.5406408174555978, 0.6427876096865391, 0.7345917086575334, 0.8145759520503356, 0.8814533634475821, 0.9341478602651067, 0.9718115683235418, 0.9938384644612541, 0.9998741276738751, 0.9898214418809328, 0.963842158559942, 0.9223542941045816, 0.8660254037844383, 0.7957618405308319, 0.7126941713788629, 0.6181589862206056, 0.5136773915734058, 0.40093053540661344, 0.2817325568414299, 0.15800139597335056, 0.03172793349806701, -0.09505604330418282, -0.22031053278654034, -0.342020143325668, -0.45822652172741085, -0.5670598638627707, -0.6667690005162913, -0.7557495743542588, -0.8325698546347716, -0.8959937742913359, -0.9450008187146683, -0.9788024462147789, -0.9968547759519424, -0.998867339183008, -0.9848077530122081, -0.9549022414440737, -0.9096319953545183, -0.8497254299495145, -0.7761464642917573, -0.6900790114821116, -0.5929079290546404, -0.48619673610046904, -0.3716624556603267, -0.2511479871810788, -0.1265924535737493, -4.898587196589413e-16], \"text\": \"\", \"mode\": \"lines\", \"x\": [0.0, 0.12693303650867852, 0.25386607301735703, 0.3807991095260356, 0.5077321460347141, 0.6346651825433925, 0.7615982190520711, 0.8885312555607496, 1.0154642920694281, 1.1423973285781066, 1.269330365086785, 1.3962634015954636, 1.5231964381041423, 1.6501294746128208, 1.7770625111214993, 1.9039955476301778, 2.0309285841388562, 2.1578616206475347, 2.284794657156213, 2.4117276936648917, 2.53866073017357, 2.6655937666822487, 2.792526803190927, 2.9194598396996057, 3.0463928762082846, 3.173325912716963, 3.3002589492256416, 3.42719198573432, 3.5541250222429985, 3.681058058751677, 3.8079910952603555, 3.934924131769034, 4.0618571682777125, 4.188790204786391, 4.3157232412950695, 4.442656277803748, 4.569589314312426, 4.696522350821105, 4.823455387329783, 4.950388423838462, 5.07732146034714, 5.204254496855819, 5.331187533364497, 5.458120569873176, 5.585053606381854, 5.711986642890533, 5.838919679399211, 5.96585271590789, 6.092785752416569, 6.219718788925247, 6.346651825433926, 6.473584861942604, 6.600517898451283, 6.727450934959961, 6.85438397146864, 6.981317007977318, 7.108250044485997, 7.235183080994675, 7.362116117503354, 7.489049154012032, 7.615982190520711, 7.742915227029389, 7.869848263538068, 7.996781300046746, 8.123714336555425, 8.250647373064103, 8.377580409572783, 8.50451344608146, 8.631446482590139, 8.758379519098817, 8.885312555607497, 9.012245592116175, 9.139178628624853, 9.266111665133531, 9.39304470164221, 9.519977738150889, 9.646910774659567, 9.773843811168245, 9.900776847676925, 10.027709884185603, 10.15464292069428, 10.28157595720296, 10.408508993711639, 10.535442030220317, 10.662375066728995, 10.789308103237675, 10.916241139746353, 11.04317417625503, 11.170107212763709, 11.297040249272388, 11.423973285781067, 11.550906322289745, 11.677839358798423, 11.804772395307102, 11.93170543181578, 12.058638468324459, 12.185571504833138, 12.312504541341816, 12.439437577850494, 12.566370614359172], \"type\": \"scatter\", \"name\": \"sin\"}, {\"line\": {\"dash\": \"solid\", \"color\": \"rgba(55, 128, 191, 1.0)\", \"width\": 2}, \"y\": [-0.15338509179911267, -0.02794507123597828, 0.2904355380422946, 0.24176895550706848, 0.5084752619603877, 0.507974605084588, 0.7260056707174737, 0.8213965054561113, 0.9398192645183379, 0.7607868884742961, 0.915404479184352, 1.185668532669166, 1.0230136473641693, 0.9882584492218822, 1.012334636603953, 0.9811148530949654, 0.907886168547481, 0.7916958976427075, 0.563045793714638, 0.5300526135491022, 0.6752579699795814, 0.425124675654778, 0.36806359032620484, 0.2308222540053409, 0.14800502535125198, 0.02225664026265381, -0.24005665095716122, -0.411596154866546, -0.41873210209612965, -0.6012534427994234, -0.6532113404985248, -0.6569039652221527, -0.9127769080756494, -0.8081998187426868, -1.0007343851317076, -1.0184881822503913, -0.9531975236970737, -0.8053011908028027, -1.0180961378390316, -0.9807764366637837, -1.0402074383673707, -0.7973338416477831, -0.6949170102389024, -0.8059012659901285, -0.6538869011083014, -0.44121014833852923, -0.49483633771160573, -0.10775199708938529, -0.1820127388450939, -0.18148240153767412, 0.11626038082721783, 0.17939121669600083, 0.2821402008131634, 0.18998696385777164, 0.5847623697612749, 0.70238715536798, 0.8656977729449302, 0.6882863159609919, 0.7685188549529351, 0.8694600239327986, 1.0068519923893162, 0.9892229550924185, 1.079862017242793, 1.0581024578503306, 0.969341646905385, 1.0522038586550084, 0.8121946206801294, 0.7213926696757768, 0.6438221361887777, 0.5413161067635588, 0.571012615649285, 0.401507390269303, 0.22457100145880288, 0.11016897976053397, -0.016869186348259513, -0.05293191632417447, -0.2029099743930203, -0.16430015907623585, -0.2934010335859345, -0.6969445709187648, -0.6349760957985346, -0.7343981791994132, -0.9101555240983672, -0.8284881637465515, -1.1006490587335258, -0.9822621084620091, -1.003442866554004, -1.1219392711039715, -0.8878320013902534, -0.749754889451363, -0.8198745727010215, -0.8991917101685305, -0.5795051436858543, -0.6228408937881206, -0.6844776744224815, -0.418847024765288, -0.44301812435612403, -0.2618527134505307, -0.22662990970641783, 0.14094365572756107], \"text\": \"\", \"mode\": \"lines\", \"x\": [0.0, 0.12693303650867852, 0.25386607301735703, 0.3807991095260356, 0.5077321460347141, 0.6346651825433925, 0.7615982190520711, 0.8885312555607496, 1.0154642920694281, 1.1423973285781066, 1.269330365086785, 1.3962634015954636, 1.5231964381041423, 1.6501294746128208, 1.7770625111214993, 1.9039955476301778, 2.0309285841388562, 2.1578616206475347, 2.284794657156213, 2.4117276936648917, 2.53866073017357, 2.6655937666822487, 2.792526803190927, 2.9194598396996057, 3.0463928762082846, 3.173325912716963, 3.3002589492256416, 3.42719198573432, 3.5541250222429985, 3.681058058751677, 3.8079910952603555, 3.934924131769034, 4.0618571682777125, 4.188790204786391, 4.3157232412950695, 4.442656277803748, 4.569589314312426, 4.696522350821105, 4.823455387329783, 4.950388423838462, 5.07732146034714, 5.204254496855819, 5.331187533364497, 5.458120569873176, 5.585053606381854, 5.711986642890533, 5.838919679399211, 5.96585271590789, 6.092785752416569, 6.219718788925247, 6.346651825433926, 6.473584861942604, 6.600517898451283, 6.727450934959961, 6.85438397146864, 6.981317007977318, 7.108250044485997, 7.235183080994675, 7.362116117503354, 7.489049154012032, 7.615982190520711, 7.742915227029389, 7.869848263538068, 7.996781300046746, 8.123714336555425, 8.250647373064103, 8.377580409572783, 8.50451344608146, 8.631446482590139, 8.758379519098817, 8.885312555607497, 9.012245592116175, 9.139178628624853, 9.266111665133531, 9.39304470164221, 9.519977738150889, 9.646910774659567, 9.773843811168245, 9.900776847676925, 10.027709884185603, 10.15464292069428, 10.28157595720296, 10.408508993711639, 10.535442030220317, 10.662375066728995, 10.789308103237675, 10.916241139746353, 11.04317417625503, 11.170107212763709, 11.297040249272388, 11.423973285781067, 11.550906322289745, 11.677839358798423, 11.804772395307102, 11.93170543181578, 12.058638468324459, 12.185571504833138, 12.312504541341816, 12.439437577850494, 12.566370614359172], \"type\": \"scatter\", \"name\": \"sin+noise\"}], {\"yaxis1\": {\"title\": \"\", \"titlefont\": {\"color\": \"#4D5663\"}, \"showgrid\": true, \"zerolinecolor\": \"#E1E5ED\", \"tickfont\": {\"color\": \"#4D5663\"}, \"gridcolor\": \"#E1E5ED\"}, \"paper_bgcolor\": \"#F5F6F9\", \"xaxis1\": {\"title\": \"x\", \"titlefont\": {\"color\": \"#4D5663\"}, \"showgrid\": true, \"zerolinecolor\": \"#E1E5ED\", \"tickfont\": {\"color\": \"#4D5663\"}, \"gridcolor\": \"#E1E5ED\"}, \"plot_bgcolor\": \"#F5F6F9\", \"width\": 600, \"legend\": {\"font\": {\"color\": \"#4D5663\"}, \"bgcolor\": \"#F5F6F9\"}, \"height\": 400, \"titlefont\": {\"color\": \"#4D5663\"}}, {\"linkText\": \"Export to plot.ly\", \"showLink\": true})});</script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "fig.data[0].line.width = 4\n",
    "iplot(fig)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "参考链接：\n",
    "\n",
    "* Plotly的Python API文档: https://plot.ly/python/\n",
    "* cufflinks项目: https://github.com/santosjorge/cufflinks"
   ]
  }
 ],
 "metadata": {
  "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.5.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}