Manual do Usuário - VisPublica Melise Paula Fernanda Ribeiro Bárbara Pimenta Clóvis Noronha Luan Costa Mário Macedo

Transcrição

1 Manual do Usuário - VisPublica Melise Paula Fernanda Ribeiro Bárbara Pimenta Clóvis Noronha Luan Costa Mário Macedo

2 Manual do Usuário VisPublica Visualização de Dados Públicos Desenvolvido por: Instituto Alberto Luiz Coimbra de Pós-Graduação e Pesquisa de Engenharia - COPPE/UFRJ Programa de Engenharia de Sistema e Computação - PESC Centro de Apoio a Políticas de Governo - CapGov Outubro, 2014

3 SU MÁR IO 1. INTRODUÇÃO INFORMAÇÕES GERAIS VISÃO GERAL DO VISPUBLICA REQUISITOS PARA ACESSO AO SISTEMA USANDO O SISTEMA ACESSAR O SISTEMA ACESSAR SEÇÃO CATÁLOGO NAVEGAÇÃO POR TÉCNICAS NAVEGAÇÃO POR TECNOLOGIAS ACESSAR SEÇÃO CRIE SEU GRÁFICO ACESSAR MANUAL DO USUARIO ACESSAR BIBLIOTECA VISPUBLICA ACESSAR EXTENSÃO QLIKVIEW ACESSAR QUEM SOMOS ACESSAR FALE CONOSCO PAINEL EDUCAÇÃO PAINEL DE TRANSFERÊNCIAS VOLUNTÁRIAS FIRMADAS PELO PODER EXECUTIVO GLOSSÁRIO... 31

4 1. INT R O D U Ç Ã O Neste manual, são apresentadas as informações gerais sobre a aplicação web VisPublica e o modo como os usuários devem utilizá-la. Para isto, serão apresentadas imagens detalhadas do VisPublica, contendo a explicação das funcionalidades disponíveis. 2. INFO R M AÇ Õ E S G E R AIS 2.1. VISÃO GERAL DO VISPUBLICA A aplicação web VisPublica está inserida no contexto do projeto VisPublica e recebe o mesmo nome do projeto. O VisPublica foi elaborado pelo Centro de Apoio a Políticas de Governo com a finalidade de investigar de que forma as técnicas de Visualização de Informação (Visualization Information InfoVis) podem ser aplicadas para facilitar a transparência de dados públicos. O que representa o cerne deste projeto é a possibilidade de utilização eficiente das técnicas de InfoVis para a massificação dos dados públicos. O VisPublica foi realizado em parceria entre a Universidade Federal de Itajubá (UNIFEI), a COPPE/UFRJ e o Ministério do Planejamento, Orçamento e Gestão REQUISITOS PARA ACESSO AO SISTEMA Para o acesso à aplicação, são necessários os seguintes requisitos: Navegadores (browsers): Chrome 21 ou superior; Firefox 11 ou superior; Internet Explorer 9 ou superior. Plugins: Flash 11 ou superior MANUAL DO USUÁRIO VISPUBLICA PÁGINA 4

