Hands-On Visualização de Dados com Chart.js

16h

Descrição

A biblioteca Chart.js é uma das mais populares bibliotecas open-source JavaScript para visualização de dados. Não tem tantos recursos quanto D3.js, mas é muito mais simples. Oferece oito tipos de gráficos pré-configurados, responsivos, interativos e animados. É indicada para quem precisa rapidamente publicar visualizações de dados sem precisar enfrentar a acentuada curva de aprendizado do D3.js. Este curso prático explora mostra como criar gráficos interativos com Chart.js, e incorpora-los em aplicações e páginas Web. Os gráficos são apresentados utilizando dados simples e dados públicos reais, disponibilizados em formatos como CSV, XML e JSON.

O curso abrange Chart.js versão 2.

Ao final do curso o aluno deverá ser capaz de:

  • Usar dados de repositórios públicos (CSV, JSON) para construir gráficos
  • Criar um gráfico de barras simples usando Chart.js
  • Manipular arrays e estruturas de dados com JavaScript para que possam ser usados em gráficos do Chart.js
  • Construir gráficos usando dados públicos
  • Criar gráficos de linha e de área empilhada
  • Criar gráficos de torta/pizza, doughnut, radar e área polar
  • Criar scatterplots e bubble charts
  • Configurar escalas e eixos
  • Configurar fontes, cores e layout
  • Configurar transições, interatividade, animações e tooltips
  • Usar e criar plugins e extensões
  • Integrar Chart.js com aplicações Vue.js ou React.js

Este curso é destinado a programadores JavaScript.

Programa

  1. Introdução à Visualização de Dados
  2. Tecnologias essenciais: HTML5 Canvas e ES2015
  3. Trabalhando com formatos de dados: CSV e JSON
  4. Introdução prática a Chart.js
  5. Gráficos de barras vertical e horizontal
  6. Gráficos de linha e de área
  7. Gráficos radiais: área polar e radar
  8. Gráficos de torta/pizza e doughnut
  9. Gráficos de dispersão e de bolha
  10. Escalas, eixos e legendas
  11. Cores e fontes
  12. Eventos, interatividade e atualização de dados
  13. Transições, animação e tooltips
  14. Plugins
  15. Integração com frameworks de SPA (React.js ou Vue.js)