Skip to main content

Data-Driven Documents (D3)

O que é D3?​

Data-Driven Documents (D3) trata-se de uma biblioteca para visualização de dados, ou seja, não é um framework. Sua utilização concentra-se na criação de charts, permitindo a customização de charts e manipulação de elementos de uma página web.

Acesse a Galeria Observable para encontrar exemplos de charts criados a partir do D3.

Primeiros passos​

Conhecimentos necessários​

Para poder utilizar o D3, é necessário conhecimentos prévios de HTML, DOM, CSS. Também é necessário já possuir afinidade com a utilização de SVG e conhecimentos básicos de JavaScript.

Todos esses conhecimentos estão presentes no Treinamento JS nas páginas de: HTML, CSS e JavaScript.

note

A utilização do Scalable Vector Graphics (SVG), formato de imagem baseada em texto, não é requisito obrigatório, mas pode facilitar o manuseio de imagens.

Preparando o ambiente​

  1. Crie uma nova pasta no projeto que será utilizado D3;

  2. Crie uma subpasta com o nome D3 - Faça o download da última atualização do D3 dentro desta pasta;

  3. Crie um documento HTML "index.html" - O documento deverá ficar parecido com o código abaixo: 

    <!DOCTYPE html>
    <html lang="en">
       <head>
           <meta charset="utf-8">
           <title>D3 Test</title>
           <script type="text/javascript" src="d3.v7.min.js"></script>
       </head>
       <body>
           <script type="text/javascript">
               // escreva aqui seu código d3
           </script>
       </body>
    </html>

  4. Visualize a página HTML ou através de um servidor localhost

Componentes fundamentais​

  • Seletores

    • select(): Utilizado para apenas uma tag HTML. Caso a tag não exista, irá retornar um valor vazio. Se houver várias tags iguais, apenas o primeiro elemento será selecionado. Imagem: exemplo de script d3 para utilizar o select
    • selectAll(): Utilizado para várias instâncias de uma tag HTML. Além disso, é possível utilizar "style" para modificar o estilo do elemento selecionado. Imagem: exemplo de script d3 para utilizar selectAll e style

  • Métodos para manipular elementos DOM

    • text(): Utilizado para adicionar ou modificar texto dentro de um elemento DOM. Imagem: exemplo de como utilizar o método text
    • append(): Utilizado para adicionar um novo elemento HTML no final de um elemento selecionado. Imagem: exemplo de como utilizar o método append
    • remove(): Utilizado para remover um elemento HTML. Imagem: exemplo de como utilizar o método remove
    • style(): Utilizado para modificar o estilo do elemento DOM selecionado, sendo permitido mudar apenas um elemento por vez. Imagem: exemplo de como utilizar o método style
    • attr(): Utilizado para adicionar um documento style sheet CSS ao elemento, facilitando o processo de estilização. Imagem: exemplo de como utilizar o método attr com JSImagem: exemplo de como utilizar o método attr com CSS

  • Método Chaining

    • Trata-se de uma técnica que permite a utilização de vários métodos juntos. Além disso, é possível escrever este método utilizando linhas separadas: Imagem: exemplo de método chaining

  • Data Joins

    • Permite fazer uma junção entre os elementos selecionados. Criar vínculos entre elementos é muito importante para visualização de dados.

    • datum(): Utilizado para fazer uma junção de dados com apenas um seletor D3. Imagem: exemplo de método datum

    • data(): Utilizado para fazer diversas junções de dados com uma série de seletores D3. Imagem: exemplo de método data

    • enter(): Utilizado para unir elementos quando há mais elementos selecionados do que elementos na variável. Imagem: exemplo de método enter

tip

Acesse o tutorial do website AlignedLeft

::caution

A versão D3 do tutorial é a 3.x., ou seja, está desatualizada. Mas, o tutorial ainda pode servir como um bom apoio de estudo.

:::

Referências​