_notebooks/2020-02-20-test.ipynb

{
  "nbformat": 4,
  "nbformat_minor": 0,
  "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.7.4"
    },
    "colab": {
      "name": "2020-02-20-test.ipynb",
      "provenance": []
    }
  },
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "I3wkPvJEaXoy",
        "colab_type": "text"
      },
      "source": [
        "# Fastpages Notebook Blog Post\n",
        "> A tutorial of fastpages for Jupyter notebooks.\n",
        "\n",
        "- toc: true \n",
        "- badges: true\n",
        "- comments: true\n",
        "- categories: [jupyter]\n",
        "- image: images/chart-preview.png\n",
        "- hide: true\n",
        "- search_exclude: true\n",
        "- show_tags: false\n",
        "- permalink: temp-posts/test_notebook_post"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "HMoh0PRyaXo0",
        "colab_type": "text"
      },
      "source": [
        "# About\n",
        "\n",
        "This notebook is a demonstration of some of capabilities of [fastpages](https://github.com/fastai/fastpages) with notebooks.\n",
        "\n",
        "\n",
        "With `fastpages` you can save your jupyter notebooks into the `_notebooks` folder at the root of your repository, and they will be automatically be converted to Jekyll compliant blog posts!\n",
        "\n",
        "Just testing updating from colab ... nice!"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "C097RuqcaXo1",
        "colab_type": "text"
      },
      "source": [
        "## Front Matter\n",
        "\n",
        "Front Matter is a markdown cell at the beginning of your notebook that allows you to inject metadata into your notebook. For example:\n",
        "\n",
        "- Setting `toc: true` will automatically generate a table of contents\n",
        "- Setting `badges: true` will automatically include GitHub and Google Colab links to your notebook.\n",
        "- Setting `comments: true` will enable commenting on your blog post, powered by [utterances](https://github.com/utterance/utterances).\n",
        "\n",
        "More details and options for front matter can be viewed on the [front matter section](https://github.com/fastai/fastpages#front-matter-related-options) of the README."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "s9PKMC3QaXo2",
        "colab_type": "text"
      },
      "source": [
        "## Markdown Shortcuts"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "aX6gN9QCaXo3",
        "colab_type": "text"
      },
      "source": [
        "A `#hide` comment at the top of any code cell will hide **both the input and output** of that cell in your blog post.\n",
        "\n",
        "A `#hide_input` comment at the top of any code cell will **only hide the input** of that cell."
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "VFAZYzg1aXo4",
        "colab_type": "code",
        "outputId": "21df4f1a-2139-4bc4-c074-13e78b7a6b08",
        "colab": {}
      },
      "source": [
        "#hide_input\n",
        "print('The comment #hide_input was used to hide the code that produced this.')"
      ],
      "execution_count": 0,
      "outputs": [
        {
          "output_type": "stream",
          "text": [
            "The comment #hide_input was used to hide the code that produced this.\n"
          ],
          "name": "stdout"
        }
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "VojY3wHbaXo9",
        "colab_type": "text"
      },
      "source": [
        "put a `#collapse-hide` flag at the top of any cell if you want to **hide** that cell by default, but give the reader the option to show it:"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "aPxDkDheaXo9",
        "colab_type": "code",
        "colab": {}
      },
      "source": [
        "#collapse-hide\n",
        "import pandas as pd\n",
        "import altair as alt"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "Unf31R4QaXpA",
        "colab_type": "text"
      },
      "source": [
        "put a `#collapse-show` flag at the top of any cell if you want to **show** that cell by default, but give the reader the option to hide it:"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "q9sDpWVSaXpB",
        "colab_type": "code",
        "colab": {}
      },
      "source": [
        "#collapse-show\n",
        "cars = 'https://vega.github.io/vega-datasets/data/cars.json'\n",
        "movies = 'https://vega.github.io/vega-datasets/data/movies.json'\n",
        "sp500 = 'https://vega.github.io/vega-datasets/data/sp500.csv'\n",
        "stocks = 'https://vega.github.io/vega-datasets/data/stocks.csv'\n",
        "flights = 'https://vega.github.io/vega-datasets/data/flights-5k.json'"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "CGvF4Yk7aXpE",
        "colab_type": "text"
      },
      "source": [
        "## Interactive Charts With Altair\n",
        "\n",
        "Charts made with Altair remain interactive.  Example charts taken from [this repo](https://github.com/uwdata/visualization-curriculum), specifically [this notebook](https://github.com/uwdata/visualization-curriculum/blob/master/altair_interaction.ipynb)."
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "To2-aUEkaXpF",
        "colab_type": "code",
        "colab": {}
      },
      "source": [
        "# hide\n",
        "df = pd.read_json(movies) # load movies data\n",
        "genres = df['Major_Genre'].unique() # get unique field values\n",
        "genres = list(filter(lambda d: d is not None, genres)) # filter out None values\n",
        "genres.sort() # sort alphabetically"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "T3QDFeMvaXpI",
        "colab_type": "code",
        "colab": {}
      },
      "source": [
        "#hide\n",
        "mpaa = ['G', 'PG', 'PG-13', 'R', 'NC-17', 'Not Rated']"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "X0ru-4fiaXpK",
        "colab_type": "text"
      },
      "source": [
        "### Example 1: DropDown"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "462b_F7YaXpL",
        "colab_type": "code",
        "outputId": "16349b7e-f47a-4f84-c789-1c7ca7f36870",
        "colab": {}
      },
      "source": [
        "# single-value selection over [Major_Genre, MPAA_Rating] pairs\n",
        "# use specific hard-wired values as the initial selected values\n",
        "selection = alt.selection_single(\n",
        "    name='Select',\n",
        "    fields=['Major_Genre', 'MPAA_Rating'],\n",
        "    init={'Major_Genre': 'Drama', 'MPAA_Rating': 'R'},\n",
        "    bind={'Major_Genre': alt.binding_select(options=genres), 'MPAA_Rating': alt.binding_radio(options=mpaa)}\n",
        ")\n",
        "  \n",
        "# scatter plot, modify opacity based on selection\n",
        "alt.Chart(movies).mark_circle().add_selection(\n",
        "    selection\n",
        ").encode(\n",
        "    x='Rotten_Tomatoes_Rating:Q',\n",
        "    y='IMDB_Rating:Q',\n",
        "    tooltip='Title:N',\n",
        "    opacity=alt.condition(selection, alt.value(0.75), alt.value(0.05))\n",
        ")"
      ],
      "execution_count": 0,
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<div id=\"altair-viz-1a49e83878ce4d678d7b162f3d6b510f\"></div>\n",
              "<script type=\"text/javascript\">\n",
              "  (function(spec, embedOpt){\n",
              "    const outputDiv = document.getElementById(\"altair-viz-1a49e83878ce4d678d7b162f3d6b510f\");\n",
              "    const paths = {\n",
              "      \"vega\": \"https://cdn.jsdelivr.net/npm//vega@5?noext\",\n",
              "      \"vega-lib\": \"https://cdn.jsdelivr.net/npm//vega-lib?noext\",\n",
              "      \"vega-lite\": \"https://cdn.jsdelivr.net/npm//vega-lite@4.0.2?noext\",\n",
              "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm//vega-embed@6?noext\",\n",
              "    };\n",
              "\n",
              "    function loadScript(lib) {\n",
              "      return new Promise(function(resolve, reject) {\n",
              "        var s = document.createElement('script');\n",
              "        s.src = paths[lib];\n",
              "        s.async = true;\n",
              "        s.onload = () => resolve(paths[lib]);\n",
              "        s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
              "        document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
              "      });\n",
              "    }\n",
              "\n",
              "    function showError(err) {\n",
              "      outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
              "      throw err;\n",
              "    }\n",
              "\n",
              "    function displayChart(vegaEmbed) {\n",
              "      vegaEmbed(outputDiv, spec, embedOpt)\n",
              "        .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
              "    }\n",
              "\n",
              "    if(typeof define === \"function\" && define.amd) {\n",
              "      requirejs.config({paths});\n",
              "      require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
              "    } else if (typeof vegaEmbed === \"function\") {\n",
              "      displayChart(vegaEmbed);\n",
              "    } else {\n",
              "      loadScript(\"vega\")\n",
              "        .then(() => loadScript(\"vega-lite\"))\n",
              "        .then(() => loadScript(\"vega-embed\"))\n",
              "        .catch(showError)\n",
              "        .then(() => displayChart(vegaEmbed));\n",
              "    }\n",
              "  })({\"config\": {\"view\": {\"continuousWidth\": 400, \"continuousHeight\": 300}}, \"data\": {\"url\": \"https://vega.github.io/vega-datasets/data/movies.json\"}, \"mark\": \"circle\", \"encoding\": {\"opacity\": {\"condition\": {\"value\": 0.75, \"selection\": \"Select\"}, \"value\": 0.05}, \"tooltip\": {\"type\": \"nominal\", \"field\": \"Title\"}, \"x\": {\"type\": \"quantitative\", \"field\": \"Rotten_Tomatoes_Rating\"}, \"y\": {\"type\": \"quantitative\", \"field\": \"IMDB_Rating\"}}, \"selection\": {\"Select\": {\"type\": \"single\", \"fields\": [\"Major_Genre\", \"MPAA_Rating\"], \"init\": {\"Major_Genre\": \"Drama\", \"MPAA_Rating\": \"R\"}, \"bind\": {\"Major_Genre\": {\"input\": \"select\", \"options\": [\"Action\", \"Adventure\", \"Black Comedy\", \"Comedy\", \"Concert/Performance\", \"Documentary\", \"Drama\", \"Horror\", \"Musical\", \"Romantic Comedy\", \"Thriller/Suspense\", \"Western\"]}, \"MPAA_Rating\": {\"input\": \"radio\", \"options\": [\"G\", \"PG\", \"PG-13\", \"R\", \"NC-17\", \"Not Rated\"]}}}}, \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.0.2.json\"}, {\"mode\": \"vega-lite\"});\n",
              "</script>"
            ],
            "text/plain": [
              "alt.Chart(...)"
            ]
          },
          "metadata": {
            "tags": []
          },
          "execution_count": 5
        }
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "Kx54clm2aXpO",
        "colab_type": "text"
      },
      "source": [
        "### Example 2: Tooltips"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "K9a8st9EaXpP",
        "colab_type": "code",
        "outputId": "c2f41856-610c-412c-f676-71939cdb8aec",
        "colab": {}
      },
      "source": [
        "alt.Chart(movies).mark_circle().add_selection(\n",
        "    alt.selection_interval(bind='scales', encodings=['x'])\n",
        ").encode(\n",
        "    x='Rotten_Tomatoes_Rating:Q',\n",
        "    y=alt.Y('IMDB_Rating:Q', axis=alt.Axis(minExtent=30)), # use min extent to stabilize axis title placement\n",
        "    tooltip=['Title:N', 'Release_Date:N', 'IMDB_Rating:Q', 'Rotten_Tomatoes_Rating:Q']\n",
        ").properties(\n",
        "    width=600,\n",
        "    height=400\n",
        ")"
      ],
      "execution_count": 0,
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<div id=\"altair-viz-c022b476f4fb482ca6f609bf6ed082d2\"></div>\n",
              "<script type=\"text/javascript\">\n",
              "  (function(spec, embedOpt){\n",
              "    const outputDiv = document.getElementById(\"altair-viz-c022b476f4fb482ca6f609bf6ed082d2\");\n",
              "    const paths = {\n",
              "      \"vega\": \"https://cdn.jsdelivr.net/npm//vega@5?noext\",\n",
              "      \"vega-lib\": \"https://cdn.jsdelivr.net/npm//vega-lib?noext\",\n",
              "      \"vega-lite\": \"https://cdn.jsdelivr.net/npm//vega-lite@4.0.2?noext\",\n",
              "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm//vega-embed@6?noext\",\n",
              "    };\n",
              "\n",
              "    function loadScript(lib) {\n",
              "      return new Promise(function(resolve, reject) {\n",
              "        var s = document.createElement('script');\n",
              "        s.src = paths[lib];\n",
              "        s.async = true;\n",
              "        s.onload = () => resolve(paths[lib]);\n",
              "        s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
              "        document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
              "      });\n",
              "    }\n",
              "\n",
              "    function showError(err) {\n",
              "      outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
              "      throw err;\n",
              "    }\n",
              "\n",
              "    function displayChart(vegaEmbed) {\n",
              "      vegaEmbed(outputDiv, spec, embedOpt)\n",
              "        .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
              "    }\n",
              "\n",
              "    if(typeof define === \"function\" && define.amd) {\n",
              "      requirejs.config({paths});\n",
              "      require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
              "    } else if (typeof vegaEmbed === \"function\") {\n",
              "      displayChart(vegaEmbed);\n",
              "    } else {\n",
              "      loadScript(\"vega\")\n",
              "        .then(() => loadScript(\"vega-lite\"))\n",
              "        .then(() => loadScript(\"vega-embed\"))\n",
              "        .catch(showError)\n",
              "        .then(() => displayChart(vegaEmbed));\n",
              "    }\n",
              "  })({\"config\": {\"view\": {\"continuousWidth\": 400, \"continuousHeight\": 300}}, \"data\": {\"url\": \"https://vega.github.io/vega-datasets/data/movies.json\"}, \"mark\": \"circle\", \"encoding\": {\"tooltip\": [{\"type\": \"nominal\", \"field\": \"Title\"}, {\"type\": \"nominal\", \"field\": \"Release_Date\"}, {\"type\": \"quantitative\", \"field\": \"IMDB_Rating\"}, {\"type\": \"quantitative\", \"field\": \"Rotten_Tomatoes_Rating\"}], \"x\": {\"type\": \"quantitative\", \"field\": \"Rotten_Tomatoes_Rating\"}, \"y\": {\"type\": \"quantitative\", \"axis\": {\"minExtent\": 30}, \"field\": \"IMDB_Rating\"}}, \"height\": 400, \"selection\": {\"selector001\": {\"type\": \"interval\", \"bind\": \"scales\", \"encodings\": [\"x\"]}}, \"width\": 600, \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.0.2.json\"}, {\"mode\": \"vega-lite\"});\n",
              "</script>"
            ],
            "text/plain": [
              "alt.Chart(...)"
            ]
          },
          "metadata": {
            "tags": []
          },
          "execution_count": 6
        }
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "MbgZO47oaXpS",
        "colab_type": "text"
      },
      "source": [
        "### Example 3: More Tooltips"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "scrolled": true,
        "id": "nG-4J4q-aXpT",
        "colab_type": "code",
        "outputId": "3415b24b-80d0-49db-fe82-2139a2ca7df0",
        "colab": {}
      },
      "source": [
        "# select a point for which to provide details-on-demand\n",
        "label = alt.selection_single(\n",
        "    encodings=['x'], # limit selection to x-axis value\n",
        "    on='mouseover',  # select on mouseover events\n",
        "    nearest=True,    # select data point nearest the cursor\n",
        "    empty='none'     # empty selection includes no data points\n",
        ")\n",
        "\n",
        "# define our base line chart of stock prices\n",
        "base = alt.Chart().mark_line().encode(\n",
        "    alt.X('date:T'),\n",
        "    alt.Y('price:Q', scale=alt.Scale(type='log')),\n",
        "    alt.Color('symbol:N')\n",
        ")\n",
        "\n",
        "alt.layer(\n",
        "    base, # base line chart\n",
        "    \n",
        "    # add a rule mark to serve as a guide line\n",
        "    alt.Chart().mark_rule(color='#aaa').encode(\n",
        "        x='date:T'\n",
        "    ).transform_filter(label),\n",
        "    \n",
        "    # add circle marks for selected time points, hide unselected points\n",
        "    base.mark_circle().encode(\n",
        "        opacity=alt.condition(label, alt.value(1), alt.value(0))\n",
        "    ).add_selection(label),\n",
        "\n",
        "    # add white stroked text to provide a legible background for labels\n",
        "    base.mark_text(align='left', dx=5, dy=-5, stroke='white', strokeWidth=2).encode(\n",
        "        text='price:Q'\n",
        "    ).transform_filter(label),\n",
        "\n",
        "    # add text labels for stock prices\n",
        "    base.mark_text(align='left', dx=5, dy=-5).encode(\n",
        "        text='price:Q'\n",
        "    ).transform_filter(label),\n",
        "    \n",
        "    data=stocks\n",
        ").properties(\n",
        "    width=700,\n",
        "    height=400\n",
        ")"
      ],
      "execution_count": 0,
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<div id=\"altair-viz-9283d3681fd24aafa3d1e2f9ad193ecf\"></div>\n",
              "<script type=\"text/javascript\">\n",
              "  (function(spec, embedOpt){\n",
              "    const outputDiv = document.getElementById(\"altair-viz-9283d3681fd24aafa3d1e2f9ad193ecf\");\n",
              "    const paths = {\n",
              "      \"vega\": \"https://cdn.jsdelivr.net/npm//vega@5?noext\",\n",
              "      \"vega-lib\": \"https://cdn.jsdelivr.net/npm//vega-lib?noext\",\n",
              "      \"vega-lite\": \"https://cdn.jsdelivr.net/npm//vega-lite@4.0.2?noext\",\n",
              "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm//vega-embed@6?noext\",\n",
              "    };\n",
              "\n",
              "    function loadScript(lib) {\n",
              "      return new Promise(function(resolve, reject) {\n",
              "        var s = document.createElement('script');\n",
              "        s.src = paths[lib];\n",
              "        s.async = true;\n",
              "        s.onload = () => resolve(paths[lib]);\n",
              "        s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
              "        document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
              "      });\n",
              "    }\n",
              "\n",
              "    function showError(err) {\n",
              "      outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
              "      throw err;\n",
              "    }\n",
              "\n",
              "    function displayChart(vegaEmbed) {\n",
              "      vegaEmbed(outputDiv, spec, embedOpt)\n",
              "        .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
              "    }\n",
              "\n",
              "    if(typeof define === \"function\" && define.amd) {\n",
              "      requirejs.config({paths});\n",
              "      require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
              "    } else if (typeof vegaEmbed === \"function\") {\n",
              "      displayChart(vegaEmbed);\n",
              "    } else {\n",
              "      loadScript(\"vega\")\n",
              "        .then(() => loadScript(\"vega-lite\"))\n",
              "        .then(() => loadScript(\"vega-embed\"))\n",
              "        .catch(showError)\n",
              "        .then(() => displayChart(vegaEmbed));\n",
              "    }\n",
              "  })({\"config\": {\"view\": {\"continuousWidth\": 400, \"continuousHeight\": 300}}, \"layer\": [{\"mark\": \"line\", \"encoding\": {\"color\": {\"type\": \"nominal\", \"field\": \"symbol\"}, \"x\": {\"type\": \"temporal\", \"field\": \"date\"}, \"y\": {\"type\": \"quantitative\", \"field\": \"price\", \"scale\": {\"type\": \"log\"}}}}, {\"mark\": {\"type\": \"rule\", \"color\": \"#aaa\"}, \"encoding\": {\"x\": {\"type\": \"temporal\", \"field\": \"date\"}}, \"transform\": [{\"filter\": {\"selection\": \"selector002\"}}]}, {\"mark\": \"circle\", \"encoding\": {\"color\": {\"type\": \"nominal\", \"field\": \"symbol\"}, \"opacity\": {\"condition\": {\"value\": 1, \"selection\": \"selector002\"}, \"value\": 0}, \"x\": {\"type\": \"temporal\", \"field\": \"date\"}, \"y\": {\"type\": \"quantitative\", \"field\": \"price\", \"scale\": {\"type\": \"log\"}}}, \"selection\": {\"selector002\": {\"type\": \"single\", \"encodings\": [\"x\"], \"on\": \"mouseover\", \"nearest\": true, \"empty\": \"none\"}}}, {\"mark\": {\"type\": \"text\", \"align\": \"left\", \"dx\": 5, \"dy\": -5, \"stroke\": \"white\", \"strokeWidth\": 2}, \"encoding\": {\"color\": {\"type\": \"nominal\", \"field\": \"symbol\"}, \"text\": {\"type\": \"quantitative\", \"field\": \"price\"}, \"x\": {\"type\": \"temporal\", \"field\": \"date\"}, \"y\": {\"type\": \"quantitative\", \"field\": \"price\", \"scale\": {\"type\": \"log\"}}}, \"transform\": [{\"filter\": {\"selection\": \"selector002\"}}]}, {\"mark\": {\"type\": \"text\", \"align\": \"left\", \"dx\": 5, \"dy\": -5}, \"encoding\": {\"color\": {\"type\": \"nominal\", \"field\": \"symbol\"}, \"text\": {\"type\": \"quantitative\", \"field\": \"price\"}, \"x\": {\"type\": \"temporal\", \"field\": \"date\"}, \"y\": {\"type\": \"quantitative\", \"field\": \"price\", \"scale\": {\"type\": \"log\"}}}, \"transform\": [{\"filter\": {\"selection\": \"selector002\"}}]}], \"data\": {\"url\": \"https://vega.github.io/vega-datasets/data/stocks.csv\"}, \"height\": 400, \"width\": 700, \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.0.2.json\"}, {\"mode\": \"vega-lite\"});\n",
              "</script>"
            ],
            "text/plain": [
              "alt.LayerChart(...)"
            ]
          },
          "metadata": {
            "tags": []
          },
          "execution_count": 7
        }
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "_Rex53ojaXpV",
        "colab_type": "text"
      },
      "source": [
        "## Data Tables\n",
        "\n",
        "You can display tables per the usual way in your blog:"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "gHE1pAnNaXpW",
        "colab_type": "code",
        "outputId": "45836846-4769-436d-d881-4fa2667d2e40",
        "colab": {}
      },
      "source": [
        "movies = 'https://vega.github.io/vega-datasets/data/movies.json'\n",
        "df = pd.read_json(movies)\n",
        "# display table with pandas\n",
        "df[['Title', 'Worldwide_Gross', \n",
        "    'Production_Budget', 'Distributor', 'MPAA_Rating', 'IMDB_Rating', 'Rotten_Tomatoes_Rating']].head()"
      ],
      "execution_count": 0,
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "<div>\n",
              "<style scoped>\n",
              "    .dataframe tbody tr th:only-of-type {\n",
              "        vertical-align: middle;\n",
              "    }\n",
              "\n",
              "    .dataframe tbody tr th {\n",
              "        vertical-align: top;\n",
              "    }\n",
              "\n",
              "    .dataframe thead th {\n",
              "        text-align: right;\n",
              "    }\n",
              "</style>\n",
              "<table border=\"1\" class=\"dataframe\">\n",
              "  <thead>\n",
              "    <tr style=\"text-align: right;\">\n",
              "      <th></th>\n",
              "      <th>Title</th>\n",
              "      <th>Worldwide_Gross</th>\n",
              "      <th>Production_Budget</th>\n",
              "      <th>Distributor</th>\n",
              "      <th>MPAA_Rating</th>\n",
              "      <th>IMDB_Rating</th>\n",
              "      <th>Rotten_Tomatoes_Rating</th>\n",
              "    </tr>\n",
              "  </thead>\n",
              "  <tbody>\n",
              "    <tr>\n",
              "      <th>0</th>\n",
              "      <td>The Land Girls</td>\n",
              "      <td>146083.0</td>\n",
              "      <td>8000000.0</td>\n",
              "      <td>Gramercy</td>\n",
              "      <td>R</td>\n",
              "      <td>6.1</td>\n",
              "      <td>NaN</td>\n",
              "    </tr>\n",
              "    <tr>\n",
              "      <th>1</th>\n",
              "      <td>First Love, Last Rites</td>\n",
              "      <td>10876.0</td>\n",
              "      <td>300000.0</td>\n",
              "      <td>Strand</td>\n",
              "      <td>R</td>\n",
              "      <td>6.9</td>\n",
              "      <td>NaN</td>\n",
              "    </tr>\n",
              "    <tr>\n",
              "      <th>2</th>\n",
              "      <td>I Married a Strange Person</td>\n",
              "      <td>203134.0</td>\n",
              "      <td>250000.0</td>\n",
              "      <td>Lionsgate</td>\n",
              "      <td>None</td>\n",
              "      <td>6.8</td>\n",
              "      <td>NaN</td>\n",
              "    </tr>\n",
              "    <tr>\n",
              "      <th>3</th>\n",
              "      <td>Let's Talk About Sex</td>\n",
              "      <td>373615.0</td>\n",
              "      <td>300000.0</td>\n",
              "      <td>Fine Line</td>\n",
              "      <td>None</td>\n",
              "      <td>NaN</td>\n",
              "      <td>13.0</td>\n",
              "    </tr>\n",
              "    <tr>\n",
              "      <th>4</th>\n",
              "      <td>Slam</td>\n",
              "      <td>1087521.0</td>\n",
              "      <td>1000000.0</td>\n",
              "      <td>Trimark</td>\n",
              "      <td>R</td>\n",
              "      <td>3.4</td>\n",
              "      <td>62.0</td>\n",
              "    </tr>\n",
              "  </tbody>\n",
              "</table>\n",
              "</div>"
            ],
            "text/plain": [
              "                        Title  Worldwide_Gross  Production_Budget Distributor  \\\n",
              "0              The Land Girls         146083.0          8000000.0    Gramercy   \n",
              "1      First Love, Last Rites          10876.0           300000.0      Strand   \n",
              "2  I Married a Strange Person         203134.0           250000.0   Lionsgate   \n",
              "3        Let's Talk About Sex         373615.0           300000.0   Fine Line   \n",
              "4                        Slam        1087521.0          1000000.0     Trimark   \n",
              "\n",
              "  MPAA_Rating  IMDB_Rating  Rotten_Tomatoes_Rating  \n",
              "0           R          6.1                     NaN  \n",
              "1           R          6.9                     NaN  \n",
              "2        None          6.8                     NaN  \n",
              "3        None          NaN                    13.0  \n",
              "4           R          3.4                    62.0  "
            ]
          },
          "metadata": {
            "tags": []
          },
          "execution_count": 11
        }
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "9o4mlGCVaXpY",
        "colab_type": "text"
      },
      "source": [
        "## Images\n",
        "\n",
        "### Local Images\n",
        "\n",
        "You can reference local images and they will be copied and rendered on your blog automatically.  You can include these with the following markdown syntax:\n",
        "\n",
        "`![](my_icons/fastai_logo.png)`"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "j7eHgHK1aXpZ",
        "colab_type": "text"
      },
      "source": [
        "![](https://github.com/ohmeow/ohmeow_website/blob/master/_notebooks/my_icons/fastai_logo.png?raw=1)"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "u1W_jWK1aXpa",
        "colab_type": "text"
      },
      "source": [
        "### Remote Images\n",
        "\n",
        "Remote images can be included with the following markdown syntax:\n",
        "\n",
        "`![](https://image.flaticon.com/icons/svg/36/36686.svg)`"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "GNrbxaM_aXpb",
        "colab_type": "text"
      },
      "source": [
        "![](https://image.flaticon.com/icons/svg/36/36686.svg)"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "77CCauT5aXpb",
        "colab_type": "text"
      },
      "source": [
        "### Animated Gifs\n",
        "\n",
        "Animated Gifs work, too!\n",
        "\n",
        "`![](https://upload.wikimedia.org/wikipedia/commons/7/71/ChessPawnSpecialMoves.gif)`"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "GaoU4NJbaXpc",
        "colab_type": "text"
      },
      "source": [
        "![](https://upload.wikimedia.org/wikipedia/commons/7/71/ChessPawnSpecialMoves.gif)"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "tQ6QmJ73aXpd",
        "colab_type": "text"
      },
      "source": [
        "### Captions\n",
        "\n",
        "You can include captions with markdown images like this:\n",
        "\n",
        "```\n",
        "![](https://www.fast.ai/images/fastai_paper/show_batch.png \"Credit: https://www.fast.ai/2020/02/13/fastai-A-Layered-API-for-Deep-Learning/\")\n",
        "```\n",
        "\n",
        "\n",
        "![](https://www.fast.ai/images/fastai_paper/show_batch.png \"Credit: https://www.fast.ai/2020/02/13/fastai-A-Layered-API-for-Deep-Learning/\")\n",
        "\n",
        "\n",
        "\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "W47eInO2aXpe",
        "colab_type": "text"
      },
      "source": [
        "# Other Elements"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "N4D60qenaXpf",
        "colab_type": "text"
      },
      "source": [
        "## Tweetcards\n",
        "\n",
        "Typing `> twitter: https://twitter.com/jakevdp/status/1204765621767901185?s=20` will render this:\n",
        "\n",
        "> twitter: https://twitter.com/jakevdp/status/1204765621767901185?s=20"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "VxY_YpbOaXpg",
        "colab_type": "text"
      },
      "source": [
        "## Youtube Videos\n",
        "\n",
        "Typing `> youtube: https://youtu.be/XfoYk_Z5AkI` will render this:\n",
        "\n",
        "\n",
        "> youtube: https://youtu.be/XfoYk_Z5AkI"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "zKowxrZeaXph",
        "colab_type": "text"
      },
      "source": [
        "## Boxes / Callouts \n",
        "\n",
        "Typing `> Warning: There will be no second warning!` will render this:\n",
        "\n",
        "\n",
        "> Warning: There will be no second warning!\n",
        "\n",
        "\n",
        "\n",
        "Typing `> Important: Pay attention! It's important.` will render this:\n",
        "\n",
        "> Important: Pay attention! It's important.\n",
        "\n",
        "\n",
        "\n",
        "Typing `> Tip: This is my tip.` will render this:\n",
        "\n",
        "> Tip: This is my tip.\n",
        "\n",
        "\n",
        "\n",
        "Typing `> Note: Take note of this.` will render this:\n",
        "\n",
        "> Note: Take note of this.\n",
        "\n",
        "\n",
        "\n",
        "Typing `> Note: A doc link to [an example website: fast.ai](https://www.fast.ai/) should also work fine.` will render in the docs:\n",
        "\n",
        "> Note: A doc link to [an example website: fast.ai](https://www.fast.ai/) should also work fine."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "LhXZshvQaXph",
        "colab_type": "text"
      },
      "source": [
        "## Footnotes\n",
        "\n",
        "You can have footnotes in notebooks just like you can with markdown. \n",
        "\n",
        "For example, here is a footnote [^1].\n",
        "\n",
        "[^1]: This is the footnote."
      ]
    }
  ]
}