Crie gráficos de dados alimentados por JavaScript com o Billboard.js

Gráficos e elementos visuais desempenham um papel vital na melhoria do conteúdo da web. Com a tecnologia moderna, é tão fácil adicionar visuais personalizados como ícones SVG na sua página.

Mas outro visual surpreendente que você pode construir do zero é um gráfico da web.

Isso pode ajudá-lo representar graficamente os dados visualmente para que seus visitantes possam rapidamente passar informações pertinentes. E em vez de codificar um gráfico você mesmo pode usar uma biblioteca como o Billboard.js para fazer todo o trabalho pesado.

Na verdade, isso é construído sobre o D3, que é uma biblioteca de visualização de dados JavaScript. É facilmente o mais popular por aí, tornando-se a dependência mais segura que você poderia pedir.

Com o Billboard.js, você pode acessar a API do D3 com rapidez e facilidade. O principal objetivo da Billboard é facilidade de uso, tornando-o acessível a qualquer pessoa. Embora ajude a ter alguma experiência com JavaScript, você certamente não precisa ser um especialista.

Apenas observe que toda a base de código usa a sintaxe do ES6, o que pode ser confuso para desenvolvedores de JS menos experientes.

Enquanto você sabe como compilar o código você deveria estar bem. Na verdade, nós cobrimos alguns recursos interessantes do ES6 se você quiser aprender mais.

Todos os detalhes técnicos sobre este plugin podem parecer legais. Mas você provavelmente só quer saber o que isso pode fazer.

Dê uma olhada na página de demonstração e clique em alguns exemplos ao vivo.

Você encontrará tudo, desde gráficos de pizza a gráficos de dispersão e gráficos de barras animados personalizados.

Com o Billboard.js você tem controle total sobre seus dados. Você controla como ele aparece na página, como ele é estruturado e que tipo de recursos de UI / UX você adiciona (se houver).

É realmente uma fantástica biblioteca de gráficos e é uma das mais fáceis de aprender. Dê uma olhada no repositório GitHub do projeto para saber mais.

Você também pode entrar neste snippet no CodePen se quiser brincar com o código em seu navegador.