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

WERNER JOHNSON PACHECO MOTA

DESENVOLVIMENTO DE UMA APLICAÇÃO WEB COM DADOS ABERTOS SOBRE A EDUCAÇÃO BRASILEIRA

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

WERNER JOHNSON PACHECO MOTA

DESENVOLVIMENTO DE UMA APLICAÇÃO WEB COM DADOS ABERTOS SOBRE A EDUCAÇÃO BRASILEIRA

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 Instituto Federal do Pará – Campus Belém

__________________________________________ Prof. Esp. Clovis Machado de Souza Filho Instituto Federal do Pará – Campus Belém

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

Página 8 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

Página 9 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

Página 10 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.

Página 11 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.

Página 12 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.

Página 13 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.

Página 14 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.

Página 15 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.

Página 16 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

Página 17 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.

Página 18 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.

Página 19 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.

Página 20 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.

Página 21 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.

Página 22 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.

Página 23 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.

Página 24 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.

Página 25 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

Página 26 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

Página 27 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

Página 28 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.

Página 29 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

Página 30 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

Página 31 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

Página 32 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.

Página 33 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.

Página 34 de 37

Figura 15 Dashboard Dados sumarizados do ENEM

Página 35 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.

Página 36 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.

Página 37 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ível em: <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.