11 Bibliotecas de visualização de dados Javascript para 2020

Bibliotecas selecionadas de código aberto para você obter belos gráficos, tabelas e visualização de dados em seus aplicativos JS.

Vivemos em uma era de explosão de dados, quando quase todos os aplicativos que desenvolvemos usam ou aproveitam os dados para melhorar a experiência oferecida aos usuários.

Às vezes, o melhor recurso que podemos oferecer aos nossos usuários são os próprios dados. No entanto, os gráficos de tabelas e números costumam ser cansativos de ler e pode ser difícil extrair insights acionáveis de grandes tabelas de dados.

Em vez disso, podemos usar métodos puros de visualização de dados que alavancam a capacidade do cérebro de identificar e processar dados de maneira visual.

Para ajudar você a começar e adicionar facilmente uma bela visualização de dados ao seu aplicativo favorito, aqui estão algumas das melhores bibliotecas de visualização de dados Javascript disponíveis em 2019 (sem classificação). Sinta-se livre para comentar e adicionar suas próprias sugestões e ideias!

1 – D#js

Com mais de 80k de estrelas, o D3.js é provavelmente a biblioteca de visualização de dados Javascript mais popular e abrangente do mercado. O D3 foi desenvolvido para manipular documentos com base em dados e dar vida a dados usando HTML, SVG e CSS. A ênfase da D3 nos padrões da web oferece os recursos dos navegadores modernos sem se conectar a uma estrutura proprietária, combinando componentes de visualização e uma abordagem orientada a dados para a manipulação do DOM. Permite vincular dados arbitrários a um DOM (Document Object Model) e aplicar transformações controladas por dados ao documento.

2 – ChartJS

Uma biblioteca extremamente popular (40k estrelas) de gráficos HTML 5 de código aberto para aplicativos da Web responsivos usando o elemento canvas. A V.2 fornece tipos de gráficos mistos, novos tipos de eixos de gráficos e belas animações. Os designs são simples e elegantes com 8 tipos básicos de gráficos, e você pode combinar a biblioteca com moment.js para o eixo do tempo.

3 – ThreeJS

Esta biblioteca incrivelmente popular (45K estrelas; 1K colaboradores) foi criada para criar animações em 3D usando o WebGL. A natureza flexível e abstrata do projeto significa que também é útil para visualizar dados em 2 ou 3 dimensões.

4 – Echarts & Highcharts

O projeto Echarts do Baidu (30k estrelas) é uma biblioteca interativa de gráficos e visualização para o navegador. Está escrito em JavaScript puro e é baseado na biblioteca de telas do zrender. Ele suporta gráficos de renderização na forma de Canvas, SVG (4.0+) e VML Além dos navegadores para PC e dispositivos móveis, o ECharts também pode ser usado com node-canvas on node para renderização eficiente no lado do servidor (SSR). Aqui está um link para a galeria de exemplos completa, onde cada exemplo pode ser reproduzido (e temático) em um playground interativo.

O Highcharts JS é uma biblioteca de gráficos de 8K estrelas e JavaScript amplamente popular baseada em SVG, com fallbacks para VML e canvas para navegadores antigos. Ele afirma que é usado por 72 das 100 maiores empresas do mundo, o que a torna (provavelmente) a API de gráficos JS mais popular do mundo (Facebook, Twitter).

5 – Metric-Graphics

MetricsGraphics.js (7k estrelas) é uma biblioteca otimizada para visualizar e exibir dados de séries temporais. É relativamente pequeno (80kb minificado) e fornece uma seleção estreita e elegante de gráficos de linhas, gráficos de dispersão, histogramas, gráficos de barras e tabelas de dados, além de recursos como gráficos de tapete e regressão linear básica. Veja a galeria de exemplos.

6 -Recharts

Recharts é uma compilação de biblioteca de gráficos com React e D3 que permite implantar como componentes declarativos do React. A biblioteca fornece suporte SVG nativo, a árvore de dependência leve (submódulos D3) é altamente personalizável por meio de componentes de componentes. Você pode encontrar exemplos ao vivo no site de documentos.

7 – Raphael

Uma “biblioteca de vetores” Javascript de 10 mil estrelas para trabalhar com gráficos vetoriais na web. A biblioteca usa a Recomendação SVG W3C e a VML como base para a criação de gráficos, portanto, todo objeto gráfico também é um objeto DOM e você pode anexar manipuladores de eventos JavaScript. Atualmente, o Raphaël suporta Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ e Internet Explorer 6.0+.

8 – C3js

Com 8k estrelas, a C3 é uma biblioteca de gráficos reutilizáveis baseada em D3 para aplicativos da web. A biblioteca fornece classes para todos os elementos, para que você possa definir um estilo personalizado pela classe e estender a estrutura diretamente pelo D3. Ele também fornece uma variedade de APIs e retornos de chamada para acessar o estado do gráfico. Ao usá-los, você pode atualizar o gráfico mesmo depois de renderizado. Veja alguns exemplos.

9 – React Vis

O React-vis (4k estrelas) é o conjunto de componentes do React do Uber para visualizar dados de maneira consistente, incluindo gráficos de linhas/áreas/barras, mapas de calor, gráficos de dispersão, gráficos de contorno, mapas de calor hexagonais e muito mais. A biblioteca não requer nenhum conhecimento prévio com o D3 ou qualquer outra biblioteca de dados e fornece componentes modulares de baixo nível, como o eixo X Y. Uma excelente combinação para trabalhar com o Bit e uma biblioteca muito útil a considerar.

10 – CartoDB

Com 2k estrelas, o Carto é uma ferramenta de Inteligência de localização e visualização de dados para descobrir informações subjacentes aos dados de localização. Você pode fazer upload de dados geoespaciais (Shapefiles, GeoJSON etc.) usando um formulário da Web e visualizá-los em um conjunto de dados ou em um mapa, pesquisar em SQL e aplicar estilos de mapa em CartoCSS. Aqui estão algumas demos em vídeo para ajudar você a ter uma ideia e começar.

11 – Raw graphs

Com mais de 5k estrelas, o Raw é um link de conexão entre planilhas e visualização de dados criada para criar visualizações baseadas em vetor personalizadas na parte superior da biblioteca d3.js. Ele trabalha com dados tabulares (páginas dispersas e valores separados por vírgula), além de textos copiados e colados de outros aplicativos. Com base no formato SVG, as visualizações podem ser editadas com aplicativos de gráficos vetoriais para aprimoramentos adicionais ou diretamente incorporadas às páginas da web. Aqui está uma galeria de exemplos para explorar antes de mergulhar.