UPDATE: Embora muitas das ferramentas apresentadas neste artigo de 2012 ainda sejam eficazes e tenham sido desenvolvidas para se tornarem ainda mais úteis, você pode estar interessado em nossa série mais recente sobre Ferramentas de Visualização de Dados Interativa.
Ferramentas de Visualização de Dados Complexa
Bem-vindos de volta para a segunda parte da minha série sobre ferramentas de visualização de dados interativa (dataviz). Na Parte 1, nós cobrimos três ferramentas legais para visualização de gráficos e gráficos e muitos outros tipos de dados em uma página da web. Na segunda parte, damos uma olhada em mais três ferramentas que são um pouco mais complexas, mas que têm alguns recursos incríveis de visualização de dados.
- jQuery Visualize (Parte 1)
- Google Charts (Parte 1)
- Highcharts (Parte 1)
- Simile Exhibit
- JavaScript InfoVis Toolkit
- D3.js
Simile Exhibit
Exposição é uma oferta muito robusta e personalizável. Um dos seus principais pontos fortes é uma abordagem única para renderizar os dados. Além de ferramentas de filtragem, classificação e pesquisa fáceis de usar, ele permite que você use um modelo HTML (chamado de “lente” em Exhibit) para ser construído para que tudo na página pareça exatamente como você quer. É quase como um mini-CMS para dataviz onde você pode acessar seus dados através de valores de atributos diretamente na lente. Para projetos que requerem um alto grau de sensibilidade para olhar e sentir, este nível extremo de flexibilidade para construir visualizações de dados é fantástico.
- Tipos de Visualização Suportados: Gráficos de Linha, Mapas, Scatter Plots, Listas Multi-Filtráveis, Timelines, Timeplots e muito mais… com widgets!
- Fontes de Entrada de Dados: JSON, Folha de Cálculo
- Saída de Dados: HTML
- Opções de Estilos: CSS
- Tipo: Javascript library
PROS
Flexible & Powerful Approach to Design
I really like the approach of Exhibit, where data is presented through a “lens” – an HTML template shell that elements are placed into. Isso torna o sistema completamente personalizável e com estilo CSS, o que significa que os designers adoram, e criar consistência para as marcas dos clientes é um instantâneo.
Strong Filtering/Sorting/Search
Lixar os usuários a filtrar seus dados por qualquer número de critérios é incrivelmente útil, e transforma suas informações de conteúdo estático em um recurso interativo real. A filtragem é incorporada diretamente no Exhibit e é fácil de implementar. A filtragem do lado do servidor pode ser uma tarefa difícil (para não dizer cara), então o Exhibit realmente se destaca em tornar a filtragem do usuário incrivelmente rápida e fácil. O mesmo vale para a classificação e pesquisa. O Exhibit torna muito fácil dar aos usuários do seu site o controle sobre como obter exatamente a visão dos dados que eles querem e, portanto, uma compreensão mais valiosa do porquê é importante.
Documentação forte
Pular para ferramentas complexas de dataviz pode ser uma tarefa e requer alguma tentativa e erro. Exibir realmente acelera o processo com ótima documentação em seu website e alguns excelentes tutoriais para iniciantes.
Widgets!
Quer um empurrão superior Exibir ainda mais? Você pode adicionar funcionalidades com widgets. Há widgets disponíveis para coleções de bibliografia e citações, um visualizador de imagens no estilo CoverFlow, linhas de tempo e gráficos de tempo – só para citar alguns. Este tipo de extensão de produto faz do Exhibit uma das opções mais robustas e flexíveis para visualização de dados.
CONS
Steep Learning Curve
Como as outras bibliotecas mais complexas, há mais codificação envolvida no Exhibit do que a maioria das opções, e ter experiência prévia com Javascript é definitivamente muito útil. No entanto, eu achei os tutoriais muito bem feitos e divertidos de fazer, então uma vez que você começa, é muito fácil entrar em um rolo.
Javascript InfoVis Toolkit
Javascript InfoVis Toolkit é um bom conjunto de ferramentas para criar gráficos e gráficos em uma página web. Ele apresenta uma boa lista de tipos de gráficos suportados e introduz alguns recursos de animação na mistura (por exemplo, as barras de um gráfico de barras podem expandir para o seu tamanho quando o gráfico é carregado – esse tipo de coisa). As animações são boas e podem definitivamente adicionar um nível extra de polimento ao seu site. Há também alguns recursos interativos legais, como aplicar um “Filtro” em um gráfico clicando nele. O gráfico mostra apenas a série em que você clicou até remover o filtro. Confira as demos para ver mais do que este toolkit é capaz.
- Tipos de Visualização Suportados: Gráfico de Área, Gráfico de Barras, Gráfico de Torta, Mapa de Árvore, Mapa de Força Direcionada, Gráfico Radial, Sunburst, Icicle, Árvore Espacial, Hiper Árvore
- Entrada de Dados: JSON
- Saída: Tela
- Estilismo: Parâmetros Javascript
- Tipo: Javascript Library
PROS
Unique Chart Types
I really like the various non-standard visualization types available in the InfoVis Toolkit. Esta ferramenta pode ser um exagero para o gráfico ocasional, mas pode realmente brilhar quando você tem que abordar opções de visualização para dados mais complicados.
Animações / Interações
As animações são uma grande adição a estes gráficos e gráficos. Elas emprestam uma boa qualidade Flash-like a estes gráficos que é realmente agradável. E a habilidade de interagir com estes gráficos – arrastar coisas e manipular o gráfico (como este) é muito legal e pode ser realmente útil.
CONS
Learning Curve
Com todas estas grandes características vem a complexidade e, embora a documentação no site pareça ser boa, esta ferramenta requer alguma boa experiência Javascript para tirar o máximo proveito dela.
D3.js
Wow, D3.js é legal! Acabei de me perder por algumas horas a bisbilhotar o website do D3 e as possibilidades parecem infinitas. Esta ferramenta definitivamente requer um alto nível de experiência com Javascript e JSON, mas ela gera alguns gráficos sofisticados e bonitos. Confira os exemplos.
D3 não é realmente como os outros. Não é uma ferramenta de gráficos “pronta para usar”, mas sim uma estrutura para desenhar elementos baseados em dados. O site D3 diz que é o melhor: “Em vez de fornecer um sistema monolítico com todos os recursos que qualquer pessoa pode precisar, D3 resolve apenas o cerne do problema: manipulação eficiente de documentos baseados em dados”
E, como você pode criar gráficos SVG, você pode usar essa saída em qualquer lugar, incluindo aplicativos de impressão. D3 poderia ser o centro de um fluxo de trabalho de publicação de web/impressão para um projeto gráfico pesado.
- Tipos de Visualização Suportados: Todos? O céu é o limite.
- Entrada de dados: JSON, GeoJSON, CSV
- Saída: HTML, SVG
- Styling: CSS, Javascript
- Tipo: Biblioteca Javascript
PROS
Flexibilidade ilimitada
Você pode usar D3.js para desenhar o que quiser com base em dados. Esta é uma ferramenta incrível para pessoas que criam novas visualizações e visualizações de dados construídas em conjuntos de dados realmente grandes.
Output
Muito legal que você pode dizer ao D3 para criar itens HTML, assim como SVG. Definitivamente abre a porta para o estilo com CSS, que é ideal.
CONS
Learning Curve
Você tem que ser um Javascript, JSON, e uma pessoa de matemática para fazer D3 saltar através de hoops. E alguns dos exemplos confundem a mente, mas vá em frente e corra através do tutorial. Não é tão ruim assim e, se você está familiarizado com jQuery ou Prototype, muito disso vai parecer familiar. E muito não vai…
Conclusion
Estes seis produtos são apenas a ponta do iceberg para dataviz. Há dezenas de outros grandes produtos por aí. Mas estes devem dar-lhe uma boa ideia do que está a acontecer e uma sensação da gama de capacidades e complexidade do mundo interactivo de dataviz.