TREEMAPS (Computação Gráfica 2 – Bloco2/2002)

1. TREEMAPS (Computação Gráfica 2 – Bloco2/2002) Aluno: Eduardo Barrére barrere@lcg.ufrj.br

2. Motivação • Como apresentar um grande conjunto de informações de forma simultânea? • Este problema deve ser resolvido (adaptado?) na minha tese de doutorado. • Paper de referência: Shneiderman, B. “Tree Visualization with Tree-Maps: 2-d Space-filling Approach.” ACM Transactions on Graphics, 11(1), pp. 92-99, 1992 Treemaps (CPS751 – Bloco2/2002) Barrére

3. Conteúdo • Introdução • Método Treemap • Algumas variações • Outros métodos • Conclusão Treemaps (CPS751 – Bloco2/2002) Barrére

4. Visualização de InformaçõesObjetivos • permitir que uma grande quantidade de informações possa ser visualizada pelo usuário num mesmo contexto (mesma tela) • utilizar com eficiência o espaço (tela) • permitir interatividade • ser de fácil compreensão • ser visualmente atrativo • possibilitar que o usuário encontre a informação desejada e possa tomar decisões sobre os dados apresentados (pesquisas) Treemaps (CPS751 – Bloco2/2002) Barrére

5. Visualização de InformaçõesTipos de Dados • 1-D Linear Document Lens, SeeSoft, Info Mural, Value Bars • 2-D Map GIS, ArcView, PageMaker, Medical imagery • 3-D World CAD, Medical, Molecules, Architecture • Multi-Dim Parallel Coordinates, Spotfire, XGobi, Visage, Influence Explorer, TableLens, DEVise • Temporal Perspective Wall, LifeLines, Lifestreams, Project Managers, DataSpiral • Tree Cone/Cam/Hyperbolic, TreeBrowser, Treemap • Network Netmap, netViz, SeeNet, Butterfly, Multi-trees Treemaps (CPS751 – Bloco2/2002) Barrére

6. Visualização de InformaçõesAplicações • Sistema de Arquivo em computadores • Mapas geográficos • Bases de dados complexas (IBGE, FVG, etc.) • Aplicações Industriais ( Estoques ) • Educacionais, etc. Treemaps (CPS751 – Bloco2/2002) Barrére

7. Visualização Textual • Listings (ex. dir) • Ponto Positivo: o conteúdo pode ser detalhado • Ponto Negativo: dificuldade de navegação • Outlines (ex. explorer) • Ponto Positivo: apresenta a estrutura dos diretórios e seus conteúdos • Ponto Negativo: apenas um pequeno número de diretórios e arquivos podem ser apresentados ao mesmo tempo • Listing e Outlines • Ponto Negativo: a necessidade de espaço na tela é proporcional a quantidade de itens apresentados Treemaps (CPS751 – Bloco2/2002) Barrére

8. Visualização Textual • Diagramas na forma de árvore • Ponto Positivo: eficiência e suavidade para pequenas hierarquias • Ponto Negativo: • Utilização ineficente do espaço • Conexões entre nós • 50% da tela é background • O processo de zoom nem sempre é bem sucedido • Falta de conteúdo nas grandes hierarquias Treemaps (CPS751 – Bloco2/2002) Barrére

9. Treemap • Dados hierárquicos: estrutura e conteúdo • Ênfase na estrutura e níveis • Um Treemap é construído através de subdivisões recursivas do retângulo original • O tamanho de cada subretângulo corresponde ao “tamanho” do nó • cores e anotações podem ser utilizadas para complementar a informação Treemaps (CPS751 – Bloco2/2002) Barrére

10. TreemapPontos Positivos • Utilização eficiente da área do display • A estrutura esta implícita no display • Não precisa desenhar em separado os nós internos • Mais espaço para os nívies e mensagens • Resumo da hierarquia total • Movimentação rápida para qualquer nó. • Preservação do contexto Treemaps (CPS751 – Bloco2/2002) Barrére

11. TreemapPontos Negativos • não apresenta boa visualização da estrutura da árvore • O pior caso é uma árvore balanceada, onde cada nó tem o mesmo número de filhos e cada nó folha tem o mesmo tamanho. Treemaps (CPS751 – Bloco2/2002) Barrére

12. TreemapMétodo • Informação estrutural particionada • O tamanho do nó pode ser proporcional ao interesse do usuário na informação ( zoom ). • Propriedades • Sobreposição de nós somente entre antecessores e predecessores • A área do nó é proporcional ao seu tamanho • O tamanho do nó é >= a soma do tamanho do seus filhos • Informação estrutural • Implícita através de slice-and-dice (fatias) • Explícito através de aninhamento adicional Treemaps (CPS751 – Bloco2/2002) Barrére

13. x1 x6 x2 x3 x4 x5 x1 x5 x7 x8 x9 x7 x8 x9 x4 x3 X 6 x2 TreemapAlgoritmo Treemaps (CPS751 – Bloco2/2002) Barrére

