Visualização de Dados
Claudio Esperança
Doris Kosminsky
Universidade Federal do Rio de Janeiro
1
- pesquisa e prática -
VISUALIZAÇÃO
2
O que é
?
3
“Information visualization”?
Imagens a partir de dados?
Uso de computadores?
Dados concretos?
O que é ?VISUALIZAÇÃO
4
“Visualização é um meio”
Nathan Yau
Por que ?
5
VISUALIZAR
Largura de banda do olho humano: 8MB/s
6
7
Cérebro humano especializado em
processamento de imagens
8
Informação multidimensional
9
Tendências e pontos “fora da curva”
10
Exploração de dados
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.
Visualização de Dados
12
Infográficos
vs
• Construído manualmente
• Específico para um conjunto de dados
• Esteticamente rico
• Dados pouco detalhados
13
Infográfi...
14
Visualização de dados
• Desenho por algoritmos
• Adaptável a novos dados
• Pobre esteticamente
• Rico em detalhamento de d...
16
Ferramentas
17
18
Infográficos
feitos à mão
Projeto /
acabamento por
computador
Gráficos
automatizados
(ex. Planilhas)
Animação/
Multimíd...
19
Infográficos
feitos à mão
Projeto /
acabamento por
computador
Gráficos
automatizados
(ex. Planilhas)
Animação/
Multimíd...
Evolução das ferramentas de visualização
20
Infográficos
feitos à mão
Projeto /
acabamento por
computador
Gráficos
automat...
21
Infográficos
feitos à mão
Projeto /
acabamento por
computador
Gráficos
automatizados
(ex. Planilhas)
Animação/
Multimíd...
Evolução das ferramentas de visualização
22
Infográficos
feitos à mão
Projeto /
acabamento por
computador
Gráficos
automat...
Evolução das ferramentas de visualização
23
Infográficos
feitos à mão
Projeto /
acabamento por
computador
Gráficos
automat...
Inovação em
24
Visualização
Áreas
• Representação gráfica de dados
• Layouts dinâmicos
• Esquemas de animação
• Design de interação
25
Concepção
• Equipe multidisciplinar
- Designers
- Artistas
- Engenheiros
- Cientistas de computação
• Ferramentas
- Softwa...
27
História de um
28
encontro
29
Oportunidades para
• Co-orientação de alunos
– Jogos
– Arte generativa/algorítmica
– Visualização de dados
• Ensino de dis...
31
Enfoque humanístico
Olhar do consumidor
das ferramentas
gráficas
Soluções visuais
originais
Estética
COMPUTAÇÃO
Design
32
Matemática
Enfoque algorítmico
Olhar do criador de
ferramentas gráficas
Soluções visuais
automáticas e
escaláveis
Desig...
Laboratório da Visualidade e Visualização
Escola de Belas Artes
Universidade Federal do Rio de Janeiro
33
=
PESSOAS
http://labvis.eba.ufrj.br 35
pesquisa prática&
36
37
38
39
40
41
42
Contato
• Banco tem dados compilados a partir de
diversas fontes
– IEA (International Energy Agency)
– Dados fornecidos po...
44
Problema
Excelente oportunidade para
Real

colaboração!
Dados sobre
• Energy Flow
– 1 resumo por país / período
– 7 com outros recortes
• Institutional
– 1 resumo por país
– 3 co...
46
Resumo: Fluxo Energético
47
Resumo: Fluxo Energético
Tradicionalmente visualizado através de um diagrama Sankey
48
49
50
51
52
http://iadb.org/eic/database
http://www.iadb.org/en/topics/energy/energy-innovation-center/energy-database,8879.html?vi...
53
Desafios: representação visual: metáforas,
esquemas de cores + seleção
54
Resumo: atuação institucional
55
Resumo: atuação institucional
Desafio: dados não quantificáveis
http://www.iadb.org/en/topics/energy/energy-innovation-...
56
LCG
57
www.lcg.ufrj.br
Roteiro para VD (Ben Fry)
• Aquisição
• Decodificação
• Filtragem
• Mineração
• Representação Visual
• Refinamento
• Inter...
Modelagem de dados
59
Roteiro para VD (Ben Fry)
• Aquisição
• Decodificação
• Filtragem
• Mineração
• Representação Visual
• Refinamento
• Inter...
Do esboço à
• Requerimentos
– Visualização online
– Interação
– Compatibilidade com navegadores
desktop e móveis
• HTML5
–...
SVG
• Scalable Vector Graphics
– Gráfico é um documento HTML
– Desenhar = manipular DOM
– Pode ser exportado e editado off...
63
http://d3js.org
Layout estático
• Layout?
– Tamanho, espaçamento, etc
– Designer propõe regras gerais
• Layout dos desenhos
– Realizado ma...
Programando
• Difícil satisfazer todas as restrições de layout
para todos os dados imagináveis
• Um pouco de bom senso aju...
66
Altura das caixas proporcional à
quantidade de energia
67
Largura das faixas de fluxo proporcionais à
quantidade de energia
68
Faixas com tangentes ortogonais às caixas
porém não intersectantes
69
Faixas com larguras uniformes e paralelas
70
Não sobreposição de
legendas
71
Design de interação em
72
trata do design de produtos interativos,
com o objetivo de facilitar
a realização de atividades,...
73
74
• Natureza exploratória da visualização
– ações interativas são uma constante
– designer propõe regras gerais
• Decisões t...
Conclusões
• Visualização de dados é desafiadora
• Apanhamos aprendemos muito!
• Colaboração é fundamental
• Universidades...
Claudio Esperança
esperanc@cos.ufrj.br
Doris Kosminsky
doriskos@gmail.com
Universidade Federal do Rio de Janeiro
77
- pesq...
Próximos SlideShares
Carregando em…5
×

