1

Estudo compartilhado, uma introdução prática à Visualização de Dados

#JavaScript #CSS
Italo Adler
Italo Adler

Segundo o Google Tradutor, a D3.js é uma biblioteca JavaScript para manipular documentos com base em dados. D3 ajuda você a dar vida aos dados usando HTML, SVG e CSS. A ênfase da D3 nos padrões da web oferece todos os recursos dos navegadores modernos sem se prender a uma estrutura proprietária , combinando componentes de visualização poderosos e uma abordagem orientada a dados para manipulação de DOM.


Minha abordagem aqui é apresentar os conceitos fundamentais de forma prática, discutiremos as questões teóricas no decorrer do percurso. Dito isso, vamos para a prática!

Baixemos aqui o zip com código fonte, após descompactar os arquivos, vamos abrir a pasta d3 em nosso editor de preferência. Aproveitem para fazer um scanning no código do arquivo d3.js onde estão implementadas as funções da D3, tem muita coisa interessante nessas 19719 linhas.


                      var paragraphs = document.getElementsByTagName("p");
                      for (var i = 0; i < paragraphs.length; i++) {
                        var paragraph = paragraphs.item(i);
                        paragraph.style.setProperty("color", "blue", null);
                      }
                      

Analisemos o código acima, temos uma variável chamada paragraphs que recebe o resultado do retorno da função getElementsByTagName, passando como parâmetro a string "p" chamada pelo objeto document, então nossa variável paragraphs será um lista de todos parágrafos nos documentos. Que documentos? No documento HTML, representado pelo o objeto JavaScript document.


Após a declaração, temos um for loop que itera sobre a lista de parágrafos onde para cada item dessa lista nos armazenamos em uma variável paragraph (no singular), um parágrafo da lista.

Para cada parágrafo dessa lista, atribuímos a cor azul, representado pela segunda instrução do for loop, onde usamos a função setPropety, passando três parâmetros, os dois primeiros strings, a primeira representando a propriedade a ser afetada e a segunda o valor dessa propriedade, no caso o valor azul para a propriedade cor (color), e por ora, ignoremos o terceiro parâmetro.


(Este é apenas um teste) (Em construção e reconstrução) (Leia o texto final no dia 26 de março de 2021)

2
19

Comentários (2)

0
Italo Adler

Italo Adler

25/03/2021 01:36

Acessem a página oficinal da D3, tem uma documentação execelente para quem está afinado no Inglês.



0
Italo Adler

Italo Adler

25/03/2021 01:34

Por ora esta foi apenas uma provocação para todos vocês meus amigos da comunidade.

None

Brasil