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

452 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
452
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

×