Mota Werner TCC

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO PARÁ
CAMPUS BELÉM
TRABALHO DE CONCLUSÃO DE CURSO
CURSO TECNOLOGICO DE ANÁLISE E DESENVOLVIMENTO DE SISTEMAS
WERNER JOHNSON PACHECO MOTA
DESENVOLVIMENTO DE UMA APLICAÇÃO WEB COM DADOS ABERTOS SOBRE
A EDUCAÇÃO BRASILEIRA
BELÉM
2018

Trabalho de Conclusão de Curso apresentado ao
Instituto Federal de Educação, Ciência e Tecnologia
do Pará – IFPA - Campus Belém. Como requisito para
obtenção de Grau em Tecnologia em Análise e
Desenvolvimento de Sistemas.
Orientador: Prof. Ms. Claudio Roberto de Lima Martins
BELÉM
2018

Dados para catalogação na fonte
Setor de Processamento Técnico
Biblioteca IFPA - Campus Belém
M917d Mota, Johnson Pacheco.
Desenvolvimento de uma aplicação web com dados abertos sobre a
educação brasileira / Werner Johnson Pacheco. — Belém, 2018.
37 f.
Impresso por computador (fotocópia).
Orientador: Claudio Roberto de Lima Martins.
Trabalho de Conclusão de Curso (Tecnologia em Análise e
Desenvolvimento de Sistemas) — Instituto Federal de Educação,
Ciência e Tecnologia do Pará – IFPA, 2018.
1. Dados abertos. 2. Exame Nacional do Ensino Médio.
3. Aplicação. II. Título.
CDD: 303.48330981

Trabalho de Conclusão de Curso apresentado ao
Instituto Federal de Educação, Ciência e Tecnologia
do Pará – IFPA - Campus Belém. Como requisito para
obtenção de Grau em Tecnologia em Análise e
Desenvolvimento de Sistemas.
Data da defesa: 13/11/2018
Conceito: 9.0
__________________________________________________
Orientador: Prof. M.e Cláudio Roberto de Lima Martins
Instituto Federal do Pará – Campus Belém
__________________________________________
Profª. Dr.a Andréa Lílian Marques da Costa
__________________________________________
Prof. Esp. Clovis Machado de Souza Filho

AGRADECIMENTOS
Aos meus pais e irmãos, pelo amor, incentivo е apoio incondicional.
Ao Prof. M.e Cláudio Martins pela oportunidade е apoio nа orientação deste
trabalho.
À Instituição pelo ambiente criativo е amigável, e as oportunidades qυе me
proporcionou.
Aos colegas pelo companheirismo durante esse período de estudo.

RESUMO
O presente trabalho tem como objetivo a construção de uma aplicação web para a
visualização de informações do Exame Nacional do Ensino Médio (ENEM) no contexto
que rege a definição de dados abertos, em um conjunto de gráficos organizados em forma
de painel, também chamado dashboard. A construção desta aplicação web busca
demonstrar como ferramentas de visualização de informações podem apoiar o processo
de publicação de dados abertos, bem como auxiliar a tomada de decisão e a extração de
conhecimento por meio de uma abordagem empírica e interativa. Para atingir esse
objetivo, foi realizado um levantamento bibliográfico dos conceitos teóricos sobre dados
abertos governamentais e das tecnologias envolvidas na solução. Espera-se que este
trabalho contribua com a comunidade de dados abertos ao apresentar um processo para
publicação de informações públicas, no caso especial, sobre as médias das notas do
ENEM entre 2009 e 2017.
Palavras chave: Dados Aberto; ENEM; Dashboard; DC.js; Aplicação WEB; InfoView.

ABSTRACT
The present work aims to construct a Web application for the visualization of information
from the Brazilian National High School Examination (ENEM) in the context and definition
of open data, in a set of charts organized in a dashboard. The construction of this Web
application seeks to show how information visualization tools can support the process of
publishing open data, as well as assisting decision-making and in extracting knowledge
through an empirical and Interactive approach. To achieve this goal, a bibliographical
survey of theoretical concepts on open governmental data and the technologies involved
in the solution was conducted. This work is expected to contribute to the Open data
community by submitting a process for publishing public information, in this special case,
on the average grades of the ENEM between 2009 and 2017.
Key words: Open data; ENEM; Dashboard; DC.js; webapp; InfoView.

SUMÀRIO
1 INTRODUÇÃO 8
1.2 Objetivo 9
1.3 Procedimentos Metodológicos 9
1.4 Organização do Trabalho 9
2 BASE TEÓRICA E FUNDAMENTAÇÃO TÉCNICA 11
2.1 Dados Abertos 11
2.1.1 Os oitos princípios dos dados abertos 12
2.1.2 As três leis de Dados Abertos Governamentais 13
2.2 ENEM 13
2.2.1 Microdados do ENEM 14
2.3 Ciclo de vida dos dados 16
2.3.1 Fonte de Dados (Coleta) 17
2.3.2 Extração e harmonização 17
2.3.3 Publicação 18
2.4 A biblioteca DC.js 18
2.4.1 Características 18
2.4.2 Biblioteca D3.js 19
2.5 Técnicas de visualização de informações 19
2.5.1 Tipos de Gráficos 20
3 PROJETO E IMPLEMENTAÇÃO DA APLICAÇÃO WEB 23
3.1 Fluxo da Aplicação 23
3.2 Estrutura HTML da Aplicação 24
3.3 Conjunto de dados ENEM da Aplicação 26
3.4 Implementação do dashboard 27
3.4.1 Piechart – Gráficos em Pizza 28
3.4.2 BarChar / RowChart – Graficos em Barra 30
3.4.3 LineChart – Gráfico em linha 32
3.5 Resultado final do dashboard 33
4 CONSIDERAÇÕES FINAIS 35

