altair_cartographic_visualization_dados_final.ipynb

{
  "nbformat": 4,
  "nbformat_minor": 0,
  "metadata": {
    "colab": {
      "provenance": []
    },
    "kernelspec": {
      "name": "python3",
      "display_name": "Python 3"
    },
    "language_info": {
      "name": "python"
    }
  },
  "cells": [
    {
      "cell_type": "markdown",
      "source": [
        "### Considerações Iniciais"
      ],
      "metadata": {
        "id": "oUHcj276m0pX"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Este notebook é uma tradução do notebook [Cartographic Visualization](https://jjallaire.github.io/visualization-curriculum/altair_cartographic.html#geoshape-marks) do Visualization Curriculum. Devido às atualizações do Altair desde a publicação do notebook original, decidimos alterar algumas partes do texto e do código para mantê-los atualizados e coerentes com a versão atual do Altair (5.5.0)."
      ],
      "metadata": {
        "id": "rmB8qH9RnBMG"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "# <font color=\"#747a7f\">7</font> Visualização Cartográfica"
      ],
      "metadata": {
        "id": "JAgc5-70BCVh"
      }
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "AXlVTscjMZDh"
      },
      "source": [
        "*“A elaboração de mapas é uma das atividades intelectuais mais antigas da humanidade e também uma das mais complexas, com teoria científica, representação gráfica, fatos geográficos e considerações práticas combinados de maneiras variadas e incessantes.”* &mdash; [H. J. Steward](https://books.google.com/books?id=cVy1Ms43fFYC)\n",
        "\n",
        "A Cartografia &ndash; o estudo e a prática de fazer mapas &ndash; tem uma rica história que abrange séculos de descobertas e design. A visualização cartográfica utiliza técnicas de mapeamento para transmitir dados contendo informações espaciais, como locais, rotas ou trajetórias na superfície da Terra.\n",
        "\n",
        "<img width=\"300px\" align=\"right\" src=\"https://gist.githubusercontent.com/jheer/c90d582ef5322582cf4960ec7689f6f6/raw/8dc92382a837ccc34c076f4ce7dd864e7893324a/latlon.png\"/>\n",
        "\n",
        "Aproximando a Terra como uma esfera, podemos denotar posições usando um sistema de coordenadas esféricas de *latitude* (ângulo em graus ao norte ou ao sul do *equador*) e *longitude* (ângulo em graus especificando a posição leste-oeste). Neste sistema, um *paralelo* é um círculo de latitude constante e um *meridiano* é um círculo de longitude constante. O [*Meridiano de Greenwich*](https://en.wikipedia.org/wiki/Prime_meridian) está a 0° de longitude e, por convenção, é definido para passar pelo Observatório Real em Greenwich, Inglaterra.\n",
        "\n",
        "Para \"achatar\" uma esfera tridimensional em um plano bidimensional, devemos aplicar uma [projeção](https://en.wikipedia.org/wiki/Map_projection) que mapeia pares (`longitude`, `latitude`) para coordenadas (`x`, `y`). Semelhante a [escalas](https://github.com/uwdata/visualization-curriculum/blob/master/altair_scales_axes_legends.ipynb), as projeções mapeiam de um domínio de dados (posição espacial) para um intervalo visual (posição do pixel). No entanto, os mapeamentos de escala que vimos até agora aceitam um domínio unidimensional, enquanto as projeções de mapa são inerentemente bidimensionais.\n",
        "\n",
        "Neste notebook, vamos apresentar o básico sobre criação de mapas e visualizar dados espaciais com Altair, incluindo:\n",
        "\n",
        "- Formatos de dados para representar características geográficas,\n",
        "- Técnicas de geo-visualização, como mapas de pontos, símbolos e coropléticos, e\n",
        "- Uma revisão das projeções cartográficas comuns.\n",
        "\n",
        "*Este notebook é parte do [data visualization curriculum](https://github.com/uwdata/visualization-curriculum).*\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 1,
      "metadata": {
        "id": "3Idnrd8sMZDk"
      },
      "outputs": [],
      "source": [
        "import pandas as pd\n",
        "import altair as alt\n",
        "from vega_datasets import data"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "8xY5d-TdMZDm"
      },
      "source": [
        "## <font color=\"#747a7f\">7.1</font> Dados Geográficos: GeoJSON e TopoJSON\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "pGfkFFKPMZDm"
      },
      "source": [
        "Até este ponto, nós trabalhamos com datasets formatados em JSON e CSV que correspondem a tabelas de dados compostas por linhas (registros) e colunas (campos). Para representar regiões geográficas (países, estados, *etc.*) e trajetórias (rotas de voo, linhas de metrô, *etc.*), nós precisamos expandir nosso repertório com formatos adicionais projetados para suportar geometrias ricas.\n",
        "\n",
        "[GeoJSON](https://en.wikipedia.org/wiki/GeoJSON) modela características geográficas dentro de um formato JSON especializado. Um `feature` do GeoJSON pode incluir dados geométricos &ndash; como coordenadas `longitude`, `latitude` que compõem a fronteira de um país &ndash; além de atributos de dados adicionais.\n",
        "\n",
        "Aqui está um objeto `feature` do GeoJSON para a fronteira do estado do Colorado, nos EUA:\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "4t7TMAjhMZDm"
      },
      "source": [
        "~~~ json\n",
        "{\n",
        "  \"type\": \"Feature\",\n",
        "  \"id\": 8,\n",
        "  \"properties\": {\"name\": \"Colorado\"},\n",
        "  \"geometry\": {\n",
        "    \"type\": \"Polygon\",\n",
        "    \"coordinates\": [\n",
        "      [[-106.32056285448942,40.998675790862656],[-106.19134826714341,40.99813863734313],[-105.27607827344248,40.99813863734313],[-104.9422739227986,40.99813863734313],[-104.05212898774828,41.00136155846029],[-103.57475287338661,41.00189871197981],[-103.38093099236758,41.00189871197981],[-102.65589358559272,41.00189871197981],[-102.62000064466328,41.00189871197981],[-102.052892177978,41.00189871197981],[-102.052892177978,40.74889940428302],[-102.052892177978,40.69733266640851],[-102.052892177978,40.44003613055551],[-102.052892177978,40.3492571857556],[-102.052892177978,40.00333031918079],[-102.04930288388505,39.57414465707943],[-102.04930288388505,39.56823596836465],[-102.0457135897921,39.1331416175485],[-102.0457135897921,39.0466599009048],[-102.0457135897921,38.69751011321283],[-102.0457135897921,38.61478847120581],[-102.0457135897921,38.268861604631],[-102.0457135897921,38.262415762396685],[-102.04212429569915,37.738153927339205],[-102.04212429569915,37.64415206142214],[-102.04212429569915,37.38900413964724],[-102.04212429569915,36.99365914927603],[-103.00046581851544,37.00010499151034],[-103.08660887674611,37.00010499151034],[-104.00905745863294,36.99580776335414],[-105.15404227428235,36.995270609834606],[-105.2222388620483,36.995270609834606],[-105.7175614468747,36.99580776335414],[-106.00829426840322,36.995270609834606],[-106.47490250048605,36.99365914927603],[-107.4224761410235,37.00010499151034],[-107.48349414060355,37.00010499151034],[-108.38081766383978,36.99903068447129],[-109.04483707103458,36.99903068447129],[-109.04483707103458,37.484617466122884],[-109.04124777694163,37.88049961001363],[-109.04124777694163,38.15283644441336],[-109.05919424740635,38.49983761802722],[-109.05201565922046,39.36680339854235],[-109.05201565922046,39.49786885730673],[-109.05201565922046,39.66062637372313],[-109.05201565922046,40.22248895514744],[-109.05201565922046,40.653823231326896],[-109.05201565922046,41.000287251421234],[-107.91779872584989,41.00189871197981],[-107.3183866123281,41.00297301901887],[-106.85895696843116,41.00189871197981],[-106.32056285448942,40.998675790862656]]\n",
        "    ]\n",
        "  }\n",
        "}\n",
        "~~~"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "UMoXUglcMZDn"
      },
      "source": [
        "A `feature` inclui um objeto `properties`, que pode conter qualquer número de campos, além de um objeto `geometry`, que neste caso contém um único polígono composto por coordenadas `[longitude, latitude]` para a fronteira do estado. As coordenadas continuam para a direita por um tempo, caso queira rolar...\n",
        "\n",
        "Para saber mais sobre os detalhes técnicos do GeoJSON, consulte a [especificação oficial do GeoJSON](http://geojson.org/) ou leia o [guia útil de Tom MacWright](https://macwright.org/2015/03/23/geojson-second-bite).\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "cxcrg2TbMZDn"
      },
      "source": [
        "Uma desvantagem do GeoJSON como formato de armazenamento é que ele pode ser redundante, resultando em tamanhos de arquivos maiores. Considere: o Colorado faz fronteira com outros seis estados (sete se incluir o canto que toca o Arizona). Ao invés de usar listas de coordenadas separadas, sobrepondo-se para cada um desses estados, uma abordagem mais compacta seria codificar as fronteiras compartilhadas apenas uma vez, representando a *topologia* das regiões geográficas. Felizmente, é exatamente isso que o formato [TopoJSON](https://github.com/topojson/topojson/blob/master/README.md) faz!\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "T5rFHns0MZDn"
      },
      "source": [
        "Vamos carregar um arquivo TopoJSON dos países do mundo (com resolução de 110 metros):"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 2,
      "metadata": {
        "id": "XTi74D4cMZDn",
        "outputId": "0f3fd35b-16d2-4eb1-acfe-c8b1f500123c",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 35
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "'https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/world-110m.json'"
            ],
            "application/vnd.google.colaboratory.intrinsic+json": {
              "type": "string"
            }
          },
          "metadata": {},
          "execution_count": 2
        }
      ],
      "source": [
        "world = data.world_110m.url\n",
        "world"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 3,
      "metadata": {
        "id": "K8zD3FwZMZDo"
      },
      "outputs": [],
      "source": [
        "world_topo = data.world_110m()"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 4,
      "metadata": {
        "id": "JltjVd0SMZDp",
        "outputId": "7f17c687-dbfa-4e75-8120-391333eba1d5",
        "colab": {
          "base_uri": "https://localhost:8080/"
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "dict_keys(['type', 'transform', 'objects', 'arcs'])"
            ]
          },
          "metadata": {},
          "execution_count": 4
        }
      ],
      "source": [
        "world_topo.keys()"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 5,
      "metadata": {
        "id": "dZf9dcZyMZDp",
        "outputId": "a880a43f-4ef3-43dd-b8db-89d9a8428b6a",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 35
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "'Topology'"
            ],
            "application/vnd.google.colaboratory.intrinsic+json": {
              "type": "string"
            }
          },
          "metadata": {},
          "execution_count": 5
        }
      ],
      "source": [
        "world_topo['type']"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 6,
      "metadata": {
        "id": "6syK_xb5MZDp",
        "outputId": "9efae7f1-f016-460f-ddd2-4173d92772f8",
        "colab": {
          "base_uri": "https://localhost:8080/"
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "dict_keys(['land', 'countries'])"
            ]
          },
          "metadata": {},
          "execution_count": 6
        }
      ],
      "source": [
        "world_topo['objects'].keys()"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "07yElKHDMZDq"
      },
      "source": [
        "*Inspecione o objeto dicionário TopoJSON `world_topo` acima para ver seu conteúdo.*\n",
        "\n",
        "Nos dados acima, a propriedade `objects` indica os elementos nomeados que nós podemos extrair dos dados: geometrias para todos os `countries` (países) ou um único polígono representando toda a `land` (terra) na Terra. Qualquer um destes pode ser desempacotado para dados GeoJSON que nós podemos então visualizar.\n",
        "\n",
        "Como o TopoJSON é um formato especializado, precisamos instruir o Altair a analisar o formato TopoJSON, indicando qual objeto feature nomeado nós desejamos extrair da topologia. O seguinte código indica que nós queremos extrair as features GeoJSON do dataset `world` para o objeto `countries`:\n",
        "\n",
        "~~~ js\n",
        "alt.topo_feature(world, 'countries')\n",
        "~~~\n",
        "\n",
        "Este método `alt.topo_feature` se expande para o seguinte JSON do Vega-Lite:\n",
        "\n",
        "~~~ json\n",
        "{\n",
        "  \"values\": world,\n",
        "  \"format\": {\"type\": \"topojson\", \"feature\": \"countries\"}\n",
        "}\n",
        "~~~\n",
        "\n",
        "Agora que podemos carregar dados geográficos, nós estamos prontos para começar a fazer mapas!\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "jp-MarkdownHeadingCollapsed": true,
        "id": "QYFGYHjwaTz8"
      },
      "source": [
        "## <font color=\"#747a7f\">7.2</font> Marcas de Formas Geográficas"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "EH8j-NjyaTz9"
      },
      "source": [
        "Para visualizar dados geográficos, o Altair oferece o tipo de marca `geoshape`. Para criar um mapa básico, nós podemos criar uma marca `geoshape` e passar nossos dados TopoJSON, os quais são então desempacotados em features GeoJSON, um para cada país do mundo:\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 7,
      "metadata": {
        "id": "ji-i3zp4aTz-",
        "outputId": "d33d36dc-dadc-4010-9491-a2a751acb53f",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 330
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<style>\n",
              "  #altair-viz-b2def8576f3441fc83cae0ce02f526af.vega-embed {\n",
              "    width: 100%;\n",
              "    display: flex;\n",
              "  }\n",
              "\n",
              "  #altair-viz-b2def8576f3441fc83cae0ce02f526af.vega-embed details,\n",
              "  #altair-viz-b2def8576f3441fc83cae0ce02f526af.vega-embed details summary {\n",
              "    position: relative;\n",
              "  }\n",
              "</style>\n",
              "<div id=\"altair-viz-b2def8576f3441fc83cae0ce02f526af\"></div>\n",
              "<script type=\"text/javascript\">\n",
              "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
              "  (function(spec, embedOpt){\n",
              "    let outputDiv = document.currentScript.previousElementSibling;\n",
              "    if (outputDiv.id !== \"altair-viz-b2def8576f3441fc83cae0ce02f526af\") {\n",
              "      outputDiv = document.getElementById(\"altair-viz-b2def8576f3441fc83cae0ce02f526af\");\n",
              "    }\n",
              "\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@5.20.1?noext\",\n",
              "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
              "    };\n",
              "\n",
              "    function maybeLoadScript(lib, version) {\n",
              "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
              "      return (VEGA_DEBUG[key] == version) ?\n",
              "        Promise.resolve(paths[lib]) :\n",
              "        new Promise(function(resolve, reject) {\n",
              "          var s = document.createElement('script');\n",
              "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
              "          s.async = true;\n",
              "          s.onload = () => {\n",
              "            VEGA_DEBUG[key] = version;\n",
              "            return resolve(paths[lib]);\n",
              "          };\n",
              "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
              "          s.src = paths[lib];\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",
              "      let deps = [\"vega-embed\"];\n",
              "      require(deps, displayChart, err => showError(`Error loading script: ${err.message}`));\n",
              "    } else {\n",
              "      maybeLoadScript(\"vega\", \"5\")\n",
              "        .then(() => maybeLoadScript(\"vega-lite\", \"5.20.1\"))\n",
              "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
              "        .catch(showError)\n",
              "        .then(() => displayChart(vegaEmbed));\n",
              "    }\n",
              "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/world-110m.json\", \"format\": {\"feature\": \"countries\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\"}, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\"}, {\"mode\": \"vega-lite\"});\n",
              "</script>"
            ],
            "text/plain": [
              "alt.Chart(...)"
            ]
          },
          "metadata": {},
          "execution_count": 7
        }
      ],
      "source": [
        "alt.Chart(alt.topo_feature(world, 'countries')).mark_geoshape()"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "XEZraEoLaTz-"
      },
      "source": [
        "No exemplo acima, o Altair aplica uma cor azul padrão e usa uma projeção de mapa padrão (`equalEarth`). Nós podemos personalizar as cores e as larguras das linhas de fronteira usando propriedades padrões da marca. Usando o método `project` nós também podemos adicionar nossa própria projeção de mapa:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 8,
      "metadata": {
        "id": "_LGBNfcmaTz_",
        "outputId": "401efa0d-f9fb-47e5-a2f6-714ed9e1101a",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 330
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<style>\n",
              "  #altair-viz-38c18d5066434e29a42cafc4dd9f123d.vega-embed {\n",
              "    width: 100%;\n",
              "    display: flex;\n",
              "  }\n",
              "\n",
              "  #altair-viz-38c18d5066434e29a42cafc4dd9f123d.vega-embed details,\n",
              "  #altair-viz-38c18d5066434e29a42cafc4dd9f123d.vega-embed details summary {\n",
              "    position: relative;\n",
              "  }\n",
              "</style>\n",
              "<div id=\"altair-viz-38c18d5066434e29a42cafc4dd9f123d\"></div>\n",
              "<script type=\"text/javascript\">\n",
              "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
              "  (function(spec, embedOpt){\n",
              "    let outputDiv = document.currentScript.previousElementSibling;\n",
              "    if (outputDiv.id !== \"altair-viz-38c18d5066434e29a42cafc4dd9f123d\") {\n",
              "      outputDiv = document.getElementById(\"altair-viz-38c18d5066434e29a42cafc4dd9f123d\");\n",
              "    }\n",
              "\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@5.20.1?noext\",\n",
              "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
              "    };\n",
              "\n",
              "    function maybeLoadScript(lib, version) {\n",
              "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
              "      return (VEGA_DEBUG[key] == version) ?\n",
              "        Promise.resolve(paths[lib]) :\n",
              "        new Promise(function(resolve, reject) {\n",
              "          var s = document.createElement('script');\n",
              "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
              "          s.async = true;\n",
              "          s.onload = () => {\n",
              "            VEGA_DEBUG[key] = version;\n",
              "            return resolve(paths[lib]);\n",
              "          };\n",
              "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
              "          s.src = paths[lib];\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",
              "      let deps = [\"vega-embed\"];\n",
              "      require(deps, displayChart, err => showError(`Error loading script: ${err.message}`));\n",
              "    } else {\n",
              "      maybeLoadScript(\"vega\", \"5\")\n",
              "        .then(() => maybeLoadScript(\"vega-lite\", \"5.20.1\"))\n",
              "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
              "        .catch(showError)\n",
              "        .then(() => displayChart(vegaEmbed));\n",
              "    }\n",
              "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/world-110m.json\", \"format\": {\"feature\": \"countries\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#2a1d0c\", \"stroke\": \"#706545\", \"strokeWidth\": 0.5}, \"projection\": {\"type\": \"mercator\"}, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\"}, {\"mode\": \"vega-lite\"});\n",
              "</script>"
            ],
            "text/plain": [
              "alt.Chart(...)"
            ]
          },
          "metadata": {},
          "execution_count": 8
        }
      ],
      "source": [
        "alt.Chart(alt.topo_feature(world, 'countries')).mark_geoshape(\n",
        "    fill='#2a1d0c', stroke='#706545', strokeWidth=0.5\n",
        ").project(\n",
        "    type='mercator'\n",
        ")"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "XpmgyedJaT0A"
      },
      "source": [
        "Por padrão, o Altair ajusta automaticamente a projeção para que todos os dados se encaixem na largura e na altura do gráfico. Nós podemos também especificar parâmetros de projeção, como `scale` (nível de zoom) e `translate` (panning), para personalizar as configurações de projeção. Aqui nós ajustamos os parâmetros `scale` e `translate` para focar na Europa:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 9,
      "metadata": {
        "id": "JDhcir_jaT0B",
        "outputId": "149a252b-7903-4abb-8f78-a0af3c25b168",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 330
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<style>\n",
              "  #altair-viz-b0d7fb3074eb4fdeac188af05b8379ab.vega-embed {\n",
              "    width: 100%;\n",
              "    display: flex;\n",
              "  }\n",
              "\n",
              "  #altair-viz-b0d7fb3074eb4fdeac188af05b8379ab.vega-embed details,\n",
              "  #altair-viz-b0d7fb3074eb4fdeac188af05b8379ab.vega-embed details summary {\n",
              "    position: relative;\n",
              "  }\n",
              "</style>\n",
              "<div id=\"altair-viz-b0d7fb3074eb4fdeac188af05b8379ab\"></div>\n",
              "<script type=\"text/javascript\">\n",
              "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
              "  (function(spec, embedOpt){\n",
              "    let outputDiv = document.currentScript.previousElementSibling;\n",
              "    if (outputDiv.id !== \"altair-viz-b0d7fb3074eb4fdeac188af05b8379ab\") {\n",
              "      outputDiv = document.getElementById(\"altair-viz-b0d7fb3074eb4fdeac188af05b8379ab\");\n",
              "    }\n",
              "\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@5.20.1?noext\",\n",
              "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
              "    };\n",
              "\n",
              "    function maybeLoadScript(lib, version) {\n",
              "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
              "      return (VEGA_DEBUG[key] == version) ?\n",
              "        Promise.resolve(paths[lib]) :\n",
              "        new Promise(function(resolve, reject) {\n",
              "          var s = document.createElement('script');\n",
              "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
              "          s.async = true;\n",
              "          s.onload = () => {\n",
              "            VEGA_DEBUG[key] = version;\n",
              "            return resolve(paths[lib]);\n",
              "          };\n",
              "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
              "          s.src = paths[lib];\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",
              "      let deps = [\"vega-embed\"];\n",
              "      require(deps, displayChart, err => showError(`Error loading script: ${err.message}`));\n",
              "    } else {\n",
              "      maybeLoadScript(\"vega\", \"5\")\n",
              "        .then(() => maybeLoadScript(\"vega-lite\", \"5.20.1\"))\n",
              "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
              "        .catch(showError)\n",
              "        .then(() => displayChart(vegaEmbed));\n",
              "    }\n",
              "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/world-110m.json\", \"format\": {\"feature\": \"countries\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#2a1d0c\", \"stroke\": \"#706545\", \"strokeWidth\": 0.5}, \"projection\": {\"scale\": 400, \"translate\": [100, 550], \"type\": \"mercator\"}, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\"}, {\"mode\": \"vega-lite\"});\n",
              "</script>"
            ],
            "text/plain": [
              "alt.Chart(...)"
            ]
          },
          "metadata": {},
          "execution_count": 9
        }
      ],
      "source": [
        "alt.Chart(alt.topo_feature(world, 'countries')).mark_geoshape(\n",
        "    fill='#2a1d0c', stroke='#706545', strokeWidth=0.5\n",
        ").project(\n",
        "    type='mercator', scale=400, translate=[100, 550]\n",
        ")"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "FPlXbE6HaT0C"
      },
      "source": [
        "*Observe como a resolução de 110m dos dados se torna aparente nesta escala. Para ver contornos da costa e fronteiras mais detalhados, nós precisamos de um arquivo de entrada com geometrias mais refinadas. Ajuste os parâmetros `scale` e `translate` para focar o mapa em outras regiões!*\n",
        "\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "hVjS0VpMaT0C"
      },
      "source": [
        "Até agora, nosso mapa mostra apenas países. Usando o operador `layer`, nós podemos combinar vários elementos de mapa. O Altair inclui *geradores de dados* que nós podemos usar para criar dados para camadas de mapa adicionais:\n",
        "\n",
        "- O gerador de esfera (`{'sphere': True}`) oferece uma representação GeoJSON da esfera completa da terra. Nós podemos criar uma marca `geoshape` adicional que preencha a forma da Terra como uma camada de fundo.\n",
        "- O gerador de gratícula (`{'graticule': ...}`) cria uma feature GeoJSON representando uma gratícula: uma grade formada por linhas de latitude e longitude. A gratícula padrão possui meridianos e paralelos a cada 10° entre ±80° de latitude. Para as regiões polares, existem meridianos a cada 90°. Essas configurações podem ser personalizadas usando as propriedades `stepMinor` e `stepMajor`.\n",
        "\n",
        "Vamos dispor em camadas as marcas esfera, gratícula e país em uma especificação de mapa reutilizável:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 10,
      "metadata": {
        "id": "BVf1bKfNaT0D"
      },
      "outputs": [],
      "source": [
        "map = alt.layer(\n",
        "    # usa a esfera da terra como a camada base\n",
        "    alt.Chart({'sphere': True}).mark_geoshape(\n",
        "        fill='#e6f3ff'\n",
        "    ),\n",
        "    # adiciona uma gratícula para linhas de referência geográfica\n",
        "    alt.Chart({'graticule': True}).mark_geoshape(\n",
        "        stroke='#ffffff', strokeWidth=1\n",
        "    ),\n",
        "    # e então os países do mundo\n",
        "    alt.Chart(alt.topo_feature(world, 'countries')).mark_geoshape(\n",
        "        fill='#2a1d0c', stroke='#706545', strokeWidth=0.5\n",
        "    )\n",
        ").properties(\n",
        "    width=600,\n",
        "    height=400\n",
        ")"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "IAFK1e34aT0D"
      },
      "source": [
        "Nós podemos estender o mapa com uma projeção desejada e desenhar o resultado. Aqui aplicamos uma [Projeção Natural da Terra](https://en.wikipedia.org/wiki/Natural_Earth_projection). A camada de *esfera* oferece o fundo azul claro; a camada de *gratícula* oferece as linhas de referência geográficas brancas."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 11,
      "metadata": {
        "id": "U0dH2v5_aT0D",
        "outputId": "d3119e10-fa8e-4fb8-f62d-5bd70a791de0",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 430
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<style>\n",
              "  #altair-viz-22ba24c38f2a48d887706b6d0aad8710.vega-embed {\n",
              "    width: 100%;\n",
              "    display: flex;\n",
              "  }\n",
              "\n",
              "  #altair-viz-22ba24c38f2a48d887706b6d0aad8710.vega-embed details,\n",
              "  #altair-viz-22ba24c38f2a48d887706b6d0aad8710.vega-embed details summary {\n",
              "    position: relative;\n",
              "  }\n",
              "</style>\n",
              "<div id=\"altair-viz-22ba24c38f2a48d887706b6d0aad8710\"></div>\n",
              "<script type=\"text/javascript\">\n",
              "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
              "  (function(spec, embedOpt){\n",
              "    let outputDiv = document.currentScript.previousElementSibling;\n",
              "    if (outputDiv.id !== \"altair-viz-22ba24c38f2a48d887706b6d0aad8710\") {\n",
              "      outputDiv = document.getElementById(\"altair-viz-22ba24c38f2a48d887706b6d0aad8710\");\n",
              "    }\n",
              "\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@5.20.1?noext\",\n",
              "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
              "    };\n",
              "\n",
              "    function maybeLoadScript(lib, version) {\n",
              "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
              "      return (VEGA_DEBUG[key] == version) ?\n",
              "        Promise.resolve(paths[lib]) :\n",
              "        new Promise(function(resolve, reject) {\n",
              "          var s = document.createElement('script');\n",
              "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
              "          s.async = true;\n",
              "          s.onload = () => {\n",
              "            VEGA_DEBUG[key] = version;\n",
              "            return resolve(paths[lib]);\n",
              "          };\n",
              "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
              "          s.src = paths[lib];\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",
              "      let deps = [\"vega-embed\"];\n",
              "      require(deps, displayChart, err => showError(`Error loading script: ${err.message}`));\n",
              "    } else {\n",
              "      maybeLoadScript(\"vega\", \"5\")\n",
              "        .then(() => maybeLoadScript(\"vega-lite\", \"5.20.1\"))\n",
              "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
              "        .catch(showError)\n",
              "        .then(() => displayChart(vegaEmbed));\n",
              "    }\n",
              "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300, \"stroke\": null}}, \"layer\": [{\"data\": {\"sphere\": true}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#e6f3ff\"}}, {\"data\": {\"graticule\": true}, \"mark\": {\"type\": \"geoshape\", \"stroke\": \"#ffffff\", \"strokeWidth\": 1}}, {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/world-110m.json\", \"format\": {\"feature\": \"countries\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#2a1d0c\", \"stroke\": \"#706545\", \"strokeWidth\": 0.5}}], \"height\": 400, \"projection\": {\"scale\": 110, \"translate\": [300, 200], \"type\": \"naturalEarth1\"}, \"width\": 600, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\"}, {\"mode\": \"vega-lite\"});\n",
              "</script>"
            ],
            "text/plain": [
              "alt.LayerChart(...)"
            ]
          },
          "metadata": {},
          "execution_count": 11
        }
      ],
      "source": [
        "map.project(\n",
        "    type='naturalEarth1', scale=110, translate=[300, 200]\n",
        ").configure_view(stroke=None)"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "IKfZVAZoaT0D"
      },
      "source": [
        "## <font color=\"#747a7f\">7.3</font> Mapas de Pontos\n",
        "\n",
        "Além dos dados *geométricos* oferecidos pelos arquivos GeoJSON ou TopoJSON, muitos datasets tabulares incluem informações geográficas na forma de campos para coordenadas de `longitude` e `latitude`, ou referências a regiões geográficas, como nomes de países, nomes de estados, códigos postais, *etc.*, os quais podem ser mapeados para coordenadas usando um [serviço de geocodificação](https://en.wikipedia.org/wiki/Geocoding). Em alguns casos, os dados de localização são ricos o suficiente para que nós possamos ver padrões significativos projetados apenas pelos pontos de dados &mdash; nenhum mapa base é necessário!\n",
        "\n",
        "Vejamos um conjunto de dados de códigos postais de 5 dígitos nos Estados Unidos, incluindo coordenadas de `longitude` e `latitude` para cada agência dos correios, além de um campo `zip_code`."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 12,
      "metadata": {
        "id": "3QPHNgVZaT0E",
        "outputId": "a283b9bc-7d41-497b-f179-26a4baa86aa8",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 35
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "'https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/zipcodes.csv'"
            ],
            "application/vnd.google.colaboratory.intrinsic+json": {
              "type": "string"
            }
          },
          "metadata": {},
          "execution_count": 12
        }
      ],
      "source": [
        "zipcodes = data.zipcodes.url\n",
        "zipcodes"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "XQ56dzxLaT0E"
      },
      "source": [
        "Nós podemos visualizar a localização de cada agência dos correios usando uma pequena marca `square` (1 pixel). No entanto, para definir as posições, nós *não* usamos canais `x` e `y`. Por quê?\n",
        "\n",
        "Embora as projeções cartográficas mapeiem coordenadas (`longitude`, `latitude`) para coordenadas (`x`,`y`), elas podem fazê-lo de maneiras arbitrárias. Não há garantia, por exemplo, que `longitude` → `x` e `latitude` → `y`!\n",
        "Ao invés disso, o Altair inclui canais de codificação especiais de `longitude` e `latitude` para lidar com coordenadas geográficas. Estes canais indicam quais campos de dados devem ser mapeados para coordenadas de `longitude` e `latitude`, e em seguida aplica uma projeção para mapear essas coordenadas para posições (`x`, `y`)."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 13,
      "metadata": {
        "id": "9bmJx_Z9aT0E",
        "outputId": "3f864b81-5d96-41a5-82e4-593ef878b1b6",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 532
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<style>\n",
              "  #altair-viz-7287f80d3b1d4f619be0237d68be25d2.vega-embed {\n",
              "    width: 100%;\n",
              "    display: flex;\n",
              "  }\n",
              "\n",
              "  #altair-viz-7287f80d3b1d4f619be0237d68be25d2.vega-embed details,\n",
              "  #altair-viz-7287f80d3b1d4f619be0237d68be25d2.vega-embed details summary {\n",
              "    position: relative;\n",
              "  }\n",
              "</style>\n",
              "<div id=\"altair-viz-7287f80d3b1d4f619be0237d68be25d2\"></div>\n",
              "<script type=\"text/javascript\">\n",
              "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
              "  (function(spec, embedOpt){\n",
              "    let outputDiv = document.currentScript.previousElementSibling;\n",
              "    if (outputDiv.id !== \"altair-viz-7287f80d3b1d4f619be0237d68be25d2\") {\n",
              "      outputDiv = document.getElementById(\"altair-viz-7287f80d3b1d4f619be0237d68be25d2\");\n",
              "    }\n",
              "\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@5.20.1?noext\",\n",
              "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
              "    };\n",
              "\n",
              "    function maybeLoadScript(lib, version) {\n",
              "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
              "      return (VEGA_DEBUG[key] == version) ?\n",
              "        Promise.resolve(paths[lib]) :\n",
              "        new Promise(function(resolve, reject) {\n",
              "          var s = document.createElement('script');\n",
              "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
              "          s.async = true;\n",
              "          s.onload = () => {\n",
              "            VEGA_DEBUG[key] = version;\n",
              "            return resolve(paths[lib]);\n",
              "          };\n",
              "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
              "          s.src = paths[lib];\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",
              "      let deps = [\"vega-embed\"];\n",
              "      require(deps, displayChart, err => showError(`Error loading script: ${err.message}`));\n",
              "    } else {\n",
              "      maybeLoadScript(\"vega\", \"5\")\n",
              "        .then(() => maybeLoadScript(\"vega-lite\", \"5.20.1\"))\n",
              "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
              "        .catch(showError)\n",
              "        .then(() => displayChart(vegaEmbed));\n",
              "    }\n",
              "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300, \"stroke\": null}}, \"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/zipcodes.csv\"}, \"mark\": {\"type\": \"square\", \"opacity\": 1, \"size\": 1}, \"encoding\": {\"latitude\": {\"field\": \"latitude\", \"type\": \"quantitative\"}, \"longitude\": {\"field\": \"longitude\", \"type\": \"quantitative\"}}, \"height\": 500, \"projection\": {\"type\": \"albersUsa\"}, \"width\": 900, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\"}, {\"mode\": \"vega-lite\"});\n",
              "</script>"
            ],
            "text/plain": [
              "alt.Chart(...)"
            ]
          },
          "metadata": {},
          "execution_count": 13
        }
      ],
      "source": [
        "alt.Chart(zipcodes).mark_square(\n",
        "    size=1, opacity=1\n",
        ").encode(\n",
        "    longitude='longitude:Q', # aplica o campo chamado 'longitude' no canal longitude\n",
        "    latitude='latitude:Q'    # aplica o campo chamado 'latitude' no canal latitude\n",
        ").project(\n",
        "    type='albersUsa'\n",
        ").properties(\n",
        "    width=900,\n",
        "    height=500\n",
        ").configure_view(\n",
        "    stroke=None\n",
        ")"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "VkK8SLTFaT0E"
      },
      "source": [
        "*Ao plotar apenas os códigos postais, nós podemos ver o contorno dos Estados Unidos e discernir padrões significativos na densidade de agências dos correios, sem a necessidade de um mapa base ou elementos de referência adicionais!*\n",
        "\n",
        "Nós usamos a projeção `albersUsa`, ao qual faz algumas adaptações na geometria real da Terra, com versões escalonadas do Alasca e do Havai no canto inferior esquerdo. Como não especificamos parâmetros de projeção `scale` ou `translate`, o Altair os define automaticamente para se ajustar aos dados visualizados.\n",
        "\n",
        "Nós podemos agora seguir em frente e fazer mais perguntas sobre nosso dataset. Por exemplo, existe algum padrão na alocação dos códigos postais? Para avaliar esta questão, nós podemos adicionar uma codificação de cor com base no primeiro dígito do código postal. Primeiro, adicionamos uma transformação `calculate` para extrair o primeiro dígito e codificamos o resultado usando o canal de cor:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 14,
      "metadata": {
        "id": "uv7ufwYlaT0E",
        "outputId": "f82900b6-eecb-4f09-f267-1bdc5806d2ca",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 532
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<style>\n",
              "  #altair-viz-bad88ac41578498b8440eff7fc4e3e9a.vega-embed {\n",
              "    width: 100%;\n",
              "    display: flex;\n",
              "  }\n",
              "\n",
              "  #altair-viz-bad88ac41578498b8440eff7fc4e3e9a.vega-embed details,\n",
              "  #altair-viz-bad88ac41578498b8440eff7fc4e3e9a.vega-embed details summary {\n",
              "    position: relative;\n",
              "  }\n",
              "</style>\n",
              "<div id=\"altair-viz-bad88ac41578498b8440eff7fc4e3e9a\"></div>\n",
              "<script type=\"text/javascript\">\n",
              "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
              "  (function(spec, embedOpt){\n",
              "    let outputDiv = document.currentScript.previousElementSibling;\n",
              "    if (outputDiv.id !== \"altair-viz-bad88ac41578498b8440eff7fc4e3e9a\") {\n",
              "      outputDiv = document.getElementById(\"altair-viz-bad88ac41578498b8440eff7fc4e3e9a\");\n",
              "    }\n",
              "\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@5.20.1?noext\",\n",
              "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
              "    };\n",
              "\n",
              "    function maybeLoadScript(lib, version) {\n",
              "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
              "      return (VEGA_DEBUG[key] == version) ?\n",
              "        Promise.resolve(paths[lib]) :\n",
              "        new Promise(function(resolve, reject) {\n",
              "          var s = document.createElement('script');\n",
              "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
              "          s.async = true;\n",
              "          s.onload = () => {\n",
              "            VEGA_DEBUG[key] = version;\n",
              "            return resolve(paths[lib]);\n",
              "          };\n",
              "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
              "          s.src = paths[lib];\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",
              "      let deps = [\"vega-embed\"];\n",
              "      require(deps, displayChart, err => showError(`Error loading script: ${err.message}`));\n",
              "    } else {\n",
              "      maybeLoadScript(\"vega\", \"5\")\n",
              "        .then(() => maybeLoadScript(\"vega-lite\", \"5.20.1\"))\n",
              "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
              "        .catch(showError)\n",
              "        .then(() => displayChart(vegaEmbed));\n",
              "    }\n",
              "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300, \"stroke\": null}}, \"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/zipcodes.csv\"}, \"mark\": {\"type\": \"square\", \"opacity\": 1, \"size\": 2}, \"encoding\": {\"color\": {\"field\": \"digit\", \"title\": \"d\\u00edgito\", \"type\": \"nominal\"}, \"latitude\": {\"field\": \"latitude\", \"type\": \"quantitative\"}, \"longitude\": {\"field\": \"longitude\", \"type\": \"quantitative\"}}, \"height\": 500, \"projection\": {\"type\": \"albersUsa\"}, \"transform\": [{\"calculate\": \"datum.zip_code[0]\", \"as\": \"digit\"}], \"width\": 900, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\"}, {\"mode\": \"vega-lite\"});\n",
              "</script>"
            ],
            "text/plain": [
              "alt.Chart(...)"
            ]
          },
          "metadata": {},
          "execution_count": 14
        }
      ],
      "source": [
        "alt.Chart(zipcodes).transform_calculate(\n",
        "    digit='datum.zip_code[0]'\n",
        ").mark_square(\n",
        "    size=2, opacity=1\n",
        ").encode(\n",
        "    longitude='longitude:Q',\n",
        "    latitude='latitude:Q',\n",
        "    color=alt.Color('digit:N',title='dígito')\n",
        ").project(\n",
        "    type='albersUsa'\n",
        ").properties(\n",
        "    width=900,\n",
        "    height=500\n",
        ").configure_view(\n",
        "    stroke=None\n",
        ")"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "SaspXWlraT0F"
      },
      "source": [
        "_Para dar zoom em um dígito específico, adicione uma transformação de filtro para limitar os dados exibidos! Tente adicionar uma [seleção interativa](https://github.com/uwdata/visualization-curriculum/blob/master/altair_interaction.ipynb) para filtrar por um único dígito e atualizar dinamicamente o mapa. E lembre-se de usar strings (\\`'1'\\`) em vez de números (\\`1\\`) ao filtrar os valores dos dígitos!_\n",
        "\n",
        "(Este exemplo é inspirado pela clássica visualização [zipdecode](https://benfry.com/zipdecode/) de Ben Fry!)\n",
        "\n",
        "Nós poderíamos ainda nos perguntar o que a *sequência* dos códigos postais poderia indicar. Uma forma de explorar esta questão é conectar cada código postal consecutivo usando uma marca `line`, como feito na visualização [ZipScribble](https://eagereyes.org/zipscribble-maps/united-states) de Robert Kosara:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 15,
      "metadata": {
        "id": "8cZZcWZ9aT0F",
        "outputId": "f1c9a33d-c04a-47f1-fc04-938c6aab4fb5",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 532
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<style>\n",
              "  #altair-viz-d5510b17719d4adf87069ce028e7eaa6.vega-embed {\n",
              "    width: 100%;\n",
              "    display: flex;\n",
              "  }\n",
              "\n",
              "  #altair-viz-d5510b17719d4adf87069ce028e7eaa6.vega-embed details,\n",
              "  #altair-viz-d5510b17719d4adf87069ce028e7eaa6.vega-embed details summary {\n",
              "    position: relative;\n",
              "  }\n",
              "</style>\n",
              "<div id=\"altair-viz-d5510b17719d4adf87069ce028e7eaa6\"></div>\n",
              "<script type=\"text/javascript\">\n",
              "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
              "  (function(spec, embedOpt){\n",
              "    let outputDiv = document.currentScript.previousElementSibling;\n",
              "    if (outputDiv.id !== \"altair-viz-d5510b17719d4adf87069ce028e7eaa6\") {\n",
              "      outputDiv = document.getElementById(\"altair-viz-d5510b17719d4adf87069ce028e7eaa6\");\n",
              "    }\n",
              "\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@5.20.1?noext\",\n",
              "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
              "    };\n",
              "\n",
              "    function maybeLoadScript(lib, version) {\n",
              "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
              "      return (VEGA_DEBUG[key] == version) ?\n",
              "        Promise.resolve(paths[lib]) :\n",
              "        new Promise(function(resolve, reject) {\n",
              "          var s = document.createElement('script');\n",
              "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
              "          s.async = true;\n",
              "          s.onload = () => {\n",
              "            VEGA_DEBUG[key] = version;\n",
              "            return resolve(paths[lib]);\n",
              "          };\n",
              "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
              "          s.src = paths[lib];\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",
              "      let deps = [\"vega-embed\"];\n",
              "      require(deps, displayChart, err => showError(`Error loading script: ${err.message}`));\n",
              "    } else {\n",
              "      maybeLoadScript(\"vega\", \"5\")\n",
              "        .then(() => maybeLoadScript(\"vega-lite\", \"5.20.1\"))\n",
              "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
              "        .catch(showError)\n",
              "        .then(() => displayChart(vegaEmbed));\n",
              "    }\n",
              "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300, \"stroke\": null}}, \"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/zipcodes.csv\"}, \"mark\": {\"type\": \"line\", \"strokeWidth\": 0.5}, \"encoding\": {\"color\": {\"field\": \"digit\", \"type\": \"nominal\"}, \"latitude\": {\"field\": \"latitude\", \"type\": \"quantitative\"}, \"longitude\": {\"field\": \"longitude\", \"type\": \"quantitative\"}, \"order\": {\"field\": \"zip_code\", \"type\": \"ordinal\"}}, \"height\": 500, \"projection\": {\"type\": \"albersUsa\"}, \"transform\": [{\"filter\": \"-150 < datum.longitude && 22 < datum.latitude && datum.latitude < 55\"}, {\"calculate\": \"datum.zip_code[0]\", \"as\": \"digit\"}], \"width\": 900, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\"}, {\"mode\": \"vega-lite\"});\n",
              "</script>"
            ],
            "text/plain": [
              "alt.Chart(...)"
            ]
          },
          "metadata": {},
          "execution_count": 15
        }
      ],
      "source": [
        "alt.Chart(zipcodes).transform_filter(\n",
        "    '-150 < datum.longitude && 22 < datum.latitude && datum.latitude < 55'\n",
        ").transform_calculate(\n",
        "    digit='datum.zip_code[0]'\n",
        ").mark_line(\n",
        "    strokeWidth=0.5\n",
        ").encode(\n",
        "    longitude='longitude:Q',\n",
        "    latitude='latitude:Q',\n",
        "    color='digit:N',\n",
        "    order='zip_code:O'\n",
        ").project(\n",
        "    type='albersUsa'\n",
        ").properties(\n",
        "    width=900,\n",
        "    height=500\n",
        ").configure_view(\n",
        "    stroke=None\n",
        ")"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "1u48pndxaT0F"
      },
      "source": [
        "*Nós podemos agora ver como os códigos postais se agrupam em áreas menores, indicando uma alocação hierárquica dos códigos por local, mas com uma variação notável dentro dos grupos locais.*\n",
        "\n",
        "Se você estava prestando atenção aos nossos mapas anteriores, talvez você possa ter notado que há códigos postais sendo plotados no canto superior esquerdo! Estes correspondem a locais como Porto Rico ou Samoa Americana, os quais contêm códigos postais dos EUA, mas são mapeados para coordenadas `null` (`0`, `0`) pela projeção `albersUsa`. Além disso, Alasca e Havai podem complicar nossa visão dos segmentos de linha conectados. Em resposta, o código acima inclui um filtro adicional que remove pontos fora dos intervalos de `longitude` e `latitude` escolhidos.\n",
        "\n",
        "*Remova o filtro acima para ver o que acontece!*"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "z0sLmNNSaT0F"
      },
      "source": [
        "## <font color=\"#747a7f\">7.4</font> Mapas de Símbolos"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "SNytJU4BaT0F"
      },
      "source": [
        "Agora, vamos combinar um mapa base e os dados plotados como camadas separadas. Vamos examinar a rede de voos comerciais dos EUA, considerando tanto os aeroportos quanto as rotas de voo. Para isso, nós precisaremos de três datasets.\n",
        "Para o nosso mapa base, nós usaremos um arquivo TopoJSON dos Estados Unidos com resolução de 10m, contendo features para `states` ou `counties`:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 16,
      "metadata": {
        "id": "0PAP2S6XaT0G",
        "outputId": "03329d47-aa14-44e9-d2c3-9a8c529fde39",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 35
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "'https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/us-10m.json'"
            ],
            "application/vnd.google.colaboratory.intrinsic+json": {
              "type": "string"
            }
          },
          "metadata": {},
          "execution_count": 16
        }
      ],
      "source": [
        "usa = data.us_10m.url\n",
        "usa"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "CLClnZPLaT0G"
      },
      "source": [
        "Para os aeroportos, nós usaremos um dataset com campos para as coordenadas de `longitude` e `latitude` de cada aeroporto, bem como o código do aeroporto `iata` &mdash; por exemplo, `'SEA'` para [Seattle-Tacoma International Airport](https://en.wikipedia.org/wiki/Seattle%E2%80%93Tacoma_International_Airport)."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 17,
      "metadata": {
        "id": "acWBaP0NaT0G",
        "outputId": "6c0e0d9a-d1fb-4c9a-e1f2-da2a59609b9c",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 35
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "'https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/airports.csv'"
            ],
            "application/vnd.google.colaboratory.intrinsic+json": {
              "type": "string"
            }
          },
          "metadata": {},
          "execution_count": 17
        }
      ],
      "source": [
        "airports = data.airports.url\n",
        "airports"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "Yfd--V1naT0G"
      },
      "source": [
        "Por fim, nós utilizaremos um dataset de rotas de voo, que contém os campos `origin` e `destination` com os códigos IATA dos aeroportos correspondentes:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 18,
      "metadata": {
        "id": "LQfUiOc0aT0G",
        "outputId": "a94d148b-5d50-4e15-87f2-6f4ba9889217",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 35
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "'https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/flights-airport.csv'"
            ],
            "application/vnd.google.colaboratory.intrinsic+json": {
              "type": "string"
            }
          },
          "metadata": {},
          "execution_count": 18
        }
      ],
      "source": [
        "flights = data.flights_airport.url\n",
        "flights"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "3_Y5fECxaT0G"
      },
      "source": [
        "Vamos começar criando um mapa base usando a projeção `albersUsa` e adicionar uma camada que traça marcas `circle` para cada aeroporto:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 19,
      "metadata": {
        "id": "VZSLMwM8aT0G",
        "outputId": "c49fdd70-b2eb-4b12-b632-33a54df40ef9",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 534
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<style>\n",
              "  #altair-viz-eb645fd1abeb42189bb15126c745036d.vega-embed {\n",
              "    width: 100%;\n",
              "    display: flex;\n",
              "  }\n",
              "\n",
              "  #altair-viz-eb645fd1abeb42189bb15126c745036d.vega-embed details,\n",
              "  #altair-viz-eb645fd1abeb42189bb15126c745036d.vega-embed details summary {\n",
              "    position: relative;\n",
              "  }\n",
              "</style>\n",
              "<div id=\"altair-viz-eb645fd1abeb42189bb15126c745036d\"></div>\n",
              "<script type=\"text/javascript\">\n",
              "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
              "  (function(spec, embedOpt){\n",
              "    let outputDiv = document.currentScript.previousElementSibling;\n",
              "    if (outputDiv.id !== \"altair-viz-eb645fd1abeb42189bb15126c745036d\") {\n",
              "      outputDiv = document.getElementById(\"altair-viz-eb645fd1abeb42189bb15126c745036d\");\n",
              "    }\n",
              "\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@5.20.1?noext\",\n",
              "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
              "    };\n",
              "\n",
              "    function maybeLoadScript(lib, version) {\n",
              "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
              "      return (VEGA_DEBUG[key] == version) ?\n",
              "        Promise.resolve(paths[lib]) :\n",
              "        new Promise(function(resolve, reject) {\n",
              "          var s = document.createElement('script');\n",
              "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
              "          s.async = true;\n",
              "          s.onload = () => {\n",
              "            VEGA_DEBUG[key] = version;\n",
              "            return resolve(paths[lib]);\n",
              "          };\n",
              "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
              "          s.src = paths[lib];\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",
              "      let deps = [\"vega-embed\"];\n",
              "      require(deps, displayChart, err => showError(`Error loading script: ${err.message}`));\n",
              "    } else {\n",
              "      maybeLoadScript(\"vega\", \"5\")\n",
              "        .then(() => maybeLoadScript(\"vega-lite\", \"5.20.1\"))\n",
              "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
              "        .catch(showError)\n",
              "        .then(() => displayChart(vegaEmbed));\n",
              "    }\n",
              "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300, \"stroke\": null}}, \"layer\": [{\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/us-10m.json\", \"format\": {\"feature\": \"states\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#ddd\", \"stroke\": \"#fff\", \"strokeWidth\": 1}}, {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/airports.csv\"}, \"mark\": {\"type\": \"circle\", \"size\": 9}, \"encoding\": {\"latitude\": {\"field\": \"latitude\", \"type\": \"quantitative\"}, \"longitude\": {\"field\": \"longitude\", \"type\": \"quantitative\"}, \"tooltip\": {\"field\": \"iata\", \"type\": \"nominal\"}}}], \"height\": 500, \"projection\": {\"type\": \"albersUsa\"}, \"width\": 900, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\"}, {\"mode\": \"vega-lite\"});\n",
              "</script>"
            ],
            "text/plain": [
              "alt.LayerChart(...)"
            ]
          },
          "metadata": {},
          "execution_count": 19
        }
      ],
      "source": [
        "alt.layer(\n",
        "    alt.Chart(alt.topo_feature(usa, 'states')).mark_geoshape(\n",
        "        fill='#ddd', stroke='#fff', strokeWidth=1\n",
        "    ),\n",
        "    alt.Chart(airports).mark_circle(size=9).encode(\n",
        "        latitude='latitude:Q',\n",
        "        longitude='longitude:Q',\n",
        "        tooltip='iata:N'\n",
        "    )\n",
        ").project(\n",
        "    type='albersUsa'\n",
        ").properties(\n",
        "    width=900,\n",
        "    height=500\n",
        ").configure_view(\n",
        "    stroke=None\n",
        ")"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "mKsnwxcvaT0G"
      },
      "source": [
        "_São muitos aeroportos! Obviamente, nem todos são grandes hubs._\n",
        "\n",
        "Semelhante ao nosso dataset de códigos postais, os dados dos aeroportos incluem pontos que estão fora dos Estados Unidos continentais. Então, novamente nós vemos pontos no canto superior esquerdo. Nós poderíamos querer filtrar estes pontos, mas para isso, nós precisamos saber mais sobre eles.\n",
        "\n",
        "*Atualize a projeção do mapa acima para `albers` &ndash; contornando o comportamento peculiar do `albersUsa` &ndash; para que as localizações reais desses pontos adicionais sejam reveladas!*\n",
        "\n",
        "Agora, em vez de mostrar todos os aeroportos de maneira indistinta, vamos identificar os grandes hubs considerando o número total de rotas que se originam em cada aeroporto. Nós usaremos o dataset `routes` como nossa principal fonte de dados: ele contém uma lista de rotas de voo que nós podemos agregar para contar o número de rotas para cada aeroporto de `origin`.\n",
        "\n",
        "Entretanto, o dataset `routes` não inclui as *localizações* dos aeroportos! Para complementar os dados de `routes` com as localizações, nós precisamos de uma nova transformação de dados: `lookup`. A transformação `lookup` pega o valor de um campo em um dataset principal e o usa como uma *chave* para procurar informações relacionadas em outra tabela. Neste caso, nós queremos comparar o código do aeroporto de `origin` no nosso dataset `routes` com o campo `iata` do dataset `airports` e, em seguida, extrair os campos correspondentes de `latitude` e `longitude`."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 20,
      "metadata": {
        "id": "lxsczynKaT0G",
        "outputId": "83e3118e-df32-41f6-9c2a-d2a75bea97b9",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 533
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<style>\n",
              "  #altair-viz-0b96dd6bffab476ca4804724e3804f56.vega-embed {\n",
              "    width: 100%;\n",
              "    display: flex;\n",
              "  }\n",
              "\n",
              "  #altair-viz-0b96dd6bffab476ca4804724e3804f56.vega-embed details,\n",
              "  #altair-viz-0b96dd6bffab476ca4804724e3804f56.vega-embed details summary {\n",
              "    position: relative;\n",
              "  }\n",
              "</style>\n",
              "<div id=\"altair-viz-0b96dd6bffab476ca4804724e3804f56\"></div>\n",
              "<script type=\"text/javascript\">\n",
              "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
              "  (function(spec, embedOpt){\n",
              "    let outputDiv = document.currentScript.previousElementSibling;\n",
              "    if (outputDiv.id !== \"altair-viz-0b96dd6bffab476ca4804724e3804f56\") {\n",
              "      outputDiv = document.getElementById(\"altair-viz-0b96dd6bffab476ca4804724e3804f56\");\n",
              "    }\n",
              "\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@5.20.1?noext\",\n",
              "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
              "    };\n",
              "\n",
              "    function maybeLoadScript(lib, version) {\n",
              "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
              "      return (VEGA_DEBUG[key] == version) ?\n",
              "        Promise.resolve(paths[lib]) :\n",
              "        new Promise(function(resolve, reject) {\n",
              "          var s = document.createElement('script');\n",
              "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
              "          s.async = true;\n",
              "          s.onload = () => {\n",
              "            VEGA_DEBUG[key] = version;\n",
              "            return resolve(paths[lib]);\n",
              "          };\n",
              "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
              "          s.src = paths[lib];\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",
              "      let deps = [\"vega-embed\"];\n",
              "      require(deps, displayChart, err => showError(`Error loading script: ${err.message}`));\n",
              "    } else {\n",
              "      maybeLoadScript(\"vega\", \"5\")\n",
              "        .then(() => maybeLoadScript(\"vega-lite\", \"5.20.1\"))\n",
              "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
              "        .catch(showError)\n",
              "        .then(() => displayChart(vegaEmbed));\n",
              "    }\n",
              "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300, \"stroke\": null}}, \"layer\": [{\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/us-10m.json\", \"format\": {\"feature\": \"states\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#ddd\", \"stroke\": \"#fff\", \"strokeWidth\": 1}}, {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/flights-airport.csv\"}, \"mark\": {\"type\": \"circle\"}, \"encoding\": {\"latitude\": {\"field\": \"latitude\", \"type\": \"quantitative\"}, \"longitude\": {\"field\": \"longitude\", \"type\": \"quantitative\"}, \"order\": {\"field\": \"routes\", \"sort\": \"descending\", \"type\": \"quantitative\"}, \"size\": {\"field\": \"routes\", \"legend\": null, \"scale\": {\"range\": [0, 1000]}, \"type\": \"quantitative\"}, \"tooltip\": [{\"field\": \"origin\", \"type\": \"nominal\"}, {\"field\": \"routes\", \"type\": \"quantitative\"}]}, \"transform\": [{\"aggregate\": [{\"op\": \"count\", \"as\": \"routes\"}], \"groupby\": [\"origin\"]}, {\"lookup\": \"origin\", \"from\": {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/airports.csv\"}, \"key\": \"iata\", \"fields\": [\"state\", \"latitude\", \"longitude\"]}}, {\"filter\": \"datum.state !== \\\"PR\\\" && datum.state !== \\\"VI\\\"\"}]}], \"height\": 500, \"projection\": {\"type\": \"albersUsa\"}, \"width\": 900, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\"}, {\"mode\": \"vega-lite\"});\n",
              "</script>"
            ],
            "text/plain": [
              "alt.LayerChart(...)"
            ]
          },
          "metadata": {},
          "execution_count": 20
        }
      ],
      "source": [
        "alt.layer(\n",
        "    alt.Chart(alt.topo_feature(usa, 'states')).mark_geoshape(\n",
        "        fill='#ddd', stroke='#fff', strokeWidth=1\n",
        "    ),\n",
        "    alt.Chart(flights).mark_circle().transform_aggregate(\n",
        "        groupby=['origin'],\n",
        "        routes='count()'\n",
        "    ).transform_lookup(\n",
        "        lookup='origin',\n",
        "        from_=alt.LookupData(data=airports, key='iata',\n",
        "                             fields=['state', 'latitude', 'longitude'])\n",
        "    ).transform_filter(\n",
        "        'datum.state !== \"PR\" && datum.state !== \"VI\"'\n",
        "    ).encode(\n",
        "        latitude='latitude:Q',\n",
        "        longitude='longitude:Q',\n",
        "        tooltip=['origin:N', 'routes:Q'],\n",
        "        size=alt.Size('routes:Q', scale=alt.Scale(range=[0, 1000]), legend=None),\n",
        "        order=alt.Order('routes:Q', sort='descending')\n",
        "    )\n",
        ").project(\n",
        "    type='albersUsa'\n",
        ").properties(\n",
        "    width=900,\n",
        "    height=500\n",
        ").configure_view(\n",
        "    stroke=None\n",
        ")"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "e7qzX-Q6aT0H"
      },
      "source": [
        "*Quais aeroportos dos EUA têm o maior número de rotas de saída?*\n",
        "\n",
        "Agora que nós podemos ver os aeroportos, talvez queiramos interagir com eles para entender melhor a estrutura da rede de tráfego aéreo. Nós podemos adicionar uma camada de marca `rule` para representar os caminhos de aeroportos de `origin` para aeroportos de `destination`, o que requer duas transformações `lookup` para recuperar as coordenadas de cada ponto final. Além disso, nós podemos usar uma seleção `point` para filtrar estas rotas, de modo que apenas as rotas que se originam no aeroporto atualmente selecionado sejam exibidas.\n",
        "\n",
        "*Partindo do mapa estático acima, você consegue construir uma versão interativa? Fique à vontade para pular o código abaixo para interagir com o mapa e pensar em como poderia construí-lo por conta própria!*\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 21,
      "metadata": {
        "id": "a9T62LUgaT0H",
        "outputId": "b90d37e6-d4ac-4c7a-fcf8-efa8eca98b20",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 533
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<style>\n",
              "  #altair-viz-e1c14a9c37db4b378bc86e07cacc72c9.vega-embed {\n",
              "    width: 100%;\n",
              "    display: flex;\n",
              "  }\n",
              "\n",
              "  #altair-viz-e1c14a9c37db4b378bc86e07cacc72c9.vega-embed details,\n",
              "  #altair-viz-e1c14a9c37db4b378bc86e07cacc72c9.vega-embed details summary {\n",
              "    position: relative;\n",
              "  }\n",
              "</style>\n",
              "<div id=\"altair-viz-e1c14a9c37db4b378bc86e07cacc72c9\"></div>\n",
              "<script type=\"text/javascript\">\n",
              "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
              "  (function(spec, embedOpt){\n",
              "    let outputDiv = document.currentScript.previousElementSibling;\n",
              "    if (outputDiv.id !== \"altair-viz-e1c14a9c37db4b378bc86e07cacc72c9\") {\n",
              "      outputDiv = document.getElementById(\"altair-viz-e1c14a9c37db4b378bc86e07cacc72c9\");\n",
              "    }\n",
              "\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@5.20.1?noext\",\n",
              "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
              "    };\n",
              "\n",
              "    function maybeLoadScript(lib, version) {\n",
              "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
              "      return (VEGA_DEBUG[key] == version) ?\n",
              "        Promise.resolve(paths[lib]) :\n",
              "        new Promise(function(resolve, reject) {\n",
              "          var s = document.createElement('script');\n",
              "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
              "          s.async = true;\n",
              "          s.onload = () => {\n",
              "            VEGA_DEBUG[key] = version;\n",
              "            return resolve(paths[lib]);\n",
              "          };\n",
              "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
              "          s.src = paths[lib];\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",
              "      let deps = [\"vega-embed\"];\n",
              "      require(deps, displayChart, err => showError(`Error loading script: ${err.message}`));\n",
              "    } else {\n",
              "      maybeLoadScript(\"vega\", \"5\")\n",
              "        .then(() => maybeLoadScript(\"vega-lite\", \"5.20.1\"))\n",
              "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
              "        .catch(showError)\n",
              "        .then(() => displayChart(vegaEmbed));\n",
              "    }\n",
              "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300, \"stroke\": null}}, \"layer\": [{\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/us-10m.json\", \"format\": {\"feature\": \"states\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#ddd\", \"stroke\": \"#fff\", \"strokeWidth\": 1}}, {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/flights-airport.csv\"}, \"mark\": {\"type\": \"rule\", \"color\": \"#000\", \"opacity\": 0.35}, \"encoding\": {\"latitude\": {\"field\": \"latitude\", \"type\": \"quantitative\"}, \"latitude2\": {\"field\": \"lat2\"}, \"longitude\": {\"field\": \"longitude\", \"type\": \"quantitative\"}, \"longitude2\": {\"field\": \"lon2\"}}, \"transform\": [{\"filter\": {\"param\": \"param_1\", \"empty\": false}}, {\"lookup\": \"origin\", \"from\": {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/airports.csv\"}, \"key\": \"iata\", \"fields\": [\"latitude\", \"longitude\"]}}, {\"lookup\": \"destination\", \"as\": [\"lat2\", \"lon2\"], \"from\": {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/airports.csv\"}, \"key\": \"iata\", \"fields\": [\"latitude\", \"longitude\"]}}]}, {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/flights-airport.csv\"}, \"mark\": {\"type\": \"circle\"}, \"encoding\": {\"latitude\": {\"field\": \"latitude\", \"type\": \"quantitative\"}, \"longitude\": {\"field\": \"longitude\", \"type\": \"quantitative\"}, \"order\": {\"field\": \"routes\", \"sort\": \"descending\", \"type\": \"quantitative\"}, \"size\": {\"field\": \"routes\", \"legend\": null, \"scale\": {\"range\": [0, 1000]}, \"type\": \"quantitative\"}, \"tooltip\": [{\"field\": \"origin\", \"type\": \"nominal\"}, {\"field\": \"routes\", \"type\": \"quantitative\"}]}, \"name\": \"view_1\", \"transform\": [{\"aggregate\": [{\"op\": \"count\", \"as\": \"routes\"}], \"groupby\": [\"origin\"]}, {\"lookup\": \"origin\", \"from\": {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/airports.csv\"}, \"key\": \"iata\", \"fields\": [\"state\", \"latitude\", \"longitude\"]}}, {\"filter\": \"datum.state !== \\\"PR\\\" && datum.state !== \\\"VI\\\"\"}]}], \"height\": 500, \"params\": [{\"name\": \"param_1\", \"select\": {\"type\": \"point\", \"fields\": [\"origin\"], \"nearest\": true, \"on\": \"mouseover\"}, \"views\": [\"view_1\"]}], \"projection\": {\"type\": \"albersUsa\"}, \"width\": 900, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\"}, {\"mode\": \"vega-lite\"});\n",
              "</script>"
            ],
            "text/plain": [
              "alt.LayerChart(...)"
            ]
          },
          "metadata": {},
          "execution_count": 21
        }
      ],
      "source": [
        "# seleção interativa para o aeroporto de origem\n",
        "# seleciona o aeroporto mais próximo ao cursor do mouse\n",
        "origin = alt.selection_point(\n",
        "    on='mouseover', nearest=True,\n",
        "    fields=['origin'], empty='none'\n",
        ")\n",
        "\n",
        "# referência de dados compartilhada para transformações de pesquisa\n",
        "foreign = alt.LookupData(data=airports, key='iata',\n",
        "                         fields=['latitude', 'longitude'])\n",
        "\n",
        "alt.layer(\n",
        "    # mapa base dos Estados Unidos\n",
        "    alt.Chart(alt.topo_feature(usa, 'states')).mark_geoshape(\n",
        "        fill='#ddd', stroke='#fff', strokeWidth=1\n",
        "    ),\n",
        "    # linhas de rota do aeroporto de origem selecionado para aeroportos de destino\n",
        "    alt.Chart(flights).mark_rule(\n",
        "        color='#000', opacity=0.35\n",
        "    ).transform_filter(\n",
        "        origin # filtro para origem selecionada apenas\n",
        "    ).transform_lookup(\n",
        "        lookup='origin', from_=foreign # origem lat/lon\n",
        "    ).transform_lookup(\n",
        "        lookup='destination', from_=foreign, as_=['lat2', 'lon2'] # destino lat/lon\n",
        "    ).encode(\n",
        "        latitude='latitude:Q',\n",
        "        longitude='longitude:Q',\n",
        "        latitude2='lat2',\n",
        "        longitude2='lon2',\n",
        "    ),\n",
        "    # tamanho dos Aeroportos por número de rotas de saída\n",
        "    # 1. agrega o dataset flights-airport\n",
        "    # 2. pesquisa os dados de localização do dataset dos aeroportos\n",
        "    # 3. remove Porto Rico (PR) e Ilhas Virgens (VI)\n",
        "    alt.Chart(flights).mark_circle().transform_aggregate(\n",
        "        groupby=['origin'],\n",
        "        routes='count()'\n",
        "    ).transform_lookup(\n",
        "        lookup='origin',\n",
        "        from_=alt.LookupData(data=airports, key='iata',\n",
        "                             fields=['state', 'latitude', 'longitude'])\n",
        "    ).transform_filter(\n",
        "        'datum.state !== \"PR\" && datum.state !== \"VI\"'\n",
        "    ).add_params(\n",
        "        origin\n",
        "    ).encode(\n",
        "        latitude='latitude:Q',\n",
        "        longitude='longitude:Q',\n",
        "        tooltip=['origin:N', 'routes:Q'],\n",
        "        size=alt.Size('routes:Q', scale=alt.Scale(range=[0, 1000]), legend=None),\n",
        "        order=alt.Order('routes:Q', sort='descending') # círculos menores no topo\n",
        "    )\n",
        ").project(\n",
        "    type='albersUsa'\n",
        ").properties(\n",
        "    width=900,\n",
        "    height=500\n",
        ").configure_view(\n",
        "    stroke=None\n",
        ")"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "taf2i9zYaT0H"
      },
      "source": [
        "*Passe o mouse sobre o mapa para explorar a rede de voos!*"
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "## <font color=\"#747a7f\">7.5</font> Mapas coropléticos"
      ],
      "metadata": {
        "id": "IIMiJW7HChJ_"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Um [mapa coroplético](https://pt.wikipedia.org/wiki/Mapa_coropl%C3%A9tico) usa regiões sombreadas ou texturizadas para visualizar valores de dados. Mapas de símbolos dimensionados costumam ser mais precisos para ler, pois as pessoas tendem a ser melhores em estimar diferenças proporcionais entre a área de círculos do que entre tons de cores. No entanto, os mapas coropléticos são populares na prática e particularmente úteis quando muitos símbolos se tornam perceptivelmente esmagadores.\n",
        "\n",
        "Por exemplo, embora os Estados Unidos tenham apenas 50 estados, eles têm milhares de condados dentro desses estados. Vamos construir um mapa coroplético da taxa de desemprego por condado, no ano de recessão de 2008. Em alguns casos, os arquivos GeoJSON ou TopoJSON de entrada podem incluir dados estatísticos que podemos visualizar diretamente. Neste caso, entretanto, nós temos dois arquivos: nosso arquivo TopoJSON que inclui features de fronteira de condado (`usa`), e um arquivo de texto separado que contém estatísticas de desemprego:"
      ],
      "metadata": {
        "id": "HL9FYeD9CbNo"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "unemp = data.unemployment.url\n",
        "unemp"
      ],
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 35
        },
        "id": "CGFlyWzrOaOK",
        "outputId": "c80412e6-d4da-47b0-e553-a83fe2ddce70"
      },
      "execution_count": 22,
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "'https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/unemployment.tsv'"
            ],
            "application/vnd.google.colaboratory.intrinsic+json": {
              "type": "string"
            }
          },
          "metadata": {},
          "execution_count": 22
        }
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "Para integrar nossas fontes de dados, nós precisaremos usar novamente a transformação de `lookup`, aumentando nossos dados de `geoshape` baseados em TopoJSON com taxas de desemprego. Podemos então criar um mapa que inclua uma codificação de `color` para o campo `rate` pesquisado."
      ],
      "metadata": {
        "id": "0oPaS9qmCoCG"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "alt.Chart(alt.topo_feature(usa, 'counties')).mark_geoshape(\n",
        "    stroke='#aaa', strokeWidth=0.25\n",
        ").transform_lookup(\n",
        "    lookup='id', from_=alt.LookupData(data=unemp, key='id', fields=['rate'])\n",
        ").encode(\n",
        "    alt.Color('rate:Q',\n",
        "              scale=alt.Scale(domain=[0, 0.3], clamp=True),\n",
        "              legend=alt.Legend(format='%')),\n",
        "    alt.Tooltip('rate:Q', format='.0%')\n",
        ").project(\n",
        "    type='albersUsa'\n",
        ").properties(\n",
        "    width=900,\n",
        "    height=500\n",
        ").configure_view(\n",
        "    stroke=None\n",
        ")"
      ],
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 532
        },
        "id": "B_akEquqCxuO",
        "outputId": "2a3825a8-d9be-4bba-e06b-66e520909251"
      },
      "execution_count": 23,
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<style>\n",
              "  #altair-viz-ad28f3b7cdc3452fb618b9a0b8a5500e.vega-embed {\n",
              "    width: 100%;\n",
              "    display: flex;\n",
              "  }\n",
              "\n",
              "  #altair-viz-ad28f3b7cdc3452fb618b9a0b8a5500e.vega-embed details,\n",
              "  #altair-viz-ad28f3b7cdc3452fb618b9a0b8a5500e.vega-embed details summary {\n",
              "    position: relative;\n",
              "  }\n",
              "</style>\n",
              "<div id=\"altair-viz-ad28f3b7cdc3452fb618b9a0b8a5500e\"></div>\n",
              "<script type=\"text/javascript\">\n",
              "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
              "  (function(spec, embedOpt){\n",
              "    let outputDiv = document.currentScript.previousElementSibling;\n",
              "    if (outputDiv.id !== \"altair-viz-ad28f3b7cdc3452fb618b9a0b8a5500e\") {\n",
              "      outputDiv = document.getElementById(\"altair-viz-ad28f3b7cdc3452fb618b9a0b8a5500e\");\n",
              "    }\n",
              "\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@5.20.1?noext\",\n",
              "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
              "    };\n",
              "\n",
              "    function maybeLoadScript(lib, version) {\n",
              "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
              "      return (VEGA_DEBUG[key] == version) ?\n",
              "        Promise.resolve(paths[lib]) :\n",
              "        new Promise(function(resolve, reject) {\n",
              "          var s = document.createElement('script');\n",
              "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
              "          s.async = true;\n",
              "          s.onload = () => {\n",
              "            VEGA_DEBUG[key] = version;\n",
              "            return resolve(paths[lib]);\n",
              "          };\n",
              "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
              "          s.src = paths[lib];\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",
              "      let deps = [\"vega-embed\"];\n",
              "      require(deps, displayChart, err => showError(`Error loading script: ${err.message}`));\n",
              "    } else {\n",
              "      maybeLoadScript(\"vega\", \"5\")\n",
              "        .then(() => maybeLoadScript(\"vega-lite\", \"5.20.1\"))\n",
              "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
              "        .catch(showError)\n",
              "        .then(() => displayChart(vegaEmbed));\n",
              "    }\n",
              "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300, \"stroke\": null}}, \"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/us-10m.json\", \"format\": {\"feature\": \"counties\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\", \"stroke\": \"#aaa\", \"strokeWidth\": 0.25}, \"encoding\": {\"color\": {\"field\": \"rate\", \"legend\": {\"format\": \"%\"}, \"scale\": {\"clamp\": true, \"domain\": [0, 0.3]}, \"type\": \"quantitative\"}, \"tooltip\": {\"field\": \"rate\", \"format\": \".0%\", \"type\": \"quantitative\"}}, \"height\": 500, \"projection\": {\"type\": \"albersUsa\"}, \"transform\": [{\"lookup\": \"id\", \"from\": {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/unemployment.tsv\"}, \"key\": \"id\", \"fields\": [\"rate\"]}}], \"width\": 900, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\"}, {\"mode\": \"vega-lite\"});\n",
              "</script>"
            ],
            "text/plain": [
              "alt.Chart(...)"
            ]
          },
          "metadata": {},
          "execution_count": 23
        }
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "*Examine as taxas de desemprego por condado. Valores mais altos em Michigan podem estar relacionados à indústria automotiva. Condados nos estados das [Grandes Planícies](https://pt.wikipedia.org/wiki/Grandes_Plan%C3%ADcies) e Montanhas apresentam taxas baixas **e** altas. Esta variação é significativa ou é possivelmente um [artefato de tamanhos de amostra menores](https://medium.com/@uwdata/surprise-maps-showing-the-unexpected-e92b67398865)? Para explorar mais, tente alterar o domínio de escala superior (por exemplo, para ``0,2``) para ajustar o mapeamento de cores.*\n",
        "\n",
        "Uma preocupação central para mapas coropléticos é a escolha de cores. Acima, nós usamos o esquema padrão `'yellowgreenblue'` do Altair para mapas de calor. Abaixo, nós comparamos outros esquemas, incluindo um esquema *sequencial de matiz único* (`teals`) que varia apenas em luminância, um esquema *sequencial de vários matizes* (`viridis`) que aumenta em luminância e matiz e um esquema *divergente* (`blueorange`) que usa um ponto médio branco:"
      ],
      "metadata": {
        "id": "kozhPTHUCyhG"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "# função utilitária para gerar uma especificação de mapa para um esquema de cores oferecido\n",
        "def map_(scheme):\n",
        "    return alt.Chart().mark_geoshape().project(type='albersUsa').encode(\n",
        "        alt.Color('rate:Q', scale=alt.Scale(scheme=scheme), legend=None)\n",
        "    ).properties(width=305, height=200)\n",
        "\n",
        "alt.hconcat(\n",
        "    map_('tealblues'), map_('viridis'), map_('blueorange'),\n",
        "    data=alt.topo_feature(usa, 'counties')\n",
        ").transform_lookup(\n",
        "    lookup='id', from_=alt.LookupData(data=unemp, key='id', fields=['rate'])\n",
        ").configure_view(\n",
        "    stroke=None\n",
        ").resolve_scale(\n",
        "    color='independent'\n",
        ")"
      ],
      "metadata": {
        "id": "hMK83MKLDDFe",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 230
        },
        "outputId": "95e8743a-963c-4ed6-e911-a214d23000fc"
      },
      "execution_count": 24,
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<style>\n",
              "  #altair-viz-61a1c06fb7fe49c190dd361434e91646.vega-embed {\n",
              "    width: 100%;\n",
              "    display: flex;\n",
              "  }\n",
              "\n",
              "  #altair-viz-61a1c06fb7fe49c190dd361434e91646.vega-embed details,\n",
              "  #altair-viz-61a1c06fb7fe49c190dd361434e91646.vega-embed details summary {\n",
              "    position: relative;\n",
              "  }\n",
              "</style>\n",
              "<div id=\"altair-viz-61a1c06fb7fe49c190dd361434e91646\"></div>\n",
              "<script type=\"text/javascript\">\n",
              "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
              "  (function(spec, embedOpt){\n",
              "    let outputDiv = document.currentScript.previousElementSibling;\n",
              "    if (outputDiv.id !== \"altair-viz-61a1c06fb7fe49c190dd361434e91646\") {\n",
              "      outputDiv = document.getElementById(\"altair-viz-61a1c06fb7fe49c190dd361434e91646\");\n",
              "    }\n",
              "\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@5.20.1?noext\",\n",
              "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
              "    };\n",
              "\n",
              "    function maybeLoadScript(lib, version) {\n",
              "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
              "      return (VEGA_DEBUG[key] == version) ?\n",
              "        Promise.resolve(paths[lib]) :\n",
              "        new Promise(function(resolve, reject) {\n",
              "          var s = document.createElement('script');\n",
              "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
              "          s.async = true;\n",
              "          s.onload = () => {\n",
              "            VEGA_DEBUG[key] = version;\n",
              "            return resolve(paths[lib]);\n",
              "          };\n",
              "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
              "          s.src = paths[lib];\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",
              "      let deps = [\"vega-embed\"];\n",
              "      require(deps, displayChart, err => showError(`Error loading script: ${err.message}`));\n",
              "    } else {\n",
              "      maybeLoadScript(\"vega\", \"5\")\n",
              "        .then(() => maybeLoadScript(\"vega-lite\", \"5.20.1\"))\n",
              "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
              "        .catch(showError)\n",
              "        .then(() => displayChart(vegaEmbed));\n",
              "    }\n",
              "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300, \"stroke\": null}}, \"hconcat\": [{\"mark\": {\"type\": \"geoshape\"}, \"encoding\": {\"color\": {\"field\": \"rate\", \"legend\": null, \"scale\": {\"scheme\": \"tealblues\"}, \"type\": \"quantitative\"}}, \"height\": 200, \"projection\": {\"type\": \"albersUsa\"}, \"width\": 305}, {\"mark\": {\"type\": \"geoshape\"}, \"encoding\": {\"color\": {\"field\": \"rate\", \"legend\": null, \"scale\": {\"scheme\": \"viridis\"}, \"type\": \"quantitative\"}}, \"height\": 200, \"projection\": {\"type\": \"albersUsa\"}, \"width\": 305}, {\"mark\": {\"type\": \"geoshape\"}, \"encoding\": {\"color\": {\"field\": \"rate\", \"legend\": null, \"scale\": {\"scheme\": \"blueorange\"}, \"type\": \"quantitative\"}}, \"height\": 200, \"projection\": {\"type\": \"albersUsa\"}, \"width\": 305}], \"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/us-10m.json\", \"format\": {\"feature\": \"counties\", \"type\": \"topojson\"}}, \"resolve\": {\"scale\": {\"color\": \"independent\"}}, \"transform\": [{\"lookup\": \"id\", \"from\": {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/unemployment.tsv\"}, \"key\": \"id\", \"fields\": [\"rate\"]}}], \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\"}, {\"mode\": \"vega-lite\"});\n",
              "</script>"
            ],
            "text/plain": [
              "alt.HConcatChart(...)"
            ]
          },
          "metadata": {},
          "execution_count": 24
        }
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "*Quais esquemas de cores você acha mais eficazes? Por que poderia ser? Modifique os mapas acima para usar outros esquemas disponíveis, conforme descrito na documentação [Vega Color Schemes](https://vega.github.io/vega/docs/schemes/).*"
      ],
      "metadata": {
        "id": "eBYUE_9nDY5m"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "## <font color=\"#747a7f\">7.6</font> Projeções Cartográficas"
      ],
      "metadata": {
        "id": "cEjYN8OBR7k5"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Agora que nós temos alguma experiência na criação de mapas, vamos dar uma olhada mais de perto nas projeções cartográficas. Conforme explicado pela [Wikipedia](https://pt.wikipedia.org/wiki/Proje%C3%A7%C3%A3o_cartogr%C3%A1fica),\n",
        "\n",
        "> Todas as projeções de mapa necessariamente distorcem a superfície de alguma forma. Dependendo do propósito do mapa, algumas distorções são aceitáveis ​​e outras não; portanto, diferentes projeções de mapa existem para preservar algumas propriedades do corpo esférico em detrimento de outras propriedades.\n",
        "\n"
      ],
      "metadata": {
        "id": "1cyO8dczSIMR"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Algumas das propriedades que podemos querer considerar incluem:\n",
        "\n",
        "* *Área:* A projeção distorce os tamanhos das regiões?\n",
        "\n",
        "* *Orientação:* Uma linha reta corresponde a uma direção constante de viagem?\n",
        "\n",
        "* *Distância:* Linhas de comprimento igual correspondem a distâncias iguais no globo?\n",
        "\n",
        "* *Forma:* A projeção preserva relações espaciais (ângulos) entre pontos?"
      ],
      "metadata": {
        "id": "6LIQm4NiSew5"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "A seleção de uma projeção apropriada depende, portanto, do caso de uso do mapa. Por exemplo, se estivermos a avaliar o uso da terra e a extensão das questões fundiárias, poderemos escolher uma projecção de preservação da área. Se quisermos visualizar as ondas de choque que emanam de um terremoto, podemos focar o mapa no epicentro do terremoto e preservar as distâncias a partir desse ponto. Ou, se quisermos ajudar a navegação, a preservação do rumo e da forma pode ser mais importante.\n",
        "\n",
        "Também podemos caracterizar as projeções em termos da *superfície de projeção*. As projeções cilíndricas, por exemplo, projetam pontos superficiais da esfera em um cilindro circundante; o cilindro “desenrolado” fornece então o nosso mapa. Como descreveremos abaixo, podemos alternativamente projetar na superfície de um cone (projeções cônicas) ou diretamente em um plano plano (projeções azimutais).\n",
        "\n",
        "*Vamos primeiro desenvolver nossa intuição interagindo com uma variedade de projeções! [Abra o caderno online Vega-Lite Cartographic Projections](https://observablehq.com/@vega/vega-lite-cartographic-projections). Use os controles naquela página para selecionar uma projeção e explorar parâmetros de projeção, como a ``escala`` (zoom) e a translação x/y (panning). Os controles de rotação ([guinada, inclinação, rolagem](https://pt.wikipedia.org/wiki/Eixos_do_avi%C3%A3o)) determinam a orientação do globo em relação à superfície que está sendo projetada.*"
      ],
      "metadata": {
        "id": "G2NGF_W9T0sK"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "### <font color=\"#747a7f\">7.6.1</font> Um tour por tipos específicos de projeção"
      ],
      "metadata": {
        "id": "QCGitqvWVv0S"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "**[Projeções cilíndricas](https://jjallaire.github.io/visualization-curriculum/altair_cartographic.html)** mapeiam a esfera em um cilindro circundante, então desenrolam o cilindro. Se o eixo principal do cilindro estiver orientado norte-sul, os meridianos são mapeados para linhas retas. [Projeções pseudocilíndricas](https://en.wikipedia.org/wiki/Map_projection#Pseudocylindrical) representam um meridiano central como uma linha reta, com outros meridianos “curvando-se” para longe do centro."
      ],
      "metadata": {
        "id": "IQLLlCQuV5up"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "minimap = map.properties(width=225, height=225)\n",
        "alt.hconcat(\n",
        "    minimap.project(type='equirectangular').properties(title='Cilíndrica equidistante'),\n",
        "    minimap.project(type='mercator').properties(title='Mercator'),\n",
        "    minimap.project(type='transverseMercator').properties(title='Transversa de mercator'),\n",
        "    minimap.project(type='naturalEarth1').properties(title='Natural da terra')\n",
        ").properties(spacing=10).configure_view(stroke=None)"
      ],
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 274
        },
        "id": "YBe2qJ1ZWFbJ",
        "outputId": "d4bbaba7-981f-4c79-93ee-9960b231fbde"
      },
      "execution_count": 25,
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<style>\n",
              "  #altair-viz-07ae634292a34582b95dbcd8de5fd200.vega-embed {\n",
              "    width: 100%;\n",
              "    display: flex;\n",
              "  }\n",
              "\n",
              "  #altair-viz-07ae634292a34582b95dbcd8de5fd200.vega-embed details,\n",
              "  #altair-viz-07ae634292a34582b95dbcd8de5fd200.vega-embed details summary {\n",
              "    position: relative;\n",
              "  }\n",
              "</style>\n",
              "<div id=\"altair-viz-07ae634292a34582b95dbcd8de5fd200\"></div>\n",
              "<script type=\"text/javascript\">\n",
              "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
              "  (function(spec, embedOpt){\n",
              "    let outputDiv = document.currentScript.previousElementSibling;\n",
              "    if (outputDiv.id !== \"altair-viz-07ae634292a34582b95dbcd8de5fd200\") {\n",
              "      outputDiv = document.getElementById(\"altair-viz-07ae634292a34582b95dbcd8de5fd200\");\n",
              "    }\n",
              "\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@5.20.1?noext\",\n",
              "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
              "    };\n",
              "\n",
              "    function maybeLoadScript(lib, version) {\n",
              "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
              "      return (VEGA_DEBUG[key] == version) ?\n",
              "        Promise.resolve(paths[lib]) :\n",
              "        new Promise(function(resolve, reject) {\n",
              "          var s = document.createElement('script');\n",
              "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
              "          s.async = true;\n",
              "          s.onload = () => {\n",
              "            VEGA_DEBUG[key] = version;\n",
              "            return resolve(paths[lib]);\n",
              "          };\n",
              "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
              "          s.src = paths[lib];\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",
              "      let deps = [\"vega-embed\"];\n",
              "      require(deps, displayChart, err => showError(`Error loading script: ${err.message}`));\n",
              "    } else {\n",
              "      maybeLoadScript(\"vega\", \"5\")\n",
              "        .then(() => maybeLoadScript(\"vega-lite\", \"5.20.1\"))\n",
              "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
              "        .catch(showError)\n",
              "        .then(() => displayChart(vegaEmbed));\n",
              "    }\n",
              "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300, \"stroke\": null}}, \"hconcat\": [{\"layer\": [{\"data\": {\"sphere\": true}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#e6f3ff\"}}, {\"data\": {\"graticule\": true}, \"mark\": {\"type\": \"geoshape\", \"stroke\": \"#ffffff\", \"strokeWidth\": 1}}, {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/world-110m.json\", \"format\": {\"feature\": \"countries\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#2a1d0c\", \"stroke\": \"#706545\", \"strokeWidth\": 0.5}}], \"height\": 225, \"projection\": {\"type\": \"equirectangular\"}, \"title\": \"Cil\\u00edndrica equidistante\", \"width\": 225}, {\"layer\": [{\"data\": {\"sphere\": true}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#e6f3ff\"}}, {\"data\": {\"graticule\": true}, \"mark\": {\"type\": \"geoshape\", \"stroke\": \"#ffffff\", \"strokeWidth\": 1}}, {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/world-110m.json\", \"format\": {\"feature\": \"countries\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#2a1d0c\", \"stroke\": \"#706545\", \"strokeWidth\": 0.5}}], \"height\": 225, \"projection\": {\"type\": \"mercator\"}, \"title\": \"Mercator\", \"width\": 225}, {\"layer\": [{\"data\": {\"sphere\": true}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#e6f3ff\"}}, {\"data\": {\"graticule\": true}, \"mark\": {\"type\": \"geoshape\", \"stroke\": \"#ffffff\", \"strokeWidth\": 1}}, {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/world-110m.json\", \"format\": {\"feature\": \"countries\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#2a1d0c\", \"stroke\": \"#706545\", \"strokeWidth\": 0.5}}], \"height\": 225, \"projection\": {\"type\": \"transverseMercator\"}, \"title\": \"Transversa de mercator\", \"width\": 225}, {\"layer\": [{\"data\": {\"sphere\": true}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#e6f3ff\"}}, {\"data\": {\"graticule\": true}, \"mark\": {\"type\": \"geoshape\", \"stroke\": \"#ffffff\", \"strokeWidth\": 1}}, {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/world-110m.json\", \"format\": {\"feature\": \"countries\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#2a1d0c\", \"stroke\": \"#706545\", \"strokeWidth\": 0.5}}], \"height\": 225, \"projection\": {\"type\": \"naturalEarth1\"}, \"title\": \"Natural da terra\", \"width\": 225}], \"spacing\": 10, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\"}, {\"mode\": \"vega-lite\"});\n",
              "</script>"
            ],
            "text/plain": [
              "alt.HConcatChart(...)"
            ]
          },
          "metadata": {},
          "execution_count": 25
        }
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "\n",
        "\n",
        "* [Cilíndrica equidistante](https://pt.wikipedia.org/wiki/Proje%C3%A7%C3%A3o_cil%C3%ADndrica_equidistante) (``equirectangular``): Escala valores de coordenadas ``lat``, ``lon`` diretamente.\n",
        "\n",
        "* [Mercator](https://pt.wikipedia.org/wiki/Proje%C3%A7%C3%A3o_de_Mercator) (``mercator``): Projeta em um cilindro, usando ``lon`` diretamente, mas submetendo ``lat`` a uma transformação não linear. Linhas retas preservam orientações de bússola constantes ([linha de rumo](https://pt.wikipedia.org/wiki/Loxodromia)), tornando esta projeção bem adequada para navegação. No entanto, áreas no extremo norte ou sul podem ser bastante distorcidas.\n",
        "\n",
        "* [Transversa de mercator](https://pt.wikipedia.org/wiki/Proje%C3%A7%C3%A3o_transversa_de_Mercator) (``transverseMercator``): Uma projeção mercator, mas com o cilindro delimitador girado para um eixo transversal. Enquanto a projeção Mercator padrão tem maior precisão ao longo do equador, a projeção Transversa de mercator é mais precisa ao longo do meridiano central.\n",
        "\n",
        "* [Natural da terra](https://en.wikipedia.org/wiki/Natural_Earth_projection) (``naturalEarth1``): Uma projeção pseudocilíndrica projetada para mostrar toda a Terra em uma visão.\n"
      ],
      "metadata": {
        "id": "9AnwneyjX-TK"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "[Projeções cônicas](https://en.wikipedia.org/wiki/Map_projection#Conic) mapeiam a esfera em um cone e, então, desenrolam o cone no plano. Projeções cônicas são configuradas por dois *paralelos padrões*, que determinam onde o cone intercepta o globo."
      ],
      "metadata": {
        "id": "zSRsnk_mZGKJ"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "minimap = map.properties(width=180, height=130)\n",
        "alt.hconcat(\n",
        "    minimap.project(type='conicEqualArea').properties(title='Área cônica igual'),\n",
        "    minimap.project(type='conicEquidistant').properties(title='Cônica equidistante'),\n",
        "    minimap.project(type='conicConformal', scale=35, translate=[90,65]).properties(title='Cônica Conforme'),\n",
        "    minimap.project(type='albers').properties(title='Albers'),\n",
        "    minimap.project(type='albersUsa').properties(title='Albers EUA')\n",
        ").properties(spacing=10).configure_view(stroke=None)"
      ],
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 177
        },
        "id": "abwu_TfaZFSK",
        "outputId": "40ce7867-3618-4077-f315-a19f6134b898"
      },
      "execution_count": 26,
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<style>\n",
              "  #altair-viz-84f37d4f383240faa8c1fc3cc10a10ff.vega-embed {\n",
              "    width: 100%;\n",
              "    display: flex;\n",
              "  }\n",
              "\n",
              "  #altair-viz-84f37d4f383240faa8c1fc3cc10a10ff.vega-embed details,\n",
              "  #altair-viz-84f37d4f383240faa8c1fc3cc10a10ff.vega-embed details summary {\n",
              "    position: relative;\n",
              "  }\n",
              "</style>\n",
              "<div id=\"altair-viz-84f37d4f383240faa8c1fc3cc10a10ff\"></div>\n",
              "<script type=\"text/javascript\">\n",
              "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
              "  (function(spec, embedOpt){\n",
              "    let outputDiv = document.currentScript.previousElementSibling;\n",
              "    if (outputDiv.id !== \"altair-viz-84f37d4f383240faa8c1fc3cc10a10ff\") {\n",
              "      outputDiv = document.getElementById(\"altair-viz-84f37d4f383240faa8c1fc3cc10a10ff\");\n",
              "    }\n",
              "\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@5.20.1?noext\",\n",
              "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
              "    };\n",
              "\n",
              "    function maybeLoadScript(lib, version) {\n",
              "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
              "      return (VEGA_DEBUG[key] == version) ?\n",
              "        Promise.resolve(paths[lib]) :\n",
              "        new Promise(function(resolve, reject) {\n",
              "          var s = document.createElement('script');\n",
              "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
              "          s.async = true;\n",
              "          s.onload = () => {\n",
              "            VEGA_DEBUG[key] = version;\n",
              "            return resolve(paths[lib]);\n",
              "          };\n",
              "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
              "          s.src = paths[lib];\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",
              "      let deps = [\"vega-embed\"];\n",
              "      require(deps, displayChart, err => showError(`Error loading script: ${err.message}`));\n",
              "    } else {\n",
              "      maybeLoadScript(\"vega\", \"5\")\n",
              "        .then(() => maybeLoadScript(\"vega-lite\", \"5.20.1\"))\n",
              "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
              "        .catch(showError)\n",
              "        .then(() => displayChart(vegaEmbed));\n",
              "    }\n",
              "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300, \"stroke\": null}}, \"hconcat\": [{\"layer\": [{\"data\": {\"sphere\": true}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#e6f3ff\"}}, {\"data\": {\"graticule\": true}, \"mark\": {\"type\": \"geoshape\", \"stroke\": \"#ffffff\", \"strokeWidth\": 1}}, {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/world-110m.json\", \"format\": {\"feature\": \"countries\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#2a1d0c\", \"stroke\": \"#706545\", \"strokeWidth\": 0.5}}], \"height\": 130, \"projection\": {\"type\": \"conicEqualArea\"}, \"title\": \"\\u00c1rea c\\u00f4nica igual\", \"width\": 180}, {\"layer\": [{\"data\": {\"sphere\": true}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#e6f3ff\"}}, {\"data\": {\"graticule\": true}, \"mark\": {\"type\": \"geoshape\", \"stroke\": \"#ffffff\", \"strokeWidth\": 1}}, {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/world-110m.json\", \"format\": {\"feature\": \"countries\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#2a1d0c\", \"stroke\": \"#706545\", \"strokeWidth\": 0.5}}], \"height\": 130, \"projection\": {\"type\": \"conicEquidistant\"}, \"title\": \"C\\u00f4nica equidistante\", \"width\": 180}, {\"layer\": [{\"data\": {\"sphere\": true}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#e6f3ff\"}}, {\"data\": {\"graticule\": true}, \"mark\": {\"type\": \"geoshape\", \"stroke\": \"#ffffff\", \"strokeWidth\": 1}}, {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/world-110m.json\", \"format\": {\"feature\": \"countries\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#2a1d0c\", \"stroke\": \"#706545\", \"strokeWidth\": 0.5}}], \"height\": 130, \"projection\": {\"scale\": 35, \"translate\": [90, 65], \"type\": \"conicConformal\"}, \"title\": \"C\\u00f4nica Conforme\", \"width\": 180}, {\"layer\": [{\"data\": {\"sphere\": true}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#e6f3ff\"}}, {\"data\": {\"graticule\": true}, \"mark\": {\"type\": \"geoshape\", \"stroke\": \"#ffffff\", \"strokeWidth\": 1}}, {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/world-110m.json\", \"format\": {\"feature\": \"countries\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#2a1d0c\", \"stroke\": \"#706545\", \"strokeWidth\": 0.5}}], \"height\": 130, \"projection\": {\"type\": \"albers\"}, \"title\": \"Albers\", \"width\": 180}, {\"layer\": [{\"data\": {\"sphere\": true}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#e6f3ff\"}}, {\"data\": {\"graticule\": true}, \"mark\": {\"type\": \"geoshape\", \"stroke\": \"#ffffff\", \"strokeWidth\": 1}}, {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/world-110m.json\", \"format\": {\"feature\": \"countries\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#2a1d0c\", \"stroke\": \"#706545\", \"strokeWidth\": 0.5}}], \"height\": 130, \"projection\": {\"type\": \"albersUsa\"}, \"title\": \"Albers EUA\", \"width\": 180}], \"spacing\": 10, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\"}, {\"mode\": \"vega-lite\"});\n",
              "</script>"
            ],
            "text/plain": [
              "alt.HConcatChart(...)"
            ]
          },
          "metadata": {},
          "execution_count": 26
        }
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "* [Área cônica igual](https://pt.wikipedia.org/wiki/Proje%C3%A7%C3%A3o_de_Albers) (``conicEqualArea``): projeção cônica que preserva a área. A forma e a distância não são preservadas, mas são aproximadamente precisas dentro dos paralelos padrão.\n",
        "\n",
        "* [Cônica equidistante](https://pt.wikipedia.org/wiki/Proje%C3%A7%C3%A3o_c%C3%B4nica_equidistante_meridiana) (``conicEquidistant``): projeção cônica que preserva a distância ao longo dos meridianos e paralelos padrão.\n",
        "\n",
        "* [Cônica Conforme](https://pt.wikipedia.org/wiki/Proje%C3%A7%C3%A3o_c%C3%B4nica_conforme_de_Lambert) (``conicConformal``): projeção cônica que preserva a forma (ângulos locais), mas não a área ou a distância.\n",
        "\n",
        "* [Albers](https://pt.wikipedia.org/wiki/Proje%C3%A7%C3%A3o_de_Albers) (``albers``): uma variante da projeção de área cônica igual com paralelos padrão otimizados para criar mapas dos Estados Unidos.\n",
        "\n",
        "* [Albers EUA](https://pt.wikipedia.org/wiki/Proje%C3%A7%C3%A3o_de_Albers) (``albersUsa``): uma projeção híbrida para os 50 estados dos Estados Unidos da América. Esta projeção une três projeções de Albers com parâmetros diferentes para os EUA continentais, Alasca e Havaí.\n",
        "\n",
        "\n",
        "\n"
      ],
      "metadata": {
        "id": "AZEkqyRaZKXR"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "[Projeções azimutais](https://en.wikipedia.org/wiki/Map_projection#Azimuthal_%28projections_onto_a_plane%29) mapeiam a esfera diretamente em um plano."
      ],
      "metadata": {
        "id": "RBE6BFtOkHfq"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "minimap = map.properties(width=180, height=180)\n",
        "alt.hconcat(\n",
        "    minimap.project(type='azimuthalEqualArea').properties(title='Área Azimutal Igual'),\n",
        "    minimap.project(type='azimuthalEquidistant').properties(title='Azimutal Equidistante'),\n",
        "    minimap.project(type='orthographic').properties(title='Ortográfico'),\n",
        "    minimap.project(type='stereographic').properties(title='Estereográfico'),\n",
        "    minimap.project(type='gnomonic').properties(title='Gnomônico')\n",
        ").properties(spacing=10).configure_view(stroke=None)"
      ],
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 229
        },
        "id": "Y4E6i6p_d6RK",
        "outputId": "45226338-6cd5-409b-c319-ec28805f688c"
      },
      "execution_count": 27,
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<style>\n",
              "  #altair-viz-96b123b4407c4f629e2c6c66d953f654.vega-embed {\n",
              "    width: 100%;\n",
              "    display: flex;\n",
              "  }\n",
              "\n",
              "  #altair-viz-96b123b4407c4f629e2c6c66d953f654.vega-embed details,\n",
              "  #altair-viz-96b123b4407c4f629e2c6c66d953f654.vega-embed details summary {\n",
              "    position: relative;\n",
              "  }\n",
              "</style>\n",
              "<div id=\"altair-viz-96b123b4407c4f629e2c6c66d953f654\"></div>\n",
              "<script type=\"text/javascript\">\n",
              "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
              "  (function(spec, embedOpt){\n",
              "    let outputDiv = document.currentScript.previousElementSibling;\n",
              "    if (outputDiv.id !== \"altair-viz-96b123b4407c4f629e2c6c66d953f654\") {\n",
              "      outputDiv = document.getElementById(\"altair-viz-96b123b4407c4f629e2c6c66d953f654\");\n",
              "    }\n",
              "\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@5.20.1?noext\",\n",
              "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
              "    };\n",
              "\n",
              "    function maybeLoadScript(lib, version) {\n",
              "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
              "      return (VEGA_DEBUG[key] == version) ?\n",
              "        Promise.resolve(paths[lib]) :\n",
              "        new Promise(function(resolve, reject) {\n",
              "          var s = document.createElement('script');\n",
              "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
              "          s.async = true;\n",
              "          s.onload = () => {\n",
              "            VEGA_DEBUG[key] = version;\n",
              "            return resolve(paths[lib]);\n",
              "          };\n",
              "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
              "          s.src = paths[lib];\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",
              "      let deps = [\"vega-embed\"];\n",
              "      require(deps, displayChart, err => showError(`Error loading script: ${err.message}`));\n",
              "    } else {\n",
              "      maybeLoadScript(\"vega\", \"5\")\n",
              "        .then(() => maybeLoadScript(\"vega-lite\", \"5.20.1\"))\n",
              "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
              "        .catch(showError)\n",
              "        .then(() => displayChart(vegaEmbed));\n",
              "    }\n",
              "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300, \"stroke\": null}}, \"hconcat\": [{\"layer\": [{\"data\": {\"sphere\": true}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#e6f3ff\"}}, {\"data\": {\"graticule\": true}, \"mark\": {\"type\": \"geoshape\", \"stroke\": \"#ffffff\", \"strokeWidth\": 1}}, {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/world-110m.json\", \"format\": {\"feature\": \"countries\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#2a1d0c\", \"stroke\": \"#706545\", \"strokeWidth\": 0.5}}], \"height\": 180, \"projection\": {\"type\": \"azimuthalEqualArea\"}, \"title\": \"\\u00c1rea Azimutal Igual\", \"width\": 180}, {\"layer\": [{\"data\": {\"sphere\": true}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#e6f3ff\"}}, {\"data\": {\"graticule\": true}, \"mark\": {\"type\": \"geoshape\", \"stroke\": \"#ffffff\", \"strokeWidth\": 1}}, {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/world-110m.json\", \"format\": {\"feature\": \"countries\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#2a1d0c\", \"stroke\": \"#706545\", \"strokeWidth\": 0.5}}], \"height\": 180, \"projection\": {\"type\": \"azimuthalEquidistant\"}, \"title\": \"Azimutal Equidistante\", \"width\": 180}, {\"layer\": [{\"data\": {\"sphere\": true}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#e6f3ff\"}}, {\"data\": {\"graticule\": true}, \"mark\": {\"type\": \"geoshape\", \"stroke\": \"#ffffff\", \"strokeWidth\": 1}}, {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/world-110m.json\", \"format\": {\"feature\": \"countries\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#2a1d0c\", \"stroke\": \"#706545\", \"strokeWidth\": 0.5}}], \"height\": 180, \"projection\": {\"type\": \"orthographic\"}, \"title\": \"Ortogr\\u00e1fico\", \"width\": 180}, {\"layer\": [{\"data\": {\"sphere\": true}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#e6f3ff\"}}, {\"data\": {\"graticule\": true}, \"mark\": {\"type\": \"geoshape\", \"stroke\": \"#ffffff\", \"strokeWidth\": 1}}, {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/world-110m.json\", \"format\": {\"feature\": \"countries\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#2a1d0c\", \"stroke\": \"#706545\", \"strokeWidth\": 0.5}}], \"height\": 180, \"projection\": {\"type\": \"stereographic\"}, \"title\": \"Estereogr\\u00e1fico\", \"width\": 180}, {\"layer\": [{\"data\": {\"sphere\": true}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#e6f3ff\"}}, {\"data\": {\"graticule\": true}, \"mark\": {\"type\": \"geoshape\", \"stroke\": \"#ffffff\", \"strokeWidth\": 1}}, {\"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/world-110m.json\", \"format\": {\"feature\": \"countries\", \"type\": \"topojson\"}}, \"mark\": {\"type\": \"geoshape\", \"fill\": \"#2a1d0c\", \"stroke\": \"#706545\", \"strokeWidth\": 0.5}}], \"height\": 180, \"projection\": {\"type\": \"gnomonic\"}, \"title\": \"Gnom\\u00f4nico\", \"width\": 180}], \"spacing\": 10, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\"}, {\"mode\": \"vega-lite\"});\n",
              "</script>"
            ],
            "text/plain": [
              "alt.HConcatChart(...)"
            ]
          },
          "metadata": {},
          "execution_count": 27
        }
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "\n",
        "\n",
        "*   [Área Azimutal Igual](https://pt.wikipedia.org/wiki/Proje%C3%A7%C3%A3o_azimutal_de_Lambert) (``azimuthalEqualArea``): Projeta com precisão a área em todas as partes do globo, mas não preserva a forma (ângulos locais).\n",
        "\n",
        "*   [Azimutal Equidistante](https://pt.wikipedia.org/wiki/Proje%C3%A7%C3%A3o_azimutal_equidistante) (``azimuthalEquidistant``): Preserva a distância proporcional do centro de projeção para todos os outros pontos do globo.\n",
        "\n",
        "* [Ortográfico](https://pt.wikipedia.org/wiki/Proje%C3%A7%C3%A3o_ortogr%C3%A1fica) (``orthographic``): Projeta um hemisfério visível em um plano distante. Corresponde aproximadamente a uma visão da Terra do espaço sideral.\n",
        "\n",
        "* [Estereográfico](https://pt.wikipedia.org/wiki/Proje%C3%A7%C3%A3o_estereogr%C3%A1fica) (``stereographic``): Preserva a forma, mas não a área ou a distância.\n",
        "\n",
        "* [Gnomônico](https://pt.wikipedia.org/wiki/Proje%C3%A7%C3%A3o_gnom%C3%B4nica) (``gnomonic``): Projeta a superfície da esfera diretamente em um plano tangente. [Grandes círculos](https://pt.wikipedia.org/wiki/C%C3%ADrculo_m%C3%A1ximo) ao redor da Terra são projetados em linhas retas, mostrando o caminho mais curto entre os pontos.\n",
        "\n"
      ],
      "metadata": {
        "id": "MU6eVq9Bd-n6"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "## <font color=\"#747a7f\">7.7</font> Coda: Dados Geográficos de Disputa"
      ],
      "metadata": {
        "id": "W_LmcJAyTD9h"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Todos os exemplos acima são extraídos da coleção vega-datasets, incluindo dados geométricos (TopoJSON) e tabulares (aeroportos, taxas de desemprego). Um desafio comum para começar com a visualização geográfica é coletar os dados necessários para sua tarefa. Vários provedores de dados são abundantes, incluindo serviços como o [United States Geological Survey](https://www.usgs.gov/products/data-and-tools/data-and-tools-topics) e o [U.S. Census Bureau](https://www.census.gov/geo/maps-data/data/tiger-cart-boundary.html)."
      ],
      "metadata": {
        "id": "7jIwL5_aTP7I"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Em muitos casos, você pode ter dados existentes com um componente geográfico, mas requer medidas ou geometria adicionais. Para ajudar você a começar, aqui está um fluxo de trabalho:"
      ],
      "metadata": {
        "id": "xXH6XJD9Tu8g"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "1.   Visite o [Natural Earth Data](https://www.naturalearthdata.com/downloads/) e navegue para selecionar dados para regiões e resoluções de interesse. Baixe o(s) arquivo(s) zip correspondente(s).\n",
        "2.   Vá para o [MapShaper](https://mapshaper.org/) e solte o arquivo zip baixado na página. Revise os dados conforme desejado e, em seguida, \"Exportar\" os arquivos TopoJSON ou GeoJSON gerados.\n",
        "3.   Carregue os dados exportados do MapShaper para uso com o Altair!\n",
        "\n",
        "\n",
        "\n"
      ],
      "metadata": {
        "id": "vy-PHIReT7bg"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Claro, muitas outras ferramentas - tanto de código aberto quanto proprietárias - existem para trabalhar com dados geográficos. Para mais sobre geo-data wrangling e criação de mapas, veja a série de tutoriais de Mike Bostock sobre [Command-Line Cartography](https://medium.com/@mbostock/command-line-cartography-part-1-897aa8f8ca2c)."
      ],
      "metadata": {
        "id": "XXtRUdHhU4aL"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "## <font color=\"#747a7f\">7.8</font> Sumário"
      ],
      "metadata": {
        "id": "GiJYnVFCVwyl"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Neste ponto, nós apenas mergulhamos os dedos dos pés nas águas da cartografia. (*Você não esperava que um único caderno transmitisse séculos de aprendizado, esperava?*) Por exemplo, deixamos intocados tópicos como [cartogramas](https://pt.wikipedia.org/wiki/Cartograma) e [topografia](https://pt.wikipedia.org/wiki/Topografia) de transmissão - como no livro esclarecedor de Imhof, [Cartographic Relief Presentation](https://books.google.com.br/books?id=cVy1Ms43fFYC&redir_esc=y). No entanto, agora você deve estar bem equipado para criar uma rica variedade de geovisualizações. Para mais, o livro de MacEachren [How Maps Work: Representation, Visualization, and Design](https://books.google.com.br/books?id=xhAvN3B0CkUC&redir_esc=y) fornece uma visão geral valiosa da cartografia da perspectiva da visualização de dados."
      ],
      "metadata": {
        "id": "Xe3PE-3MV6vp"
      }
    }
  ]
}