43:["$","title",null,{"children":"Introdução a Vega-lite e Vega-lite-api | Data Visualization @ UFC-Brazil | Observable"}] 4b:T4ae,{ // create an interval selection over an x-axis encoding const brush = vl.selectInterval().encodings('x'); // determine opacity based on brush const opacity = vl.opacity().if(brush, vl.value(0.9)).value(0.1); // an overview histogram of cars per year // add the interval brush to select cars over time const overview = vl.markBar() .encode( vl.x().fieldO('Year').timeUnit('year') // extract year unit, treat as ordinal .axis({title: null, labelAngle: 0}), // no title, no label angle vl.y().count().title(null), // counts, no axis title opacity // modulate bar opacity based on the brush selection ) .params(brush) // add interval brush selection to the chart .width(400) // use the full default chart width .height(50); // set chart height to 50 pixels // a detail scatterplot of horsepower vs. mileage const detail = vl.markPoint() .encode( vl.x().fieldQ('Horsepower'), vl.y().fieldQ('Miles_per_Gallon'), opacity // modulate point opacity based on the brush selection ); // vertically concatenate (vconcat) charts return vl.data(cars).vconcat(overview, detail).render(); }4c:T5c2,A maneira mais fácil para incluir uma Visualização Vega-Lite em uma de suas GitHub Pages, é seguindo as instruções que estão no notebook: - [Exemplo de exportar uma célula Vega-Lite](https://observablehq.com/@vis-ufc/exemplo-de-exportar-uma-celula-vega-lite) Outra maneira de incluir uma visualização Vega-Lite, principalmente quando você já tem uma string JSON Vega-Lite da sua visualização, é utilizando o [pacote JavaScript vega-embed](https://github.com/vega/vega-embed). Para isso, use a string JSON Vega-Lite exportada e a incorpore numa página web que importa vega-embed. Abaixo está um template básico, em que a especificação JSON para o seu gráfico produzida pela chamada `chart.toObject()` deve ser armazenada na variável JavaScript `spec`: ```html

``` Para mais informações sobre como embutir Vega-Lite em outras páginas, veja a [documentação vega-embed](https://github.com/vega/vega-embed).4d:[{"id":"7a8d2c8a62fc5b800c55fda3aebceedd8493e076c6b3f656ff714d1cf96a62af8e7da0c728b79e21a1026f5c9499a9177b71ea759416a23dbd677cca88dc5236","href":"https://static.observableusercontent.com/files/7a8d2c8a62fc5b800c55fda3aebceedd8493e076c6b3f656ff714d1cf96a62af8e7da0c728b79e21a1026f5c9499a9177b71ea759416a23dbd677cca88dc5236","name":"vega-lite-bar-chart.png","type":"image/png","lastModified":1694367267443.161,"size":51173},{"id":"4834997d2b762b320df8aa744137fc34481c189dcbaf7ffd8b3698ec5ac00e0cdbfd1a3c4472dcfd867ec9f835f2353380b0977ed3245bc18562abc34a61c00c","href":"https://static.observableusercontent.com/files/4834997d2b762b320df8aa744137fc34481c189dcbaf7ffd8b3698ec5ac00e0cdbfd1a3c4472dcfd867ec9f835f2353380b0977ed3245bc18562abc34a61c00c","name":"vega-lite-header.png","type":"image/png","lastModified":1694367267443.161,"size":296320}] 47:{"id":"da056f96361f5c6d","slug":"introducao-a-vega-lite-e-vega-lite-api","title":"Introdução a Vega-lite e Vega-lite-api","thumbnail":"2274514e7744c17ecae868824c1d5b2fb9d6ed45f601e94440ab27c1ca5e7417","access_level":"public","create_time":"$D2023-09-10T17:34:27.443Z","update_time":"$D2026-09-23T20:34:56.878Z","view_time":null,"first_public_time":"$D2023-09-10T18:32:08.680Z","has_unpublished_edits":null,"fork":{"id":"421481e65e3b8d57","slug":"introducao-a-vega-lite-e-vega-lite-api","title":"Introdução a Vega-lite e Vega-lite-api","owner":{"id":"d94d0ab1065acef4","login":"emanueles","name":"Emanuele Santos"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6f9f0719fe133b18","login":"vis-ufc","name":"Data Visualization @ UFC-Brazil","avatar_url":"https://avatars-next.observableusercontent.com/81a5fe1f7e017223e9775ef2328271702115b8f9b4fe43a4159b45ca7f843420","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":491,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"65870cbe952f3688","login":"emanueles","name":"Emanuele Santos","avatar_url":"https://avatars-next.observableusercontent.com/b8fd60670900bb19b0b7d34ef8969829692cc2753f792f48652fdbe54ed96d36","tier":null,"bio":"Data Visualization Enthusiast, professor of Computer Science at Universidade Federal do Ceara, Fortaleza, Brazil.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"65870cbe952f3688","login":"emanueles","name":"Emanuele Santos","avatar_url":"https://avatars-next.observableusercontent.com/b8fd60670900bb19b0b7d34ef8969829692cc2753f792f48652fdbe54ed96d36","tier":null,"role":"editor"},{"type":"team","id":"6f9f0719fe133b18","login":"vis-ufc","name":"Data Visualization @ UFC-Brazil","avatar_url":"https://avatars-next.observableusercontent.com/81a5fe1f7e017223e9775ef2328271702115b8f9b4fe43a4159b45ca7f843420","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":91,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Introdução a Vega-lite e Vega-lite-api","cells":[{"id":0,"value":"# Introdução a Vega-lite e Vega-lite-api\n## Criando visualizações interativas rapidamente","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"No entanto, à medida que os gráficos tornam-se mais complexos, descrevê-los nessa linguagem declarativa fica cada vez menos intuitivo, como pode ser visto nesse [exemplo](https://vega.github.io/vega-lite/examples/interactive_global_development.html). Assim, para criar as visualizações de modo mais conveniente e programático, nós iremos utilizar a [API Vega-Lite](https://observablehq.com/@vega/vega-lite-api-v6), um conjunto de métodos em JavaScript que produzem especificações JSON Vega-Lite como saída.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"Criar visualizações com a API Vega-Lite é bem mais rápido do que criar visualizações do zero em D3. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"Este notebook pressupõe que você já saiba o básico de JavaScript e Notebooks Observable. Se você precisar de uma introdução rápida a esses dois conceitos, veja o notebook *[A Minimal Introduction to JavaScript and Observable](https://observablehq.com/@uwdata/a-minimal-introduction-to-javascript-and-observable)* (em Inglês).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"## Imports\nPara começar, iremos importar a api vega-lite, versão 6:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"import {vl} from '@vega/vega-lite-api-v6'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"... o repositório de conjuntos de dados da biblioteca vega:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"data = require('vega-datasets')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"## Dados","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"Os dados a serem carregados em Vega-lite devem estar formatados como uma tabela de dados (ou um data frame) consistindo em um conjunto de colunas nomeadas. As colunas podem ser referenciadas como campos (*fields*). Uma vez carregada, a representação padrão da tabela é um vetor de objetos JavaScript.\n\nVejamos como carregar o dataset `cars` do repositório que carregamos acima:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"cars = data['cars.json']()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"Vamos usar a célula especial do Observable (`Inputs.table`) para exibir os dados da tabela bem formatados e com alguns recursos interativos.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"cars","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":146,"value":"Todos os conjuntos de dados do repositório vega também estão acessíveis por uma URL:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"data['cars.json'].url","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"Você pode abrir a [URL acima](${data['cars.json'].url}) numa janela separada para examinar os dados brutos.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"Também podemos carregar os dados de forma convencional, por exemplo, usando o próprio d3 e exibi-los usando uma `Data table`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"nycweather = d3.json(\"https://gist.githubusercontent.com/emanueles/c628da6486ccb5059c091d9a13285cff/raw/8136ef5bc833ce6266e22ab0a8487c71bdb67bc2/nyc_weather_data.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"nycweather","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"## Dados Climáticos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"A visualização de dados em Vega-Lite supõe que os data frames sejam ***[tidy](https://vita.had.co.nz/papers/tidy-data.pdf)***. Para demonstrar os conceitos de Vega-Lite, iremos criar um data frame simples (`df`) que contém a precipitação média (`precip`) para uma dada cidade (`city`) e mês (`month`) - escrito no formato JSON:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"df = [\n {\"city\": \"Seattle\", \"month\": \"Apr\", \"precip\": 2.68},\n {\"city\": \"Seattle\", \"month\": \"Aug\", \"precip\": 0.87},\n {\"city\": \"Seattle\", \"month\": \"Dec\", \"precip\": 5.31},\n {\"city\": \"New York\", \"month\": \"Apr\", \"precip\": 3.94},\n {\"city\": \"New York\", \"month\": \"Aug\", \"precip\": 4.13},\n {\"city\": \"New York\", \"month\": \"Dec\", \"precip\": 3.58},\n {\"city\": \"Chicago\", \"month\": \"Apr\", \"precip\": 3.62},\n {\"city\": \"Chicago\", \"month\": \"Aug\", \"precip\": 3.98},\n {\"city\": \"Chicago\", \"month\": \"Dec\", \"precip\": 2.56},\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"Ou, num formato mais amigável:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"df","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":192,"value":"## Marcas e Codificações","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"Usando os dados climáticos definidos acima, nós podemos especificar como os dados serão visualizados em Vega-Lite. Primeiramente nós indicamos que tipo de marca gráfica (forma geométrica) nós queremos usar para representar os dados. Nós podemos criar uma nova instância de uma marca Vega-Lite usando os métodos `vl.mark*`.\n\nPor exemplo, podemos criar uma marca **ponto** usando `vl.markPoint()` e então passar os dados para o método `data()` (semelhante ao binding que fizemos em seleções d3). Por fim, nós chamamos o método `render()`para desenhar o gráfico:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"vl.markPoint()\n .data(df)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"No exemplo acima, a renderização consiste em um ponto para cada linha do dataset, todos desenhados um em cima do outro, pois não especificamos ainda as posições para cada ponto.\n\nPara separar os pontos visualmente, nós podemos mapear vários canais de codificação aos campos (`field`) no conjunto de dados. Por exemplo, nós podemos codificar o campo `city` usando o canal de posição `y`, que representa a posição dos pontos no eixo-y. Para fazer isso, usa-se o método `encode()`, passando para ele as definições de canais específicos.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"vl.markPoint()\n .data(df)\n .encode(vl.y().field('city').type('nominal'))\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"O método `encode()` constrói um mapeamento entre canais de codificação (tais como, `x`, `y`, `color`, `shape`, `size`, etc.) e campos no conjunto de dados, acessados pelo nome do campo. Fornecemos um canal usando os métodos `vl.`, juntamente com um tipo de dados para guiar o design da visualização. No exemplo acima, codificamos o campo `city` como um tipo `nominal`, indicando que os valores são categóricos, sem ordem definida.\n\nPara simplificar, podemos usar o método abreviado `fieldN()` para especificar um nome de campo e o tipo como `nominal` ao mesmo tempo:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"vl.markPoint()\n .data(df)\n .encode(vl.y().fieldN('city'))\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"Apesar de termos agora separado os dados por um atributo, ainda temos múltiplos pontos sobrepondo-se dentro de cada categoria. Vamos separar ainda mais esses pontos adicionando um canal `x` mapeado ao campo quantitativo `precip`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"vl.markPoint()\n .data(df)\n .encode(\n vl.x().fieldQ('precip'),\n vl.y().fieldN('city')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"> *Observe que Seattle exibe tanto o mês que menos chove quanto o mês que mais chove!*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"Acima usamos o método `fieldQ` para instruir que Vega-Lite trate `precip` como um campo quantitativo (isto é, um número real). Percebe-se que linhas de grade e títulos dos eixos são também adicionados automaticamente.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"Até agora, vimos tipos nominais (`fieldN`) e quantitativos (`fieldQ`). O conjunto completo de métodos de tipos de campos é o seguinte:\n- fieldN() indica tipo *nominal* (dados categóricos, sem ordem definida)\n- fieldO() indica tipo *ordinal* (dados ordenados)\n- fieldQ() indica tipo *quantitativo* (magnitudes numéricas)\n- fieldT() indica tipo *temporal* (correspondendo a valores de data - [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date))","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"O que você acha que vai acontecer ao nosso gráfico se tratarmos `precip` como uma variável nominal ou ordinal em vez de uma variável quantitativa? Experimente na célula abaixo para descobrir (copie a célula de código acima para começar e depois faça a modificação).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"// Experimente aqui","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"## Transformação de dados: Agregação","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"Para permitir uma maior flexibilidade no modo como os dados são visualizados, Vega-Lite possui uma sintaxe padrão para a agregação de dados. Por exemplo, podemos calcular a média de todos os valores especificando uma função de agregação juntamente como o nome do campo:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"vl.markPoint()\n .data(df)\n .encode(\n vl.x().average('precip'),\n vl.y().fieldN('city')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"Agora dentro de cada eixo-x de uma categoria, vemos um ponto refletindo a média dos valores dentro de cada categoria. Como estamos calculando uma média, a api Vega-Lite automaticamente supõe que o resultado é uma variável quantitativa. No entanto, você pode adicionar uma chamada a um método `type()` para especificar um tipo diferente, se desejar.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"> *Seattle realmente possui a menor média de precipitação dessas 3 cidades? (Sim!) Mesmo assim, como este gráfico pode estar enganando as pessoas? Que meses estão incluídos nos dados? O que está sendo considerado como precipitação?*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"Vega-Lite suporta uma variedade de funções de agregação, incluindo `count` (contagem), `min` (mínimo), `max` (máximo), `average` (média), `median` (mediana), e `stdev` (desvio padrão). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"## Alterando o Tipo de Marca","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"Suponha que queiramos representar nossos valores agregados usando barras retangulares no lugar de pontos circulares. Fazemos isso substituindo `vl.markPoint` por `vl.markBar`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"vl.markBar()\n .data(df)\n .encode(\n vl.x().average('precip'),\n vl.y().fieldN('city')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"Como o campo nominal `city` está mapeado ao eixo-y, o resultado é um gráfico de barras horizontais. Para obter um gráfico de barras verticais, podemos trocar as atribuições dos eixos x e y:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"vl.markBar()\n .data(df)\n .encode(\n vl.y().average('precip'),\n vl.x().fieldN('city')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"## Customizando uma Visualização","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"Por padrão, Vega-Lite toma algumas decisões sobre as propriedades da visualização, mas que podem ser modificadas usando métodos para customizar a aparência da visualização. Por exemplo, nós podemos modificar as propriedades de escala usando a propriedade `scale`, configurar títulos usando a propriedade `title`, e podemos especificar a cor da marca passando um objeto para o método `mark*` com uma propriedade `color` contendo uma [string de cor CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) válida: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"vl.markPoint({color: 'firebrick'})\n .data(df)\n .encode(\n vl.x().fieldQ('precip').scale({type: 'log'}).title('Log-Scaled Precipitation'),\n vl.y().fieldN('city').title('City')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"## Visões Múltiplas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"Como vimos acima, uma visualização básica Vega-Lite representa um gráfico com um único tipo de marca. Que tal diagramas mais complicados, envolvendo múltiplos gráficos ou camadas? Usando um conjunto de operadores de composição de visões, Vega-Lite pode aceitar múltiplas definições e combiná-las para criar visões mais complexas.\n\nComo ponto de partida, vamos plotar o conjunto de dados de carros (`cars`), que carregamos no início deste notebook, mostrando a autonomia média (`Miles_per_Gallon`) por ano de fabricação: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"vl.markLine()\n .data(cars)\n .encode(\n vl.x().fieldT('Year'),\n vl.y().average('Miles_per_Gallon')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"Para aumentar esse gráfico, nós podemos adicionar marcas círculos para cada ponto de dado com a média.\n\n> *Observação: A marca `circle` é uma abreviação para marcas pontos com círculos preenchidos.*\n\nPodemos começar definindo cada gráfico separadamente: primeiro um gráfico de linhas, depois um gráfico de pontos. Depois usamos o operador `layer` para combinar os dois em um único gráfico sobreposto.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"{\n const line = vl.markLine().data(cars).encode(\n vl.x().fieldT('Year'),\n vl.y().average('Miles_per_Gallon')\n );\n\n const point = vl.markCircle().data(cars).encode(\n vl.x().fieldT('Year'),\n vl.y().average('Miles_per_Gallon')\n );\n \n return vl.layer(line, point).render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"Nós também podemos criar esse gráfico reutilizando uma definição prévia de gráfico. Então, em vez de reescrever o gráfico do zero, podemos já começar com o gráfico de linhas e só alterar o tipo de marca, usando o método `mark`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"{\n const mpg = vl.markLine().data(cars).encode(\n vl.x().fieldT('Year'),\n vl.y().average('Miles_per_Gallon')\n );\n\n return vl.layer(mpg, mpg.markCircle()).render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"> Como a necessidade de se adicionar pontos em gráficos de linha é bastante comum, a marca `line` também inclui um atalho para gerar uma camada de pontos. Experimente passando `{point:true}` para o método `markLine`!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"// Experimente aqui","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"Agora, se quisermos ver esse gráfico lado-a-lado com outros gráficos, como por exemplo a potência média (`horsepower`) ao longo do tempo?\n\nNós podemos usar operadores de concatenação para posicionar múltiplos gráficos um ao lado do outro, tanto verticalmente quanto horizontalmente. Abaixo utilizaremos o método `hconcat` para realizar uma concatenação horizontal de dois gráficos:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"{\n const mpg = vl.markLine().data(cars).encode(\n vl.x().fieldT('Year'),\n vl.y().average('Miles_per_Gallon')\n );\n \n const hp = mpg.encode(vl.y().average('Horsepower'));\n\n return vl.hconcat(\n vl.layer(mpg, mpg.markCircle()),\n vl.layer(hp, hp.markCircle())\n ).render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"> *Podemos ver nos gráficos desse conjunto de dados, que a autonomia dos modelos aumentou ao longo dos anos 70 e início dos anos 80, mas em compensação, a potência média diminuiu.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"## Interatividade","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"Além da composição de visões, outra característica muito interessante de Vega-Lite é o suporte a interatividade. Exploraremos a interatividade com mais profundidade em notebooks futuros, mas só para termos um gostinho, vejamos como colocar tooltips em um scatterplot, usando o canal `tooltip`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"scatter = vl.markPoint().data(cars).encode(\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon'),\n vl.color().fieldN('Origin'),\n vl.tooltip(['Name', 'Origin']) // show the Name and Origin fields in a tooltip\n).render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"Para interações mais complexas, tais como visões coordenadas e cross-filtering, Vega-Lite fornece uma abstração seleção para definir seleções interativas e então vinculá-las a componentes de um gráfico. Isso é coberto em um outro notebook.\n\nAbaixo está um exemplo mais complexo. O histograma superior mostra a contagem de carros por ano e usa uma seleção interativa para modificar a opacidade dos pontos no scatterplot abaixo, que exibe autonomia (`mpg`) por potência (`horsepower`).\n\n> Arraste um intervalo no gráfico superior e veja como isso afeta os pontos no scatterplot. Conforme você examina o código, **não se preocupe se ainda não consegue entender o que ele faz!** Esse é um exemplo de inspiração. Existem vários outros notebooks (veja a lista ao final deste notebook) que abordam todos os detalhes para a criação de uma visualização como esta.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":464,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"## Opcional: Examinando a saída JSON","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"A API Vega-Lite converte as especificações de gráficos para um formato compatível [JSON](https://en.wikipedia.org/wiki/JSON) conforme o esquema Vega-Lite. Usando o método `toObject()`, podemos inspecionar a especificação que é enviada para a Vega-Lite:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"{\n const plot = vl.markCircle().encode(\n vl.x().average('precip'),\n vl.y().fieldN('city')\n );\n \n return html`

${JSON.stringify(plot.toObject(), 0, 2)}

${JSON.stringify(plot.toObject(), 0, 2)}

`; // format JSON data\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"## Exportando e Publicando uma Visualização","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"Depois que você visualizar os seus dados, talvez você queira publicar a sua visualização em algum lugar na web. Para salvar uma imagem exportada, você pode simplesmente clicar uma visualização com o botão direito e selecionar \"Save Image As...\" a partir do menu de contexto, supondo que o modo de renderização [canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) é utilizado. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"> *Experimente essa funcionalidade, rolando a barra de rolagem para cima e salve uma das visualizações anteriores!*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"## Aprofunde os seus conhecimentos\n\nContinue o seu aprendizado usando Vega-Lite e a API Vega-Lite, seguindo os seguintes notebooks (todos em Inglês):\n- [Data Types, Graphical Marks, and Visual Encoding Channels](https://observablehq.com/@uwdata/data-types-graphical-marks-and-visual-encoding-channels)\n- [Data Transformation](https://observablehq.com/@uwdata/data-transformation)\n- [Scales, Axes, and Legends](https://observablehq.com/@uwdata/scales-axes-and-legends)\n- [Multi-View Composition](https://observablehq.com/@uwdata/multi-view-composition)\n- [Interaction](https://observablehq.com/@uwdata/interaction)\n- [Cartographic Visualization](https://observablehq.com/@uwdata/cartographic-visualization)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"## Créditos\n\nEsse notebook é basicamente uma tradução do notebook [Introduction to Vega-lite](https://observablehq.com/@uwdata/introduction-to-vega-lite) com algumas alterações para deixar o conteúdo mais adequado ao curso de Visualização de Dados da Universidade Federal do Ceará.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 42:null