---
id: 587d7fa6367417b2b2512bc0
title: Visualize Data with a Treemap Diagram
isRequired: true
challengeType: 3
videoUrl: ''
localeTitle: Visualize dados com um diagrama de mapa de árvore
---
## Description
Objetivo: criar um aplicativo CodePen.io que seja funcionalmente semelhante a este: https://codepen.io/freeCodeCamp/full/KaNGNR . Cumpra as histórias de usuário abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização baseada em svg D3. Os testes exigem que os eixos sejam gerados usando a propriedade do eixo D3, que gera automaticamente marcações ao longo do eixo. Esses tiques são necessários para passar nos testes D3, porque suas posições são usadas para determinar o alinhamento dos elementos gráficos. Você encontrará informações sobre como gerar eixos em https://github.com/d3/d3/blob/master/API.md#axes-d3-axis . Elementos DOM (não virtuais) requeridos são consultados no momento de cada teste. Se você usar uma estrutura frontend (como o Vue, por exemplo), os resultados do teste podem ser imprecisos para o conteúdo dinâmico. Esperamos acomodá-los eventualmente, mas esses frameworks não são suportados atualmente para projetos D3. História de usuário # 1: Meu mapa da árvore deve ter um título com um id="title"
. História de usuário # 2: Meu mapa de árvore deve ter uma descrição com um id="description"
. História de usuário # 3: Meu mapa de árvore deve ter elementos rect
com uma class="tile"
que representa os dados. História do usuário nº 4: deve haver pelo menos duas cores de preenchimento diferentes usadas para as peças. História do usuário nº 5: Cada bloco deve ter as propriedades data-name
, data-category
e data-value
contendo seu nome, categoria e valor correspondentes. História do usuário nº 6: a área de cada bloco deve corresponder ao valor do valor dos dados: blocos com um valor de dados maior devem ter uma área maior. História de usuário # 7: Meu mapa da árvore deve ter uma legenda com id="legend"
. História de usuário # 8: Minha legenda deve ter elementos rect
com uma class="legend-item"
. História de usuário # 9: Os elementos rect
na legenda devem usar pelo menos 2 cores de preenchimento diferentes. História de usuário # 10: Eu posso passar o mouse sobre uma área e ver uma dica de ferramenta com um id="tooltip"
que exibe mais informações sobre a área. História de usuário # 11: minha dica de ferramenta deve ter uma propriedade de data-value
que corresponda ao data-value
de data-value
da área ativa. Para este projeto, você pode usar qualquer um dos seguintes conjuntos de dados:
- Promessas do Kickstarter:
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json
- Vendas de filmes:
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json
- Vendas de videogames:
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json
Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso.
## Instructions
## Tests
## Challenge Seed
## Solution
```js
// solution required
```