O documento discute visualização de dados, definindo-a como uma forma de representar informações através de imagens geradas por computadores. Apresenta os desafios de visualizar grandes volumes de dados e as vantagens do processamento visual pelo cérebro humano. Também descreve a evolução das ferramentas de visualização e a importância da colaboração multidisciplinar entre designers, cientistas e engenheiros.
18. 18
Infográficos
feitos à mão
Projeto /
acabamento por
computador
Gráficos
automatizados
(ex. Planilhas)
Animação/
Multimídia
Gráficos
Interativos
Evolução das ferramentas de visualização
19. 19
Infográficos
feitos à mão
Projeto /
acabamento por
computador
Gráficos
automatizados
(ex. Planilhas)
Animação/
Multimídia
Gráficos
Interativos
Exploração
Visual de Dados
Tempo
20. Evolução das ferramentas de visualização
20
Infográficos
feitos à mão
Projeto /
acabamento por
computador
Gráficos
automatizados
(ex. Planilhas)
Animação/
Multimídia
Gráficos
Interativos
Tempo
21. 21
Infográficos
feitos à mão
Projeto /
acabamento por
computador
Gráficos
automatizados
(ex. Planilhas)
Animação/
Multimídia
Gráficos
Interativos
Exploração
Visual de Dados
Tempo
22. Evolução das ferramentas de visualização
22
Infográficos
feitos à mão
Projeto /
acabamento por
computador
Gráficos
automatizados
(ex. Planilhas)
Animação/
Multimídia
Gráficos
Interativos
Tempo
23. Evolução das ferramentas de visualização
23
Infográficos
feitos à mão
Projeto /
acabamento por
computador
Gráficos
automatizados
(ex. Planilhas)
Animação/
Multimídia
Gráficos
Interativos
Tempo
30. Oportunidades para
• Co-orientação de alunos
– Jogos
– Arte generativa/algorítmica
– Visualização de dados
• Ensino de disciplinas
• Palestras
30
Colaboração
43. Contato
• Banco tem dados compilados a partir de
diversas fontes
– IEA (International Energy Agency)
– Dados fornecidos por países membros
– Pesquisas dos economistas do banco
• Site do Energy Innovation Center
– Visualização de dados
43
com o IDB
45. Dados sobre
• Energy Flow
– 1 resumo por país / período
– 7 com outros recortes
• Institutional
– 1 resumo por país
– 3 com outros recortes
45
energia
61. Do esboço à
• Requerimentos
– Visualização online
– Interação
– Compatibilidade com navegadores
desktop e móveis
• HTML5
– JavaScript+D3
– SVG/CSS
61
implementação
62. SVG
• Scalable Vector Graphics
– Gráfico é um documento HTML
– Desenhar = manipular DOM
– Pode ser exportado e editado offline
• Cascading Style Sheets
– Cor / espessura de linhas / alinhamento / etc
– Orientado a objetos
– Pode ser manipulada separada da geometria
62
+CSS
64. Layout estático
• Layout?
– Tamanho, espaçamento, etc
– Designer propõe regras gerais
• Layout dos desenhos
– Realizado manualmente (com ou sem ajuda do
computador)
– Poucos conjuntos de dados
• Layout dinâmico
– Implementado por programação
– Deve contemplar qualquer conjunto de dados
64
dinâmicovs
65. Programando
• Difícil satisfazer todas as restrições de layout
para todos os dados imagináveis
• Um pouco de bom senso ajuda – Ex.:
– Consumo não pode ser maior que soma de
importação e produção
– Faixas conectando caixas alinhadas
horizontalmente dão menos problemas
– Fontes pequenas dão menos problemas
mas podem ser ilegíveis
65
Layouts
72. Design de interação em
72
trata do design de produtos interativos,
com o objetivo de facilitar
a realização de atividades,
a conexão entre pessoas e
a obtenção de informações
- na vida pessoal e profissional
visualização de dados
75. • Natureza exploratória da visualização
– ações interativas são uma constante
– designer propõe regras gerais
• Decisões tomadas a priori
• Inexistência de boas ferramentas para
prototipagem de interações
• Desejo do usuário de fazer escolhas em relação
ao visual (ex: associação entre cores e países)
75
Design de interação em
visualização de dados
76. Conclusões
• Visualização de dados é desafiadora
• Apanhamos aprendemos muito!
• Colaboração é fundamental
• Universidades não formam profissionais
capazes de exercer com competência
todos os papéis necessários
– Programador-designer
– Designer-programador
76