Diplomado_InfoVis_Alumnos_2019_Parte_2.ipynb

{
  "nbformat": 4,
  "nbformat_minor": 0,
  "metadata": {
    "colab": {
      "name": "Diplomado Alumnos 2019 Parte 2.ipynb",
      "version": "0.3.2",
      "provenance": [],
      "collapsed_sections": [],
      "include_colab_link": true
    },
    "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.2"
    },
    "kernelspec": {
      "display_name": "Python 3",
      "language": "python",
      "name": "python3"
    }
  },
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "view-in-github",
        "colab_type": "text"
      },
      "source": [
        "<a href=\"https://colab.research.google.com/github/denisparra/diplomadoInfoVis/blob/master/Diplomado_InfoVis_Alumnos_2019_Parte_2.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "colab_type": "text",
        "id": "r3VyfThGQdud"
      },
      "source": [
        "# Diplomado _Big Data_ - Altair Parte 2: Declarative Visualization in Python\n",
        "\n",
        "**Profesores:** Nebil Kawas y Denis Parra.\n",
        "\n",
        "**Ayudantes**: Juan Espinosa, Germán Contreras y Hernán Valdivieso.\n",
        "\n",
        "Guía creada por Hernán Valdivieso.\n",
        "\n",
        "Agradecimientos a Eduardo Graells (@carnby) por su codigo en github, sirvió como inspiración para varios ejercicios de datos con pandas.\n",
        "\n",
        "-----\n",
        "\n",
        "El siguiente _jupyter notebook_ tiene como fín ser una guía de cómo utilizar la librería de Python [Altair](https://altair-viz.github.io/index.html) y luego aplicar dicho conocimiento para responder una serie de dudas sobre un _dataset_ interesante: respuestas del [Censo 2017](http://www.censo2017.cl/microdatos/).\n",
        "\n",
        "Para facilitar la instalación de esta librería, este archivo debe ser subido a [Google Colab](https://colab.research.google.com/) para poder ejecutarlo en los servidores de Google, los cuales ya disponen de todos los recursos necesarios para ejecutar los códigos que implementarás.\n",
        "\n",
        "\n",
        "Este  _jupyter notebook_ se divide en 3 partes:\n",
        "\n",
        "- Explorar los datos del _dataset_ entregado y aprender algunos usos de la librería [`pandas`](https://pandas.pydata.org/) para preprocesar los datos. \n",
        "- Entregar diversos ejemplos de algunos _idioms_, junto con una explicación detallada de que hace cada línea. Luego, para cada _idiom_ explicado, se solicitará que ustedes hagan otro gráfico con el _dataset_ del Censo y respondan una serie de preguntas. \n",
        "\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "colab_type": "text",
        "id": "z_YnPXBG1OYr"
      },
      "source": [
        "## Indice"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "colab_type": "toc",
        "id": "yyX2Fg3tg2yi"
      },
      "source": [
        ">[Diplomado Big Data - Altair: Declarative Visualization in Python](#scrollTo=r3VyfThGQdud)\n",
        "\n",
        ">>[Indice](#scrollTo=z_YnPXBG1OYr)\n",
        "\n",
        ">>[Descargar dataset](#scrollTo=9ckes_XsRkjN)\n",
        "\n",
        ">>[Descripción del dataset](#scrollTo=fHHT_LhIAMBB)\n",
        "\n",
        ">>>[Abrir CSV](#scrollTo=4aJ9fXMkWuTE)\n",
        "\n",
        ">>[Gráficos de ejemplo con Altair](#scrollTo=WAkmGyJPaImq)\n",
        "\n",
        ">>>[Gráficos de dispersión](#scrollTo=SVK6OYD7KWcG)\n",
        "\n",
        ">>>>[Scatterplot](#scrollTo=uE2RN37VKYgk)\n",
        "\n",
        ">>>>>[Descripción del ejemplo](#scrollTo=CQc9pf9iKcHx)\n",
        "\n",
        ">>>>[Actividad 9: scatter plot](#scrollTo=CsAgbYTTKe6H)\n",
        "\n",
        ">>>>[BubbleChart](#scrollTo=QLkOqzc1KghM)\n",
        "\n",
        ">>>>>[Descripción del ejemplo](#scrollTo=HPHIP5FoKkHc)\n",
        "\n",
        ">>>>[Actividad 10: bubblechart](#scrollTo=GYeINO1AKmbC)\n",
        "\n",
        ">>>[Histogama](#scrollTo=a2g61HwnKw6_)\n",
        "\n",
        ">>>>>[Descripción del ejemplo](#scrollTo=ztpgl7X5K1SP)\n",
        "\n",
        ">>>>[Actividad 11: histograma](#scrollTo=xrF9TB_uK7VC)\n",
        "\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "colab_type": "text",
        "id": "9ckes_XsRkjN"
      },
      "source": [
        "## Descargar _dataset_\n",
        "En primero lugar, como estaremos ocupando un servidor externo, es necesario descargar el _dataset_ en dicho servidor. Para esto ocuparemos el comando `wget` el cual descagará desde dropbox el _dataset_ a utilizar."
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "colab_type": "code",
        "id": "O-9xqsGNALmn",
        "colab": {}
      },
      "source": [
        "!wget -N https://www.dropbox.com/s/0xp8srkxmfcfbb9/DatasetCenso.csv"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "colab_type": "text",
        "id": "ir8v3hVTSjCt"
      },
      "source": [
        "El _dataset_ ha sido descargado, si ahora utilizamos el comando `ls` podremos observar que archivos están actualmente en el servidor y que podrás utilizar desde este _jupyter notebook_."
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "colab_type": "code",
        "id": "5yD-Vp_FSipk",
        "colab": {}
      },
      "source": [
        "ls"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "colab_type": "text",
        "id": "fHHT_LhIAMBB"
      },
      "source": [
        "## Descripción del _dataset_\n",
        "Con el fín de reducir el peso de este archivo, fue necesario eliminar multiples columnas del _dataset_ original. Por lo tanto, las columnas de las preguntas conservadas y su respectiva descripción son:\n",
        "\n",
        "- **comuna**: comuna de la casa que fue censada.\n",
        "- **parentesco**:  relación de parentesco con el jefe/a de hogar. Esta columna corresponde a la columna P07 del _dataset_ original.\n",
        "- **edad**: años cumplidos. Esta columna corresponde a la columna P09 del _dataset_ original.\n",
        "- **pais**: país donde vivía la madre del encuestado cuando nació. Esta columna corresponde a la columna P12PAIS del _dataset_ original.\n",
        "- **a_llegada**:  año que llegó el encuestado a Chile. Esta columna corresponde a la columna P12A_LLEGADA del _dataset_ original.\n",
        "- **n_educacional**:  nivel educacional logrado del encuestado. Esta columna corresponde a la columna P15 del _dataset_ original luego de pasar por una función que agrupó diferentes niveles educaciones a un número fijo.\n",
        "- **descendencia**: cantidad de hijos del encuestado. Esta columna corresponde a la columna P19 del _dataset_ original.\n",
        "\n",
        "\n",
        "**Importante**: Las columnas están separadas por punto y coma (`\";\"`).\n",
        "\n",
        "Adicionalmente, para reducir la cantidad de respuestas, se realizó un filtro para dejar solo las respuestas dadas por personas inmigrantes.\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "colab_type": "text",
        "id": "4aJ9fXMkWuTE"
      },
      "source": [
        "\n",
        "\n",
        "### Abrir CSV"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "colab_type": "code",
        "id": "fhGSTG4ybbtD",
        "colab": {}
      },
      "source": [
        "import pandas as pd\n",
        "censo = pd.read_csv(\"DatasetCenso.csv\", sep=\";\")"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "colab_type": "text",
        "id": "WAkmGyJPaImq"
      },
      "source": [
        "## Gráficos de ejemplo con Altair"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "SVK6OYD7KWcG",
        "colab_type": "text"
      },
      "source": [
        "### Gráficos de dispersión"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "uE2RN37VKYgk",
        "colab_type": "text"
      },
      "source": [
        "#### Scatterplot"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "HPUK1VguKaI3",
        "colab_type": "code",
        "colab": {}
      },
      "source": [
        "import altair as alt\n",
        "from vega_datasets import data\n",
        "\n",
        "source = data.cars()\n",
        "\n",
        "alt.Chart(source).mark_circle().encode(\n",
        "    x='Horsepower',\n",
        "    y='Miles_per_Gallon',\n",
        ")"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "CQc9pf9iKcHx",
        "colab_type": "text"
      },
      "source": [
        "##### Descripción del ejemplo\n",
        "Al igual que el gráfico de línea, solo es necesario cambiar el tipo de marca y asegurar que los ejes posean columnas con variables adecuadas para este gráfico. \n",
        "\n",
        "- **Línea 6**\n",
        "\n",
        "```python\n",
        "alt.Chart(source).mark_circle().encode(\n",
        "```\n",
        "\n",
        "En esta línea, lo importante es el método `mark_circle` el cual indica que los datos deben ser representados mediante circulos."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "CsAgbYTTKe6H",
        "colab_type": "text"
      },
      "source": [
        "#### Actividad 9: _scatter plot_\n",
        "Construya un scatterplot donde se muetren  los primeros 4000 jefes de hogares del _dataset_, cuyos ejes sean la edad  y el año de llegada. Agrege el método `interactive` al final para poder realizar _zoom_."
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "bXIqV5uoKgbV",
        "colab_type": "code",
        "colab": {}
      },
      "source": [
        ""
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "QLkOqzc1KghM",
        "colab_type": "text"
      },
      "source": [
        "#### BubbleChart"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "GLwmTntfKiq4",
        "colab_type": "code",
        "colab": {}
      },
      "source": [
        "import altair as alt\n",
        "from vega_datasets import data\n",
        "\n",
        "source = data.cars()\n",
        "\n",
        "alt.Chart(source).mark_circle().encode(\n",
        "    x='Horsepower',\n",
        "    y='Acceleration',\n",
        "    size='Miles_per_Gallon',\n",
        "    color='Origin'\n",
        ").interactive()"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "HPHIP5FoKkHc",
        "colab_type": "text"
      },
      "source": [
        "##### Descripción del ejemplo\n",
        "\n",
        "Este gráfico se construye de forma similar al _scatterplot_, la diferencia es que se agregan nuevas codificaciones que son **el tamaño y el color**.  \n",
        "- **Línea 9**\n",
        "\n",
        "```python\n",
        "    size='Miles_per_Gallon',\n",
        "```\n",
        "Con esta lína de código se indica que el tamaño de los circulos será definido en función del valor que tenga la columna _Miles_\\__per_\\__Gallon_.\n",
        "\n",
        "-----------------\n",
        "- **Línea 10**\n",
        "\n",
        "```python\n",
        "    color='Origin'\n",
        "```\n",
        "Con esta lína de código se indica que el color de los circulos será definido en función del valor que tenga la columna _Origin_.\n",
        "\n",
        "-------------------\n",
        "Además se volvió a utilizar el método `interactive` para poder navegar y hacer _zoom_ al gráfico."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "GYeINO1AKmbC",
        "colab_type": "text"
      },
      "source": [
        "#### Actividad 10: bubblechart\n",
        "\n",
        "Contruya dos _bubblechart_ con la siguiente codificación:\n",
        "- **Bubblechart 1**\n",
        "    - Eje X: año de llegada.\n",
        "    - Eje Y: edad.\n",
        "    - color: pais. Aquí seleccione al menos 10.\n",
        "    - tamaño: cantidad de personas de dicho pais que coinciden con el año de llegada y edad.\n",
        "\n",
        "- **Bubblechart 2**\n",
        "    - Eje X: año de llegada promedio.\n",
        "    - Eje Y: edad promedio.\n",
        "    - color: pais. Aquí seleccione al menos 10.\n",
        "    - tamaño: cantidad de personas de dicho pais que coinciden con el año de llegada y edad.\n",
        "\n",
        "\n",
        "Finalmente,  permita que en ambos gráficos se pueda realizar _zoom_.\n",
        "\n",
        "**Hint**: no olvide filtrar los datos que generan ruido y la utilidad del comando `head`."
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "7DNSm-6cKsaM",
        "colab_type": "code",
        "colab": {}
      },
      "source": [
        "# Bubblechart 1\n",
        "\n"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "9Ps7q9LkKsct",
        "colab_type": "code",
        "colab": {}
      },
      "source": [
        "# Bubblechart 2\n",
        "\n"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "a2g61HwnKw6_",
        "colab_type": "text"
      },
      "source": [
        "### Histogama"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "Yt5xLWoLKyTm",
        "colab_type": "code",
        "colab": {}
      },
      "source": [
        "import altair as alt\n",
        "from vega_datasets import data\n",
        "\n",
        "link = data.movies.url\n",
        "movies = pd.read_json(link)\n",
        "\n",
        "alt.Chart(movies).mark_bar().encode(\n",
        "    alt.X(\"IMDB_Rating:Q\", bin=True),\n",
        "    y='count()',\n",
        ")"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "ztpgl7X5K1SP",
        "colab_type": "text"
      },
      "source": [
        "##### Descripción del ejemplo\n",
        "\n",
        "Un histograma se codifica de forma similar a un gráfico de barra. La principal diferencia es que en el eje Y no se indica una columna con valor numérico, sino que se utiliza la función de agregación `count`.\n",
        "\n",
        "- **Línea 7**\n",
        "\n",
        "```python\n",
        "alt.X(\"IMDB_Rating:Q\", bin=True),\n",
        "```\n",
        "Con esta lína de código se indica que el eje Y será definido en función de la columna _IMDB_\\__Rating_. Un argumento importante aquí es `bin=True` el cual se encarga de agrupar las barras en un rango de valores para reducir la cantidad de barras presentes en el gráfico. Se recomiendo cambiarlo a `False` para ver como era el gráfico original.\n",
        "\n",
        "-------------------\n",
        "- **Línea 8**\n",
        "\n",
        "```python\n",
        "    y='count()',\n",
        "```\n",
        "Con esta lína de código se indica que el valor del eje Y será la cantidad de filas que coinciden con el dato del eje Y.\n",
        "\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "xrF9TB_uK7VC",
        "colab_type": "text"
      },
      "source": [
        "#### Actividad 11: histograma\n",
        "Construya un histograma para responder la pregunta ¿Cuantos jefes de hogar tienen 0, 1, 2, ... , _n_ hijos? Considere _n_ como la cantidad máxima de hijos en el _dataset_."
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "X0crFo0vK8uG",
        "colab_type": "code",
        "colab": {}
      },
      "source": [
        ""
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "KL87anIzLEtI",
        "colab_type": "text"
      },
      "source": [
        "#### Actividad 12: framework\n",
        "Ahora que ya se maneja con el procesamiento de datos y diferentes gráficos, eliga una tarea a resolver con los datos del censo (que no sea una solicitada antes) y justifiquera con el _framework_ visto en clases. (_what_ y _why_). Finalmente implemente dicha tarea utilizando Altair."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "LUkuXr8ILRWr",
        "colab_type": "text"
      },
      "source": [
        "* Tarea\n",
        "* Justificación"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "9sY7muS7LQc7",
        "colab_type": "code",
        "colab": {}
      },
      "source": [
        "# Código\n"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "TK57f89nLXS_",
        "colab_type": "text"
      },
      "source": [
        "## Bonus: ejemplos dinamicos\n",
        "Si deseas estudiar más sobre usos de Altair para visualizaciones dinamicas. En el siguiente [link](https://altair-viz.github.io/gallery/index.html#interactive-charts) se muestran varios ejemplos donde agregan características dinamicas al gráfico. Por ejemplo, un gráfico con el promedio dinamico donde haciendo _click_ en este y arrastrando el _mouse_, se puede calcular la media de las barras seleccionadas."
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "1JRFmTgKLYvd",
        "colab_type": "code",
        "colab": {}
      },
      "source": [
        "import altair as alt\n",
        "from vega_datasets import data\n",
        "\n",
        "source = data.seattle_weather()\n",
        "brush = alt.selection(type='interval', encodings=['x'])\n",
        "\n",
        "bars = alt.Chart().mark_bar().encode(\n",
        "    x='month(date):O',\n",
        "    y='mean(precipitation):Q',\n",
        "    opacity=alt.condition(brush, alt.OpacityValue(1), alt.OpacityValue(0.7)),\n",
        ").add_selection(\n",
        "    brush\n",
        ")\n",
        "\n",
        "line = alt.Chart().mark_rule(color='firebrick').encode(\n",
        "    y='mean(precipitation):Q',\n",
        "    size=alt.SizeValue(3)\n",
        ").transform_filter(\n",
        "    brush\n",
        ")\n",
        "\n",
        "alt.layer(bars, line, data=source)"
      ],
      "execution_count": 0,
      "outputs": []
    }
  ]
}