Gerando Grafos no Google Sheets

Como fazer uma visualização de redes organizacionais utilizando o próprio ambiente de desenvolvimento da ferramenta.

Higor Gomes
Creditas Tech
5 min readMay 5, 2021

--

Foto de The Jarkata Post Travel em Pinterest.

Introdução

Um grafo é um par (V, A) em que V é um conjunto arbitrário e A é um subconjunto de V², sendo V² o conjunto de todos os pares não ordenados de elementos de V. Os elementos de V são chamados vértices e os de A são chamados arestas [1]. Se as arestas têm um sentido associado (indicado por uma seta na representação gráfica) temos um dígrafo (grafo orientado) [2].

Alguns exemplos de aplicações de grafos são:

  • Movimentos das peças em um tabuleiro de xadrez
  • Determinar o caminho mínimo entre dois pontos
  • Determinar o fluxo máximo entre dois pontos
  • Análise de ligações químicas
  • Análise de redes organizacionais

Aqui, será discutida a criação de grafos no escopo de Análise de Redes Organizacionais, que consiste numa metodologia para analisar laços de colaboração, fluxos informativos, relacionamentos pessoais e práticas de orientações que permeiam a organização [3].

Grafos e Redes Organizacionais

Existem diversas ferramentas disponíveis para a criação de grafos, sejam elas mais complexas e com programação envolvida, ou mais simples e de forma mais direta (sempre havendo um trade off em ambos os casos). A seguir, um exemplo de uma rede utilizando grafos. Observação: é possível interagir com o objeto.

Apesar da variedade disponível de formas de gerar esse tipo de visualização, elas não são facilmente encontradas em ferramentas populares e cotidianas de geração de gráficos, como Excel, Google Sheets, Google Data Studio, entre outras. Até mesmo no Power BI, que é uma das plataformas de visualização de dados mais robustas da atualidade, precisa contar com visuais do marketplace para a construção de grafos [4].

E é aqui que este artigo entra. Existe uma maneira bastante interessante de gerar visualizações de redes organizacionais no próprio Google Sheets, utilizando um pouquinho de programação dentro do próprio ambiente da ferramenta, sendo uma maneira prática de validar bases de dados, obter insights rápidos e esboçar visualizações.

Google Apps Script

Google Apps Scripts é uma plataforma de desenvolvimento que torna mais fácil e rápido criar aplicações que interagem com o Google Workspace. A princípio, os códigos são escritos em JavaScript, podendo acessar bibliotecas integradas para os aplicativos principais, como Gmail, Agenda, Drive, Planilhas, entre outros. Não é necessário instalar nada, pois é fornecido o editor de código direto no navegador, e os scripts são executados nos servidores do Google [5].

Você pode encontrar a documentação completa da plataforma através deste link. A seguir, uma demonstração de como chegar ao ambiente de desenvolvimento por meio do Google Sheets.

Como chegar ao ambiente de desenvolvimento. Fonte: o autor.

Uma observação: o fundo original do ambiente é branco. Pra quem é fã do modo escuro (assim como eu), basta utilizar a extensão AppsScript Color, do próprio Chrome.

Gerando o Grafo

Primeiramente, iremos organizar os dados de acordo com o formato necessário para a geração do grafo. A figura a seguir ilustra quais atributos são esperados.

Planilha com os dados. Fonte: o autor.

Para os vértices (ou nodes), teremos os seguintes atributos:

  • Id: identificação do vértice
  • Color: código hexadecimal responsável por colorir o vértice
  • Size: tamanho do vértice, de acordo com o número de vezes que ele se conecta a algum outro vértice
  • Font: interpolação entre dois valores de fonte, a fim de otimizar a visualização, gerando fontes maiores para elementos de maior relevância

Para as arestas (ou edges), os atributos serão:

  • Source: o vértice de partida
  • Target: o vértice de chegada
  • Weight: o peso de cada conexão, traduzindo de forma representativa o volume de ocorrências para esse par de nós (normalizado entre 0 e 1)

Os dados selecionados são do universo Star Wars, e foram obtidos na plataforma Kaggle.

O próximo passo consiste em escrever o script que irá coletar os dados da planilha, a fim de ter uma fonte dinâmica de informação para a obtenção do grafo. Isso irá permitir você gerar uma rede organizacional para quaisquer dados (caso você seja mais fã de Star Trek, por exemplo).

De acordo com o código acima, a função getData() irá nos retornar um objeto do tipo JSON, que será utilizado pelo script responsável por gerar a visualização.

Além dos códigos em Google Scripts (JavaScript com as bibliotecas especiais) é possível escreve códigos em HTML no ambiente, aumentando ainda mais o poder da ferramenta. Isso permite a criação (e publicação!) de aplicativos web [6], além de diversas outras possibilidades, como criar um grafo dentro do Google Sheets. Assim, temos a parte do código responsável por gerar a visualização.

A biblioteca utilizada para a criação do grafo foi a Cytoscape.js, bastante versátil e poderosa para esse tipo de visualização. A documentação completa pode ser encontrada aqui. Uma parte que merece destaque no código é a linha 24:

google.script.run.withSuccessHandler(printRet).withFailureHandler(printRet).getData();

que é a API client-side responsável pela comunicação entre as funções Apps Scripts e as páginas HTML, tornando possível a comunicação entre os arquivos. Nota-se que, no caso acima, é utilizado em conjunto os métodos withSuccessHandler() e withFailureHandler(), responsáveis por retornar uma função para cada um dos casos: sucesso ou fracasso na chamada da API.

Concluindo a parte dos scripts, temos as duas funções finais (em JavaScript): a função reservada doGet(), responsável por coletar a saída HTML, e a função printGraph(), responsável por coletar a saída do código HTML e renderizar numa dialog box (na própria UI do Google Sheets).

Por fim, e não menos importante, o resultado! Ao rodar a função printGraph(), temos a nossa rede organizacional, conforme ilustrado a seguir.

Geração da rede organizacional. Fonte: o autor.

Como já sabíamos (ou desconfiávamos), R2-D2, Han Solo, Obi-Wan, Luke, Chewbacca e C-3PO são os grandes influenciadores da história!

Existem diversas possibilidades de customização da saída obtida, uma vez que a biblioteca Cytoscape.js é destinada exclusivamente para geração de grafos. Podemos passar horas e horas nos divertindo na documentação.

Conclusão

A visualização do tipo Grafo é algo que pode não ser encontrado facilmente nas ferramentas de visualização de dados mais populares. Entretanto, existem diversas bibliotecas em Python, R, JavaScript, e outras tecnologias, capazes de gerar esse tipo de saída. A proposta foi trazer uma dessas formas, com poucas linhas de código, ferramentas 100% gratuitas e customizáveis, a fim de aumentar o leque de possibilidades de quem desejar obter insights de uma rede organizacional de forma visual e prática.

O projeto completo (códigos e planilha) podem ser encontrados aqui.

--

--