freeCodeCamp/curriculum/challenges/portuguese/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.portuguese.md

id	title	isRequired	challengeType	videoUrl	localeTitle
587d7fa6367417b2b2512bc0	Visualize Data with a Treemap Diagram	true	3		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

tests: []

Challenge Seed

Solution

// solution required