4.9 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7188d8c242eddfaeb5bd13 | Візуалізуйте дані за допомогою теплокарти | 3 | 301466 | visualize-data-with-a-heat-map |
--description--
Objective: створити додаток CodePen.io, що функціонально схожий на цей: https://codepen.io/freeCodeCamp/full/JEXgeY.
Нижче заповніть user stories та проведіть усі тести. Зробіть це у свій власний спосіб.
Ви можете скористатися HTML, JavaScript, CSS та бібліотекою візуалізації, що базується на D3 svg. Необхідні (невіртуальні) DOM-елементи запитуються під час кожного тесту. Якщи ви використовуєте фронтенд-фреймворк (як-от, наприклад, Vue), результати тестів можуть бути неточними для динамічного контенту. Ми сподіваємося скоро їх налагодити, однак наразі ці фреймворки не підтримуються для проєктів D3.
User Story #1: Моя теплова карта повинна мати назву з відповідним id="title".
User Story #2: Моя теплова карта повинна мати опис з відповідним id="description".
User Story #3: Моя теплова карта повинна мати вісь X з відповідним id="x-axis".
User Story #4: Моя теплова карта повинна мати вісь Y з відповідним id="y-axis".
User Story #5: Моя теплова карта повинна мати елементи rect з class="cell", що відображає дані.
User Story #6: Потрібно використати щонайменше 4 різних кольори заливки для клітинок.
User Story #7: Кожна клітинка повинна мати властивості data-month, data-year, data-temp, що міститимуть їх відповідні значення month, year та temperature.
User Story #8: data-month, data-year кожної клітинки мають знаходитися в межах діапазону даних.
User Story #9: Моя теплова карта повинна мати клітинки, розташовані на одному рівні з відповідним місяцем на осі Y.
User Story #10: Моя теплова карта повинна мати клітинки, розташовані на одному рівні з відповідним роком на осі X.
User Story #11: Моя теплова карта повинна мати декілька позначок з повною назвою місяця на осі Y.
User Story #12: Моя теплова карта повинна мати декілька позначок з роками між 1754 та 2015 на осі X.
User Story #13: Моя теплова карта повинна мати легенду з відповідним id="legend".
User Story #14: Моя легенда повинна містити елементи rect.
User Story #15: Елементи rect у легенді повинні використовувати принаймні 4 різних кольори заливки.
User Story #16: Я може навести курсор на область і побачити спливаючу підказку з відповідним id="tooltip", що відображає більше інформації про область.
User Story #17: Моя спливаюча підказка повинна мати показник data-year, що відповідає data-year активної області.
Тут ви знайдете набір даних, необхідний для виконання цього проєкту: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json
Ви можете створити свій проєкт using this CodePen template і натиснувши Save, аби створити власний фрагмент. Або ж ви можете використати це CDN-посилання, щоб провести тести в будь-якому середовищі: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Щойно впораєтеся, прикріпіть URL-адресу із пройденими тестами до проєкту, над яким працюєте.
--solutions--
// solution required