de 37
1 INTRODUÇÃO
Nos últimos anos o governo brasileiro vem realizando ações para o
desenvolvimento de uma política de disseminação de dados e informações
governamentais para o livre uso pela sociedade. Estas ações estão alinhadas com um
crescente movimento global para democratização do acesso a dados e informações no
paradigma de dados abertos. O movimento por dados abertos defende a criação de um
ecossistema, fundamentado no acesso a dados, que possibilite a participação da
sociedade no desenvolvimento de um estado mais eficiente, com oferta de melhores
serviços, e fazendo amplo uso de tecnologias (CARTILHA DADOS ABERTOS, 2012).
O governo brasileiro implementou o Portal de Dados Abertos (http://dados.gov.br/),
reunindo diversos grupos de dados, que vão da área da saúde, indicadores educacionais,
gastos governamentais, dados eleitorais, entre tantos outros. Afora esta iniciativa, outras
organizações de governo mantêm repositórios próprios, como IBGE e o Ministério da
Educação. Esta última, por meio do Instituto Nacional de Estudos e Pesquisas
Educacionais Anísio Teixeira (INEP), disponibiliza em seu portal dados e informações
sobre a educação brasileira, com destaque para os dados do Exame Nacional do Ensino
Médio (ENEM) (INEP; ENEM. 2018).
O ENEM consiste em uma prova para avaliar a qualidade do ensino médio no
país, cujo resultado serve para acesso ao ensino superior em universidades públicas
brasileiras, através do Sistema de Seleção Unificada (SiSU), no acesso ao financiamento
da educação superior, por meio do Fundo de Financiamento ao Estudante do Ensino
Superior (Fies), assim como ter acesso a bolsa integral ou parcial em universidade
particular por meio do Programa Universidade para Todos (ProUni) (ENEM, 2018).
Embora livres para acesso público, os dados abertos apresentam-se, em sua
maioria, em formatos de difícil manipulação e documentação. Além disso, dependendo
do volume de dados, torna-se uma tarefa complexa extrair informações e gerar
conhecimento a partir dessas informações, para posterior publicação à sociedade. Uma
das estratégias para facilitar a publicação e compartilhamento desses dados é o
reprocessamento dos conjuntos de dados (datasets) usando operações de agregação e
sumarização. Em seguida, deve-se organizar as informações de forma compreensível ao

de 37
cidadão, publicando-as em uma página web, na forma de tabelas e gráficos em uma
estrutura chamada de dashboard. Essa é a abordagem empregada neste trabalho, que
apresenta uma aplicação web contendo um dashboard com informações do ENEM, com
dados sumarizados entre 2009 e 2017.
1.2 Objetivo
Este trabalho investiga técnicas de Visualização de Informação (InfoVis) em uma
aplicação no contexto de dados abertos governamentais, sobre um conjunto de dados
extraídos dos arquivos do ENEM, no período entre 2009 e 2017. A aplicação utiliza
técnicas de visualização para apresentar os dados sumarizados do ENEM, organizando-
os em um painel (dashboard) publicado em ambiente web (website). Os gráficos são
processados no navegador da máquina cliente em tempo real, utilizando a biblioteca
JavaScript “dc.js”, com dados carregados de um repositório no serviço GitHub.
1.3 Procedimentos Metodológicos
Este trabalho foi desenvolvido em 3 etapas. Na primeira etapa foi feita a
investigação sobre a fundamentação teórica do trabalho, que abordou os conceitos de
Dados Abertos, Dados Aberto Governamentais, técnicas de Visualização de Informação,
e ENEM. Nesta etapa foi utilizado o procedimento de pesquisa bibliográfica.
Na etapa seguinte, foram elaborados os diagramas de funcionamento do website,
que descrevem como a aplicação deve funcionar. Os protótipos das páginas web foram
definidos e projetados com uso de gráficos em forma de um dashboard, que permite o
acesso interativo e dinâmico às informações.
Na terceira etapa, a aplicação foi implementada de acordo com as tecnologias
investigadas na etapa anterior.
1.4 Organização do Trabalho
A organização deste trabalho de conclusão de curso apresenta-se conforme
segue.
No capítulo 2, é apresentada toda a base teórica e de fundamentação técnica do
trabalho. Compreende o tema dados abertos com os principais conceitos e definições, o

de 37
ENEM e a forma como manipular suas bases de dados (chamados “microdados”), e como
o processo de ciclo de vida dos dados é empregado na aplicação. Neste capítulo também
é tratado, de forma sucinta, as principais técnicas de visualização utilizando gráficos e
painéis (dashboard), bem como apresenta-se a tecnologia adotada na solução, neste
caso, a biblioteca dc.js e suas dependências. No capítulo 3, apresenta-se o projeto e o
desenvolvimento da aplicação web, com a abordagem de visualização de informações
do ENEM usando a técnica de dashboard de gráficos. Por último, no capítulo 4, são feitas
as considerações finais.

de 37
2 BASE TEÓRICA E FUNDAMENTAÇÃO TÉCNICA
Este capítulo apresenta tanto a base teórica sobre dados abertos e ENEM, quanto
à fundamentação das tecnologias envolvidas.
2.1 Dados Abertos
Segundo a Open Definition 2.1 (2018), um dado é aberto se qualquer um é livre
para acessar, usar, modificar, e compartilhá-lo, sujeito, no máximo, a medidas que
preservem a proveniência e a abertura.
Dados Abertos constituem a publicação e disseminação de dados e informações
públicas na web, seguindo alguns critérios que possibilitam sua reutilização e o
desenvolvimento de aplicativos por toda a sociedade (CARTILHA DE DADOS ABERTOS,
2012). A maior parte dos dados e informações gerados ou mantidos pelo governo, é
pública. Disponibilizar dados na Web não é uma prática recente no governo, porém com
uma política de dados abertos, o governo sinaliza que pretende padronizar e alavancar a
disseminação de dados públicos por todos os órgãos. O paradigma de dados abertos
está fundamentado na constatação de que o dado, quando compartilhado abertamente,
tem seu valor e seu uso potencializados. Com isso o governo pretende desenvolver um
ecossistema de dados e informações que beneficia a sociedade e possibilita o
envolvimento de todos seus setores, inclusive a iniciativa privada, o setor acadêmico e o
próprio governo.
No Brasil, em novembro de 2011, foi sancionada a Lei de Acesso à Informação
(12.527/2011) que tem o propósito de regulamentar o direito constitucional de acesso dos
cidadãos às informações públicas. Junto a essa lei, o Governo Federal estabeleceu que
os órgãos que fazem parte da estrutura direta e indireta, organize planos de dados
abertos, viabilizando o acesso à informação prevista em lei. Um exemplo disso pode ser
visto no documento Plano de Dados Abertos (PDA), da CAPES (2017), que define dados
abertos como dados públicos representados em meio digital, estruturados em formato
aberto, processáveis por máquina, referenciados na rede mundial de computadores e
disponibilizados sob licença aberta que permita sua livre utilização, consumo ou
cruzamento.

de 37
Para deixar mais claro, segue a definição dos oito princípios de dados abertos
(estabelecido pela comunidade do movimento “open-data”), e as regras para o caso dos
dados abertos governamentais.
2.1.1 Os oitos princípios dos dados abertos
Em dezembro de 2007, trinta defensores de governos abertos juntaram-se em
Sebastopol, Califórnia e escreveram um conjunto de oito princípios de dados abertos
governamentais.” (OPENGOVDATA, 2018), os quais estão disponíveis para acesso
público e destacados a seguir.
1. Completos, todos os dados públicos dever estar disponibilizados. Dados públicos
são dados que não estão sujeitos a limitações de privacidade, segurança ou
privilégio válidas.
2. Primários, os dados são coletados na fonte, com o maior nível possível de
granularidade, não em formas agregadas ou modificadas.
3. Atuais, os dados são disponibilizados tão rapidamente quanto necessário para
preservar o valor dos dados.
4. Acessíveis, os dados estão disponíveis para a mais ampla gama de utilizadores
para a mais ampla gama de finalidades.
5. Processável por máquina, os dados são estruturados razoavelmente para
permitir o processamento automatizado.
6. Não discriminatórios, os dados estão disponíveis a qualquer pessoa, sem
necessidade de registo.
7. Não proprietários, os dados estão disponíveis em um formato sobre o qual
nenhuma entidade tem controle exclusivo.
8. Sem licenças, os dados não estão sujeitos a qualquer regulamentação de direitos
autorais, patentes, marcas registradas ou segredos comerciais. Podem ser
permitidas restrições de privacidade, segurança e privilégios razoáveis.

de 37
2.1.2 As três leis de Dados Abertos Governamentais
Já os Dados Abertos Governamentais podem ser regidos por três leis propostas
pelo especialista em políticas públicas e ativista dos dados abertos, David Eaves
(EAVES, 2009), que são:
1. Se o dado não pode ser encontrado ou indexado, ele não existe
2. Se não estiver disponível em formato aberto e legível por máquina, ele não pode
ser reutilizado.
3. Se algum meio legal não permitir sua republicação, ele não é valido.
2.2 ENEM
Para falarmos um pouco mais sobre os dados abertos do ENEM primeiro
precisamos conhecer o que é o ENEM. No portal do Instituto Nacional de Estudos e
Pesquisas Educacionais Anísio Teixeira (Inep), temos a seguinte definição para o ENEM.
O Exame Nacional do Ensino Médio (ENEM) tem como finalidade
principal a avaliação do desempenho escolar e acadêmico ao fim do
Ensino Médio. O exame é realizado anualmente pelo Instituto Nacional de
Estudos e Pesquisas Educacionais Anísio Teixeira (Inep) e Ministério da
Educação (MEC).
Qualquer pessoa pode fazer o ENEM, entretanto, participantes
com menos de 18 anos no primeiro dia de realização do Exame que
concluirão o Ensino Médio após o ano letivo de 2018, os chamados
treineiros, podem usar o resultado somente para uma autoavaliação de
conhecimentos. [INEP, 2018]
O INEP disponibiliza os dados do ENEM em formato de arquivos texto
compactados, que eles chamam de “microdados”. Os microdados se constituem no
menor nível de desagregação de dados recolhidos por pesquisas, avaliações e exames
realizados (INEP, 2018).
Os microdados do ENEM, disponíveis em página web do INEP, são referentes aos
exames realizados entre os anos 1998 até a última base de dados liberada (atualmente,
2017). Tais microdados estão disponíveis para download e podem ser baixados sem
restrições por quaisquer pessoas.

de 37
2.2.1 Microdados do ENEM
Segundo o INEP (2018), os microdados fornecem os dados brutos (primários) e
estruturados para a menor desagregação disponível, que precisam ser tratados para se
obter a informação desejada.
O INEP vem implementando uma série de melhorias nos microdados, adequando-
os ao formato aberto definido nos Padrões de Interoperabilidade de Governo Eletrônico
(ePING). Essas alterações já foram aplicadas aos arquivos do ENEM a partir de 2012,
que passaram a ser estruturados no formato Comma-Separated Values (CSV),
possibilitando a leitura, carga e trabalho com os dados por praticamente qualquer
ferramenta estatística disponível atualmente, inclusive soluções abertas (open source).
Apesar da indicação de que os microdados são acessíveis a todos, é preciso
destacar que o acesso não é simples. Além da necessidade de software específico, é
preciso computadores que comportem os bancos de dados (SILVA; MELETTI. 2014).
No caso deste trabalho, no qual o alvo são os Microdados entre 2009 e 2017,
identificou-se algumas dificuldades no pré-processamento desses arquivos, como visto
na Figura 1 (o ano de 2017 não entrou na análise, pois o arquivo foi liberado pelo INEP
no mês de publicação deste trabalho não possibilitando a preparação dos indicadores
vistos na imagem). Os procedimentos de coleta dos dados e tratamento evidenciou tais
dificuldades e quanto é complexo o processo de extração e pré-processamento visando
a qualidade dos dados.

de 37
Figura 1Características dos Microdados do ENEM (2009 a 2016)
Fonte Claudio Martins
Observa-se na Figura 1 três situações quanto às dificuldades com o processamento
dos Microdados:
(A) Formatos diferentes (TXT e CSV), com alguns arquivos usando códigos
(enconding) e formatos distintos. O arquivo texto em formato TXT traz campos em
posição pré-fixada. Os microdados mais novos (2012 em diante) seguem o padrão aberto
no formato CSV. A solução dada no pré-processamento foi converter todos os arquivos
texto para um formato padrão (no caso, CSV), mantendo também o mesmo enconding
(UTF-8).
(B) Esquemas diferentes, com alguns microdados contendo versões de esquemas
diferentes, isto é, com novos campos ou tipos de dados distintos de um ano para outro.
Neste caso, a solução é harmonizar todos os campos que são sinônimos ou possuem a
mesma semântica, empregando um nome e tipo padronizados. Essa estratégia chama-
se “integração de esquemas” (schema matching), ou também comumente chamado de
mapeamento de esquemas.

de 37
(C) Excesso de dimensionalidade, no qual os microdados possuem uma
quantidade grande de campos e de linhas, dificultando a manipulação em ferramentas
que usam somente a memória principal. A solução para este problema foi carregar os
dados em um banco de dados relacional (no caso, Postgresql), para depois exportar o
dataset final no formato padrão CSV.
Outros problemas presentes no pré-processamento dos microdados foram:
a) Ausência de metadados técnicos. Apesar da presença de dicionários de dados,
metadados técnicos viabilizam a integração com ferramentas de análise e
documentação. A solução mais indicadada é adotar um padrão de metadados
baseado em boas práticas de publicação de dados (W3C, por exemplo). No
trabalho, optou-se por disponibilizar um arquivo texto com uma documentação
simplificada, contendo explicações da estrutura do dataset usado no aplicativo
(este documento será apresentado no Capítulo 3).
b) Dados inconsistentes, outliers (valores discrepantes), valores incompletos, etc.
Neste caso, tais problemas estão diretamente ligados ao domínio do problema e
deve-se aplicar técnicas como limpeza e transformação de dados.
2.3 Ciclo de vida dos dados
Para realizar o processo utilizado neste trabalho, foi seguido o fluxo (visto na Figura
2) para representar o ciclo de vida dos dados.
Figura 2 Fluxo do ciclo de vida dos dados da aplicação

