Produza animações, ilustrações e dados perfeitos com essas bibliotecas JavaScript

No post de hoje, vamos dar algumas dicas de bibliotecas de JavaScript para facilitar sua vida na hora de programar linhas de código para criar imagens como esta acima em um navegador da web.

Felizmente, o navegador oferece várias APIs e superfícies de desenho de alta potência. Os mais notáveis ​​são o elemento da tela e os gráficos vetoriais escaláveis ​​(SVG). Agora, esses dois recursos estão disponíveis em quase todos os navegadores de desktop e dispositivos móveis, mas as APIs necessárias para usá-los são de nível bastante baixo e ‘baixo nível’ normalmente se traduz em muitos códigos tediosos e redundantes apenas para fazer coisas simples.

Como escrever código tedioso e redundante não está no topo da lista de coisas que os desenvolvedores geralmente gostam de fazer, mesmo com os melhores editores de código, felizmente existem várias bibliotecas disponíveis para ajudá-lo com todos os requisitos de desenho do navegador.

Neste artigo, vamos dar uma olhada em algumas das opções disponíveis. Vamos explorar as bibliotecas JavaScript mais populares e falar sobre quais são seus pontos fortes e fracos. 

Vamos à lista:

01. D3.js

D3.js é uma das grandes bibliotecas de gráficos JavaScript. Com mais de 875 mil downloads semanais em npm, é possivelmente o mais conhecido e amplamente usado de todas as bibliotecas gráficas. Ele ainda tem sua própria página da Wikipedia.

O D3 permite criar visualizações de dados de qualquer tipo. Você só precisa dar uma olhada na página de exemplos para ver o mundo de possibilidades. 

D3 é uma ferramenta abrangente. Possui sua própria seleção de DOM, recursos AJAX e até um gerador de números aleatórios proprietário. Cada componente do D3 é seu próprio módulo Node que deve ser importado. Por exemplo, o módulo de seleção é chamado de seleção d3. Também existem módulos para matrizes, formas, cores, arrastar e soltar, tempo e muito mais.

O poder do D3 vem com o trade-off de complexidade. A curva de aprendizado pode ser íngreme e o código ainda pode parecer detalhado. Construir algo tão simples quanto um gráfico de barras exige que você monte manualmente o eixo, as escalas, os ticks e até desenhe os retângulos que representarão as barras. Os desenvolvedores costumam reclamar do entendimento de baixo nível necessário para ser eficaz com o D3.

Isso ocorre principalmente porque a criação de visualizações complexas de dados exige que você tenha um entendimento de baixo nível da visualização que deseja criar. D3 não é a melhor opção para gráficos pré-cozidos. Para isso, existem várias outras opções que o encontrarão no ‘poço do sucesso’ muito mais rapidamente.

D3 é capaz de renderizar em canvas e SVG. No entanto, a verdadeira mágica do D3 está em sua capacidade de ‘vincular dados’ aos gráficos que gera. Pense em um gráfico que muda conforme os dados recebidos mudam. Com o SVG, cada item gráfico é um elemento individual que pode ser selecionado e atualizado. Isso não é possível com o canvas e, como o D3 é fundamental para fornecer visualizações de dados, o SVG geralmente é o formato de saída preferido.

02. Chart.js

O Chart.js é um projeto de código aberto para criar gráficos robustos com JavaScript. A grande diferença entre o Chart.js e o D3 é que, embora você possa criar praticamente qualquer coisa com o D3, o Chart.js o limita a oito tipos de gráficos pré-criados: linha, barra, torta, polar, bolha, dispersão, área e mista. Embora isso pareça limitante, é o que torna o Chart.js mais simples para começar. Isso é especialmente verdade para quem não é especialista em dados, mas conhece um gráfico básico.

A sintaxe é toda criada em torno de um tipo de gráfico. Você inicializa um novo gráfico em um elemento de tela existente, define o tipo de gráfico e, em seguida, define as opções do gráfico. O Chart.js é processado apenas na tela. Isso não é um problema, pois todos os navegadores modernos suportam o elemento de tela HTML, mas pode ser um problema para desenvolvedores que têm requisitos para suporte a SVG.

