Visualização de Dados 2017.1 Lista de Exercícios 2

Informações Gerais

O objetivo desta lista é praticar os conceitos vistos em sala e construir uma base de código que será possivelmente útil para o projeto da disciplina. É recomendada a leitura do livro Interactive Data Visualization for the Web e também o uso da documentação da Mozilla Developer Network.

Data de Entrega

A entrega deverá ser feita via GitHub até 09/04/2017 até 23:59. Veja as instruções para entrega aqui.

Problema 1

Neste problema, usaremos um conjunto de dados de passagens aéreas que pode ser encontrado neste link. Para usar o dataset inclua o arquivo trips.js nos htmls criados.
O objetivo deste exercício é criar um sistema com duas vistas coordenadas para visualização dos dados das viagens aéreas citado acima. A primeira vista deve conter um histograma que mostra no número de viagens aéreas por compainha. A segunta é um scatterplot que deve mostrar a diferença do numéro de dias entre a postagem do preço e o incício da viagem no eixo X (post e start) e o preço da passagem no eixo Y. O scatterplot deve conter eixos.
Para coordenas as vistas, implemente as seguintes ações:

• O scatterplot deve implementar uma ação brush. Esta ação deve atualizar o histograma para mostrar a quantidade de pontos selecionados no scatterplot para cada uma das companhias.
• As barras do histograma devem funcionar como checkboxes, i.e., quando clicadas devem esconder/mostrar os dados da companhia aérea correspondente. As ações do scatterplot devem só ter efeito nos pontos ativos (mostrados na tela)

Problema 2

Para a solução deste problema, partiremos do arquivo problema2.html. Este arquivo contém um gerador de dados que são incluídos em um array chamado points. Este conjunto de dados contém 3 coordenadas x,y,z. Crie um scatterplot que mostra as coordenadas x e y e use a coordenada z para colorir os pontos (com uma escala de cores qualitativa). Inclua eixos no seu scatterplot. Implemente uma interação de Brush e Zoom. Nesta interação, o usuário deverá poder usar um brush de duas dimensões (retângulo) para definir a área onde quer explorar com mais detalhes (fazer zoom). Depois de o brush acabar, o plot deverá atualizar para focar na área desejada, isto é, os limites do plot deverão mostrar o retângulo selecionado pelo usuário. Use transições para dar mais contexto para a mudança do plot.

Problema 3

Neste problema implementaremos uma scatterplot matrix. Para tanto usaremos o conjunto de dados de emissão de gases poluentes por diferentes usinas geradores de energia, contido neste link.
Você deve implementar a scatterplot matrix usando as seguintes dimensões (nesta ordem): nameplate, generation, capacityfactor, co2emissions, co2emissionsRate. Use a dimensão "fuel" para colorir os pontos e inclua uma legenda para mostrar que categoria cada cor representa.
Cada scatterplot na matriz deve implementar uma operação de brush, na qual deve ser possível selecionar pontos em cada um deles. A seleção deve ser refletida nos outros scatterplots da matriz, i.e., os pontos correspondentes devem ser evidenciados. Como exemplo, a ação de brush deve se assemelhar ao que é mostrado neste link.