---
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
```