de 37
2.3.1 Fonte de Dados (Coleta)
Os microdados do ENEM estão disponíveis no site do INEP para livre acesso e
podem ser baixados por quaisquer pessoas. Esses dados são oriundos dos dados de
cada participante, dados como: qual escola aquele participante pertence, a unidade da
federação que ele habita, os resultados das provas em forma de nota (0 a 1000), e dados
socioeconômicos do inscrito. Vale salientar a garantia do sigilo a certos dados que
possam identificar o participante, que são omitidos nos microdados.
Para fins deste trabalho, foram baixados os microdados de 2009 a 2017, que serão
carregados em um banco de dados no processo seguinte, de extração e harmonização.
2.3.2 Extração e harmonização
Para que os dados possam “conversar” entre eles, em diversas vezes faz-se
necessário a harmonização desses dados, necessitando identificar ou criar novos dados,
como identificadores (chaves) que os correlacionem, por exemplo. Essas chaves são
necessárias para criar as dimensões que os dados possuem em comum; no caso desta
aplicação, o atributo “ano” permite o relacionamento com a edição do ENEM. Outro tipo
de harmonização diz respeito à estrutura sintática dos datasets, que podem estar
disponibilizados em diferentes maneiras e formatos. No caso do ENEM seus primeiros
dados eram dispostos em arquivos “.txt”, sendo uma linha para cada entrada com
separadores baseados na posição da chave na linha; nos datasets mais recentes os
microdados são fornecidos em um arquivo de texto utilizando a virgula como separador
(formato CSV). A solução empregada neste caso, foi carregar os datasets em um banco
de dados para então realizar operações de tratamento para cruzamento e comparação,
gerando no final um novo dataset adequado ao uso.
Após a harmonização, os datasets (já carregados em um banco de dados) são
consolidados em um arquivo no formato CSV. Segundo a W3C (2018), CSV é um dos
formatos de dados tabulares mais utilizados para publicar na web. Os arquivos em
formato CSV constitui-se em dados de textos onde se usa um separador, geralmente a
“,” (virgula) para separar suas informações. Os arquivos em formato CSV podem ser
abertos pela maioria dos processadores de textos e editores de planilhas, assim como
importado por vários tipos de banco de dados.

