Visualização de Informação para Cidades Inteligentes
•
0 gostou•180 visualizações
Apresentação do minicurso de visualização de informação para a percepção humana - Aplicações em cidades inteligentes, no IHC 2016.
Recomendados
Mais conteúdo relacionado
Semelhante a Visualização de Informação para Cidades Inteligentes
Semelhante a Visualização de Informação para Cidades Inteligentes (8)
Visualização de Informação para Cidades Inteligentes
- 3. Visualização de Informação para a Percepção Humana - Aplicações em Cidades Inteligentes Rafael Lage Tavares e Jonice Oliveira PPGI/ UFRJ
- 4. CORES - Laboratório de Computação Social e Análise de Redes Sociais 4 Introdução - Problema IoT Sensores Prédi os Celula res Redes Sociais Compu tadores Carros Tablets Gelad eira
- 5. CORES - Laboratório de Computação Social e Análise de Redes Sociais 5 Introdução - Problema
- 6. CORES - Laboratório de Computação Social e Análise de Redes Sociais 6 Introdução - Problema
- 7. CORES - Laboratório de Computação Social e Análise de Redes Sociais 7 Introdução - Problema
- 8. CORES - Laboratório de Computação Social e Análise de Redes Sociais 8 Introdução - Problema Mas a realidade não é tão linda assim
- 9. CORES - Laboratório de Computação Social e Análise de Redes Sociais 9 Introdução - Problema
- 10. CORES - Laboratório de Computação Social e Análise de Redes Sociais 10 Introdução - Problema • Data Overload • muita informação relevante disponível que uma pessoa não consiga assimilar • acesso à uma grande quantidade de informação irrelevante • quanto maior a velocidade e o volume dos dados, maior o stress • do receptor
- 11. CORES - Laboratório de Computação Social e Análise de Redes Sociais 11 Introdução - Problema Problemas Armazenamento x Análise
- 12. CORES - Laboratório de Computação Social e Análise de Redes Sociais 12 Introdução - Problema Problemas Armazenamento x Análise
- 13. CORES - Laboratório de Computação Social e Análise de Redes Sociais 13 Introdução - Visualização • Estudo de representação visual, interativa e suportada por computador para ajudar pessoas a executar tarefas mais eficazmente. • É útil quando há necessidade de aumentar a capacidade humana ao invés delegar a tomada de decisão a um método computacional.
- 14. CORES - Laboratório de Computação Social e Análise de Redes Sociais 14 Introdução - Visualização • Por que interatividade?
- 15. CORES - Laboratório de Computação Social e Análise de Redes Sociais 15 Introdução - Visualização Estática Muitos dados Várias visualizações disputando o mesmo espaço Interativa Diferentes aspectos Muitos elementos na mesma visualização Uma visualização com controles para apresentar cada aspecto Muitos elementos apresentados no momento desejado
- 16. CORES - Laboratório de Computação Social e Análise de Redes Sociais 16 Introdução - Visualização • Por que interatividade? • Estática é limitada • Pela capacidade do usuário absorver muitas informações diferentes ao mesmo tempo • Pelo display que possui uma área específica que limita o posicionamento de elementos gráficos
- 17. CORES - Laboratório de Computação Social e Análise de Redes Sociais 17 Introdução - Visualização • Por que suportada por computador?
- 18. CORES - Laboratório de Computação Social e Análise de Redes Sociais 18 Introdução - Visualização • Por que suportada por computador? • Muitos dados • Dados que mudam dinamicamente • Interatividade
- 19. CORES - Laboratório de Computação Social e Análise de Redes Sociais 19 Introdução - Visualização • Por que suportada por computador?
- 20. CORES - Laboratório de Computação Social e Análise de Redes Sociais 20 Introdução - Visualização • Por que a visão?
- 21. CORES - Laboratório de Computação Social e Análise de Redes Sociais 21 Introdução - Visualização • Por que a visão?
- 22. CORES - Laboratório de Computação Social e Análise de Redes Sociais 22 Introdução - Visualização • Por que a visão?
- 23. CORES - Laboratório de Computação Social e Análise de Redes Sociais 23 Introdução - Visualização • Por que a visão?
- 24. CORES - Laboratório de Computação Social e Análise de Redes Sociais 24 Introdução - Visualização • Por que a visão?
- 25. CORES - Laboratório de Computação Social e Análise de Redes Sociais 25 Introdução - Utilidade • Entender problemas e a dinamicidade das cidades • Situações de emergência • Análise de ações da natureza • Empoderamento do cidadão
- 26. CORES - Laboratório de Computação Social e Análise de Redes Sociais 26 Histórico
- 27. CORES - Laboratório de Computação Social e Análise de Redes Sociais 27 Histórico • Século 15 e antes • Egípcios já usavam gráficos para mapear estrelas e desenhar mapas para ajudar na orientação geográfica • Primeiro gráfico de múltiplas series de tempo data do século 10 • Oresme (1482) • Desenvolveu a ideia de desenhar uma função teórica usando um gráfico de barras
- 28. CORES - Laboratório de Computação Social e Análise de Redes Sociais 28 Histórico • Século 15 e antes Século 10 - múltiplas séries temporais
- 29. CORES - Laboratório de Computação Social e Análise de Redes Sociais 29 Histórico • Século 16 • Técnicas e instrumentos para medições e observações foram desenvolvidas • Primeiras iniciativas de capturar imagens diretamente • Desenvolvido o primeiro atlas cartográfico, o Teatrum Orbis Terrarum de Abraham Ortelius
- 30. CORES - Laboratório de Computação Social e Análise de Redes Sociais 30 Histórico • Século 16 Primeiro Atlas
- 31. CORES - Laboratório de Computação Social e Análise de Redes Sociais 31 Histórico • Século 17 • Período de medições para astronomia, levantamento de informações, criação de mapas navegação e expansão territorial • Christopher Scheiner (1630), criou um infográfico de pequenos múltiplos, para mostrar as mudanças de configuração de manchas solares ao longo do tempo • Michael Florent van Langren (1644) criou um gráfico para medir distâncias
- 32. CORES - Laboratório de Computação Social e Análise de Redes Sociais 32 Histórico • Século 17 Mudanças de configuração de manchas solares ao longo do tempo de Christopher Scheiner (1630)
- 33. CORES - Laboratório de Computação Social e Análise de Redes Sociais 33 Histórico • Século 17 Comparar estimativas de distâncias de Michael Florent van Langren (1644)
- 34. CORES - Laboratório de Computação Social e Análise de Redes Sociais 34 Histórico • Século 18 • Evolução para o uso de novas formas gráficas além do mapa • Edmund Halley (1701) apresenta mapa com linhas para determinar declinação magnética • Introdução de novos domínios, como política e economia • William Playfair inventou os gráficos de barras, linhas (1786) e setores (1801)
- 35. CORES - Laboratório de Computação Social e Análise de Redes Sociais 35 Histórico • Século 18 Mapa com declinação magnética
- 36. CORES - Laboratório de Computação Social e Análise de Redes Sociais 36 Histórico • Século 18 Comparação de populações e impostos em nações
- 37. CORES - Laboratório de Computação Social e Análise de Redes Sociais 37 Histórico • Século 19 - 1800 a 1850 • Período de crescimento de gráficos estatísticos e mapeamento temático • gráfico de barras e setores, histogramas, gráficos de linhas, séries temporais, gráficos de dispersão, etc • Gráfico de barras no tempo, de Playfair (1821) • Mapa da cólera de Leeds, feito por Baker em 1831 • Mapa da cólera de Londres, feito por John Snow em 1855
- 38. CORES - Laboratório de Computação Social e Análise de Redes Sociais 38 Histórico • Século 19 - 1800 a 1850 Gráfico de Barras no tempo, de Playfair, preços, salário e governantes no período
- 39. CORES - Laboratório de Computação Social e Análise de Redes Sociais 39 Histórico • Século 19 - 1800 a 1850 Mapa da cólera em Leeds feito por Baker
- 40. CORES - Laboratório de Computação Social e Análise de Redes Sociais 40
- 41. CORES - Laboratório de Computação Social e Análise de Redes Sociais 41 Histórico • Século 19 - 1800 a 1850 Mapa da cólera de Londres por John Snow
- 42. CORES - Laboratório de Computação Social e Análise de Redes Sociais 42
- 43. CORES - Laboratório de Computação Social e Análise de Redes Sociais 43 Histórico • Século 19 - 1850 a 1900 • Período de muitas inovações • Zeuner em 1869 e Perozzo em 1880, construíram gráficos de população em 3D • Minard (1861) desenvolveu o uso de círculos e setores em mapas e mapas de fluxos
- 44. CORES - Laboratório de Computação Social e Análise de Redes Sociais 44 Histórico • 1850 a 1900 Quantidade de população no tempo de Perozzo
- 45. CORES - Laboratório de Computação Social e Análise de Redes Sociais 45 Histórico • 1850 a 1900 Círculos e setores em mapas, de Minard
- 46. CORES - Laboratório de Computação Social e Análise de Redes Sociais 46 Histórico • 1850 a 1900 Gráfico de Minard mostra como Napoleão perdeu a guerra
- 47. CORES - Laboratório de Computação Social e Análise de Redes Sociais 47 Histórico • Século 19 - 1850 a 1900 • Uso de visualizações em diversas áreas estava em expansão • Francis Galton descobriu o padrão anti-ciclônico de ventos ao redor de ventos de baixa pressão • Atlas geográficos enormes foram produzidos com patrocínio de governos contendo dados governamentais, comerciais e políticos
- 48. CORES - Laboratório de Computação Social e Análise de Redes Sociais 48 Histórico • 1850 a 1900 Gráfico de Francis Galton mostra observações sobre dados meteorológicos
- 49. CORES - Laboratório de Computação Social e Análise de Redes Sociais 49
- 50. CORES - Laboratório de Computação Social e Análise de Redes Sociais 50 Histórico • 1850 a 1900 Gráfico de transporte de trilhos a partir de Paris
- 51. CORES - Laboratório de Computação Social e Análise de Redes Sociais 51 Histórico • Século 20 - 1900 a 1950 • Período de aplicação e popularização; • Livros e empresas passaram a usar visualizações (Gantt, Fluxo de controle) • Outras áreas como astronomia, física, biologia e outras ciências • Diagrama de borboleta de Eric Maunder
- 52. CORES - Laboratório de Computação Social e Análise de Redes Sociais 52 Histórico • 1900 a 1950 Variação de manchas solares ao longo do tempo, Eric Maunder
- 53. CORES - Laboratório de Computação Social e Análise de Redes Sociais 53 Histórico • Século 20 - 1950 a 1975 • Período de despertar: um artigo, um livro e computadores
- 54. CORES - Laboratório de Computação Social e Análise de Redes Sociais 54 Histórico • 1950 a 1975 Características visuais, Bertin.
- 55. CORES - Laboratório de Computação Social e Análise de Redes Sociais 55 Histórico • Século 20 e 21 - 1975 até o presente • Período de explosão de métodos, ferramentas e pesquisa • Softwares como R • Aumento da capacidade computacional • Quantidade de dados (transparência, internet, redes sociais) • Dados em tempo real (sensores, redes sociais) • Quantidade de dispositivos (tablets, celulares, sensores)
- 56. CORES - Laboratório de Computação Social e Análise de Redes Sociais 56 Métodos e metodologias • Modelo Card, 1999.
- 57. CORES - Laboratório de Computação Social e Análise de Redes Sociais 57 Métodos e metodologias • Modelo Card, 1999. Conteúdo Remetente Uma coisa não nega a outra(...). Ricardo O transporte na URCA(...) Ulisses
- 58. CORES - Laboratório de Computação Social e Análise de Redes Sociais 58 • Mapeamento Visual • Tufte, 2001 • Abela, 2008 • Lengler e Eppler, 2007 • Judelman, 2004 Métodos e metodologias
- 59. CORES - Laboratório de Computação Social e Análise de Redes Sociais 59 • Tufte • Gráficos de mapas • Gráficos de linhas do tempo • Gráficos de narrativa de tempo e espaço Métodos e metodologias
- 60. CORES - Laboratório de Computação Social e Análise de Redes Sociais 60 • Tufte Mapas Métodos e metodologias
- 61. CORES - Laboratório de Computação Social e Análise de Redes Sociais 61 • Tufte Linhas do tempo Métodos e metodologias
- 62. CORES - Laboratório de Computação Social e Análise de Redes Sociais 62 • Tufte Narrativa de tempo e espaço Métodos e metodologias
- 63. CORES - Laboratório de Computação Social e Análise de Redes Sociais 63 • Andrew Abela • Comparação • Distribuição • Composição • Relacionamento Métodos e metodologias
- 64. CORES - Laboratório de Computação Social e Análise de Redes Sociais 64 • Abela Classificação de Abela Métodos e metodologias
- 65. CORES - Laboratório de Computação Social e Análise de Redes Sociais 65
- 66. CORES - Laboratório de Computação Social e Análise de Redes Sociais 66 • Lengler e Eppler • Visualização de dados • Visualização da informação • Visualização conceitual • Visualização metafórica • Visualização estratégica • Visualização composta Métodos e metodologias
- 67. CORES - Laboratório de Computação Social e Análise de Redes Sociais 67 • Lengler e Eppler Tabela periódica de métodos de visualização Métodos e metodologias
- 68. CORES - Laboratório de Computação Social e Análise de Redes Sociais 68
- 69. CORES - Laboratório de Computação Social e Análise de Redes Sociais 69 • Lengler e Eppler: Visualização de dados Línguas faladas em Senegal Métodos e metodologias
- 70. CORES - Laboratório de Computação Social e Análise de Redes Sociais 70 • Lengler e Eppler: Visualização da Informação Rede de relacionamentos no TouchGraph do Facebook Métodos e metodologias
- 71. CORES - Laboratório de Computação Social e Análise de Redes Sociais 71 • Lengler e Eppler: Visualizações Conceituais Gráfico de Pert Métodos e metodologias
- 72. CORES - Laboratório de Computação Social e Análise de Redes Sociais 72 • Lengler e Eppler: Visualizações Metafóricas Mapa do Metrô Métodos e metodologias
- 73. CORES - Laboratório de Computação Social e Análise de Redes Sociais 73 • Lengler e Eppler: Visualizações Estratégicas Diagrama de Ishikawa Métodos e metodologias
- 74. CORES - Laboratório de Computação Social e Análise de Redes Sociais 74 • Lengler e Eppler: Visualizações Compostas Mapa do brasil e gráfico de bolhas Métodos e metodologias
- 75. CORES - Laboratório de Computação Social e Análise de Redes Sociais 75 • Judelman Métodos e metodologias
- 76. CORES - Laboratório de Computação Social e Análise de Redes Sociais 76 • Judelman - Complexity : Classify Site map de um grande site Métodos e metodologias
- 77. CORES - Laboratório de Computação Social e Análise de Redes Sociais 77 • Judelman - Complexity : Route Mapa topológico da internet Métodos e metodologias
- 78. CORES - Laboratório de Computação Social e Análise de Redes Sociais 78 • Judelman - Context : Explore -> semantic relevancy Mapa de clusters Métodos e metodologias
- 79. CORES - Laboratório de Computação Social e Análise de Redes Sociais 79 • Judelman - Context : Explore -> dynamic queries Métodos e metodologias
- 80. CORES - Laboratório de Computação Social e Análise de Redes Sociais 80 • Judelman - Context : Chart -> Internet search engines Métodos e metodologias Vivisimo e sua classificação ontológica
- 81. CORES - Laboratório de Computação Social e Análise de Redes Sociais 81 • Judelman - Context : Chart -> Data Landscapes Métodos e metodologias Documentos na web de acordo com assunto
- 82. CORES - Laboratório de Computação Social e Análise de Redes Sociais 82 • Judelman - Context : Chart -> Virtual Environment Métodos e metodologias VR-Vibe - Visualização em ambiente virtual 3D
- 83. CORES - Laboratório de Computação Social e Análise de Redes Sociais 83 • Judelman - Dynamics : Flow Métodos e metodologias Fluxo de exportação de vinho Francês em 1864
- 84. CORES - Laboratório de Computação Social e Análise de Redes Sociais 84 • Judelman - Dynamics : Evolve Métodos e metodologias Evolução do rock de 1955 até 1968
- 85. CORES - Laboratório de Computação Social e Análise de Redes Sociais 85 Escolher uma visualização na internet, estática ou não. Analisá-la de acordo com um ou mais métodos, propondo possíveis melhorias. Métodos e metodologias
- 86. CORES - Laboratório de Computação Social e Análise de Redes Sociais 86 • Uso da tecnologia em seu processo de planejamento, interagindo e empoderando seus cidadãos • Visualizações podem atuar como meio de comunicação ou apoio à tomada de decisão Aplicações em cidades inteligentes
- 87. CORES - Laboratório de Computação Social e Análise de Redes Sociais 87 • Mapa de incêndios em Boston • Zofnass Information Tool • Urban Lens • Crime in Chicago • City of Chicago • InfoDengue • Mapa das OSCs Aplicações em cidades inteligentes
- 88. CORES - Laboratório de Computação Social e Análise de Redes Sociais 88 • Mapa de incêndios em Boston Aplicações em cidades inteligentes
- 89. CORES - Laboratório de Computação Social e Análise de Redes Sociais 89 Zofnass Information Tool Aplicações em cidades inteligentes
- 90. CORES - Laboratório de Computação Social e Análise de Redes Sociais 90 Urban Lens Aplicações em cidades inteligentes
- 91. CORES - Laboratório de Computação Social e Análise de Redes Sociais 91 Crime in Chicago Aplicações em cidades inteligentes
- 92. CORES - Laboratório de Computação Social e Análise de Redes Sociais 92 City of Chicago Aplicações em cidades inteligentes
- 93. CORES - Laboratório de Computação Social e Análise de Redes Sociais 93 InfoDengue Aplicações em cidades inteligentes
- 94. CORES - Laboratório de Computação Social e Análise de Redes Sociais 94 Mapa das OSCs Aplicações em cidades inteligentes
- 95. CORES - Laboratório de Computação Social e Análise de Redes Sociais 95 Para cada sistema, pensar em cenários onde eles possam ser úteis para cidadão, empresas ou governos, nos mais diferentes níveis. Aplicações em cidades inteligentes
- 96. CORES - Laboratório de Computação Social e Análise de Redes Sociais 96 • Canvas • SVG • Processing • Dimple • D3.js Tecnologias
- 97. CORES - Laboratório de Computação Social e Análise de Redes Sociais 97 • Canvas • É um elemento da HTML • Delimita uma área para desenho • Usa-se Javascript para criar Tecnologias
- 98. CORES - Laboratório de Computação Social e Análise de Redes Sociais 98 • Canvas Tecnologias
- 99. CORES - Laboratório de Computação Social e Análise de Redes Sociais 99 • Canvas Tecnologias
- 100. CORES - Laboratório de Computação Social e Análise de Redes Sociais 100 • Canvas Tecnologias
- 101. CORES - Laboratório de Computação Social e Análise de Redes Sociais 101 • SVG (Scalable Vector Graphics) • É um elemento HTML • Delimita uma área para desenho • XML para descrever gráficos vetorizados Tecnologias
- 102. CORES - Laboratório de Computação Social e Análise de Redes Sociais 102 • SVG Tecnologias
- 103. CORES - Laboratório de Computação Social e Análise de Redes Sociais 103 • SVG Tecnologias
- 104. CORES - Laboratório de Computação Social e Análise de Redes Sociais 104 • Processing • Biblioteca Javascript / Processing • Processing originalmente foi uma linguagem que usava Java para criar gráficos • Construída usando o elemento canvas Tecnologias
- 105. CORES - Laboratório de Computação Social e Análise de Redes Sociais 105 • Dimplejs • Biblioteca Javascript • Uma abstração do D3.js • Construída usando o elemento SVG Tecnologias
- 106. CORES - Laboratório de Computação Social e Análise de Redes Sociais 106 • Dimplejs Tecnologias
- 107. CORES - Laboratório de Computação Social e Análise de Redes Sociais 107 • Dimplejs Tecnologias
- 108. CORES - Laboratório de Computação Social e Análise de Redes Sociais 108 • D3.js • Uma biblioteca Javascript para manipular documentos baseado em dados • Possibilita ligar dados a elementos do DOM e transformar esses elementos com ligados a ele • Construída usando SVG ou qualquer elemento do DOM Tecnologias
- 109. CORES - Laboratório de Computação Social e Análise de Redes Sociais 109 • D3.js Tecnologias
- 110. CORES - Laboratório de Computação Social e Análise de Redes Sociais 110 • D3.js Tecnologias
- 111. CORES - Laboratório de Computação Social e Análise de Redes Sociais 111 • D3.js - Adicionar um elemento Tecnologias
- 112. CORES - Laboratório de Computação Social e Análise de Redes Sociais 112 • D3.js - Adicionar SVG ao DOM Tecnologias
- 113. CORES - Laboratório de Computação Social e Análise de Redes Sociais 113 • D3.js - Ligar dados ao DOM Tecnologias
- 114. CORES - Laboratório de Computação Social e Análise de Redes Sociais 114 • D3.js - Ligar dados ao DOM Tecnologias
- 115. CORES - Laboratório de Computação Social e Análise de Redes Sociais 115 • D3.js - Ligar dados ao DOM Tecnologias
- 116. CORES - Laboratório de Computação Social e Análise de Redes Sociais 116 • D3.js - Ligar dados ao DOM Tecnologias
- 117. CORES - Laboratório de Computação Social e Análise de Redes Sociais 117 • D3.js Tecnologias
- 118. CORES - Laboratório de Computação Social e Análise de Redes Sociais 118 Para um conjunto de dados, executar o processo de card, passo a passo até construir a visualização. Criar visualização