netflix_datetimes.ipynb

{
 "metadata": {
  "name": "",
  "signature": "sha256:9a96a50f975c80838a44d491c288043ca4b18dbbb36cfd754c8ee319c7e30cb8"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "source": [
      "Python datetime and Plotly"
     ]
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "do's and don'ts"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "First, import a few modules from the Plotly python package:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "import plotly.plotly as py\n",
      "import plotly.tools as tls\n",
      "from plotly.graph_objs import *"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 1
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "The wrong way"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "trace1 = Scatter(\n",
      "   x = ['07/11-07:59:40', '07/11-07:59:42', '07/11-07:59:50', '07/11-08:00:00'],\n",
      "   y = ['10','20','5','15']\n",
      ")\n",
      " \n",
      "trace2 = Scatter(\n",
      "   x = ['07/11-07:59:40', '07/11-07:59:43', '07/11-07:59:51', '07/11-08:00:00'],\n",
      "   y = ['1','10','5','10']\n",
      ")\n",
      "\n",
      "data = Data([trace1, trace2])\n",
      "\n",
      "fig = Figure(data= data)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 2
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "py.iplot(fig, filename='netflix_datetimes1')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<iframe id=\"igraph\" scrolling=\"no\" style=\"border:none;\"seamless=\"seamless\" src=\"https://plot.ly/~etpinard/427\" height=\"525\" width=\"100%\"></iframe>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x7f8c3c5d91d0>"
       ]
      }
     ],
     "prompt_number": 3
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Here, the x-coordinates are taken as strings. \n",
      "\n",
      "As with all string coordinates send to Plotly, each unique x element correspond to a coordinate point. The inferred coordinates are created in sequence, from the first element to last element and from the first trace to the last.\n",
      "\n",
      "In other words, Plotly cannot infer that `'07/11-07:59:43'` is in fact smaller than `'07/11-07:59:50'`."
     ]
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "The right way"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Plotly understands Python datetimes (built with the `datetime` package of the Standard Library). More info on Python datetime can be found [here](https://docs.python.org/2/library/datetime.html#strftime-and-strptime-behavior).\n",
      "\n",
      "So,"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from datetime import datetime\n",
      "\n",
      "def convert_to_datetime(times):\n",
      "    return [datetime.strptime(time+' 2014', '%m/%d-%X %Y') for time in times] \n",
      "\n",
      "# Note that we must the year to each datetime in order to fully define them\n",
      "\n",
      "trace1 = Scatter(\n",
      "   x = convert_to_datetime(['07/11-07:59:40', \n",
      "                            '07/11-07:59:42', \n",
      "                            '07/11-07:59:50', \n",
      "                            '07/11-08:00:00']),\n",
      "   y = ['10','20','5','15']\n",
      ")\n",
      " \n",
      "trace2 = Scatter(\n",
      "   x = convert_to_datetime(['07/11-07:59:40', \n",
      "                            '07/11-07:59:43', \n",
      "                            '07/11-07:59:51', \n",
      "                            '07/11-08:00:00']),\n",
      "   y = ['1','10','5','10']\n",
      ")\n",
      "\n",
      "data = Data([trace1, trace2])\n",
      "\n",
      "fig = Figure(data= data)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 5
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "py.iplot(fig, filename='netflix_datetimes2')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<iframe id=\"igraph\" scrolling=\"no\" style=\"border:none;\"seamless=\"seamless\" src=\"https://plot.ly/~etpinard/428\" height=\"525\" width=\"100%\"></iframe>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x7f8c24be7b10>"
       ]
      }
     ],
     "prompt_number": 6
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "The right way (2)"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Plotly also understands a specific string format.\n",
      "\n",
      "If you have the chance to modify the string format, this solution does not require the `datetime` package:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "trace1 = Scatter(\n",
      "   x = ['2014-07-11 07:59:40', \n",
      "        '2014-07-11 07:59:42', \n",
      "        '2014-07-11 07:59:50', \n",
      "        '2014-07/11 08:00:00'],\n",
      "   y = ['10','20','5','15']\n",
      ")\n",
      " \n",
      "trace2 = Scatter(\n",
      "   x = ['2014-07-11 07:59:40', \n",
      "        '2014-07-11 07:59:43', \n",
      "        '2014-07-11 07:59:51', \n",
      "        '2014-07-11 08:00:00'],\n",
      "   y = ['1','10','5','10']\n",
      ")\n",
      "\n",
      "data = Data([trace1, trace2])\n",
      "\n",
      "fig = Figure(data= data)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 7
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "py.iplot(fig, filename='netflix_datetimes3')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<iframe id=\"igraph\" scrolling=\"no\" style=\"border:none;\"seamless=\"seamless\" src=\"https://plot.ly/~etpinard/429\" height=\"525\" width=\"100%\"></iframe>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x7f8c3c5d9390>"
       ]
      }
     ],
     "prompt_number": 8
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "<br>"
     ]
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "To learn more about Plotly's Python API"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Refer to\n",
      "\n",
      "* our online documentation <a href=\"https://plot.ly/python/\" target=\"_blank\">page</a> or\n",
      "* our <a href=\"http://nbviewer.ipython.org/github/plotly/python-user-guide/blob/master/s00_homepage/s00_homepage.ipynb\" target=\"_blank\">User Guide</a>."
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "<br>\n",
      "<hr>\n",
      "<br>"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "<div style=\"float:right; \\\">\n",
      "    <img src=\"http://i.imgur.com/4vwuxdJ.png\" \n",
      " align=right style=\"float:right; margin-left: 5px; margin-top: -10px\" />\n",
      "</div>\n",
      "\n",
      "<h4 style=\"margin-top:60px;\"> Got Questions or Feedback? </h4>\n",
      "\n",
      "About <a href=\"https://plot.ly\" target=\"_blank\">Plotly</a>\n",
      "\n",
      "* email: feedback@plot.ly \n",
      "* tweet: \n",
      "<a href=\"https://twitter.com/plotlygraphs\" target=\"_blank\">@plotlygraphs</a>\n",
      "\n",
      "<h4 style=\"margin-top:30px;\">Notebook styling ideas</h4>\n",
      "\n",
      "Big thanks to\n",
      "\n",
      "* <a href=\"http://nbviewer.ipython.org/github/CamDavidsonPilon/Probabilistic-Programming-and-Bayesian-Methods-for-Hackers/blob/master/Prologue/Prologue.ipynb\" target=\"_blank\">Cam Davidson-Pilon</a>\n",
      "* <a href=\"http://lorenabarba.com/blog/announcing-aeropython/#.U1ULXdX1LJ4.google_plusone_share\" target=\"_blank\">Lorena A. Barba</a>\n",
      "\n",
      "<br>"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import display, HTML\n",
      "import urllib2\n",
      "url = 'https://raw.githubusercontent.com/plotly/python-user-guide/master/custom.css'\n",
      "display(HTML(urllib2.urlopen(url).read()))"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<style>\n",
        "    /*body {\n",
        "        background-color: #F5F5F5;\n",
        "    }*/\n",
        "    div.cell{\n",
        "        width: 850px;\n",
        "        margin-left: 10% !important;\n",
        "        margin-right: auto;\n",
        "    }\n",
        "    h1 {\n",
        "        font-family: \"Open sans\",verdana,arial,sans-serif;\n",
        "    }\n",
        "    .text_cell_render h1 {\n",
        "        font-weight: 200;\n",
        "        font-size: 40pt;\n",
        "        line-height: 100%;\n",
        "        color:#447adb;\n",
        "        margin-bottom: 0em;\n",
        "        margin-top: 0em;\n",
        "        display: block;\n",
        "        white-space: nowrap;\n",
        "    } \n",
        "    h2 {\n",
        "        font-family: \"Open sans\",verdana,arial,sans-serif;\n",
        "        text-indent:1em;\n",
        "    }\n",
        "    .text_cell_render h2 {\n",
        "        font-weight: 200;\n",
        "        font-size: 20pt;\n",
        "        font-style: italic;\n",
        "        line-height: 100%;\n",
        "        color:#447adb;\n",
        "        margin-bottom: 1.5em;\n",
        "        margin-top: 0.5em;\n",
        "        display: block;\n",
        "        white-space: nowrap;\n",
        "    } \n",
        "    h3 {\n",
        "        font-family: \"Open sans\",verdana,arial,sans-serif;\n",
        "    }\n",
        "    .text_cell_render h3 {\n",
        "        font-weight: 300;\n",
        "        font-size: 18pt;\n",
        "        line-height: 100%;\n",
        "        color:#447adb;\n",
        "        margin-bottom: 0.5em;\n",
        "        margin-top: 2em;\n",
        "        display: block;\n",
        "        white-space: nowrap;\n",
        "    }\n",
        "    h4 {\n",
        "        font-family: \"Open sans\",verdana,arial,sans-serif;\n",
        "    }\n",
        "    .text_cell_render h4 {\n",
        "        font-weight: 300;\n",
        "        font-size: 16pt;\n",
        "        color:#447adb;\n",
        "        margin-bottom: 0.5em;\n",
        "        margin-top: 0.5em;\n",
        "        display: block;\n",
        "        white-space: nowrap;\n",
        "    }\n",
        "    h5 {\n",
        "        font-family: \"Open sans\",verdana,arial,sans-serif;\n",
        "    }\n",
        "    .text_cell_render h5 {\n",
        "        font-weight: 300;\n",
        "        font-style: normal;\n",
        "        color: #1d3b84;\n",
        "        font-size: 16pt;\n",
        "        margin-bottom: 0em;\n",
        "        margin-top: 1.5em;\n",
        "        display: block;\n",
        "        white-space: nowrap;\n",
        "    }\n",
        "    div.text_cell_render{\n",
        "        font-family: \"Open sans\",verdana,arial,sans-serif;\n",
        "        line-height: 135%;\n",
        "        font-size: 125%;\n",
        "        width:750px;\n",
        "        margin-left:auto;\n",
        "        margin-right:auto;\n",
        "        text-align:justify;\n",
        "        text-justify:inter-word;\n",
        "    }\n",
        "    div.output_subarea.output_text.output_pyout {\n",
        "        overflow-x: auto;\n",
        "        overflow-y: scroll;\n",
        "        max-height: 300px;\n",
        "    }\n",
        "    div.output_subarea.output_stream.output_stdout.output_text {\n",
        "        overflow-x: auto;\n",
        "        overflow-y: scroll;\n",
        "        max-height: 300px;\n",
        "    }\n",
        "    div.output_subarea.output_html.rendered_html {\n",
        "        overflow-x: scroll;\n",
        "        max-width: 100%;\n",
        "      /*  overflow-y: scroll; */\n",
        "      /*  max-height: 300px;   */\n",
        "    }\n",
        "    code{\n",
        "      font-size: 78%;\n",
        "    }\n",
        "    .rendered_html code{\n",
        "    background-color: transparent;\n",
        "    }\n",
        "    ul{\n",
        "        /* color:#447adb; */  \n",
        "        margin: 2em;\n",
        "    }\n",
        "    ul li{\n",
        "        padding-left: 0.5em; \n",
        "        margin-bottom: 0.5em; \n",
        "        margin-top: 0.5em; \n",
        "    }\n",
        "    ul li li{\n",
        "        padding-left: 0.2em; \n",
        "        margin-bottom: 0.2em; \n",
        "        margin-top: 0.2em; \n",
        "    }\n",
        "    ol{\n",
        "        /* color:#447adb; */  \n",
        "        margin: 2em;\n",
        "    }\n",
        "    ol li{\n",
        "        padding-left: 0.5em; \n",
        "        margin-bottom: 0.5em; \n",
        "        margin-top: 0.5em; \n",
        "    }\n",
        "    /*.prompt{\n",
        "        display: None;\n",
        "    } */\n",
        "    ul li{\n",
        "        padding-left: 0.5em; \n",
        "        margin-bottom: 0.5em; \n",
        "        margin-top: 0.2em; \n",
        "    }\n",
        "    a:link{\n",
        "       font-weight: bold;\n",
        "       color:#447adb;\n",
        "    }\n",
        "    a:visited{\n",
        "       font-weight: bold;\n",
        "       color: #1d3b84;\n",
        "    }\n",
        "    a:hover{\n",
        "       font-weight: bold;\n",
        "       color: #1d3b84;\n",
        "    }\n",
        "    a:focus{\n",
        "       font-weight: bold;\n",
        "       color:#447adb;\n",
        "    }\n",
        "    a:active{\n",
        "       font-weight: bold;\n",
        "       color:#447adb;\n",
        "    }\n",
        "    .rendered_html :link {\n",
        "       text-decoration: none; \n",
        "    }\n",
        "    .rendered_html :hover {\n",
        "       text-decoration: none; \n",
        "    }\n",
        "    .rendered_html :visited {\n",
        "      text-decoration: none;\n",
        "    }\n",
        "    .rendered_html :focus {\n",
        "      text-decoration: none;\n",
        "    }\n",
        "    .rendered_html :active {\n",
        "      text-decoration: none;\n",
        "    }\n",
        "    .warning{\n",
        "        color: rgb( 240, 20, 20 )\n",
        "    } \n",
        "    hr {\n",
        "      color: #f3f3f3;\n",
        "      background-color: #f3f3f3;\n",
        "      height: 1px;\n",
        "    }\n",
        "    blockquote{\n",
        "      display:block;\n",
        "      background: #f3f3f3;\n",
        "      font-family: \"Open sans\",verdana,arial,sans-serif;\n",
        "      width:610px;\n",
        "      padding: 15px 15px 15px 15px;\n",
        "      text-align:justify;\n",
        "      text-justify:inter-word;\n",
        "      }\n",
        "      blockquote p {\n",
        "        margin-bottom: 0;\n",
        "        line-height: 125%;\n",
        "        font-size: 100%;\n",
        "      }\n",
        "   /* element.style {\n",
        "    } */  \n",
        "</style>\n",
        "<script>\n",
        "    MathJax.Hub.Config({\n",
        "                        TeX: {\n",
        "                           extensions: [\"AMSmath.js\"]\n",
        "                           },\n",
        "                tex2jax: {\n",
        "                    inlineMath: [ [\"$\",\"$\"], [\"\\\\(\",\"\\\\)\"] ],\n",
        "                    displayMath: [ [\"$$\",\"$$\"], [\"\\\\[\",\"\\\\]\"] ]\n",
        "                },\n",
        "                displayAlign: \"center\", // Change this to \"center\" to center equations.\n",
        "                \"HTML-CSS\": {\n",
        "                    styles: {\".MathJax_Display\": {\"margin\": 4}}\n",
        "                }\n",
        "        });\n",
        "</script>\n"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x7f0e99d77810>"
       ]
      }
     ],
     "prompt_number": 1
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}