O que é D3.js? Uma poderosa ferramenta de Visualização de Dados. — Parte 1
Visualização de dados, como o próprio nome sugere, consiste na representação gráfica de informações de um determinado conjunto de dados utilizando elementos e efeitos visuais. Um exemplo simples de visualização que nos deparamos muito no dia-a-dia é um gráfico de barras ou de linha, este último bem comum para resultado de eleições. No entanto, podem ser necessárias várias técnicas para construir uma boa visualização que possa transmitir para o usuário o significado e respostas que possam ser obtidas pelos dados existentes. Para auxiliar na construção de visualizações existe uma excelente biblioteca para JavaScript chamada D3.js que será assunto deste texto.
A importância e uma breve introdução a Visualização de Dados
Quando você tem dados muitas informações podem ser extraídas e perguntas podem ser respondidas através de análise, o problema é que a identificação destes quesitos pode ser bem difícil se não existe uma representação visual. Quando você analisa os dados com uma ferramenta visual adequada surgem padrões, conexões e descobertas que poderiam passar despercebido. Por exemplo, você pode ter as porcentagens de dados de uma eleição, mas será muito mais fácil comparar os resultados se houver um gráfico ou até mesmo acompanhar o crescimento de candidatos através de um gráfico de linhas.
A visualização de dados dá vida aos dados permitindo que uma história seja contada aos usuários por meio de insights ocultos nos números. Quando olhamos para um gráfico, vemos imediatamente tendências e exceções. Internalizamos rapidamente tudo que podemos ver. Dashboards dinâmicos, relatórios interativos, gráficos, diagramas e outras representações visuais ajudam a revelar insights importantes sobre os negócios com rapidez e eficiência. A aplicação pode ocorrer em diversas ocasiões: para demonstrar tendências, mostrar relações, compreender impacto de novas estratégias que podem ser usadas em diversas áreas como jornalismo, aplicativos, relatórios e vários outros cenários de compartilhamento de informações.
Além disso, no mundo do BigData, ferramentas e tecnologias de visualização de dados são essenciais para que enormes quantidades de informações sejam analisadas auxiliando na tomada de decisões. Existe um exemplo clássico quando falamos em visualização de dados: o metrô de Londres. O tube, como é chamado, tem 11 linhas e 270 estações. As informações básicas são uma lista de estações em ordem alfabética e nomes das linhas. Mas, sem um mapa, que é uma visualização, locomover-se no metrô pode ser uma tarefa bem complicada. Nele fica claro como chegar de uma estação a outra, que linha pegar e mesmo saber quantas estações intermediárias existem e se será necessário trocar de linha e em qual estação fazer isso.
“Visualization is a form of knowledge compression”.
— David McCandless, no TED 2010, “The beauty of data visualization”
Visualização de dados pode ser um pouco mais complexo
Quando se fala em visualização de dados muitas pessoas podem pensar em gráficos de barras, linhas, colunas e o icônico gráfico de pizza. Mas, embora sejam úteis (o de pizza de nem tanto) e muito utilizados, existem várias outras visualizações que podem ser utilizadas e que pode ser que você nem conheça e que possam transmitir muita informação ao usuário.
A interatividade com a visualização é outro ponto chave quando pensamos em representar dados ao usuário. No exemplo a cima (feito utilizando D3) quando se passa o cursor nas arestas (“bolinhas coloridas” — vamos facilitar a linguagem), o nome do arquivo e outras informações são exibidas para que o usuário compreenda um pouco mais a mensagem transmitida.
Existem também os Dashboards que são painéis que mostram métricas e indicadores importantes para alcançar objetivos e metas traçadas de forma visual, facilitando a compreensão das informações geradas. Quando são interativos e as visualizações comunicam entre si melhor ainda ao usuário, veja o exemplo abaixo.
Existem vários outros fatores que interferem em uma boa visualização de dados como o conjunto de cores utilizada e também a acessibilidade: você já pensou que uma pessoa daltônica pode ver sua visualização? Geralmente o simples é o melhor: Prefira cores suaves, exceto quando quer realçar dados específicos; Use apenas uma cor, a menos que você precise indicar diferença nos dados; Use uma única cor neutra ao fundo; Use uma cor de fundo que contraste de forma suficiente com os objetos;
D3 permite que você crie as mais diversas visualizações
D3.js é uma biblioteca javascript para a visualização de informação criada por Mike Bostock e publicada no IEEE Vis 2011 permitindo que você construa aplicações em que os dados entram puros e são dinamicamente associados em representações gráficas. Sendo assim, D3 é web, não sendo necessariamente uma biblioteca para gráficos, mapas e desenho em SVG.
D3 permite manipular DOMs de forma simples e então aplicar transformações nos documentos segundo os dados de interesse. Por exemplo, você pode usar D3 para gerar tabelas HTML a partir de um array de números. Ou ainda, usar os mesmos dados para criar uma gráfico em barra em SVG que reage aos movimentos do mouse mudando de cor.
D3 não é uma biblioteca monolítica que procura prover todas as características possíveis e desejáveis. Em vez disso, D3 resolve um problema chave: manipulação eficiente de documentos a partir de dados. Isso evita representações proprietárias e permite flexibilidade, fazendo uso de tecnologias web abertas como SVG, HTML5 e CSS3.
Com mínima sobrecarga, D3.js é bastante rápido, suporta de forma dinâmica grandes conjuntos de dados para animações e interações. Sendo assim, o D3.js é usado em centenas de sites espalhados pela web. Alguns usos populares incluem a criação de gráficos interativos para sites de notícias on-line, painéis de informação para a visualização de dados e produzir mapas de GIS, por exemplo. Além disso, a natureza exportável do SVG permite que os gráficos criados pelo D3 sejam usados em publicações impressas.
Incorporada a uma página da Web HTML ,o D3 usa funções JavaScript pré-criadas para selecionar elementos, criar objetos SVG, estilizá-los ou adicionar transições, efeitos dinâmicos, tooltips, entre outros. Esses objetos também podem ser amplamente estilizados usando CSS. Conjuntos de dados grandes podem ser facilmente vinculados a objetos SVG usando funções simples do D3 para gerar gráficos e diagramas de rich text / graphic. Os dados podem estar em vários formatos, geralmente JSON , CSV ou geoJSON , mas, se necessário, as funções JavaScript podem ser gravadas para ler outros formatos de dados.
O estilo funcional do D3 permite a reutilização de código por meio de uma coleção diversificada de módulos oficiais e desenvolvidos pela comunidade .
Como começar a criar visualizações com D3?
Se você é leigo(a) em tecnologia, fique tranquilo(a) que no próximo texto irei aprofundar no assunto e detalhar melhor, o intuito no momento é fornecer um panorama geral do assunto. Entretanto, algumas dicas são válidas e úteis para poder compreender melhor como utilizar essa poderosa biblioteca.
Tudo que você vai precisar é de começar criando um documento HTML, sem instalação de softwares. Entretanto, precisará programar em JavaScript, criar páginas utilizando HTML e estilos com CSS, diria que esses são pré-requisitos.
A primeira informação útil é que existem diferentes versões da biblioteca, onde recursos são atualizados para melhorar o D3 e criar novas possibilidades para o usuário e correções de bugs. No entanto, existe uma grande diferença entre as versões 3 e 4, que tornam alguns recursos incompatíveis. Ou seja, você deve escolher alguma dessas versões, o aconselhável é a 4° ou superior e pesquisar tutoriais e recursos relacionados a ela uma vez que muitas coisas da versão anterior não vão funcionar. Atualmente o D3 está em sua 5° versão.
A segunda informação útil é muito importante: visite o GitHub oficial do D3, lá tem tudo que você precisa e mais um pouco.
Instalação
Para iniciar o desenvolvimento você poderá: Baixar a biblioteca diretamente do site do D3 ou então usar o npm (npm install d3) . Você também poderá carregar diretamente do d3js.org, CDNJS, ou unpkg. Por exemplo:
/* V5 */
<script src="https://d3js.org/d3.v5.js"></script>/* For the minified version: */
<script src="https://d3js.org/d3.v5.min.js"></script>/* You can also use the standalone D3 microlibraries */
<script src="https://d3js.org/d3-selection.v1.js"></script>
Criando uma visualização simples
Seguindo o exemplo publicado pelo imasters, comece colocando seguinte svg no seu HTML:
/* SVG com a largura e altura definidos estaticamente */
<svg width='200' height='500'></svg>Agora, no JavaScript iremos definir que dados que serão utilizados. No exemplo um array de idades.
// Criacao de um array com idades que serao usados na visualizacao
var idades = [12, 23, 34, 45, 56];O seguinte código será responsável por criar a visualização:
// Define a altura da barra
var alturaBarra = 20;// Cria o grafico (svg) utilizando diferentes atributos.
var grafico = d3.select('svg')
.selectAll('rect')
.data(idades) // Recebe o array dos dados definido anteriormente
.enter()
.append('rect')
.attr('width', function(idade) { return idade; })
.attr('height', alturaBarra - 1)
.attr('transform', function(d, i) {
return "translate(0," + i * alturaBarra + ")";
});
Resultado:
Série de Visualização de Dados
- O que é D3.js? (Parte 1 — Disponível)
- Como fazer minha primeira visualização em D3? (Parte 2 — Breve)
Agradecimentos e avisos
- Obrigado Lina Otoni por sugerir o assunto! Se você possui alguma sugestão de pauta basta mandar uma mensagem no Telegram ou nos comentários deste texto ;)
- Estou criando um Podcast onde falo dos textos que escrevo aqui no Medium, você pode encontrar no Spotify (clique aqui) ou no Sound Cloud (clique aqui).
