1 VISUALIZAO DE INFORMAO, TRABALHO PRTICO, N1, MAIO 2016,UA

Socialnet Aplicao para visualizao 3D de rede de contatos Facebook

Carlos Silva
Michael Mesquita
Resumo - O presente artigo apresenta uma implementao dos conceitos de APIs de visualizao de informao em 3D usando o
Three.js, uma biblioteca JavaScript usada na computao grfica baseada em WebGL . Este trabalho resultado tem como resultado
o desenvolvimento duma aplicao para visualizar a rede de contatos de utilizadores do Facebook.
II. TECNOLOGIAS UTILIZADAS
O artigo comea por estabelecer o problema da visualizao da
rede de contactos do Facebook de um determinado usurio de
Para o desenvolvimento da aplicao foram utilizadas
forma dinmica. De seguida, apresenta-se e descreve-se de forma
ferramentas bsicas de programao 2D e 3D, concretamente
breve as ferramentas usadas para o desenvolvimento da
o Three.js uma biblioteca JavaScript baseado em WebGL.
aplicao ,a estrutura da aplicao, e explica-se o modo de
Outras APIs como o JavaScript, CSS, JQuery tambm foram
funcionamento da mesma.
utlizadas, no entanto s se explica o WebGL e o Three.js. [2]
Finalmente, apresenta-se uma concluso sobre a temtica e
O WebGL uma tecnologia que se baseia no OpenGL ES 2.0
descrio de futuras implementaes .
Abstract - This paper presents an implementation of the
concepts of 3D information visualization APIs using Three.js, a
JavaScript library used in computer graphics based on WebGL.
This work is the result is an application to view the network of
Facebook users contacts.
The article begins by establishing the problem of Facebook
contacts network displaying a particular user dynamically.
Then it presents and describes briefly the tools used to develop
the application and explained the operation mode thereof.
Finally, it presents one conclusion on the subject and
description of future

I. INTRODUO
A visualizao da Informao tem o fim de potencializar a
apropriao de informao pelo usurio, atravs do uso de
recursos grficos, o que permite uma reduo no tempo de
procura e acesso, reporte e anlise de dados. Devido a
facilidade de compreenso dasddas informaes na forma
grfica, essas podemgrficagrafica, com uma curva de
aprendizagem reduzida significa que a visualizao de dados
foi criada a ser utilizadas para vrios fins.
As redes sociais so fontes valiosas de informao que
podem ter vrias aplicaes tal como o business intelligence
entre outros. Esses informaes so geradas por milhes de
indivduos e organizaes, que interagem on-line diariamente
atravs da partilha de dados. Com isso, a anlise dessas redes
sociais fundamental para a identificao de padres,
compreenso do comportamento dos utilizadores e da
dinmica das ligaes estabelecidas.
Neste trabalho o objetivo a visualizao da rede de
amizades no Facebook, onde so mostra as pessoas que um
determinado usurio tem na sua lista de amizade.

e fornece uma interface de programao de grficos em 3D,

usando elementos canvas do HTML5 que so acedidas por
meio de interfaces DOM (Document Object Model). E o
gerenciamento de memria fornecida como parte da
linguagem JavaScript de forma automtica .
Embora consiga-se criar objetos em 2D e 3D diretamente
complexo, assim neste trabalho o seu uso se restringiu ao
necessrio. O Three.js permite a criao de objetos em
dimensionais em browser, usando a linguagem JavaScript,
sem necessidade de plugins.
O Three.js foi usado neste trabalho para renderizar cenas,
apresentao de cubos que representam cada usurio ou
amigos da rede de um determinado usurio, aplicao de
texturas, iluminao e permitir ao usurio poder rodar a rede
de amigos que so conectados na forma de grafos.
III. ESTRUTURA DA FRAMEWORK
A Framework apresenta uma estrutura que se divide por trs
reas. A rea de dados onde so armazenados os ficheiros de
dados do tipo .json, .txt ou em outro tipo de dados. De
seguida, na pasta Resources so guardados as folhas de
estilo(CSS), imagens utilizadas pela ferramenta
e os
ficheiros de script (JavaScript). Por fim temos a pasta/area
vendors, onde esto contidos ficheiros das bibliotecas
utilizadas para o desenvolvimento da ferramenta. Essa
estrutura apresentada a seguir na figura 1.
Por fim temos o ficheiro index.html, onde se faz o
carregamento de todos o scripts criados e usado, e serve para
dar inicio ferramenta.

VISUALIZAO DE INFORMAO, TRABALHO PRTICO, N1,

MAIO 2016

permitiu a partir da API do Facebook, foram o nome, id, foto

de perfil do utilizador, e um conjunto muito limitado da lista
de amigos. Na figura seguinte observamos os dados da lista
de amigos obtidos da API do Facebook.

Figura 1 - Estrutura da aplicao

IV. IMPLEMENTAO DA FRAMEWORK

A implementao da ferramenta em HTML contm o
esqueleto bsico de uma simples pgina HTML como
podemos observar na imagem seguinte. Dentro da tag
<body> esto declarados os paths tanto como para as
frameworks como para os devidos scripts essenciais para
utilizao da ferramenta.
Figura 3 - Dados dos amigos do Facebook

Figura 2 Estrutura do Index.html

Relativamente implementao dos scripts JS esto em