Visualização de Dados - Pesquisa e Prática - Esperança & Kosminsky

481 visualizações

Publicada em

Palestra realizada no Campus Party #CPBR8 sobre visualização de dados - com exemplos de pesquisa e prática - realizada pelos professores Claudio Esperança e Doris Kosminsky da Universidade Federal do Rio de Janeiro.

Publicada em: Design
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
481
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Visualização de Dados - Pesquisa e Prática - Esperança & Kosminsky

  1. 1. Visualização de Dados Claudio Esperança Doris Kosminsky Universidade Federal do Rio de Janeiro 1 - pesquisa e prática -
  2. 2. VISUALIZAÇÃO 2 O que é ?
  3. 3. 3 “Information visualization”? Imagens a partir de dados? Uso de computadores? Dados concretos? O que é ?VISUALIZAÇÃO
  4. 4. 4 “Visualização é um meio” Nathan Yau
  5. 5. Por que ? 5 VISUALIZAR
  6. 6. Largura de banda do olho humano: 8MB/s 6
  7. 7. 7 Cérebro humano especializado em processamento de imagens
  8. 8. 8 Informação multidimensional
  9. 9. 9 Tendências e pontos “fora da curva”
  10. 10. 10 Exploração de dados
  11. 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. 12. Visualização de Dados 12 Infográficos vs
  13. 13. • Construído manualmente • Específico para um conjunto de dados • Esteticamente rico • Dados pouco detalhados 13 Infográfico
  14. 14. 14
  15. 15. Visualização de dados • Desenho por algoritmos • Adaptável a novos dados • Pobre esteticamente • Rico em detalhamento de dados 15
  16. 16. 16
  17. 17. Ferramentas 17
  18. 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. 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. 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. 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. 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. 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. 24. Inovação em 24 Visualização
  25. 25. Áreas • Representação gráfica de dados • Layouts dinâmicos • Esquemas de animação • Design de interação 25
  26. 26. Concepção • Equipe multidisciplinar - Designers - Artistas - Engenheiros - Cientistas de computação • Ferramentas - Software de autoria - Programação 26 e Realização
  27. 27. 27
  28. 28. História de um 28 encontro
  29. 29. 29
  30. 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. 31 Enfoque humanístico Olhar do consumidor das ferramentas gráficas Soluções visuais originais Estética COMPUTAÇÃO Design
  32. 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. 33. Laboratório da Visualidade e Visualização Escola de Belas Artes Universidade Federal do Rio de Janeiro 33
  34. 34. = PESSOAS
  35. 35. http://labvis.eba.ufrj.br 35 pesquisa prática&
  36. 36. 36
  37. 37. 37
  38. 38. 38
  39. 39. 39
  40. 40. 40
  41. 41. 41
  42. 42. 42
  43. 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. 44 Problema Excelente oportunidade para Real
 colaboração!
  45. 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. 46 Resumo: Fluxo Energético
  47. 47. 47 Resumo: Fluxo Energético Tradicionalmente visualizado através de um diagrama Sankey
  48. 48. 48
  49. 49. 49
  50. 50. 50
  51. 51. 51
  52. 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. 53 Desafios: representação visual: metáforas, esquemas de cores + seleção
  54. 54. 54 Resumo: atuação institucional
  55. 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. 56 LCG
  57. 57. 57 www.lcg.ufrj.br
  58. 58. Roteiro para VD (Ben Fry) • Aquisição • Decodificação • Filtragem • Mineração • Representação Visual • Refinamento • Interação 58 Modelagem de dados
  59. 59. Modelagem de dados 59
  60. 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. 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. 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. 63 http://d3js.org
  64. 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. 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. 66 Altura das caixas proporcional à quantidade de energia
  67. 67. 67 Largura das faixas de fluxo proporcionais à quantidade de energia
  68. 68. 68 Faixas com tangentes ortogonais às caixas porém não intersectantes
  69. 69. 69 Faixas com larguras uniformes e paralelas
  70. 70. 70 Não sobreposição de legendas
  71. 71. 71
  72. 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. 73
  74. 74. 74
  75. 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. 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. 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

×