de 37
2.3.3 Publicação
A publicação da informação se dará por meio da aplicação web com um dashboard
contendo gráficos como principal ferramenta de visualização. Na prática, o dashboard é
uma única página web que mostra os dados consolidados do ENEM de 2009 a 2017,
lidos de um único dataset (CSV), consolidado (sumarizado) e tratado na etapa de
harmonização. A sumarização compreende a agregação das médias das notas por
unidade escolar (identificado pelo código da escola), dos alunos que estavam finalizando
o ensino médio, e compareceram a todas as provas.
2.4 A biblioteca DC.js
DC.js (DC.js, 2018) é uma biblioteca JavaScript para criação de gráficos
multidimensionais. Com o Dc.js é possível criar visualizações complexas de um grande
grupo de dado, que são operados no lado do cliente (no navegador), além de permitir a
criação de filtros e a interação entre os gráficos de maneira dinâmica e rápida.
Dc.js é um framework aberto que trabalha com diversas outras bibliotecas
JavaScript. Entre elas, a principal é a Crossfilter (CROSSFILTER, 2016), que torna
possível explorar grandes conjuntos de dados multivariados no navegador. O Crossfilter
suporta interação extremamente rápida na visualização dos dados, mesmo em conjuntos
de dados contendo um milhão ou mais de registros. Crossfilter também permite
interações com uso de filtragem incremental, com a redução e ajuste das outras
dimensões relacionadas ao dataset.
2.4.1 Características
Entre as características do DC.js, podemos citar (Tutorialspoint, 2018):
a) Flexibilidade em sua utilização: capaz de trabalhar com diversos grupos de
datasets, diferentes tipos de entradas de dados.
b) Fácil de usar: relativamente fácil em criar e plotar os gráficos nas páginas web.
c) Rápido em construir, desenhar os gráficos.
d) Suporta multidimensionais em datasets de grande volume.
e) Biblioteca JavaScript open source.