Isso também significa que você é limitado nas animações possíveis. Pronto, o Chart.js oferece suporte a todas as equações de flexibilização e as animações são especificadas com uma configuração de propriedade. Embora isso facilite e obtenha rapidamente um gráfico animado, não ter elementos SVG individuais impede que você possa fazer animações complexas usando transições e animações CSS3.

Ao contrário do D3, o Chart.js não é modular. Portanto, é necessário apenas uma inclusão de JavaScript para obter suporte para todas as funções e tipos de gráfico. Isso facilita a introdução, mas significa que seus ativos podem ser muito maiores. É muito mais fácil criar um gráfico de barras com o Chart.js do que com o D3. Geralmente, os desenvolvedores começam com uma solução como o Chart.js e depois passam para o D3.

Se a simplicidade do Chart.js lhe agrada, você pode realmente gostar da próxima opção: Chartist.

03. Chartist

O Chartist é uma biblioteca de gráficos simples de tamanho pequeno e fácil de começar. Também foi projetada para responder por padrão. 

O Chartist é minúsculo em comparação com o Chart.js. Ele pesa apenas 10 KB com zero dependências. Isso pode ser porque ele oferece apenas três tipos de gráfico: linha, barra e torta. Existem variações dentro desses tipos (ou seja, o gráfico de dispersão é um tipo de linha no Chartist), mas o tamanho pequeno e a facilidade de configuração são compensados ​​pela falta de tipos de gráficos prontos para uso.

O Chartist renderiza o SVG em vez do canvas, tornando-o muito mais personalizável em termos de aparência, além de fornecer muito mais controle sobre interatividade e animações. No entanto, não ter acesso de renderização a uma tela significa que você pode ter mais dificuldade em executar determinadas ações. Por exemplo, existe uma API para renderizar uma tela em uma imagem (toDataURI). Essa opção não existe para SVG, portanto, a exportação de um gráfico como imagem será muito mais complicada. 

Os gráficos do Chartist são mais fáceis de configurar do que o Chart.js, pois há menos opções disponíveis. Embora seja possível estender esses gráficos com bastante funcionalidade, seu foco na simplicidade significa que eles são, por definição, simples. 

O Chartist é uma ótima solução para quem precisa de uma solução básica de gráficos. Os gráficos são inerentemente difíceis de configurar, pois exigem algum tipo de conhecimento sobre como configurar os dados ao longo de determinado eixo e agrupados de determinadas maneiras. 

O Chartist torna a parte do gráfico o mais simples possível, mas você pode precisar de uma solução mais poderosa à medida que se sentir mais confortável em gerar seus gráficos.

O Chartist também lista o suporte à estrutura de código aberto, incluindo React e Angular. Não há menção de um Vue package em seu site.

04. Britecharts

Britecharts é uma biblioteca de gráficos que envolve o D3. Foi feito pela Eventbrite, que então abriu o projeto sob a licença permissiva do Apache V2. Ele oferece um conjunto de gráficos mínimos, porém esteticamente agradável. 

Britecharts tem suporte para todos os tipos básicos de gráficos: linha, barra, rosca, marcador, gráfico de dispersão, sparkline e etapa, que é mais do que os oferecidos por bibliotecas como o Chartist. Ele também fornece funcionalidade básica de dica de ferramenta e legenda. As animações para os gráficos são integradas e a Eventbrite forneceu alguns belos esquemas de cores.

Por fim, Britecharts é uma ótima opção para a funcionalidade básica de gráficos. Os objetos de configuração são bastante simples e você ainda obtém o poder do D3 debaixo das cobertas sem precisar saber nada sobre o próprio D3. Muitos desenvolvedores acharão essa uma opção mais atraente do que simplesmente construir um gráfico completo desde o início com o D3.

Ele também se concentra nos aspectos de conexão de dados do D3, tornando-o bom para gráficos que precisam mudar conforme os dados subjacentes mudam. Embora seja um pouco restritivo nos tipos disponíveis, ele também possui um tipo de gráfico básico que você pode estender para criar novos tipos de gráficos.

05. Taucharts

