05.1 Graphing Data with Plotly.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "# Using Plotly to Create an Interactive Graph \n",
    "\n",
    "[Plotly](https://plot.ly/) is an oustanding web application for graphing data. You can create an account and plot graphs at [plot.ly](https://plot.ly/), or you can use plotly offline to create graphs. The graphs are displayed in a web browser and are interactive, so plotly is works quite well in the Jupyter ecosystem.\n",
    "\n",
    "If you want to stream data and view your graph remotely, then you will need to create an account at [plot.ly](https://plot.ly/). However, to use plotly in Jupyter, you do not need an account."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Read Data\n",
    "\n",
    "Read data from a file. You can use `pandas` or `csv` as discussed in Tutorial 04. In this case, I'm graphing x-position and voltage data from a Young's Double Slit experiment."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "import pandas as pd"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Read the data file and define a dataframe object (df for dataframe)\n",
    "df_all = pd.read_table('04-files/double-slit-data-with-header.txt')\n",
    "#create an array of voltage and x-position data for all rows\n",
    "Vlist = df_all['V (volts)'].tolist() #create list\n",
    "xlist = df_all['x (m)'].tolist() #create list\n",
    "headers=df_all.columns.values.tolist()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Using Plotly Offline\n",
    "\n",
    "Import the necessary package."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "from plotly.offline import download_plotlyjs, init_notebook_mode, iplot"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This command is required to display the plotly graph in the notebook."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>requirejs.config({paths: { 'plotly': ['https://cdn.plot.ly/plotly-latest.min']},});if(!window.Plotly) {{require(['plotly'],function(plotly) {window.Plotly=plotly;});}}</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<script>requirejs.config({paths: { 'plotly': ['https://cdn.plot.ly/plotly-latest.min']},});if(!window.Plotly) {{require(['plotly'],function(plotly) {window.Plotly=plotly;});}}</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "init_notebook_mode(connected=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Use `iplot` to plot the data."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.plotly.v1+json": {
       "data": [
        {
         "x": [
          -2.6,
          -2.5,
          -2.4,
          -2.3,
          -2.2,
          -2.1,
          -2,
          -1.9,
          -1.8,
          -1.7,
          -1.6,
          -1.5,
          -1.4,
          -1.3,
          -1.2,
          -1.1,
          -1,
          -0.9,
          -0.8,
          -0.7,
          -0.6,
          -0.5,
          -0.4,
          -0.3,
          -0.2,
          -0.1,
          0,
          0.1,
          0.2,
          0.3,
          0.4,
          0.5,
          0.6,
          0.7,
          0.8,
          0.9,
          1,
          1.1,
          1.2,
          1.3,
          1.4,
          1.5,
          1.6,
          1.7,
          1.8,
          1.9,
          2,
          2.1,
          2.2,
          2.3,
          2.4,
          2.5,
          2.6,
          2.7,
          2.8,
          2.9,
          3
         ],
         "y": [
          0.08,
          0.11,
          0.18,
          0.23,
          0.29,
          0.39,
          0.57,
          0.78,
          0.96,
          1.17,
          1.2,
          0.87,
          0.62,
          0.63,
          1,
          1.74,
          2.62,
          3.24,
          3.4,
          3,
          2.22,
          1.39,
          0.91,
          2.06,
          3.29,
          4.34,
          4.7,
          4.34,
          3.27,
          1.94,
          1.12,
          0.88,
          1.39,
          2.16,
          2.95,
          3.4,
          3.22,
          2.54,
          1.69,
          0.97,
          0.57,
          0.55,
          0.76,
          1.02,
          1.18,
          1.16,
          0.97,
          0.7,
          0.48,
          0.31,
          0.23,
          0.19,
          0.17,
          0.14,
          0.1,
          0.08,
          0.07
         ]
        }
       ],
       "layout": {
        "font": {
         "size": 16
        },
        "title": "Young's Double Slit Experiment",
        "xaxis": {
         "title": "x-position (m)",
         "titlefont": {
          "family": "Courier New, monospace",
          "size": 18
         }
        },
        "yaxis": {
         "title": "Photodiode Voltage (V)",
         "titlefont": {
          "family": "Courier New, monospace",
          "size": 18
         }
        }
       }
      },
      "text/html": [
       "<div id=\"6a241d92-53d7-4f61-a109-2bf1644257d8\" style=\"height: 525px; width: 100%;\" 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(\"6a241d92-53d7-4f61-a109-2bf1644257d8\", [{\"x\": [-2.6, -2.5, -2.4, -2.3, -2.2, -2.1, -2.0, -1.9, -1.8, -1.7, -1.6, -1.5, -1.4, -1.3, -1.2, -1.1, -1.0, -0.9, -0.8, -0.7, -0.6, -0.5, -0.4, -0.3, -0.2, -0.1, 0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2.0, 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8, 2.9, 3.0], \"y\": [0.08, 0.11, 0.18, 0.23, 0.29, 0.39, 0.57, 0.78, 0.96, 1.17, 1.2, 0.87, 0.62, 0.63, 1.0, 1.74, 2.62, 3.24, 3.4, 3.0, 2.22, 1.39, 0.91, 2.06, 3.29, 4.34, 4.7, 4.34, 3.27, 1.94, 1.12, 0.88, 1.39, 2.16, 2.95, 3.4, 3.22, 2.54, 1.69, 0.97, 0.57, 0.55, 0.76, 1.02, 1.18, 1.16, 0.97, 0.7, 0.48, 0.31, 0.23, 0.19, 0.17, 0.14, 0.1, 0.08, 0.07]}], {\"title\": \"Young's Double Slit Experiment\", \"font\": {\"size\": 16}, \"xaxis\": {\"title\": \"x-position (m)\", \"titlefont\": {\"family\": \"Courier New, monospace\", \"size\": 18}}, \"yaxis\": {\"title\": \"Photodiode Voltage (V)\", \"titlefont\": {\"family\": \"Courier New, monospace\", \"size\": 18}}}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\"})});</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<div id=\"6a241d92-53d7-4f61-a109-2bf1644257d8\" style=\"height: 525px; width: 100%;\" 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(\"6a241d92-53d7-4f61-a109-2bf1644257d8\", [{\"x\": [-2.6, -2.5, -2.4, -2.3, -2.2, -2.1, -2.0, -1.9, -1.8, -1.7, -1.6, -1.5, -1.4, -1.3, -1.2, -1.1, -1.0, -0.9, -0.8, -0.7, -0.6, -0.5, -0.4, -0.3, -0.2, -0.1, 0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2.0, 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8, 2.9, 3.0], \"y\": [0.08, 0.11, 0.18, 0.23, 0.29, 0.39, 0.57, 0.78, 0.96, 1.17, 1.2, 0.87, 0.62, 0.63, 1.0, 1.74, 2.62, 3.24, 3.4, 3.0, 2.22, 1.39, 0.91, 2.06, 3.29, 4.34, 4.7, 4.34, 3.27, 1.94, 1.12, 0.88, 1.39, 2.16, 2.95, 3.4, 3.22, 2.54, 1.69, 0.97, 0.57, 0.55, 0.76, 1.02, 1.18, 1.16, 0.97, 0.7, 0.48, 0.31, 0.23, 0.19, 0.17, 0.14, 0.1, 0.08, 0.07]}], {\"title\": \"Young's Double Slit Experiment\", \"font\": {\"size\": 16}, \"xaxis\": {\"title\": \"x-position (m)\", \"titlefont\": {\"family\": \"Courier New, monospace\", \"size\": 18}}, \"yaxis\": {\"title\": \"Photodiode Voltage (V)\", \"titlefont\": {\"family\": \"Courier New, monospace\", \"size\": 18}}}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\"})});</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "iplot({'data': [{\"x\": xlist, \"y\": Vlist}], \n",
    "        'layout': {'title': \"Young's Double Slit Experiment\", \n",
    "                   'font': dict(size=16),\n",
    "                   'xaxis': dict( title='x-position (m)',\n",
    "                                 titlefont=dict(family='Courier New, monospace', \n",
    "                                                size=18)),\n",
    "                   'yaxis': dict( title='Photodiode Voltage (V)',\n",
    "                                 titlefont=dict(family='Courier New, monospace', \n",
    "                                                size=18))}\n",
    "      })"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If you hover over the plotly graph, you will see a toolbar in the upper right corner of the graph. Use the tools to zoom, autoscale, pan or show perpendicular lines at a data point. As you hover over each data point, you'll see its coordinate pair."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "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.6.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}