Como ele é
Pense num terreno dividido em lotes do tamanho de cada parte do orçamento. O painel se enche de retângulos de cantos arredondados, separados por um vão fino, cada categoria numa cor: índigo, ciano, verde, âmbar e magenta, mais claras nas fatias menores. Os blocos grandes mostram nome, valor em reais e porcentagem; os médios, só o nome; os pequenos ficam sem texto. Ao clicar num bloco com subníveis, ele cresce até ocupar o painel e dá lugar aos filhos, enquanto os outros esmaecem. No topo, a trilha mostra onde você está e o total do nível.
Você pode estar procurando isto se pediu algo assim
- gráfico de quadrados proporcionais para mostrar a receita por área
- mostrar a composição da carteira em blocos de tamanhos diferentes
- clicar num bloco e ver o que tem dentro dele
- visualizar o orçamento dividido por departamento e projeto
- gráfico tipo mosaico para mostrar parte de um todo no dashboard
- alternativa ao gráfico de pizza quando há muitas categorias
Também chamado de
- treemap
- mapa de árvore
- gráfico de retângulos
- squarified treemap
- drill-down chart
- gráfico hierárquico
Quando usar
- Receita, custo ou orçamento por área, serviço e projeto
- Composição de carteira de investimentos ou de clientes
- Dashboards com muitas categorias, em que uma pizza ficaria ilegível
- Relatórios em que a pessoa precisa descer do total até o detalhe
Quando evitar
- Comparar valores muito parecidos, já que áreas são difíceis de comparar a olho
- Dados sem hierarquia e com poucas categorias, que um gráfico de barras resolve
Como pedir para a sua IA
Crie um treemap squarified com drill-down para mostrar a receita por área, serviço e projeto no dashboard. Quero zoom animado ao clicar, trilha de navegação, rótulos que somem em blocos pequenos, tooltip com participação, navegação pelas setas e transições desligadas para movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Treemap
Como passo meus dados para o Treemap?
Passe a prop data com uma árvore de objetos com name, value e children; os valores dos galhos são somados das folhas, então basta informar os valores do último nível. O Treemap formata tudo em reais, por isso peça à IA para trocar o formato se a sua medida for outra, como horas ou unidades.
O Treemap funciona com teclado e leitor de tela?
Sim. Cada bloco do Treemap é um botão com nome, valor e participação no rótulo acessível: as setas levam o foco ao vizinho na direção, Enter ou Espaço descem um nível e Esc sobe. Há ainda um resumo com os três maiores blocos e uma tabela oculta para leitores de tela.
O Treemap funciona no celular?
Funciona. O Treemap recalcula o layout para o tamanho do contêiner, e tocar num bloco desce de nível como o clique. Em telas pequenas, os rótulos se adaptam ao espaço: blocos estreitos mostram só o nome ou ficam sem texto, e a trilha no topo ajuda a voltar.