5 3. U S AN D O O S IST E M A 3.1. ACESSAR O SISTEMA Ao abrir o navegador digite corretamente a URL (o endereço) do VisPublica ( Em seguida, será apresentada a tela inicial, como pode ser visto na Figura 1. Figura 1. Tela Inicial O menu principal (Figura 1a) dá acesso às seções do VisPublica que serão detalhadas a seguir ACESSAR SEÇÃO CATÁLOGO O objetivo da seção Catálogo é apresentar o resultado da análise da literatura e ferramentas de InfoVis. Essa análise tem sido realizada considerando dois critérios: as MANUAL DO USUÁRIO VISPUBLICA PÁGINA 5

6 técnicas de visualização existentes e as tecnologias disponíveis para cada técnica analisada. No tópico é mostrada a navegação no Catálogo através de técnicas de visualização e no tópico a navegação por tecnologias que auxiliam na implementação de técnicas de visualização NAVEGAÇÃO POR TÉCNICAS Para acessar a documentação das técnicas disponíveis no Catálogo, clique no item Catálogo do menu principal (Figura 2) e em seguida escolha um dos conjuntos de técnicas: Colunas e Barras, Pizza, Dados Hierárquicos, Mapa, Multidimensional e Texto. Figura 2. Menu de Técnicas do Catálogo MANUAL DO USUÁRIO VISPUBLICA PÁGINA 6

7 Figura 3. Página Inicial do Catálogo A Tabela 1 apresenta as técnicas de visualização disponíveis para cada classe de técnica presente no menu Técnicas. Classes de técnica Colunas e Barras Pizza Dados Hierárquicos Mapa Multidimensional Texto Técnicas de Visualização Barras Colunas Pirâmide Etária Pizza Árvore Animada Árvore Hiperbólica Sunburst Treemap Mapa Gráfico com Animação Gráfico Combinado Gráfico de Ações Árvore de Palavras Nuvem de Tags Rede de palavras Tabela 1. Lista de técnicas de visualização de cada Classe de técnica MANUAL DO USUÁRIO VISPUBLICA PÁGINA 7

8 Selecionando a técnica desejada, será exibida a lista de tecnologias disponíveis que permitem a implementação daquela técnica, conforme indica a Figura 4. A Figura 4 mostra a página da técnica de Barras. Note que a biblioteca D3 (Data-Driven Documents) é a tecnologia disponível para gerar exemplos desta técnica. Clicando no link apontado, será apresentada a documentação da técnica de Barras utilizando a biblioteca D3. Figura 4. Lista de tecnologias disponíveis para a técnica Barras As páginas do VisPublica referentes à documentação das técnicas possuem a estrutura mostrada na Figura 5.: no início da página, são descritas a aplicação e as principais características da técnica apresentada (Figura 5a), seguidas pelas instruções sobre como interagir com a visualização (Figura 5b) e pela lista de exemplos (Erro! Fonte de referência não encontrada.c). Os exemplos que são destacados por uma caixa de canto arredondado (Figura 5d). A seguir, são apresentadas as especificações técnicas (Figura 5e). No fim da página, é descrito o tutorial técnico (Figura 5f). MANUAL DO USUÁRIO VISPUBLICA PÁGINA 8

9 Figura 5. Documentação da técnica Gráfico de Barras Hierárquico Vale destacar que a padronização da estrutura das páginas da seção Catálogo (aplicação, principais características, exemplo, especificações e tutorial técnico) foi definida de forma a facilitar a identificação da informação pelo usuário final. MANUAL DO USUÁRIO VISPUBLICA PÁGINA 9

10 Tendo apresentado a navegação por técnicas e a visão geral da página de documentação das técnicas, no tópico a seguir será demonstrada a navegação na seção Catálogo por tecnologias NAVEGAÇÃO POR TECNOLOGIAS Na página inicial do Catálogo há uma lista contendo as Tecnologias que mostra todas as bibliotecas, APIs e ferramentas utilizadas para gerar as visualizações do VisPublica (Figura 6). Figura 6. Lista de Tecnologias A Tabela 2 mostra a lista de técnicas de visualização disponíveis para cada tecnologia apresentada no VisPublica. Tecnologia Técnicas amchart Gráfico de Ações (Stock Charts) D3 Gráfico de Barras Hierárquico Google Visualization API Gráfico com Animação Nuvem de Tags MANUAL DO USUÁRIO VISPUBLICA PÁGINA 10

11 Treemap Mapa HighCharts Gráfico Combinado (Colunas + Linha) Colunas Empilhadas Pirâmide Etária Pizza Many Eyes Árvore de Palavras Nuvem de Tags Rede de Palavras Nuvem de Tags (Xiao) Open Cloud SVG Tagxedo Tag Crowd The JIT (JavaScript InfoVis Toolkit) Nuvem de Tags Nuvem de Tags Mapa Nuvem de Tags Nuvem de Tags Árvore Animada Árvore Hiperbólica Colunas Sunburst Treemap To Cloud Wordle Nuvem de Tags Nuvem de Tags Tabela 2. Lista das técnicas de visualização para cada tecnologia disponível no VisPublica Clicando em um item da lista de Tecnologias é possível acessar uma página contendo as técnicas de visualização disponíveis para o item selecionado. Por exemplo, selecionando o item The JIT (Javascript InfoVis Toolkit) é apresentada a página da tecnologia (Figura 7) com a lista de técnicas disponíveis no VisPublica para a biblioteca. MANUAL DO USUÁRIO VISPUBLICA PÁGINA 11

12 Figura 7. Lista das técnicas disponíveis para a tecnologia The JIT 3.3. ACESSAR SEÇÃO CRIE SEU GRÁFI CO O objetivo desta seção é permitir que o usuário utilize as técnicas e tecnologias analisadas para gerar visualizações de seus dados. Clique no item Crie seu Gráfico, no menu principal (Figura 8), para ter acesso a uma lista com todas as técnicas de visualização disponíveis no VisPublica que podem ser utilizadas para visualizar seus dados (Figura 9). MANUAL DO USUÁRIO VISPUBLICA PÁGINA 12

13 Figura 8. Menu de técnicas do Crie Seu Gráfico Figura 9. Página inicial da seção Crie seu Gráfico Selecione a técnica de visualização para ser direcionado à seção de upload dos dados. Todas as páginas da seção Crie seu gráfico são semelhantes à página apresentada na Figura 10. No início da página estão as instruções de uso, a área para upload e o exemplo da técnica selecionada (Figura 10a). A área de upload apresenta três opções, sendo que a primeira (Figura 10b) é para upload de arquivo dos indicadores de governo disponível na Plataforma de Gestão de Indicadores ( A segunda opção é para inserir MANUAL DO USUÁRIO VISPUBLICA PÁGINA 13

14 dados na tabela (Figura 10c). A terceira opção é para upload de arquivo criado pelo usuário (Figura 10d). Vale destacar que o arquivo de usuário deve seguir o modelo definido e disponível no VisPublica. Clique no link indicado no texto para fazer download do modelo do arquivo de usuário. Após as opções de upload é apresentado um exemplo de cada técnica (Figura 10e). Esse exemplo será substituído pela visualização dos dados do usuário. MANUAL DO USUÁRIO VISPUBLICA PÁGINA 14

15 Figura 10. Página para upload de dados do usuário Para fazer upload do arquivo da PGI (opção 1 na Figura 10b), acesse o portal ( (Figura 11). Em seguida, escolha uma série histórica no canto esquerdo da página (Figura 11Erro! Fonte de referência não MANUAL DO USUÁRIO VISPUBLICA PÁGINA 15

16 encontrada.a). Note que no lado direito aparecerá a lista de séries históricas (Figura 12a). Clique no símbolo indicado na Figura 12 para consultar aos dados da série. Para realizar a consulta, na opção Linha selecione UF (Figura 13a), na opção Coluna selecione Periodicidade (Figura 13b) e na opção Conteúdo selecione o conteúdo desejado (Figura 13c). Clique no símbolo indicado na Figura 13 para realizar a consulta da série histórica. A página mostrada na Figura 14 será exibida. Clique no símbolo indicado na Figura 14 para fazer download do arquivo.rtf da série histórica. Salve esse arquivo no seu computador. Figura 11. Página inicial do DadosGov Figura 12. Lista das séries históricas MANUAL DO USUÁRIO VISPUBLICA PÁGINA 16

17 Figura 13. Consulta da série histórica Figura 14. Opção de download da série histórica. Após fazer o download do arquivo.rtf do DadosGov, faça upload desse arquivo no VisPublica. Clique no botão Escolher arquivo e selecione o arquivo desejado. Em seguida clique em Enviar (Figura 10b). Note que será gerada a visualização dos seus dados. Caso o arquivo carregado não esteja dentro do formato especificado, aparecerá uma mensagem de erro avisando sobre o problema ocorrido e apresentando o link para retornar à página e fazer upload de um novo arquivo (Figura 15a). MANUAL DO USUÁRIO VISPUBLICA PÁGINA 17

18 Figura 15. Mensagem de erro Para fazer upload do arquivo de usuário (opção 2 na Figura 10d), primeiro faça download do arquivo exemplo e adicione seus dados no arquivo. Em seguida faça upload desse arquivo clicando no botão Escolher arquivo. Por fim, clique no botão Enviar para gerar a visualização. Se o arquivo não tiver a estrutura definida, aparecerá uma mensagem de erro avisando sobre o problema ocorrido e apresentando o link para retornar à página e fazer upload de um novo arquivo (Figura 15a). Os formatos de arquivo apresentados na Figura 10 não são iguais para a técnica Nuvem de Tags. Na primeira opção o usuário deve fazer o upload de um arquivo texto (.txt) (Figura 16a). Já na segunda opção o usuário digita ou cola o texto no campo designado (Figura 16b). O exemplo exibido na página (Figura 16c) será substituído pela visualização dos dados do usuário. MANUAL DO USUÁRIO VISPUBLICA PÁGINA 18

19 Figura 16. Página para upload de dados da técnica Nuvem de Tags Vale destacar que os recursos interativos das técnicas apresentadas na seção Catálogo também estão disponíveis para as técnicas da seção Crie seu Gráfico. Utilize os recursos para interagir com a visualização e extrair novas informações dos dados ACESSAR MANUAL DO USUARIO Para acessar este manual, o usuário deve clicar no item correspondente na barra de serviços, como na Figura 17. MANUAL DO USUÁRIO VISPUBLICA PÁGINA 19

20 Figura 17. Link para o manual do usuário Figura 18. Link para download do manual 3.5. ACESSAR BIBLIOTECA VISPUBLICA O objetivo desta seção é disponibilizar a Biblioteca VisPublica e apresentar a demonstração da mesma. Ao clicar no link indicado na Figura 21a, o usuário terá acesso à Biblioteca VisPublica. O manual de utilização da Biblioteca VisPublica está na página de demonstração da Biblioteca VisPublica, conforme mostra a Figura 21. São apresentadas as visualizações das técnicas disponíveis na Biblioteca VisPublica. MANUAL DO USUÁRIO VISPUBLICA PÁGINA 20

21 Figura 19. Menu com as técnicas da Biblioteca Figura 20. Página que disponibiliza a Biblioteca VisPublica O usuário pode editar o XML (apresentado na Figura 21b) para gerar novas visualizações. A visualização mostrada na Figura 21d é alterada quando o usuário clica no botão Gerar Visualização, conforme indicado na Figura 21c. Para retornar à página principal da aplicação web VisPublica, o usuário deve clicar no clique indicado na Figura 21a. MANUAL DO USUÁRIO VISPUBLICA PÁGINA 21

22 Figura 21. Página de demonstração da Biblioteca VisPublica MANUAL DO USUÁRIO VISPUBLICA PÁGINA 22

23 3.6. ACESSAR EXTENSÃO QLIKVIEW Nesta seção é apresentada a Extensão VisPublica para a ferramenta QlikView, é possível acessar a página com as informações da extensão (Figura 22) clicando no item Extensão QlikView no menu principal. Na página estão disponíveis os links para download da extensão (Figura 22a) e seu manual (Figura 22b). Figura 22. Página da extensão QlikView 3.7. ACESSAR QUEM SOMOS Nesta seção são apresentados os parceiros e objetivo do projeto VisPublica. Para acessar esta seção, clique no item Quem Somos do menu principal, conforme indicado na Figura 23. MANUAL DO USUÁRIO VISPUBLICA PÁGINA 23

24 Figura 23. Página Quem Somos 3.8. ACESSAR FALE CONOSCO Para entrar em contato com a equipe do VisPublica, clique no item Fale Conosco do menu principal, conforme indica a Figura 24. Figura 24. Página Fale Conosco 3.9. PAINEL EDUCAÇÃO A partir da análise realizada sobre os conjuntos de dados do Portal Brasileiro de Dados Abertos, foi elaborada uma proposta de um painel. A finalidade deste painel é exibir os conjuntos de dados publicados no portal utilizando técnicas de visualização que permitam ao usuário manipular e interpretar os dados com o auxílio de mecanismos de interação. MANUAL DO USUÁRIO VISPUBLICA PÁGINA 24

25 O conjunto de dados escolhido para o Painel Educação é referente à taxa de rendimento escolar na educação básica. Clique em Integração >> Dados.Gov.Br >> Painel Educação do menu principal para acessar o Painel Educação. Conforme mostra a Figura 25, o Painel Educação possui três visualizações: mapa, gráfico de pizza e gráfico de colunas. Além disso, há um menu à direita com opções para interação do usuário com o Painel Educação. Na opção Ano, o usuário pode trocar a periodicidade dos dados. A segunda opção do menu é referente às redes da escola: particular / pública ou municipal / federal / estadual. A opção Taxa permite que o usuário escolha a taxa de rendimento: aprovação, reprovação ou abandono. O usuário ainda pode escolher o nível do ensino: fundamental ou médio. Por fim, a opção Localidade é referente às zonas urbana e rural. Além disso, o usuário pode visualizar os dados das duas localidades ao clicar em Total. Após definir as opções para filtrar o conjunto de dados, o usuário deve clicar no botão Atualizar para que o Painel Educação seja alterado conforme os critérios definidos no menu. O usuário também tem a opção de interagir com o mapa e o gráfico de colunas. Conforme o estado é selecionado no mapa, os gráficos de pizza e colunas sofrem alterações. Os recursos de interação do gráfico de colunas descritos na seção Catálogo são válidos para o gráfico de colunas do Painel Educação. Clique no link Sobre o projeto, conforme indicado na Figura 25, para ter acesso às informações sobre o Painel Educação. A Figura 26 mostra a tela com essas informações. MANUAL DO USUÁRIO VISPUBLICA PÁGINA 25

26 Figura 25. Painel Educação MANUAL DO USUÁRIO VISPUBLICA PÁGINA 26

27 Figura 26. Tela com informações sobre o Painel Educação PAINEL DE TRANSFERÊNCIAS VOLUNTÁRIAS FIRMADAS PELO PODER EXECUTIVO Para acessar o Painel de Transferências Voluntárias Firmadas pelo Poder Executivo, clique em Painéis >> Painel de Transferências Voluntárias Firmadas pelo Poder Executivo do menu principal. Este painel representa o conjunto de dados referente aos convênios firmados pelo Poder Executivo da Administração Pública Federal. Estes dados estão disponíveis no Portal de Convênios do Governo Federal. A Figura 27 apresenta o Painel de Transferências Voluntárias Firmadas pelo Poder Executivo. MANUAL DO USUÁRIO VISPUBLICA PÁGINA 27

28 Figura 27. Painel de Transferências Voluntárias Firmadas pelo Poder Executivo Conforme apresentado na figura anterior, o usuário pode selecionar um ou mais convênios na tabela para visualizar os valores desses convênios. A Figura 28 mostra o Painel de Transferências Voluntárias Firmadas pelo Poder Executivo com três convênios selecionados. MANUAL DO USUÁRIO VISPUBLICA PÁGINA 28

29 Figura 28. Convênios selecionados no Painel de Transferências Voluntárias Firmadas pelo Poder Executivo MANUAL DO USUÁRIO VISPUBLICA PÁGINA 29

30 O usuário ainda tem a opção de adicionar situação ao gráfico de colunas Convênios por Situação. Para isso, o usuário deve clicar no botão Adicionar Situação. Em seguida será apresentada a tela da Figura 29. Nesta tela, o usuário deve selecionar uma situação. Por fim, clicar no botão Adicionar. Figura 29. Tela para adicionar situação no Painel de Transferências Voluntárias Firmadas pelo Poder Executivo Acima da tabela, são apresentados filtros. O usuário pode filtrar os dados pela data de início e término do convênio. Além disso, pode adicionar órgãos à tabela. Para adicionar um ou mais órgãos, o usuário deve clicar no botão Adicionar ao lado de Órgão. Em seguida, será carregada a tela da Figura 30. Primeiramente, o usuário deve digitar o nome do órgão no campo apropriado. Depois clicar no botão Atualizar. Na tabela abaixo, será apresentada a lista dos órgãos. O usuário selecionar o órgão e por fim, clica no botão Filtrar. MANUAL DO USUÁRIO VISPUBLICA PÁGINA 30

31 Figura 30. Tela para adicionar um ou mais órgãos no Painel de Transferências Voluntárias Firmadas pelo Poder Executivo Na Figura 31 estão as informações sobre o painel que podem ser acessadas através do link Sobre o Painel no canto superior à direita. Figura 31. Sobre o Painel de Transferências Voluntárias Firmadas pelo Poder Executivo 4. G L O S S Á R IO API: sigla para Application Programming Interface ou, em português, Interface de Programação de Aplicativos. MANUAL DO USUÁRIO VISPUBLICA PÁGINA 31

32 Breadcrumbs: também conhecido como migalhas de pão ou trilhas de migalhas de pão. É um tipo de navegação que revela o caminho percorrido pelo usuário na aplicação web. InfoVis: sigla para Information Visualization ou, em português, Visualização de Informação. SVG: sigla para Scalable Vector Graphics ou, em português, Gráficos Vetoriais Escaláveis. WYSIWYG: sigla para What You See Is What You Get ou, em português, O que você vê é o que você obtém. É um editor de conteúdo das páginas web. XML: sigla para Extensible Markup Language ou, em português, Linguagem de Marcação Extensível. MANUAL DO USUÁRIO VISPUBLICA PÁGINA 32