O Taucharts é outra solução de gráficos que envolve a complexidade do D3 em uma API fácil de implementar. Ele foi criado com base nos conceitos de The Grammar of Graphics, um livro da autora Leland Wilkinson. Ele fornece entendimento de quando e como usar os diferentes tipos de visualizações de gráficos, assim como, diferentes tipos de dados.

Taucharts apresenta gráficos de linhas, barras, gráficos de dispersão, área e faceta. No entanto, ele implementa os conceitos da gramática dos gráficos na ‘Taucharts Language‘, que fornece uma estrutura na qual você implementa suas próprias visualizações de dados.

O Taucharts parece bastante atraente e o fato dele ter sido construído no D3 o torna uma opção atraente e poderosa. No entanto, existe a sensação de que o desenvolvedor também precisa ler  The Grammar of Graphics  para aproveitar totalmente seu poder.

06. Two.js

Para não confundir com o D3.js., o two.js é uma biblioteca JavaScript de código aberto para desenho bidimensional na Web. Também é capaz de direcionar as três opções gráficas em navegadores modernos: SVG, Canvas e WebGL.

O Two.js é um pouco semelhante ao D3, pois é estritamente focado no desenho e não possui gráficos pre-baked ou estruturas interativas para você escolher. Isso significa que, assim como o D3, você precisa de um entendimento subjacente do tipo de desenho que está tentando fazer e como conseguir isso com as construções que o two.js fornece. Desenhar um círculo é simples. Construir uma animação detalhada, por outro lado, é muito mais complicado. 

Ele possui um loop de animação interno, que evita que você se preocupe com os quadros de animação e facilita a ligação em uma biblioteca de animação como o GreenSock.

Embora o two.js seja poderoso, sua natureza de forma livre pode deixar alguns desenvolvedores inseguros sobre como usar e essa é mais uma ferramenta de nicho para desenho e animação em 2D. Outra excelente opção é pts.js.

07. Pts.js

Pts também é uma biblioteca de desenho bidimensional. No entanto, é fundamentalmente diferente de two.js, pois utiliza uma metodologia predeterminada para a montagem de desenhos e animações: espaço, forma e ponto. A analogia que seus desenvolvedores usam para explicar isso é do mundo físico. Espaço é papel. Forma é o lápis. E o ponto é a sua ideia.

Em termos de implementação, o espaço é um elemento de tela. Depois que o elemento canvas é criado, você pode adicionar itens a ele. Estes itens, podem ser funções ou objetos. Essas funções e objetos devem estar em conformidade com a interface predeterminada que um espaço possui. O Pts é baseado no TypeScript, portanto, não há necessidade de adivinhar quais são, pois as ferramentas usadas provavelmente sugerem as que são preenchidas automaticamente.

Pts foi projetado principalmente para criar visualizações e animações interativas. Sua implementação é interessante, embora bastante abstrata. Os desenvolvedores podem ter dificuldade de entender o modelo de ‘espaço, forma, ponto’ exigido pelo Pts. Esse é outro obstáculo mental que terá que ser resolvido além do simples desenho e animação de formas.

08. Anime.js

Anime.js é uma biblioteca de animação. Ele possui um sistema de escalonamento interno para tornar mais simples ter animações complexas que se sobrepõem ou dependem da ocorrência de outra execução. É comum que as animações sejam cronometradas juntas ou acionadas uma pela outra. 

Ao contrário das bibliotecas de desenho faladas até agora, o anime.js não possui APIs para desenhar formas. Em vez disso, suas formas já existem e você pode animá-las. Isso o torna diferenciado dos outros, para uso de bibliotecas como two.js. O Anime.js tem suporte para animar propriedades CSS, SVG, DOM e até objetos JavaScript.

O Anime.js é uma boa opção para animar desenhos que já existem e podem ser combinados com outra biblioteca. O Anime.js pode ser usado para animações mais complexas que precisam acontecer como parte de uma experiência interativa na Web.

09. PixiJS

O PixiJS é outra biblioteca de desenhos 2D. Seu principal objetivo é facilitar a exibição, animação e gerenciamento de gráficos 2D, para que você possa se concentrar na construção de sua experiência ou jogo sem se preocupar em acompanhar todas as formas e imagens que deseja desenhar e animar. Se você está criando um jogo, os ativos (ou sprites) podem chegar rapidamente a um número difícil de gerenciar.

