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

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

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