de 37
DC.js proporcional alguns benefícios na sua utilização:
a) Excelente representação gráficas de dados.
b) Capaz de realizar filtros interagindo com o gráfico.
c) Rápido em criar gráficos e grupos de gráficos.
d) Capaz de criar um grupo de gráficos altamente interativo.
Não há muita dificuldade em empregar o Dc.js. Quando se ativa um filtro em um dos
gráficos o Dc.js ajusta o filtro para a dimensão correspondente; após isso, ele envia um
comando para redesenhar os gráficos do grupo dessa maneira, e os gráficos recebem os
novos valores dos grupos do “crossfilter” - criando uma animação atualizada do gráfico
para um gráfico com os novos valores recebidos.
2.4.2 Biblioteca D3.js
Dc.js é uma biblioteca JavaScript aberta que precisa de outras bibliotecas
JavaScript para funcionar. Além do já citado Crossfilter, outra importante biblioteca é a
D3.js.
D3.js uma biblioteca JavaScript para visualizar dados usando padrões web,
utilizando SVG, Canvas e HTML DOM. D3 combina uma poderosa técnica de
visualização e interação com uma abordagem orientada a dados para manipulação do
DOM, dando-lhe a completa capacidade dos navegadores modernos e a liberdade de
criar a correta visualização para seus dados (D3, 2018).
2.5 Técnicas de visualização de informações
Na área de visualização de informação (InfoVis) há algumas técnicas que podem
ser aplicadas para facilitar a interpretação, manipulação e publicação de dados públicos.
A questão abordada é: quais técnicas são mais apropriadas para apoiar a tomada de
decisão nos setores públicos e na comunicação com a sociedade?
No projeto VisPublica (2018), pode-se observar a preocupação em definir um
conjunto regras que facilitem a escolha das técnicas pelos diversos órgãos públicos do
Governo Federal do Brasil.

de 37
Um conceito importante visto no VisPublica é o de “Painel”. Os painéis
(dashboard) têm a finalidade de apresentar visualizações de um mesmo conjunto de
dados permitindo que o usuário manipule e interprete os dados com o auxílio de
mecanismos de interação. Em suma, um dashboard é um conjunto de dados
sumarizados em gráficos que permitem ao usuário a visualização dinâmica desses
através de mecanismos de interação.
Ainda no portal do VisPublica (2018), a sessão Catálogo apresenta os mais
diversos tipos de gráficos e suas características. Esse catálogo foi montado como
resultado da análise da literatura e ferramentas da área de InfoVis, cuja análise leva em
consideração dois critérios: as técnicas de visualizações existentes, em suma os gráficos,
e as tecnologias capazes de gerar cada um dos gráficos analisados.
2.5.1 Tipos de Gráficos
Para este trabalho está sendo abordado apenas os gráficos que estão sendo
utilizados na aplicação web proposta. Ao apresentar cada tipo de gráfico, faremos uma
citação ao uso na biblioteca DC.js. Para outros tipos de gráficos, recomenda-se visitar o
portal do VisPublica.
a) Gráficos em Pizza
O gráfico em Pizza (ou pieChart, como é chamado no DC.js) é um gráfico que
apresenta a disposição dos dados em um círculo, apresentando as dimensões dos dados
em setores. O gráfico em pizza é geralmente utilizado para demostrar partes de um todo.
Esses tipos de gráficos são utilizados geralmente para comparação e composição.
Um exemplo de uso adequado ao gráfico de pizza é visto na Figura 3.

de 37
Figura 3 Exemplo de gráfico em Pizza (Fonte: VisPublica)
As tecnologias testadas e analisadas pelo VisPublica capazes de construir esses
gráficos são o highCharts e o d3.
b) Gráfico em Barras
O gráfico em barras é a utilização de retângulos para representar dados em um
gráfico. Esses retângulos podem estar tanto na vertical (barChart, no DC.js) quanto na
horizontal de linhas (rowChar, no DC.js).
Esses tipos de gráficos são geralmente utilizados para comparar dados individuais;
demostrar posição de ranking; e, demostrar variação ao longo do tempo.
A tecnologia capaz de reproduzir esse tipo de gráfico é o d3.js (Data-Driven
Documents). Um exemplo de quando usar este tipo de gráfico pode ser encontrado no
portal do VisPublica e visto na Figura 4.

de 37
Figura 4 Exemplo de Gráfico em Barra (Fonte: VisPublica)
c) Gráficos em Linha
Os gráficos em linha são usados para demostrar uma serie de dados disposto em
um eixo cartesiano, onde o ponto de interseção do conjunto de valores X e Y são
representados por pontos e ligados por linhas. São geralmente utilizados para dados
onde é necessária uma visualização gráfica de um evento ao longo de um período de
tempo. Outras possibilidades de utilização desse tipo de gráfico é mostrar tendências,
considerando também a linha do tempo.
A seguir, um exemplo de gráfico em linha retirado do portal VisPublica (Figura 5).
Figura 5 Exemplo de Gráficos em Linha (Fonte: VisPublica)
As tecnologias testadas e analisadas pelo VisPublica capazes de construir esses
gráficos são o highCharts e o d3.

de 37
3 PROJETO E IMPLEMENTAÇÃO DA APLICAÇÃO WEB
Este capítulo apresenta o projeto e implementação da aplicação web. Apresenta de
maneira muito sucinta as tecnologias empregadas, e descreve como o dashboard
funciona, considerando os tipos de gráficos escolhidos e como os dados são exibidos
neles.
Por se tratar de uma aplicação Web, esta aplicação fará uso das já amplamente
conhecidas tecnologias para criação websites, como HTML5, CSS e, principalmente, a
linguagem JavaScript. Uma pequena definição que pode ser encontrada no site da W3C
(W3C, 208) sobre cada uma dessas tecnologia, que são:
a) HTML: a linguagem de marcação padrão para criar páginas em websites.
b) CSS: linguagem que descreve o estilo de um documento HTML, como os
elementos devem ser exibidos (formatados na página).
c) JavaScript: é a linguagem de programação do HTML e da Web. Essa linguagem é
executada (interpretada) no navegador do usuário.
3.1 Fluxo da Aplicação
Com os elementos básicos desta aplicação definidos, será dado o início da
explanação sobre o fluxo desta aplicação. A aplicação tem um fluxo de funcionamento
relativamente simples, os quais serão apresentados em cinco passos.
Passo 1: o usuário acessará a aplicação pelo endereço eletrônico definido e
correspondente a ela.
Passo 2: será feito a requisição da aplicação pelo navegador de internet ao servidor que
hospeda a aplicação.
Passo 3: o servidor retornará à aplicação ao usuário.
Passo 4: uma vez o usuário tendo carregado a aplicação localmente (no navegador), a
aplicação irá buscar os dados que serão usados na criação dos gráficos.
Passo 5: por último, com os dados carregados a aplicação dará início a criação dos
gráficos, utilizados os padrões de dimensões e grupos definidos na aplicação.