Detector.js e index_script_2.js. O ficheiro Detetor.js
implementa o
detetor de WebGL da Three.js. Em
index_script_2.js est a implementao da funcionalidades
da aplicao. As funcionalidades da ferramenta so leituras
de dados, interpretao e visualizao. Na leitura de dados da
API do Facebook[5] verificam-se vrias opes para o
pedido(GET, FQL, JavaScript SDK e cURL) e de resposta
Json(JavaScript Object Notation). A opo tomada foi fazer o
pedido por GET atravs do Graph API do facebook, uma vez
que de fcil implementao comparativamente s restantes
opes e obtm os mesmos resultados dado que apresenta de
request e recepo simples de implementar em javascript.
Esta escolha permitiu fazer queries sobre a lista de amigos de
usurio que teve como resposta, a apresentao dos dados em
Json (JavaScript Object Notation). Os dados retornado

Concluda a fase de obteno de dados, passou-se

interpretao dos dados recolhidos na API do facebook.
Sendo o propsito do trabalho a visualizao da rede, nesta
fase a ferramenta interpreta e renderiza dados como nome e
id, relativos uma determinada pessoa. Em seguida
interpreta os dados relativos aos amigos, o nome, id a
semelhana do anterior e para os amigos em comum caso
estes existam, e rendariza-os.

Figura 4 - Leitura da fonte de dados

Uma vez que os dados so sobre a pessoa e os seus amigos

partiu-se do princpio que podia-se criar relaes entre os
amigos. Para representar os dados sobre essas relaes
optou-se pela representao na forma de grafos. A imagem
seguinte um exemplo de como se pretende representar as
relaes de amizade entre utilizadores para um utilizador em
especfico.

3 VISUALIZAO DE INFORMAO, TRABALHO PRTICO, N1, MAIO 2016,UA

Como forma de dar destaque as amizades diretas com o

utilizador central (o cubo central), faz-se o highlight (relevo)
ao colocar-se o mouse sobre esses arcos(ligaes).

Figura 5 - grafos
Figura 9 - Highlight dos arcos entre amigos

Figura 6 - Renderizao

Na renderizao dos dados criou-se um objeto com a forma

geomtrica de cubo ao qual atribui-se ao nome dele o id do
amigo porque mais tarde vai ter alguma importncia para
criar o relevo entre amigos diretos. Tambm nesta fase
guarda-se as vrias associaes entre amigos, isto pela
mesma razo dada anteriormente.
Para visualizar os dados no plano 3D/2D colocamos
aleatoriamente os amigos diretos do utilizador na cena. E os
amigos secundrios tambm aleatoriamente num intervalo de
valores de 0 e 400px.
E para interligao das relaes utilizam-se material linha
entre os cubos que tenham ligao com o utilizador base. A
figura a seguir ilustra o cdigo usado para criar as linhas que
unem esses cubos comuns.

Figura 10 Efeito do highlight na rede de amigos

E para complementar ao retirarmos o mouse o relevo

removido.

Figura 11 Remove highlight

Figura 7-Adiciona conexo entre utilizadores(cubos)

Embora no tenha sido implementada, s faces do cubo

deviam ser adicionada fotografias de perfil do utilizador e os
seu amigos dinamicamente no momento de renderizao.
De forma a torna o grafo da rede de amigos mais interativa
para o utilizador da aplicao criou-se eventos que
reposicionam o grafo de acordo com o movimento do mouse.

Figura 8- Evento para movimento do mouse

Figura 12 Sem o efeito do highlight na rede de amigos

Se ao se renderizar a rede de amizades houver uma coliso

entre os cubos isto , dois cubos ocuparem a mesma posio
na cena, ento volta-se a renderizar a cena, este efeito
alcanado atravs da implementao do detetor de colises.

VISUALIZAO DE INFORMAO, TRABALHO PRTICO, N1,

MAIO 2016

V. CONCLUSO E TRABALHOS FUTUROS

rea de visualizao de informao uma rea bastante
promissora por permitir a visualizao de dados que a prior
parecem abstratos. Com este trabalho, foi possvel a
implementao prtica de ferramentas de desenvolvimento
grfico na criao de uma aplicao para visualizar dados da
rede de contactos de um usurio de Facebook. A visualizao
desses dados permitiu tirar informaes tais como as
amizades comuns existentes entre usurios, as amizades
existentes para um dado usurio.
Os passos futuros do trabalho consistiro em ampliar a
visualizao rede de relacionamentos de usurio atravs de
filtragem de usurios comuns em gostos como musica,
filmes, lugares frequentados entre outros, bem como a
randomizao dinmica em que ao clicar em um dado

usurio a cena se randomiza e mostra-se uma nossa rede,

neste caso a rede o elemento clicado.
BIBLIOGRAFIA
[1]

Documentao three.js. Disponvel em: http://threejs.org/docs/ .

Acessado 07 de Abril de 2016.

[2] WebGL. Disponvel em: https://pt.wikipedia.org/wiki/WebGL. Acessado

18 de Abril de 2016.
[3]

Visualizao de Three.js baseada em WebGL. Disponvel em:

https://msdn.microsoft.com/pt-br/library/dn528559(v=vs.85).aspx
.
Acessado 18 de Abril de 2016.

[4]

Material
disponibilizado
em
aulas.
http://elearning.ua.pt/course/view.php?id=837.

[5]

Obteno
de
dados.
Disponvel
https://developers.facebook.com/tools/explorer/.

Disponvel

em:
em: