62 lines
4.9 KiB
Markdown
62 lines
4.9 KiB
Markdown
|
---
|
|||
|
|
id: bd7188d8c242eddfaeb5bd13
|
|||
|
|
title: Візуалізуйте дані за допомогою теплокарти
|
|||
|
|
challengeType: 3
|
|||
|
|
forumTopicId: 301466
|
|||
|
|
dashedName: visualize-data-with-a-heat-map
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# --description--
|
|||
|
|
|
|||
|
|
**Objective:** створити додаток [CodePen.io](https://codepen.io), що функціонально схожий на цей: <https://codepen.io/freeCodeCamp/full/JEXgeY>.
|
|||
|
|
|
|||
|
|
Нижче заповніть [user stories](https://en.wikipedia.org/wiki/User_story) та проведіть усі тести. Зробіть це у свій власний спосіб.
|
|||
|
|
|
|||
|
|
Ви можете скористатися 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`
|
|||
|
|
|
|||
|
|
Ви можете створити свій проєкт <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> і натиснувши `Save`, аби створити власний фрагмент. Або ж ви можете використати це CDN-посилання, щоб провести тести в будь-якому середовищі: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
|||
|
|
|
|||
|
|
Щойно впораєтеся, прикріпіть URL-адресу із пройденими тестами до проєкту, над яким працюєте.
|
|||
|
|
|
|||
|
|
# --solutions--
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
// solution required
|
|||
|
|
```
|