de 37
Observa-se na Figura 6 o fluxo de funcionamento da aplicação, representando a
descrição dos passos relatados anteriormente.
Figura 6 Fluxo de funcionamento da aplicação
3.2 Estrutura HTML da Aplicação
A aplicação está organizada em quatro páginas. A primeira página é a home,
representando a página principal com o tema da aplicação, contendo também os atalhos
para as demais páginas; todo o conteúdo é formatado no corpo principal da página home.
Alguns elementos das páginas são comuns entre elas, como por exemplo o <Header>,
que contará com o menu e a logomarca do IFPA, fixadas nas mesmas disposições para
todas as páginas. O conteúdo será apresentado em seu corpo dentro do elemento
<main>, como exemplificado na Figura 7 a qual representa bem a disposição dos
conteúdos das páginas.

de 37
Figura 7 Protótipo das páginas da aplicação web
A página conteúdo, terá as mesmas disposições dos elementos da página home,
com o diferencial de apresentar em seu corpo (<main>) informações relacionadas a
aplicação, informações essas como uma pequena explanação sobre dados abertos e o
microdados do ENEM.
A página referencias trará os referenciais teóricos utilizados na criação do
Aplicativo.
Já a página gráfico, trará a aplicação em si, com o dashboard e os gráficos
trazendo as respectivas informações filtradas nas dimensões e grupos estabelecidos. Um
exemplo do diagrama da página pode ser visto na Figura 8.
Figura 8 Protótipo da página com a Dashboard

de 37
3.3 Conjunto de dados ENEM da Aplicação
Antes de apresentar a dashboard e seus gráficos, é apresentado aqui o dataset
utilizado nesta aplicação.
Como abordado anteriormente, os dados que estão sendo utilizados nesta
aplicação é um dataset com dados consolidados sobre as médias das notas no ENEM
entre 2009 e 2017, identificados pelo código das escolas dos inscritos e a sua localização
(unidade da federação e município).
Os dados estão disponíveis no GitHub através do endereço eletrônico
https://github.com/cmartins-ifpa/educ-br, e foram publicadas pelo orientador deste
trabalho de conclusão, o Prof. Ms. Claudio Martins, do Instituto Federal do Estado do
Pará. O acesso a esse dataset é público para utilização.
Na mesma página do GitHub, há um arquivo com uma documentação simplificada
do dataset, contendo a descrição dos dados. Este arquivo é denominado “leiame-ENEM-
2009-16-escolas.csv.txt” e pode ser visto Figura 9.
Figura 9 leiame-ENEM-2009-16-escolas.csv.txt

de 37
A aplicação web busca os dados do dataset que está no repositório hospedado no
GitHub, utilizando o endereço:
https://raw.githubusercontent.com/cmartins-ifpa/educ-br/master/datasets/ENEM-2009-17-escolas.csv
Uma visão parcial do dataset pode ser observado na imagem da Figura 10.
Figura 10 Tabela Com parte dos dados consolidados do ENEM
3.4 Implementação do dashboard
O dashboard é organizado em partes delimitadas pelos tipos de gráficos para cada
grupo de informação. Vale ressaltar que o Dc.js é capaz de desenhar diferentes tipos de
gráficos, mas para esta aplicação foram escolhidos os seguintes gráficos: pieChart (ou
gráfico em Pizza), barChart (gráficos em barras disposto na vertical), rowChart (barras
na horizontal), e o lineChart (gráficos em linha).
A escolha dos gráficos foi embasada no artigo de John Willoughby (2018),
publicado com o título “Deliver a Better User Experience by Using the Right Charts”
postado no portal DZone1. Nesse artigo, Willoughby (2018) destaca a importância em
determinar os tipos de dados que será utilizado em cada gráfico, separando os dados em
dois tipos. O tipo discreto, dados que tem valor discreto e individual, sem valores entre
ele - como por exemplo tamanhos de uma roupa, e o tipo contínuo, dados com infinitos
valores, como por exemplo, a quantidade de água que pode encher um copo, que pode
ser de 100 ml, 200ml, como também pode ser 150.12345678 ml.
1 https://dzone.com/articles/deliver-a-better-user-experience-by-using-the-righ

de 37
Outro ponto que Willoughby (2018) destaca são as relações entre os pares de
dados: como o eixo X se relaciona com o eixo Y, se são dependentes ou independentes.
No caso, se para cada X existir apenas um Y, pode-se dizer que eles têm uma relação
matemática como na função Y = f(X); ou, se são apenas uma lista de valores discretos
onde x funciona de maneira independente de y.
3.4.1 Piechart – Gráficos em Pizza
Neste primeiro grupo de gráfico foi utilizado o gráfico em pizza o qual se mostrou
uma boa opção para representar partes do todo, onde o círculo é o todo e as fatias
representam cada parte.
Todos os gráficos em pizza desta aplicação possuem configurações em comum
como o comprimento de 300px (pixel), largura de 250px e um raio de 100px, o conjunto
de cores também é o mesmo para todos os gráficos desse dashboard
(d3.schemeCategory10).
A apresentação dos dados para cada gráfico em pizza foi utilizada
respectivamente as seguintes dimensões e grupos.
No primeiro gráfico em pizza, a dimensão utilizada na representação gráfica foi o
gênero, chamado no código de generoDim. Essa dimensão representa o sexo do inscrito
que poderia ser definido como “M” ou “F”, masculino e feminino, respectivamente. A
declaração da dimensão pode ser vista no código a seguir.
var generoDim = ndx.dimension(function (d) {
return d.tp_sexo === "M" ? 'Masc.' : 'Femi.';
});
O segundo gráfico em pizza representa a dimensão do tipo da administração da
escola, denominada no escopo da aplicação como tipoAdmEscolaDim. No conjunto de
dados os tipos da administração da escola são representados pelos valores 1, 2, 3, 4
(Federal, Estadual, Municipal e Particular, respectivamente). Esses valores são filtrados
e identificados para o tipo da administração correspondente para serem exibidos no
gráfico, como pode ser observado no código a seguir.

