O D3 é uma abreviação de Documentos Dirigidos por Dados, e o D3.js é uma biblioteca de recursos JavaScript para gerenciar documentos baseados em dados. D3 é um dos frameworks mais eficazes para trabalhar com visualização de dados. Ele permite que o desenvolvedor crie visualizações de dados dinâmicas e interativas no navegador com a ajuda de HTML, CSS e SVG. Visualização de dados é a representação de dados filtrados na forma de imagens e gráficos. Representações gráficas ou pictóricas apresentam até mesmo conjuntos de dados complexos com facilidade. Além disso, análises comparativas ou padrões podem ser facilmente rastreados com a ajuda da visualização de dados, permitindo que o cliente tome decisões sem muito brainstorming. Tais visualizações podem ser facilmente desenvolvidas usando frameworks como D3.js. Mike Bostock escreveu o framework D3. Antes do D3, o toolkit Protovis era amplamente utilizado para Visualizações de Dados. Embora haja muitos outros frameworks para visualização de dados, o D3.js deixou sua marca por causa de sua flexibilidade e facilidade de aprendizado.
Configurando o ambiente do D3.js:
Passo 1: Para usar o D3.js em um site ou página da web, a primeira coisa que precisa ser feita é instalar ou importar a biblioteca na página da web. O D3 é uma biblioteca de código aberto. O código-fonte está disponível gratuitamente no site do D3.js. Baixe a versão mais recente da biblioteca (atualmente 5.7.0). Baixe a biblioteca D3 a partir do link de origem.
Passo 2: Descompacte o arquivo .zip obtido após o término do download. Localize o arquivo d3.min.js, que é a versão mínima do código-fonte do D3. Copie esse arquivo e inclua-o na pasta raiz ou no diretório principal da biblioteca da página da web. Na página da web, inclua o arquivo d3.min.js conforme mostrado:
<!DOCTYPE html> <html lang="pt-BR"> <head> <!-- Adicionando o fonte do 3djs --> <script src="../d3.min.js"></script> </head> <body> <script> // Código 3d aqui... </script> </body> </html>
Exemplo: Neste exemplo, podemos ver que ao utilizar o método d3.greatest(), conseguimos obter o maior valor da sequência a partir de um array.
Nome do arquivo: index.js
// Defining d3 contrib variable
var d3 = require('d3');
var gfg = d3.greatest([5, 4, 3, 2, 1])
console.log(gfg)Saída:
5
Vantagens:
- O D3 suporta padrões web como HTML, CSS e SVG, que são conhecidos por todos os programadores, portanto, pode ser facilmente utilizado por qualquer pessoa. Em resumo, o D3 expõe as capacidades dos padrões web como HTML5, CSS3 e SVG.
- É bastante leve e flexível com código reutilizável, portanto, é preferível.
- Ele dá um controle maior ao usuário para gerenciar a visualização e os dados do que outras APIs ou frameworks disponíveis.
- Sendo um framework de código aberto, pode-se facilmente manipular o código-fonte do D3 conforme a necessidade.
Desvantagens:
- O D3 não é compatível com versões mais antigas de navegadores. Caso alguém deseje visualizar os dados com compatibilidade retroativa, a visualização pode necessariamente ser estática, devido à baixa compatibilidade.
- A segurança ainda é um desafio para o D3. Os dados não podem ser facilmente ocultados ou protegidos usando o D3.