4.6 KiB
4.6 KiB
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
id="title"
. User Story # 2: Meu mapa de árvore deve ter uma descrição com um id="description"
. User Story # 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. User Story # 7: Meu mapa da árvore deve ter uma legenda com id="legend"
. User Story # 8: Minha legenda deve ter elementos rect
com uma class="legend-item"
. User Story # 9: Os elementos rect
na legenda devem usar pelo menos 2 cores de preenchimento diferentes. User Story # 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. User Story # 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.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/kickstarter-funding-data.json
- Vendas de filmes:
https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/movie-data.json
- Vendas de videogames:
https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/video-game-sales-data.json
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