Worcap2019

Minicurso - Tecnologias Web para dashboards dinâmicos - explorando APIs TerraBrasilis para dados de desmatamento.

É praticamente impossível imaginar qualquer painel sem gráficos e tabelas. Eles apresentam estatísticas complexas de maneira rápida e eficaz. Além disso, um bom gráfico também aprimora o design geral do seu site.

Gráficos interativos

Permite alterar a perspectiva de análise filtrando as dimensões do dado diretamente nos gráficos.

Tecnologias para gráficos na Web

• Google charts

• D3.js e derivados como: C3, DC,

  https://github.com/d3/d3/wiki/gallery

• chartjs

• Highcharts

• 18+

• D3 X Google charts

DCjs - uma escolha

Bom conjunto de componentes, integração com D3 + Crossfilter.

• DCjs + Crossfilter

Componentes e exemplos de uso.

https://www.tutorialspoint.com/dcjs/dcjs_dashboard_working_example.htm

E os dados?

Dados dos programas de monitoramento da Amazônia e demais biomas, PRODES e DETER

Onde estão os dados? TerraBrasilis

Como obtê-los? via APIs ou Download direto dos dados em formato Shapefile, CSV...

Tecnologias para serviços de dados

• GeoServer
• APIs sob medida usando Python, NodeJS, ...
• TerraBrasilis Analytics API

Exemplo de consumo de dados

• GeoServiços

  Arquivos pré gerados

Transformando os dados em informações

Linguagens para Web:

• HTML
• CSS
• JavaScript

Ferramentas e ambiente de desenvolvimento

• Visual Studio Code ou outro editor de texto
• Postman
• DevTools - Painel de inspeção de códigos no navegador

Painéis gráficos

Dashboards TerraBrasilis

• v0
• v1
• v2 - homologação

Construindo um dashboard simples

• A estrutura básica de uma página

  HTML + JS + CSS

• Incluindo as bibliotecas de gráficos
• Lendo os dados
• Normalizando os dados
• Registrando as dimensões do dado no CrossFilter
• Criando os componentes gráficos - consultar a documentação oficial para customizações.
• Atribuindo as dimensões do dado às dimensões do gráfico
• Finalmente desenhando
• Labels, Legendas, ...

https://andre-carvalho.github.io/Worcap2019/dashboard.html