S20-App-8-Build-a-Web-Based-Financial-Graph.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# The Python Mega Course: Build 10 Real World Applications\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This notebook is a summary of [The Python Mega Course: Build 10 Real World Applciations](https://www.udemy.com/the-python-mega-course), a comprehensive online Python course taught by Ardit Sulce. Each lecture name is clickable and takes you to the video lecture in the course."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Section 20: Application 8: Build a Web-Based Financial Graph\n",
    "***"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Program Demonstration](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This video lecture shows the finished version of the website running on a browser."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Note](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In the next video I install the pandas_datareader library with pip install pandas_datareader. There's currently a bug with that version of pandas_datareader, but the bug has been fixed in the development version of the library.\n",
    "\n",
    "Therefore, instead of doing pip install pandas_datareader please do the following instead:\n",
    "\n",
    "`pip install git+https://github.com/pydata/pandas-datareader.git`\n",
    "\n",
    "That will install the development version which works just fine."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Downloading Datasets with Python](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from pandas_datareader import data\n",
    "import datetime\n",
    "\n",
    "start = datetime.datetime(2016, 1, 1)\n",
    "end = datetime.datetime(2016, 3, 10)\n",
    "\n",
    "df = data.DataReader(name=\"GOOG\", data_source=\"google\", start=start, end=end)\n",
    "df"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Stock Market Data](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This video lecture explains what stock market data are and how to read them."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Stock Market Data Candlestick Charts](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This video lecture explains how to read a stock market candlestick chart."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Candlestick Charts with Bokeh Quadrants](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To create charts usign quadrant glyphs you can use `figure.quad`, but it's better to use `figure.rect`. We will actually use figure.rect in the next lecture."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Candlestick Charts with Bokeh Rectangles](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Here we start creating the figure object, and apply quadrant glyphs to the figure."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from pandas_datareader import data\n",
    "import datetime\n",
    "\n",
    "start = datetime.datetime(2016, 1, 1)\n",
    "end = datetime.datetime(2016, 3, 10)\n",
    "\n",
    "df = data.DataReader(name=\"GOOG\", data_source=\"google\", start=start, end=end)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "def inc_dec(c, o): \n",
    "    if c > o:\n",
    "        value = \"Increase\"\n",
    "    elif c < o:\n",
    "        value = \"Decrease\"\n",
    "    else:\n",
    "        value = \"Equal\"\n",
    "    return value\n",
    "\n",
    "df[\"Status\"] = [inc_dec(c, o) for c, o in zip(df.Close, df.Open)]\n",
    "df[\"Middle\"] = (df.Open + df.Close) / 2\n",
    "df[\"Height\"] = abs(df.Close - df.Open)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from bokeh.plotting import figure, show, output_file\n",
    "\n",
    "p = figure(x_axis_type='datetime', width=1000, height=300)\n",
    "p.title.text = \"Candlestick Chart\"\n",
    "\n",
    "hours_12 = 12 * 60 * 60 * 1000\n",
    "\n",
    "p.rect(df.index[df.Status==\"Increase\"], df.Middle[df.Status==\"Increase\"],\n",
    "       hours_12, df.Height[df.Status==\"Increase\"], fill_color=\"green\", line_color=\"black\")\n",
    "\n",
    "p.rect(df.index[df.Status==\"Decrease\"], df.Middle[df.Status==\"Decrease\"],\n",
    "       hours_12, df.Height[df.Status==\"Decrease\"], fill_color=\"red\", line_color=\"black\")\n",
    "\n",
    "output_file(\"CS.html\")\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Candlestick Segments](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from pandas_datareader import data\n",
    "import datetime\n",
    "\n",
    "start = datetime.datetime(2016, 1, 1)\n",
    "end = datetime.datetime(2016, 3, 10)\n",
    "\n",
    "df = data.DataReader(name=\"GOOG\", data_source=\"google\", start=start, end=end)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "def inc_dec(c, o): \n",
    "    if c > o:\n",
    "        value = \"Increase\"\n",
    "    elif c < o:\n",
    "        value = \"Decrease\"\n",
    "    else:\n",
    "        value = \"Equal\"\n",
    "    return value\n",
    "\n",
    "df[\"Status\"] = [inc_dec(c, o) for c, o in zip(df.Close, df.Open)]\n",
    "df[\"Middle\"] = (df.Open + df.Close) / 2\n",
    "df[\"Height\"] = abs(df.Close - df.Open)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from bokeh.plotting import figure, show, output_file\n",
    "\n",
    "p = figure(x_axis_type='datetime', width=1000, height=300)\n",
    "p.title.text = \"Candlestick Chart\"\n",
    "p.grid.grid_line_alpha = 0.3\n",
    "\n",
    "hours_12 = 12 * 60 * 60 * 1000\n",
    "\n",
    "p.segment(df.index, df.High, df.index, df.Low, color=\"Black\")\n",
    "\n",
    "p.rect(df.index[df.Status==\"Increase\"], df.Middle[df.Status==\"Increase\"],\n",
    "       hours_12, df.Height[df.Status==\"Increase\"], fill_color=\"green\", line_color=\"black\")\n",
    "\n",
    "p.rect(df.index[df.Status==\"Decrease\"], df.Middle[df.Status==\"Decrease\"],\n",
    "       hours_12, df.Height[df.Status==\"Decrease\"], fill_color=\"red\", line_color=\"black\")\n",
    "\n",
    "output_file(\"CS.html\")\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Styling the Chart](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "from pandas_datareader import data\n",
    "import datetime\n",
    "from bokeh.plotting import figure, show, output_file\n",
    "\n",
    "start = datetime.datetime(2015, 11, 1)\n",
    "end = datetime.datetime(2016, 3, 10)\n",
    "\n",
    "df = data.DataReader(name=\"GOOG\", data_source=\"yahoo\", start=start, end=end)\n",
    "\n",
    "def inc_dec(c, o): \n",
    "    if c > o:\n",
    "        value = \"Increase\"\n",
    "    elif c < o:\n",
    "        value = \"Decrease\"\n",
    "    else:\n",
    "        value = \"Equal\"\n",
    "    return value\n",
    "\n",
    "df[\"Status\"] = [inc_dec(c, o) for c, o in zip(df.Close, df.Open)]\n",
    "df[\"Middle\"] = (df.Open + df.Close) / 2\n",
    "df[\"Height\"] = abs(df.Close - df.Open)\n",
    "\n",
    "p = figure(x_axis_type='datetime', width=1000, height=300, sizing_mode='scale_width')\n",
    "p.title.text = \"Candlestick Chart\"\n",
    "p.grid.grid_line_alpha = 0.3\n",
    "\n",
    "hours_12 = 12 * 60 * 60 * 1000\n",
    "\n",
    "p.segment(df.index, df.High, df.index, df.Low, color=\"Black\")\n",
    "\n",
    "p.rect(df.index[df.Status==\"Increase\"], df.Middle[df.Status==\"Increase\"],\n",
    "       hours_12, df.Height[df.Status==\"Increase\"], fill_color=\"#CCFFFF\", line_color=\"black\")\n",
    "\n",
    "p.rect(df.index[df.Status==\"Decrease\"], df.Middle[df.Status==\"Decrease\"],\n",
    "       hours_12, df.Height[df.Status==\"Decrease\"], fill_color=\"#FF3333\", line_color=\"black\")\n",
    "\n",
    "output_file(\"CS.html\")\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [The Concept Behind Embedding Bokeh Charts in a Flask Webpage](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Since Bokeh charts are can embed Bokeh charts, you can embed them in your websites. The next lecture contains the code of a Flask web app with the Bokeh candlestick chart embedded in it."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Embedding the Bokeh Chart in a Webpage](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Please see the lecture \"Final Code for Application 8\" for the code."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Deploying the Chart Website to a Live Server](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This lecture covers how to deploy the app on Heroku. Below is a summary of the deployment steps:"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "1. Create an account on www.heroku.com if you don't have one already.\n",
    "2. Download and install Heroku CLI from www.heroku.com/\n",
    "3. Install gunicorn with \"pip install gunicorn\". Make sure you're using pip from your virtual environment if you have one.\n",
    "4. Create a requirement.txt file in the main app directory where the main Python app file is located. You can create that file by running \"pip freeze > requirements.txt\" in the command line. Make sure you're using pip from your virtual environment if you have one. The requirement.txt file should now contain a list of Python packages.\n",
    "5. Create a file named \"Procfile\" in the main app directory. The file should not contain any extension. Then type in this line inside: \"web: gunicorn script1:app\" where \"script1\" should be replaced with the name of your Python script and \"app\" with the name of the variable holding your Flask app.\n",
    "6. Create a runtime.txt file in the main app directory and type \"python-3.5.1\" inside, or even better go to the \"Python runtimes for Heroku\" webpage to see the current supported runtime and put that in the file.\n",
    "7. Open your computer terminal/command line to point to the directory where the Python file containing your app code is located.\n",
    "8. Using the terminal, log in to Heroku with \"heroku login\" \n",
    "9. Enter your Heroku email address\n",
    "10. Enter your Heroku password \n",
    "11. Create a new Heroku app with \"heroku create myawesomeappname\"\n",
    "17. Initialize a local git repository with \"git init\"\n",
    "18. Add your local application files to git with \"git add .\"\n",
    "19. Tell git your email address with \"git config --global user.email \"myemail@hotmail.com\"\". Make sure the email address is inside quotes here.\n",
    "20. Tell git your username (just pick whatever username) with \"config --global user.name \"whateverusername\"\". The username should be in quotes.\n",
    "21. Commit the changes with \"git commit -m \"first commit\"\". Make sure \"first commit\" is inside quotes.\n",
    "22. Before pushing the changes to Heroku, tell heroku the name of the app you want to use with heroku \"git:remote --app myawesomeappname\"\n",
    "23. Push the changes to Heroku with \"git push heroku master\"\n",
    "26. That should do it. Go ahead and open your app with \"heroku open\"."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Final Code for Application 8]()\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To run this web app, make sure the directory structure is like the one you see below and then execute `python script1.py` and then visit `localhost:5000` on your browser."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Project directory tree:"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`templates\n",
    "  layout.html\n",
    "  home.html\n",
    "  about.html\n",
    "  plot.html\n",
    "static\n",
    "  css\n",
    "    main.css\n",
    "script1.py\n",
    "plot.py\n",
    "runtime.txt\n",
    "Procfile\n",
    "requirements.txt`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "script1.py"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from flask import Flask, render_template\n",
    "\n",
    "app=Flask(__name__)\n",
    "\n",
    "@app.route('/plot/')\n",
    "def plot():\n",
    "    from pandas_datareader import data\n",
    "    import datetime\n",
    "    import fix_yahoo_finance as yf\n",
    "    yf.pdr_override()\n",
    "    from bokeh.plotting import figure, show, output_file\n",
    "    from bokeh.embed import components\n",
    "    from bokeh.resources import CDN \n",
    "\n",
    "    start=datetime.datetime(2015,11,1)\n",
    "    end=datetime.datetime(2016,3,10)\n",
    "\n",
    "    df=data.get_data_yahoo(tickers=\"GOOG\", start=start, end=end)\n",
    "\n",
    "\n",
    "    def inc_dec(c, o): \n",
    "        if c > o:\n",
    "            value = \"Increase\"\n",
    "        elif c < o:\n",
    "            value = \"Decrease\"\n",
    "        else:\n",
    "            value = \"Equal\"\n",
    "        return value\n",
    "\n",
    "    df[\"Status\"] = [inc_dec(c, o) for c, o in zip(df.Close, df.Open)]\n",
    "    df[\"Middle\"] = (df.Open + df.Close) / 2\n",
    "    df[\"Height\"] = abs(df.Close - df.Open)\n",
    "\n",
    "    p = figure(x_axis_type='datetime', width=1000, height=300)\n",
    "    p.title.text = \"Candlestick Chart\"\n",
    "    p.grid.grid_line_alpha = 0.3\n",
    "\n",
    "    hours_12 = 12 * 60 * 60 * 1000\n",
    "\n",
    "    p.segment(df.index, df.High, df.index, df.Low, color=\"Black\")\n",
    "\n",
    "    p.rect(df.index[df.Status==\"Increase\"], df.Middle[df.Status==\"Increase\"],\n",
    "           hours_12, df.Height[df.Status==\"Increase\"], fill_color=\"#CCFFFF\", line_color=\"black\")\n",
    "\n",
    "    p.rect(df.index[df.Status==\"Decrease\"], df.Middle[df.Status==\"Decrease\"],\n",
    "           hours_12, df.Height[df.Status==\"Decrease\"], fill_color=\"#FF3333\", line_color=\"black\")\n",
    "\n",
    "    script1, div1 = components(p)\n",
    "    cdn_js = CDN.js_files[0]\n",
    "    cdn_css = CDN.css_files[0]\n",
    "    return render_template(\"plot.html\",\n",
    "    script1 = script1,\n",
    "    div1 = div1,\n",
    "    cdn_css = cdn_css,\n",
    "    cdn_js = cdn_js )\n",
    "\n",
    "@app.route('/')\n",
    "def home():\n",
    "    return render_template(\"home.html\")\n",
    "\n",
    "@app.route('/about/')\n",
    "def about():\n",
    "    return render_template(\"about.html\")\n",
    "\n",
    "if __name__ == \"__main__\":\n",
    "    app.run(debug=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "templates/layout.html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "<!DOCTYPE html>\n",
    "<html>\n",
    "  <head>\n",
    "      <title>Flask App</title>\n",
    "      <link rel=\"stylesheet\" href=\"{{url_for('static',filename='css/main.css')}}\"\n",
    "  </head>\n",
    "  <body>\n",
    "    <header>\n",
    "      <div class=\"container\">\n",
    "        <h1 class=\"logo\">Ardit's web app</h1>\n",
    "        <strong><nav>\n",
    "          <ul class=\"menu\">\n",
    "            <li><a href=\"{{ url_for('home') }}\">Home</a></li>\n",
    "            <li><a href=\"{{ url_for('about') }}\">About</a></li>\n",
    "            <li><a href=\"{{ url_for('plot') }}\">Plot</a></li>\n",
    "          </ul>\n",
    "        </nav></strong>\n",
    "      </div>\n",
    "    </header>\n",
    "    <div class=\"container\">\n",
    "        {%block content%}\n",
    "        {%endblock%}\n",
    "    </div>\n",
    "  </body>\n",
    "</html>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "templates/home.html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "{%extends \"layout.html\"%}\n",
    "{%block content%}\n",
    "<div class=\"home\">\n",
    "    <h1>My homepage</h1>\n",
    "    <p>This is a test website</p>\n",
    "</div>\n",
    "{%endblock%}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "templates/about.html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "{%extends \"layout.html\"%}\n",
    "{%block content%}\n",
    "<div class=\"about\">\n",
    "    <h1>My about page</h1>\n",
    "    <p>This is a test website again</p>\n",
    "</div>\n",
    "{%endblock%}              "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "templates/plot.html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "{%extends \"layout.html\"%}\n",
    "{%block content%}\n",
    "<link rel=\"stylesheet\" href={{cdn_css | safe}} type=\"text/css\" />\n",
    "<script type=\"text/javascript\" src={{cdn_js | safe}}></script>\n",
    "\n",
    "<div class=\"about\">\n",
    "    <h1>My about page</h1>\n",
    "    <p>This is a test website again</p>\n",
    "</div>\n",
    "{{script1 | safe}}\n",
    "{{div1 | safe}}\n",
    "{%endblock%}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "static/css/main.css"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "body {\n",
    "  margin: 0;\n",
    "  padding: 0;\n",
    "  font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n",
    "  color: #444;\n",
    "}\n",
    "\n",
    "/*\n",
    " * Formatting the header area\n",
    " */\n",
    "\n",
    "header {\n",
    "  background-color: #DFB887;\n",
    "  height: 35px;\n",
    "  width: 100%;\n",
    "  opacity: .9;\n",
    "  margin-bottom: 10px;\n",
    "}\n",
    "\n",
    "header h1.logo {\n",
    "  margin: 0;\n",
    "  font-size: 1.7em;\n",
    "  color: #fff;\n",
    "  text-transform: uppercase;\n",
    "  float: left;\n",
    "}\n",
    "\n",
    "header h1.logo:hover {\n",
    "  color: #fff;\n",
    "  text-decoration: none;\n",
    "}\n",
    "\n",
    "/*\n",
    " * Center the body content\n",
    " */\n",
    "\n",
    ".container {\n",
    "  width: 1200px;\n",
    "  margin: 0 auto;\n",
    "}\n",
    "\n",
    "div.home {\n",
    "  padding: 10px 0 30px 0;\n",
    "  background-color: #E6E6FA;\n",
    "  -webkit-border-radius: 6px;\n",
    "     -moz-border-radius: 6px;\n",
    "          border-radius: 6px;\n",
    "}\n",
    "\n",
    "div.about {\n",
    "  padding: 10px 0 30px 0;\n",
    "  background-color: #E6E6FA;\n",
    "  -webkit-border-radius: 6px;\n",
    "     -moz-border-radius: 6px;\n",
    "          border-radius: 6px;\n",
    "}\n",
    "\n",
    "h2 {\n",
    "  font-size: 3em;\n",
    "  margin-top: 40px;\n",
    "  text-align: center;\n",
    "  letter-spacing: -2px;\n",
    "}\n",
    "\n",
    "h3 {\n",
    "  font-size: 1.7em;\n",
    "  font-weight: 100;\n",
    "  margin-top: 30px;\n",
    "  text-align: center;\n",
    "  letter-spacing: -1px;\n",
    "  color: #999;\n",
    "}\n",
    "\n",
    ".menu {\n",
    "  float: right;\n",
    "  margin-top: 8px;\n",
    "}\n",
    "\n",
    ".menu li {\n",
    "  display: inline;\n",
    "}\n",
    "\n",
    ".menu li + li {\n",
    "  margin-left: 35px;\n",
    "}\n",
    "\n",
    ".menu li a {\n",
    "  color: #444;\n",
    "  text-decoration: none;\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The following files are only necessary if you deploy your app on Heroku. "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Procfile"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "`web: gunicorn script1:app`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "runtime.txt (Go to the [Heroku Python runtime webpage](https://devcenter.heroku.com/articles/python-runtimes#supported-python-runtimes) to see the latest version of Python used by Heroku and put that version in runtime.txt instead of the one below)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`python-3.5.1`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "requirements.txt"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "`bokeh==0.11.1\n",
    "Flask==0.10.1\n",
    "gunicorn==19.6.0\n",
    "itsdangerous==0.24\n",
    "Jinja2==2.8\n",
    "MarkupSafe==0.23\n",
    "numpy==1.11.0\n",
    "pandas==0.18.0\n",
    "pandas-datareader==0.2.1\n",
    "python-dateutil==2.5.2\n",
    "pytz==2016.3\n",
    "PyYAML==3.11\n",
    "requests==2.9.1\n",
    "requests-file==1.4\n",
    "six==1.10.0\n",
    "tornado==4.3\n",
    "Werkzeug==0.11.5`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "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.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}