manual do usuário - vispublicavispublica.gov.br/vispublica/publico/manualusuario/... · tagxedo...

Manual do Usuário - VisPublica Melise Paula | Fernanda Ribeiro

Bárbara Pimenta | Clóvis Noronha Luan Costa | Mário Macedo

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

SU MÁR IO

1. INTRODUÇÃO .................................................................................................. 4

2. INFORMAÇÕES GERAIS .................................................................................. 4

2.1. VISÃO GERAL DO VISPUBLICA .................................................................. 4

2.2. REQUISITOS PARA ACESSO AO SISTEMA ................................................. 4

3. USANDO O SISTEMA ....................................................................................... 5

3.1. ACESSAR O SISTEMA ................................................................................ 5

3.2. ACESSAR SEÇÃO CATÁLOGO ................................................................... 5

3.2.1. NAVEGAÇÃO POR TÉCNICAS.............................................................. 6

3.2.2. NAVEGAÇÃO POR TECNOLOGIAS .................................................... 10

3.3. ACESSAR SEÇÃO ‘CRIE SEU GRÁFICO’ ................................................... 12

3.4. ACESSAR MANUAL DO USUARIO............................................................. 19

3.5. ACESSAR BIBLIOTECA VISPUBLICA ........................................................ 20

3.6. ACESSAR EXTENSÃO QLIKVIEW ............................................................. 23

3.7. ACESSAR QUEM SOMOS ......................................................................... 23

3.8. ACESSAR FALE CONOSCO ...................................................................... 24

3.9. PAINEL EDUCAÇÃO ................................................................................. 24

3.10. PAINEL DE TRANSFERÊNCIAS VOLUNTÁRIAS FIRMADAS PELO PODER

EXECUTIVO....................................................................................................... 27

4. GLOSSÁRIO ................................................................................................... 31

MANUAL DO USUÁRIO | VISPUBLICA | PÁGINA 4

1 . INT RO DUÇÃ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 RM AÇÕ E S G ERAIS

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.

2.2. 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


3 . USANDO O S IST EM A

3.1. ACESSAR O SISTEMA

Ao abrir o navegador digite corretamente a URL (o endereço) do VisPublica

(http://vispublica.gov.br/). 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.

3.2. 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


técnicas de visualização existentes e as tecnologias disponíveis para cada técnica

analisada.

No tópico 3.2.1 é mostrada a navegação no Catálogo através de técnicas de

visualização e no tópico 3.2.2 a navegação por tecnologias que auxiliam na

implementação de técnicas de visualização.

3.2.1. 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


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 Técnicas de Visualização

Colunas e Barras Barras

Colunas

Pirâmide Etária

Pizza Pizza

Dados Hierárquicos Árvore Animada

Árvore Hiperbólica

Sunburst

Treemap

Mapa Mapa

Multidimensional Gráfico com Animação

Gráfico Combinado

Gráfico de Ações

Texto Árvore de Palavras

Nuvem de Tags

Rede de palavras

Tabela 1. Lista de técnicas de visualização de cada Classe de técnica

Figura 3. Página Inicial do Catálogo


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).


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.


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.

3.2.2. 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


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) Nuvem de Tags

Open Cloud Nuvem de Tags

SVG Mapa

Tagxedo Nuvem de Tags

Tag Crowd Nuvem de Tags

The JIT (JavaScript InfoVis Toolkit) Árvore Animada

Árvore Hiperbólica

Colunas

Sunburst

Treemap

To Cloud Nuvem de Tags

Wordle 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.


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).


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 (https://i3gov.planejamento.gov.br/). A segunda opção é para inserir

https://i3gov.planejamento.gov.br/dadosgov/


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.


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

(https://i3gov.planejamento.gov.br) (Figura 11). Em seguida, escolha uma série

histórica no canto esquerdo da página (Figura 11Erro! Fonte de referência não

https://i3gov.planejamento.gov.br/dadosgov/


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


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).


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.


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.

3.4. 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.


Figura 18. Link para download do manual

Figura 17. Link para o manual do usuário

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.


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.


Figura 21. Página de demonstração da Biblioteca VisPublica


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.


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.


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.


Figura 25. Painel Educação


Figura 26. Tela com informações sobre o Painel Educação

3.10. 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.


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.


Figura 28. Convênios selecionados no Painel de Transferências Voluntárias Firmadas pelo Poder Executivo


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.


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 LO SSÁRIO

API: sigla para Application Programming Interface ou, em português, Interface de

Programação de Aplicativos.


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.