Um aspecto interessante do PixiJS é que ele vem de uma API que foi criada e que pode ser usada com o  Adobe Flash. Esse é um grande benefício para os desenvolvedores que têm experiência em Flash, pois a experiência parecerá familiar. Também é semelhante ao SpriteKit da Apple.

O PixiJS não tem artifícios para ser usado com jogos; portanto, você não encontrará ferramentas ou física para lidar com coisas como a detecção de colisões. 

O PixiJS é renderizado no WebGL. O WebGL é um mecanismo para criar gráficos acelerados por GPU no navegador. Isso significa que é útil para animações e gráficos que usam muitos recursos do sistema e teriam melhor desempenho quando renderizados por uma Unidade de processamento gráfico (GPU) discreta. É baseado no OpenGL, que é o equivalente na área de trabalho para a execução de jogos e programas gráficos 3D. Sob o capô, o WebGL usa o elemento de tela HTML.

Os grandes desenvolvedores gráficos apreciarão o poder do WebGL. 

10. Zdog

A maioria dos mecanismos de desenho que falamos até agora são bidimensionais. Isso ocorre porque a maioria das interações que temos com nossa tela ocorre em duas dimensões – ao longo dos eixos X e Y. Desenhos e animações tridimensionais são geralmente muito mais complexos.

O Zdog é uma biblioteca para a construção de experiências pseudo-3D, cuja natureza é bastante plana. Chama-se pseudo-3D porque, embora conceitualize seus desenhos no espaço 3D, os renderiza em formas planas. Ele usa truques visuais para fazer com que objetos 2D pareçam 3D. O efeito é realmente interessante. Parece completamente tridimensional quando a animação é exibida, mas quando uma captura de tela é tirada, é claramente uma imagem plana. 

Como as renderizações são 2D, o Zdog pode renderizar no Canvas ou SVG. O Zdog é uma opção fantástica para animações 3D em objetos simples – especialmente se esses ativos incorporarem aspectos de design plano. Os desenvolvedores que desejam animação 3D, mas não querem se atolar no complexo mundo dos mecanismos gráficos 3D, podem achar o Zdog uma solução adequada. Além disso, com foco em imagens planas, o Zdog pode oferecer uma interface muito mais simples e um desempenho muito superior ao necessário para a renderização em 3D de imagens gráficas complexas.

Ele não possui os elementos de um mecanismo de jogo, como gerenciamento de ativos e detecção de colisão, portanto, seria necessário agrupar um mecanismo de jogo ou as considerações tratadas manualmente. Isso significa que o Zdog é provavelmente o melhor para animações 3D isoladas nas páginas de destino.

11. Snap.svg

O Snap.svg diz que torna “trabalhar com seus ativos SVG é tão fácil quanto o jQuery facilita o trabalho com o DOM”. Você pode dizer pela referência do jQuery que o Snap.svg é um pouco mais antigo, mas sua API parece tão fácil quanto o jQuery e isso é uma coisa bastante poderosa.

O Snap.svg possui uma API limpa e simples para selecionar o elemento SVG principal e, em seguida, desenhar elementos nele. É mais adequado para desenvolvedores que procuram uma solução rápida para animar SVGs. É uma opção particularmente boa se suas animações forem simples e você não tiver muito conhecimento sobre os mecanismos de animação. Embora seja um pouco datado, certamente não deve ser esquecido, pois poderia ser a maneira mais fácil de trabalhar com seus SVGs. 

Snap.svg é simples. Seu foco é o trabalho de selecionar e trabalhar com SVGs e não tenta ser mais do que isso. O snap pode ser combinado com outras bibliotecas de gráficos aqui para desenhar e renderizar para SVGs. Também é bom se você possui SVGs existentes e deseja uma maneira fácil de trabalhar com eles.

A Pasquali Solution é uma empresa B2B com core business em alocação de profissionais de TI. Fazemos questão de trazer novidades do mundo dos negócios do nicho de Tecnologia da Informação para que você fique por dentro do que acontece. Assine nossa newsletter e fique por dentro de tudo. 
Entre em contato conosco e saiba como nosso time de especialistas pode te ajudar a fazer seu negócio crescer de forma exponencial.