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.

1. Visualização de Dados
Claudio Esperança
Doris Kosminsky
Universidade Federal do Rio de Janeiro
1
- pesquisa e prática -

2. VISUALIZAÇÃO
2
O que é
?

3. 3
“Information visualization”?
Imagens a partir de dados?
Uso de computadores?
Dados concretos?
O que é ?VISUALIZAÇÃO

4. 4
“Visualização é um meio”
Nathan Yau

5. Por que ?
5
VISUALIZAR

6. Largura de banda do olho humano: 8MB/s
6

7. 7
Cérebro humano especializado em
processamento de imagens

8. 8
Informação multidimensional

9. 9
Tendências e pontos “fora da curva”

10. 10
Exploração de dados

11. 11
BIG
90% dos dados disponíveis
foram criados nos últimos 2
anos
DATA
Todo dia, criamos 2,5
quintilhões de bytes de dados.

12. Visualização de Dados
12
Infográficos
vs

13. • Construído manualmente
• Específico para um conjunto de dados
• Esteticamente rico
• Dados pouco detalhados
13
Infográfico

14. 14

15. Visualização de dados
• Desenho por algoritmos
• Adaptável a novos dados
• Pobre esteticamente
• Rico em detalhamento de dados
15

16. 16

17. Ferramentas
17

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

24. Inovação em
24
Visualização

25. Áreas
• Representação gráfica de dados
• Layouts dinâmicos
• Esquemas de animação
• Design de interação
25

26. Concepção
• Equipe multidisciplinar
- Designers
- Artistas
- Engenheiros
- Cientistas de computação
• Ferramentas
- Software de autoria
- Programação
26
e Realização

27. 27

28. História de um
28
encontro

29. 29

30. Oportunidades para
• Co-orientação de alunos
– Jogos
– Arte generativa/algorítmica
– Visualização de dados
• Ensino de disciplinas
• Palestras
30
Colaboração

31. 31
Enfoque humanístico
Olhar do consumidor
das ferramentas
gráficas
Soluções visuais
originais
Estética
COMPUTAÇÃO
Design

32. 32
Matemática
Enfoque algorítmico
Olhar do criador de
ferramentas gráficas
Soluções visuais
automáticas e
escaláveis
Design
COMPUTAÇÃO

33. Laboratório da Visualidade e Visualização
Escola de Belas Artes
Universidade Federal do Rio de Janeiro
33

34. =
PESSOAS

35. http://labvis.eba.ufrj.br 35
pesquisa prática&

36. 36

37. 37

38. 38

39. 39

40. 40

41. 41

42. 42

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

44. 44
Problema
Excelente oportunidade para
Real
colaboração!

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

46. 46
Resumo: Fluxo Energético

47. 47
Resumo: Fluxo Energético
Tradicionalmente visualizado através de um diagrama Sankey

48. 48

49. 49

50. 50

51. 51

52. 52
http://iadb.org/eic/database
http://www.iadb.org/en/topics/energy/energy-innovation-center/energy-database,8879.html?view=v11

53. 53
Desafios: representação visual: metáforas,
esquemas de cores + seleção

54. 54
Resumo: atuação institucional

55. 55
Resumo: atuação institucional
Desafio: dados não quantificáveis
http://www.iadb.org/en/topics/energy/energy-innovation-center/energy-database,8879.html?view=v21

56. 56
LCG

57. 57
www.lcg.ufrj.br

58. Roteiro para VD (Ben Fry)
• Aquisição
• Decodificação
• Filtragem
• Mineração
• Representação Visual
• Refinamento
• Interação
58
Modelagem de dados

59. Modelagem de dados
59

60. Roteiro para VD (Ben Fry)
• Aquisição
• Decodificação
• Filtragem
• Mineração
• Representação Visual
• Refinamento
• Interação
60
Concepção
Implementação

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

63. 63
http://d3js.org

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

66. 66
Altura das caixas proporcional à
quantidade de energia

67. 67
Largura das faixas de fluxo proporcionais à
quantidade de energia

68. 68
Faixas com tangentes ortogonais às caixas
porém não intersectantes

69. 69
Faixas com larguras uniformes e paralelas

70. 70
Não sobreposição de
legendas

71. 71

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

73. 73

74. 74

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

77. Claudio Esperança
esperanc@cos.ufrj.br
Doris Kosminsky
doriskos@gmail.com
Universidade Federal do Rio de Janeiro
77
- pesquisa e prática -
Visualização de Dados