de 37
var tipoEscolaDim = ndx.dimension(escola =>
escola.tp_dependencia_adm_esc == 1 ?
'Fed' : escola.tp_dependencia_adm_esc == 2 ?
'Est' : escola.tp_dependencia_adm_esc == 3 ?
'Mun' : 'Par'
);
O terceiro gráfico em pizza representa a localidade da escola. O gráfico traz a
dimensão localEscolaDim que representa o local da escola, representando se a escola
está localizada em área urbana “1”, ou se está localizada em área rural “2” rural, como
exposto no código a seguir.
var localEscolaDim = ndx.dimension(escola => escola.tp_localizacao_esc == 1 ?
'Urbana' : 'Rural');
Para todas as dimensões foi gerado seus respectivos grupos (no código,
Dim.group()), que representam o número total de vezes que cada grupo da dimensão
aparece no dataset. Em seguida, é tratado para se apresentar em formato de
porcentagem (%), dessa maneira ficando fácil de identificar quanto porcentos cada grupo
para cada dimensão representa o seu todo, como podemos ver na Figura 11.
Figura 11 Graficos em Pizza

de 37
3.4.2 BarChar / RowChart – Graficos em Barra
O grupo dos gráficos em barra foi dividido em dois, onde o primeiro grupo tem 2
gráficos com barras verticais(barChart), e o segundo grupo tem 2 gráficos com barras
horizontais (rowChart).
Nos gráficos de barras verticais os valores do eixo X representam o número de
inscritos por ano e o número de inscritos por unidade da federação. Estes valores podem
ser classificados como discreto, pois não tem como haver um “meio participante”,
segundo o formato de análise proposto por Willoughby (2018).
Para cada gráfico será exposto suas dimensões e grupos respectivamente. No
gráfico Participação ele apresenta as seguintes dimensões:
a) anoDim: essa dimensão traz os em grupos dos respectivos anos.
var anoDim = ndx.dimension(ano => ano.nu_ano);
b) numporestaDim: é a dimensão que traz as unidades da federação;
var numporestaDim = ndx.dimension(uf => uf.sg_uf_esc);
Os grupos dessas dimensões são representados pelo total de inscritos em cada
elemento (linha) desses grupos. O total é obtido da função reduceSum, que soma o
número de participantes representados pela coluna “inscritos”, como exemplificado no
código a seguir.
var group = *Dim.group().reduceSum(function (d) {
return d.inscritos;
});
Já os gráficos em Barras horizontais, lineChart, precisou receber o tratamento de
redução com a função reduce(), personalizado para tratar e gerar as médias de maneira
correta. Esse procedimento é necessário quando as interações nos gráficos sofrem os

de 37
efeitos dos filtros. O código com as médias das notas da prova de redação pode ser visto
a seguir.
var md_redGroup = anoDim.group().reduce(reduceREDAdd, reduceREDRemove,
reduceREDInitial);
function reduceREDAdd(p, v) {
++p.count;
p.total += (v.md_red) * 1;
//console.log(p.total)
return p;
}
function reduceREDRemove(p, v) {
--p.count;
p.total -= (v.md_red) * 1;
return p;
}
function reduceREDInitial() {
return {count: 0, total: 0}; }
Os gráficos em Barras podem ser vistos na Figura 12 e 13.
Figura 12 Gráfico em Barras Verticais

de 37
Figura 13 Gráfico em barras Horizontais
3.4.3 LineChart – Gráfico em linha
O último conjunto de gráficos utilizados na aplicação é o gráfico em linha. O gráfico
em linha é uma boa opção para representar dados que representem variação no decorrer
do tempo, como por exemplo, um gráfico de intensão de votos em um candidato ao
decorrer do tempo da eleição que são apresentados geralmente em porcentagem.
O uso de gráfico em linha nesta aplicação teve como objetivo representar de
maneira visual a variação da nota média do ENEM durante as diferentes edições anuais,
tanto para as provas objetivas quanto para a redação.
A dimensão utilizada nesses gráficos foi a mesma dimensão por ano, no código
chamado de anoDim. Utilizadas nos gráficos em barras, os grupos são os mesmos
utilizados nos gráficos de barras horizontais para a obtenção das médias das notas. O
gráfico em linha pode ser visto na Figura 13.

de 37
Figura 14 Dashboard Microdados ENEM
3.5 Resultado final do dashboard
Com cada gráfico definido e explicado chegou a hora de apresentar a dashboard
em sua totalidade. A seguir, na Figura 15, pode-se conferir o resultado da formatação
completa do dashboard na aplicação. O seu uso permite a interação do usuário em cada
um dos gráficos e estabelecer filtros em tempo real no dashboard. No exemplo visto na
Figura 15, ao selecionar um sexo no gráfico “Sexo Declarado”, todos os demais gráficos
irão apresentar os dados referentes àquele sexo selecionado, como o número total de
participante por ano ou UF, ou a média das notas.
Para avaliação em situação real, a aplicação está publicada no endereço:
https://wmjohn.github.io/AppTCC/graficos.html
O código da aplicação está disponível em https://github.com/WMJohn/AppTCC.

de 37
Figura 15 Dashboard Dados sumarizados do ENEM

