Criando Visualizações de Dados e Dashboards Interativos com D3.js

Jul 20, 2018

Fala, pessoal! Beleza?

Bom, neste artigo falarei sobre como podemos criar visualizações de dados & Dashboards totalmente interativos com a bibliotecas do JavaScript: D3.js.

Já estava sentindo saudades de vocês! Vamos matar essa saudade agora?

O que é D3.js?

O D3.js é uma biblioteca do JavaScript que ajuda a manipular documentos baseados em dados, e o mais legal dessa biblioteca é que você pode fazer a integração desses dados usando: HTML, CSS e SVG.

Por que eu resolvi escrever sobre isso? Porque eu estava realizando um trabalho dentro de uma empresa de seguros (a qual não posso mencionar), e eles precisavam fazer uso de alguma biblioteca que precisasse integrar as informações/dados do sistema para a WEB.

E a solução (até o momento) que eles estavam pensando, era o Neo4j Graph, outra excelente biblioteca – a qual poderei escrever outro artigo a respeito. Mas, devido a alta complexidade da biblioteca e falta de documentação, acabaram desistindo e indo para uma outra opção (agora não sei, uma vez que não estou mais lá).

Bom, como sou uma pessoa super curiosa, quando cheguei em casa eu procurei realmente testar o Neo4j e também achei um pouco complexo. Mas, quando eu encontrei o D3.js, foi desse jeito:

Por que do nome D3.js? Significa “Data-Driven Documents”, e o melhor disso; é open source e vocês podem ajudar na contribuição dessa maravilhosa biblioteca!

Os recursos que essa biblioteca nos fornece são inúmeros! Entre eles: geração de visualizações simples e complexas, interações com o usuário e efeitos de transição, fácil manipulação, já que faz uso de programação declarativa, e entre vários outros recursos!

E os benefícios também são inúmeros entre elas: você não precisa de nenhum plugin, ótima visualização de dados, e a melhor parte: permite a manipulação do DOM.

Veja abaixo alguns gráficos feitos usando o D3.js:

Ok, eu falei bastante sobre os benefícios e recursos que essa biblioteca JavaScript nos dá, mas, como todo bom desenvolvedor(a), vamos começar a brincar!

Demo! Demo! Demo!

Calma, gente! Vamos à demo, então. Para isso, peço que usem os seguintes recursos:

  • Visual Studio Code
  • Node.Js

Sim, simplesmente disso que precisaremos. Vamos agora, passo a passo, desenvolver um simples gráfico usando o D3.js.

Primeira coisa: peço que procurem estruturar o projeto, conforme a imagem abaixo:

Notem que incluí três arquivos na pasta 'src':

  • index.html
  • index.js
  • index.css

Vamos focar nesses três arquivos contidos dentro da pasta src! É justamente aí que toda a brincadeira vai começar! Vamos instalar o D3.js via npm no projeto. Para isso, peço que executem os seguintes comandos: 

> npm install http-server -g
> npm install --save-dev d3

Feito isso, podemos agora começar a desenvolver. Abram o Visual Studio Code e vamos começar criando o estilo para o nosso gráfico. Para isso, vamos começar a desenvolver o arquivo: index.css: 

.chart div {
    font: 12pxsans-serif;
    background-color: #8A2BE2;
    padding: 4px;
    margin: 2px;
    color:  #FFF8DC;
}

Até aqui, nada diferente. Estamos criando uma classe chamada ‘chart’, a qual, dentro dessa div, haverá todo esse estilo pré-determinado aqui!

Bom, vamos ao segundo passo, dessa vez, no arquivo index.html. Inclua o seguinte código abaixo: 

<div class="chart">
</div>

Beleza! Agora vamos para o arquivo onde a brincadeira vai funcionar! Abra o arquivo index.js e coloque o seguinte bloco de código abaixo: 

/**
*
* Arquivo: index.js
* Data: 17/07/2018
* Descrição: Desenvolvimento de um simples gráfico usando a biblioteca do Js: D3.js
* Author: Glaucia Lemos
*
*/

