Crie gráficos dinâmicos rapidamente no D3 com o Plottable.js

O livre Biblioteca D3.js é apenas um dos muitos que permite criar gráficos interativos na página. Embora o D3 seja talvez o mais popular do grupo, aprender a usá-lo não é uma tarefa fácil..

É por isso Plottable.js é uma biblioteca tão valiosa. É um projeto de código aberto gratuito construído em cima do D3.js, tornando mais fácil para qualquer um criar Gráficos de dados interativos do zero.

Esta biblioteca lida com todo o trabalho sujo, para que você possa se concentrar nos detalhes, como dados. Plotável gera o código correto para tamanho e posição de qualquer gráfico que você escolher.

Cada gráfico tem seu próprio componente em Plottable, onde você pode copiar / colar o código do modelo para reconstruir o gráfico por conta própria. A partir desta escrita, você pode selecionar 10 estilos de gráfico de plotagem, incluindo gráficos de barra, gráficos de pizza, gráficos de dispersão e gráficos de área.

Você pode reconstruir componentes individualmente e personalizar suas configurações dinamicamente. Dessa forma, você pode alterar facilmente elementos interativos, cores, animações, posicionamentos, tamanhos e o que mais precisar.

o biblioteca completa está disponível no GitHub se você quiser navegar pelo código-fonte e baixar uma cópia.

Mas a melhor maneira de aprender é através do exemplo. É por isso que você deve dar uma olhada na sua exemplos de gráficos em execução Plotável para ver como funciona em ação.

Todo gráfico é totalmente interativo, com código-fonte para inicializar. Se você quiser reconstruir um gráfico similar apenas copie / cole o código JS e reformate conforme necessário.

Eu tenho dois favoritos pessoais do site deles: o Mapa de Calor do Calendário modelado após o painel de atividades do GitHub e Gráficos Sincronizados com recursos de seleção dinâmica.

Se você nunca usou D3.js antes, você terá dificuldades para aprender esta biblioteca. Especialmente porque é escrito em TypeScript, então você provavelmente vai querer pegar isso também. O código final é compilado em ES5 JavaScript, então deveria trabalhar em todos os principais navegadores.

Se você estiver disposto a mergulhar, dê uma olhada no Página de tutoriais cheio de recursos úteis. Você aprenderá tudo o que precisa para começar a usar o Plottable e criar gráficos dinâmicos baseados na web do princípio.