de 37
4 CONSIDERAÇÕES FINAIS
Este trabalho possibilitou entender como um dashboard pode auxiliar na
visualização e compreensão de informações, no caso desta aplicação web, um conjunto
de dados consolidados do ENEM. Com isso, pôde-se perceber a importância e
necessidade de tratar dados abertos (em estado primário/bruto), em um formato com
informações contendo significado para serem consumidos de uma maneira de fácil
leitura, usando gráficos interativos.
Para se atingir uma compreensão da importância e eficácia da representação
gráfica de conjuntos de dados foi desenvolvido uma aplicação web para visualização de
dados abertos em forma de gráficos, dispostos em um dashboard. O primeiro, passo foi
obter um dataset já tratado sobre dados do ENEM entre 2009 e 2017. Em seguida, foram
selecionados os grupos de dados que seriam trabalhados contendo as dimensões
presentes no dataset (ano, sexo, código da escola, médias das notas, etc). Em seguida,
foi realizado o projeto e implementação da aplicação, com a construção dos gráficos;
nesta etapa a tecnologia escolhida para geração dos gráficos foi a biblioteca JavaScript
Dc.js, por se tratar de uma das melhores soluções open-source com recursos que
permitem a criação de dashboard de qualidade.
Para finalizar, a partir dos conteúdos desenvolvidos e abordados neste trabalho, é
possível notar que a construção de um dashboard não se trata apenas de lançar dados
em gráficos. Envolve, sobretudo, a capacidade de analisar diferentes aspectos que
envolvem as informações geradas nas diferentes visões que o dashboard proporciona. A
partir deste conhecimento, e dependendo da estrutura dos dados presentes nos datasets
disponíveis, é possível a criação de aplicações com outros tipos de gráficos e
informações.
Uma possibilidade, para trabalhos futuros, é confrontar os resultados da presente
aplicação com um novo conjunto de dados e cruzar esses diferentes grupos de dados,
gerando novas informações. Por exemplo, apresentar um mapa dos municípios e estados
do Brasil, com uma visão espacial e geográfica do desempenho do ENEM, destacando
faixas com as médias das notas em diferentes escalas de cores.

de 37
REFERÊNCIAS
BRASIL. DECRETO DE 15 DE SETEMBRO DE 2011. Disponível em:
<http://www.planalto.gov.br/ccivil_03/_Ato2011-2014/2011/Dsn/Dsn13117.htm>. Acesso
em: 5 de nov. de 2018.
CAPES. Plano de dados Abertos, 2017. Disponível em:
<http://www.capes.gov.br/images/stories/download/acessoainformacao/24042017-
dados-abertos-r.pdf>. Acesso em: 7 nov. 2018.
Cartilha Técnica para Publicação de Dados Abertos no Brasil v1.0, [201-]. Disponível
em: <http://dados.gov.br/pagina/cartilha-publicacao-dados-abertos>. Acesso em: 8 nov.
2018.
CROSSFILTER. Fast Multidimensional Filtering for Coordinated Views, 2016. Disponível
em: <http://crossfilter.github.io/crossfilter/>. Acesso em: 8 nov. 2018.
D3JS.ORG. Data-Driven Documents, 2018. Disponível em: <https://github.com/d3/d3>.
Acesso em: 4 nov. 2018.
DC.JS. dc.js, 2018. Disponível em: <https://github.com/dc-js/dc.js>. Acesso em: 4 de
nov. de 2018.
EAVES.CA. The Three Laws of Open Government Data. 2009. Disponível em:
<https://eaves.ca/2009/09/30/three-law-of-open-government-data/>. Acesso em: 3 nov.
2018.
INEP. ENEM, [201-]. Disponível em: <http://inep.gov.br/web/guest/ENEM>. Acesso em:
5 nov. 2018.
INEP. Microdados, [201-]. Disponível em: <http://portal.inep.gov.br/microdados>.
Acesso em: 5 nov. 2018.
INEP. Microdados do Censo Escolar 2016 já podem ser consultados. 2017.
Disponível em: <http://portal.inep.gov.br/artigo/-
/asset_publisher/B4AQV9zFY7Bv/content/microdados-do-censo-escolar-2016-ja-
podem-ser-consultados/21206)>. Acesso em: 8 nov. 2018.
OPENDEFINITION. Definição de Conhecimento Aberto, [201-], Disponível em:
<http://opendefinition.org/od/2.0/pt-br/>. Acesso em: 5 nov. 2018.
OPENGOVDATA. The 8 Principles of Open Government Data, 2014. Disponível em:
<https://opengovdata.org/>. Acesso em: 3 nov. 2018.
OPENSOURCE. The Open Source Definition, 2007. Disponível em:
<https://opensource.org/docs/osd>. Acesso em: 3 nov. 2018.

de 37
ENEM. Exame Nacional do Ensino Médio (ENEM) – Apresentação. Disponível em:
<http://portal.mec.gov.br/ENEM-sp-2094708791>. Acesso em: 8 nov. 2018.
SILVA, Mariana Cesar Verçosa; MELETTI, Silvia Márcia Ferreira. Estudantes com
necessidades educacionais especiais nas avaliações em larga escala: prova Brasil
e ENEM. Rev. bras. educ. espec. [online]. 2014, vol.20, n.1, pp.53-68. ISSN 1413-6538.
TUTORIALSPOINT. DC.js – Introduction, [201-]. Disponívelem:
<https://www.tutorialspoint.com/dcjs/dcjs_introduction.htm>. Acesso em: 5 nov. 2018.
VISPUBLICA. Modelo de Visualização de Dados Públicos, [201-]. Disponível em:
<http://VisPublica .gov.br/VisPublica / >. Acesso em: 7 nov. 2018.
WILLOUGHBY, John. Deliver a Better User Experience by Using the Right Charts.
2018. Disponível em: <https://dzone.com/articles/deliver-a-better-user-experience-by-
using-the-righ>. Acesso em: 5 nov. 2018.
WILLOUGHBY, John. Designing Better Dashboards for Your Data. 2018. Disponível
em: <https://dzone.com/articles/designing-better-dashboards-for-your-data>. Acesso em:
5 nov. 2018.

Mota Werner TCC

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Mota Werner TCC

Semelhante a Mota Werner TCC (20)

Último

Último (20)

Mota Werner TCC