var data = [56, 89, 125, 264, 397, 451, 582, 654];

d3.select(".chart")
 .selectAll("div")
 .data(data)
 .enter()
 .append("div")
 .style("width", (d) => {
 return 'R$ '+ d;
});

Bom, vamos entender alguns pontos aqui. Na linha 10 podemos ver a criação de um array com oito valores que estarão no nosso bar chart.

Das linhas 14 a 19, já estamos definindo alguns itens que serão importantes para a criação do nosso gráfico. O selectAll pegará todos os itens dentro de uma determinada div. Já o método data retornará o nosso array declarado acima e o método enter servirá para retornar um determinado elemento do DOM, que será encontrado. Já o método ‘append‘ retornará uma nova seleção contendo elementos anexados, que neste exemplo é a div.

Bom, explicando agora o que é cada parte, vamos prosseguir com o nosso desenvolvimento.

Voltemos ao arquivo index.html. Inclua o seguinte bloco de código:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Gráfico de Ganhos - iMasters</title>

    <!-- Inclusão da biblioteca do D3.js via cdn -->
    <script src="https://d3js.org/d3.v3.min.js"></script>

    <!-- Inclusão do estilo do gráfico -->
    <link rel="stylesheet" href="index.css">
</head>

<body>

    <div id="dashboard">
        <p>Ganhos de Vendas</p>
        <div class="chart">

        </div>
    </div>

    <!-- Chamada do arquivo 'index.js' (parte da lógica) -->
    <script src="index.js"></script>
</body>

</html>

Feito isso, vamos voltar agora para o arquivo index.css para fazer algumas alterações por lá. Vejam o código abaixo: 

.chart div {
    font: 12px sans-serif;
    background-color: #8A2BE2;
    padding: 4px;
    margin: 2px;
    color:  #FFF8DC;
}

#dashboard {
    width: 450px;
    border: 1px solid black;
}

p {
    text-align: center;
}

Aqui, incluímos os estilos para dashboard e p; simples assim e em seguida, vamos para o arquivo index.js: 

/**
 *
 * Arquivo: index.js
 * Data: 17/07/2018
 * Descrição: Desenvolvimento de um simples gráfico usando a biblioteca do Js: D3.js
 * Author: Glaucia Lemos
 *
 */

var data = [56, 89, 125, 264, 397, 451, 582, 654];

var scale = d3.scale.linear()
    .domain([0, 654])
    .range([0, 400])

d3.select(".chart")
    .selectAll("div")
    .data(data)
    .enter()
    .append("div")
    .style("width", (d) => { return scale(d) + 'px' })
    .text((d) => {return 'R$ ' + d; });

Notem que houve uma alteração no código comparado a primeira parte do desenvolvimento desse arquivo. Incluímos uma variável 'scale', justamente para determinar o range do tamanho do gráfico dentro da div!

Vamos ver como vai ficará em ação? Abram o prompt de comando dentro da pasta onde vocês criaram o projeto e execute o seguinte comando:

> http-server

Vá até o browser e digite: localhost:8080/src/index.html e veja o resultado:

Lindo, não? Dá para fazer muita coisa com o D3.js. Basta dar uma olhada nos examples contidos no repositório da biblioteca, neste link.

Palavras finais

Já venho mostrando em alguns artigos o poder que o JavaScript nos dá. Simplesmente podemos fazer qualquer coisa – mas qualquer coisa quando fazemos uso do JavaScript. Procurem sempre estudar JS e terão o poder em suas mãos!

Falando em estudar, estou com o seguinte workshop: “Criando uma App REST API com Node.js & MongoDb” voltado para níveis iniciante a intermediário! Para quem quiser, está um preço muito bom e será totalmente online.

Caso estejam interessados, façam a inscrição através deste link, mesmo que não dê para fazer online no dia, não tem problema, eu enviarei o material do workshop por e-mail para cada participante que se inscrever.

É isso, pessoal! Até a próxima.