14. TreemapAlgoritmo P1(x1,y1) P2(x3,y1) x1 x5 x7 x8 x9 x4 x3 X 6 x2 Q2(x1,y2) Q1(x2,y2) x3=x1+(Tamanho(filhos[1])/Tamanho(árvore))*(x2-x1) Treemaps (CPS751 – Bloco2/2002) Barrére

15. x1 x6 x2 x3 x4 x5 x7 x8 x9 x1 x5 x7 x8 x9 x4 X 6 x3 x2 TreemapAlgoritmo Treemaps (CPS751 – Bloco2/2002) Barrére

16. FerramentaTreemap Disponível em: http://www.cs.umd.edu/hcil/treemap Estratégia de manipulação dos dados: • Apresentação visual de componentes de consulta • Apresentação visual dos resultados • Ações rápidas, incrementais e reversíveis • Feedback imediato e contínuo • Redução de erros Treemaps (CPS751 – Bloco2/2002) Barrére

17. FerramentaTreemap • Zoom: Ampliação dos itens de interesse • Filtro: Descarta os itens que não se tem interesse • Detalhe sob demanda: Seleciona um item (ou grupo) e obtem os detalhes necessários • Relação: apresenta a realação entre itens • Histórico: mantém um histórico das ações executadas, visando suportar o cancelamento das ações • Extrato: permite extrair uma subcoleção dos parâmetros de consulta Treemaps (CPS751 – Bloco2/2002) Barrére

18. Treemaps (CPS751 – Bloco2/2002) Barrére

19. SquarifiedTreemap Bruls, M., Huizing, K., & van Wijk, J. J. (2000). Squarified Treemaps. Joint Eurographics and IEEE TCVG Symp. on Visualization (TCVG 2000) IEEE Press, pp. 33-42. A apresentação de todos os nós e níveis como “retângulos quase quadrados” tem as seguintes vantagens: • o espaço da tela é utilizado mais eficientemente • itens quadrados são facilmente detectados e apontados, retângulos finos tumultuam e aumentam os erros de seleção. • comparação do tamanho dos retângulos é fácil quando seus aspectos são similares Treemaps (CPS751 – Bloco2/2002) Barrére

20. Squarified TreemapAlgoritmo • Aspectos a serem considerados: altura/largura, largura/altura A idéia básica é: • não considerar a subdivisão para todos os níveis simultaneamente. Busca-se produzir “retângulos quadrados” para um conjunto de “irmãos”, dado o retângulo onde ele se encontra, e aplicamos o mesmo método recursivamente. Treemaps (CPS751 – Bloco2/2002) Barrére

21. Squarified TreemapAlgoritmo • Problema: Treemaps (CPS751 – Bloco2/2002) Barrére

22. Squarified TreemapAlgoritmo Treemaps (CPS751 – Bloco2/2002) Barrére

23. PARENT • Sistema desenvolvido no laboratório CLIPS-IMAG (França) • É baseado em Treemaps • Busca também resolver o problema de retângulos finos e suas implicações. • Tem como idéia básica o cálculo de um passo intermediário a cada etapa de montagem do mapa Treemaps (CPS751 – Bloco2/2002) Barrére

24. PARENT =5.5 =4.1 =6.7 . . . Treemaps (CPS751 – Bloco2/2002) Barrére

25. PARENTComparação Treemaps (CPS751 – Bloco2/2002) Barrére

26. PARENTComparação Treemaps (CPS751 – Bloco2/2002) Barrére

27. Centros de Pesquisa • Xerox PARC • 3-D cone trees, perspective wall, spiral calendar • table lens, hyperbolic trees, document lens, butterfly • Univ. of Maryland • dynamic queries, range sliders, starfields, treemaps • zoombars, tight coupling, dynamic pruning, lifelines • IBM Yorktown, AT&T-Lucent Technologies • Georgia Tech, MIT Media Lab • Univ. of Wisconsin, Minnesota, Calif-Berkeley Treemaps (CPS751 – Bloco2/2002) Barrére

28. Treemaps (CPS751 – Bloco2/2002) Barrére

29. Conclusão • Treemap é um Projeto de referência na área • Tem bom desempenho quando conhecemos o domínio do problema • A representação através de retângulos não é satisfatória para todos os casos Treemaps (CPS751 – Bloco2/2002) Barrére

30. Referência • Shneiderman, B. “Tree Visualization with Tree-Maps: 2-d Space-filling Approach.” ACM Transactions on Graphics, 11(1), pp. 92-99, 1992 • Bruls, D.M., C. Huizing, J.J. van Wijk. “Squarified Treemaps”. Data Visualization 2000 (Eurographics and IEEE TCVG Symposium on Visualization, p. 33-42, 2000 • Vernier F., Nigay L., “Modifiable Treemaps Containing Variable-Shaped Units”. 2000 • Shneiderman, B., & Wattenberg, M. “Ordered Treemap Layouts”. Tech Report CS-TR-4237, Computer Science Dept., University of Maryland, College Park, MD., 2001 Treemaps (CPS751 – Bloco2/2002) Barrére