Vivemos um tempo de crescimento explosivo na quantidade de dados gerados e consumidos pela humanidade. Em quase todos os aplicativos desenvolvidos atualmente, os dados são usados em algum lugar dentro deles ou visualizados. Usando dados, os programadores se esforçam para tornar o trabalho com seus programas o mais confortável possível.
Às vezes, pode acontecer que a coisa mais valiosa e interessante que um aplicativo possa fornecer ao usuário seja alguns dados. No entanto, se você os apresentar na forma de algo como uma lista ou tabela, é provável que trabalhar com esses dados seja entediante. Além disso, se houver muitos dados, vendo apenas sua representação mais simples, o usuário encontrará dificuldades em analisá-los e tomar quaisquer decisões com base neles.
Os dados que representam o usuário do aplicativo não devem apenas ser valiosos para si. Eles devem ser projetados para que seja rápido, conveniente e agradável trabalhar com eles.
Hoje, apresentamos a sua atenção uma tradução de um material que discute bibliotecas JavaScript de código aberto para visualização de dados.
1. D3
Biblioteca D3Talvez a biblioteca de código aberto
D3 (também chamada D3.js.) possa ser chamada a mais popular das bibliotecas JS existentes para visualização de dados. Este projeto, em particular, coletou quase 80 mil estrelas no GitHub. A biblioteca foi criada para visualizar dados usando tecnologias como HTML, SVG e CSS.
Graças à atenção dos criadores da biblioteca aos padrões da Web, o D3 oferece aos desenvolvedores um ambiente holístico adequado para uso em navegadores modernos para visualizar dados, eliminando a necessidade de procurar algumas soluções pagas. A biblioteca D3 combina componentes para visualização de dados e uma abordagem para trabalhar com o DOM, que novamente é baseado em dados. D3 permite que você produza dados arbitrários para o DOM e aplique as transformações apropriadas ao documento. Aqui está uma grande
galeria de exemplos de uso desta biblioteca.
A propósito, preste atenção ao fato de que há uma opinião de que o D3
não é
uma biblioteca para visualização de dados . Acreditamos que você mesmo pode decidir o que considerar e se deve usá-lo em seu projeto.
2. Chart.js
Chart.jsA biblioteca
Chart.js , que coletou cerca de 40 mil estrelas no GitHub, é uma solução muito popular para criar gráficos e diagramas em HTML5 com base no
<canvas> , projetado para desenvolver aplicativos da Web responsivos. A segunda versão atual da biblioteca suporta a combinação de gráficos de vários tipos (existem 8 tipos básicos de gráficos), vários sistemas de coordenadas. Chart.js pode ser usado em conjunto com a biblioteca
moment.js . A biblioteca, se necessário, pode ser baixada do
cdnjs .
3. Three.js
Three.jsA biblioteca
Three.js é uma solução muito popular (cerca de 45 mil estrelas no GitHub; mais de 1000 pessoas contribuíram para o projeto) para criar animação 3D usando o WebGL. A flexibilidade e a abstração do projeto significam que o Three.js pode ser usado para visualizar dados em
2 e 3 dimensões. Por exemplo,
aqui está um módulo especializado para Three.js, projetado para criar gráficos tridimensionais. Aqui está uma
caixa de
areia on -
line para experiências de visualização de dados. Se você estiver pensando em visualizar dados usando o WebGL, dê uma olhada no Three.js.
4. ECharts e Highcharts JS
Um exemplo de trabalho com o ECharts (imagem retirada daqui )O ECharts é um projeto do Baidu, que coletou cerca de 30 mil estrelas no GitHub, é uma biblioteca para visualização de dados e gráficos em um navegador. Ele é escrito em JavaScript puro, usando a biblioteca
zrender projetada para funcionar com o
<canvas> .
A biblioteca suporta gráficos usando
<canvas> , SVG (4.0+) e VML. O ECharts pode ser usado não apenas no desenvolvimento de páginas projetadas para navegadores de desktop ou móveis, mas também para a organização da renderização eficaz do servidor.
Aqui está uma galeria de exemplos de uso desta biblioteca com a qual você pode experimentar em um ambiente interativo.
Highcharts jsA biblioteca
Highcharts JS é amplamente usada, coletou cerca de 8 mil estrelas no GitHub. O principal mecanismo usado por ela para visualização de dados é a tecnologia SVG, com a capacidade de alternar para VML e
<canvas> para versões mais antigas de navegadores. Afirma-se que 72 das 100 maiores empresas mundiais usam essa biblioteca, o que, se for verdade, torna essa biblioteca a solução de gráficos mais popular entre grandes empresas como Facebook e Twitter.
5. MetricsGraphics.js
MetricsGraphics.jsA biblioteca
MetricsGraphics.js (aproximadamente 7.000 estrelas no GitHub) é uma solução otimizada para visualização de séries temporais. Distingue-se por seu tamanho relativamente pequeno (80 Kb em formato minificado) e fornece ao desenvolvedor um conjunto pequeno, mas cuidadoso, de ferramentas altamente especializadas, entre as quais ferramentas para a construção de gráficos de linhas, diagramas de dispersão, histogramas, gráficos de barras e tabelas de dados.
Aqui está uma galeria interativa de exemplos de trabalho com esta biblioteca.
6. Recarrega
RechartsA biblioteca
Recharts , com quase 10.000 estrelas no GitHub, é uma solução de gráficos baseada em React e D3 que parece trabalhar com componentes declarativos do React. A biblioteca oferece suporte ao desenvolvedor para SVG. Sua árvore de dependência leve (baseada nos submódulos D3) é altamente personalizável através das propriedades do componente.
Aqui você pode encontrar exemplos de seu uso.
7. Raphaël
RaphaëlA biblioteca "vetor" de
Raphaël (cerca de 10 mil estrelas no GitHub) foi projetada para trabalhar com gráficos vetoriais em um ambiente web. Ela, como tecnologia básica para criar objetos gráficos, usa SVG e VML. Como resultado, objetos gráficos também são objetos DOM aos quais você pode se conectar, usando JavaScript, manipuladores de eventos. Atualmente, a biblioteca suporta navegadores como Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ e Internet Explorer 6.0+.
7. C3
Exemplo de biblioteca C3A biblioteca
C3 (cerca de 8 mil estrelas no GitHub) é baseada no D3, fornece ao desenvolvedor a capacidade de usar classes para todos os seus elementos, o que permite definir seus próprios estilos usando as classes e usar os recursos do D3. Além disso, ele suporta várias APIs e retornos de chamada para organizar a interação interativa com gráficos. Usando-os, você pode atualizar os gráficos mesmo depois que eles são exibidos na página.
Aqui estão exemplos de uso desta biblioteca.
8. Reagir-Vis, Reagir Virtualizado, Vitória
Kit de componentes React-VisO conjunto de componentes
React-Vis (cerca de 4 mil estrelas no GitHub) foi desenvolvido pelo Uber e foi projetado para organizar um sistema uniforme de visualização de dados nos aplicativos React. Esta solução suporta a apresentação de dados de várias formas, em particular na forma de mapas de calor e gráficos de dispersão. Trabalhar com esta biblioteca não requer um conhecimento preliminar, digamos, de algo como D3. Ele fornece ao desenvolvedor blocos modulares de baixo nível, como eixos X / Y.
Reagir conjunto de componentes virtualizadosO conjunto de componentes
virtualizados React (cerca de 12 mil estrelas no GitHub) foi projetado para organizar a renderização eficaz de grandes conjuntos de dados tabulares. Reagir as compilações virtualizadas ES6, CommonJS e UMD estão disponíveis, o projeto oferece suporte ao Webpack 4. Se você pretende usar esse conjunto de componentes, preste atenção à seção
Dependências em sua documentação.
Coleção Victory ComponentVictory é uma coleção de componentes do React projetados para visualizar dados com recursos interativos. O projeto foi criado pelo Formidable Labs e coletou cerca de 6 mil estrelas no GitHub. A Victory usa as mesmas APIs para aplicativos React regulares e para o ambiente React Native, o que facilita o desenvolvimento de soluções de plataforma cruzada. A Victory oferece aos desenvolvedores maneiras flexíveis e bonitas de usar os recursos dos componentes React para visualização de dados.
9. CartoDB
Serviço CartoDBA plataforma
Carto (cerca de 2 mil estrelas no GitHub) foi projetada para visualização e análise de dados geográficos. Nesta plataforma, você pode fazer o download de dados geográficos (por exemplo, nos formatos Shapefiles ou GeoJSON), visualizá-los, colocá-los em um mapa, estilizá-los usando o CartoCSS, pesquisá-los usando SQL.
Existem tutoriais em vídeo sobre como trabalhar com esta plataforma.
10. RAWGraphs
RAWGraphsA biblioteca
RAWGraphs com aproximadamente 5.000 estrelas no GitHub fornece uma ferramenta que permite associar tabelas contendo dados às ferramentas de visualização. O RAWGraphs é baseado no D3, permite que os desenvolvedores criem sua própria visualização de dados vetoriais. Ele trabalha com dados tabulares em vários formatos e suporta dados que podem ser simplesmente copiados de outros aplicativos. Os resultados dos RAWGraphs são apresentados no formato SVG, podem ser editados usando os aplicativos apropriados ou usados em páginas da Web inalteradas.
Aqui estão exemplos de uso desta biblioteca.
11. Metabase
MetabaseA biblioteca
Metabase , que coletou mais de 11 mil estrelas no GitHub, oferece uma maneira bastante rápida e fácil de criar painéis de controle contendo dados visualizados que não requerem conhecimento de SQL. Ao mesmo tempo, a biblioteca possui um modo SQL especial projetado para analistas e pessoas envolvidas profissionalmente no processamento de dados. A metabase permite
segmentar dados criando filtros ou conjuntos de filtros. A biblioteca suporta a criação de métricas - indicadores calculados que você precisa acessar com bastante frequência. Outros recursos do Metabase incluem suporte para o envio de dados ao Slack e a capacidade de trabalhar com eles nesse ambiente usando o
MetaBot . Essa biblioteca, talvez, pode ser considerada uma excelente ferramenta para a visualização de dados nas empresas, embora se deva observar que, para dominá-lo, será necessário algum esforço.
Biblioteca de bônus: Taucharts
TauchartsA biblioteca de visualização de dados Taucharts (cerca de 2 mil estrelas no GitHub) é baseada na biblioteca D3. Ele fornece ao desenvolvedor uma interface declarativa para organizar rapidamente a conexão dos campos de dados com propriedades visuais. Sua arquitetura permite criar gráficos nos quais as variáveis são agrupadas usando as coordenadas X e Y (
gráficos de faceta ). O Taucharts permite estender o comportamento dos gráficos com plugins adequados para reutilização.
Sumário
Analisamos as bibliotecas JavaScript para visualizar dados que podem ser usados no desenvolvimento de aplicativos da web. Considerando o que falamos sobre o papel dos dados no mundo moderno, não é de surpreender que haja um grande número de soluções para visualização de dados. Portanto, aqui estão algumas bibliotecas mais semelhantes (ao estudá-las, preste atenção ao fato de que algumas delas não foram atualizadas por um longo tempo):
Caros leitores! Quais bibliotecas você usa para visualizar dados em seus projetos da web?
