3.7 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7188d8c242eddfaeb5bd13 | Visualizar dados com um mapa de calor | 3 | 301466 | visualize-data-with-a-heat-map |
--description--
Objetivo: criar uma aplicação no CodePen.io que tenha função semelhante a esta: https://codepen.io/freeCodeCamp/full/JEXgeY.
Atenda às histórias de usuário abaixo e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os elementos DOM necessários (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
**História de usuário nº 1: ** meu mapa de calor deve ter um título com um id="title" correspondente.
**História de usuário nº 2: ** meu mapa de calor deve ter uma descrição com uma id="description" correspondente.
História de usuário nº 3: meu mapa de calor deve ter eixo x com um id="x-axis" correspondente.
História de usuário nº 4: meu mapa de calor deve ter eixo y com um id="y-axis" correspondente.
**História de usuário nº 5: ** meu mapa de calor deve ter elementos rect com uma class="cell" correspondente que representa os dados.
História de usuário nº 6: deve haver pelo menos 4 cores diferentes de preenchimento usadas para as células.
História de usuário nº 7: cada célula deve ter as propriedades data-month, data-year, data-temp contendo os valores de month, year e temperature correspondentes.
História de usuário nº 8: os valores data-month e data-year de cada célula devem estar dentro do intervalo dos dados.
História de usuário nº 9: meu mapa de calor deve ter células que estejam alinhadas com o mês correspondente no eixo y.
História de usuário nº 10: meu mapa de calor deve ter células que estejam alinhadas com o ano correspondente no eixo x.
História de usuário nº 11: meu mapa de calor deve ter diversas etiquetas de confirmação no eixo y com o nome do mês por extenso.
História de usuário nº 12: meu mapa de calor deve ter diversas etiquetas de confirmação no eixo x com os anos entre 1754 e 2015.
História de usuário nº 13: meu mapa de calor deve ter uma legenda com o id="legend" correspondente.
História de usuário nº 14: minha legenda deve conter elementos rect.
História de usuário nº 15: os elementos rect na legenda devem usar pelo menos 4 cores diferentes de preenchimento.
História de usuário nº 16: eu posso passar com o mouse sobre uma área e ver uma dica com o id="tooltip" correspondente, que exibe mais informações sobre a área.
História de usuário nº 17: minha dica deve ter uma propriedade data-year que corresponde ao data-year da área ativa.
Aqui está o conjunto de dados de que você vai precisar para completar esse projeto: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json
Você pode fazer o seu projeto usando este modelo da CodePen e clicando em Save para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
--solutions--
// solution required