---
id: 587d7fa6367417b2b2512bc0
title: Візуалізуйте дані за допомогою діаграми Treemap
challengeType: 3
forumTopicId: 301468
dashedName: visualize-data-with-a-treemap-diagram
---

# --description--

**Мета:** створити застосунок, функціонально схожий до цього: <a href="https://treemap-diagram.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://treemap-diagram.freecodecamp.rocks</a>.

Виконайте історію користувача та пройдіть тести. Використовуйте необхідні вам бібліотеки або API. Оформте за власним стилем.

Ви можете використовувати HTML, JavaScript, CSS та бібліотеку візуалізації D3 на основі svg. Для тестів потрібно згенерувати осі, використовуючи властивість осі D3, що автоматично створює відмітки вздовж осі. Ці відмітки потрібні для проходження тестів D3, оскільки їхнє положення використовується для вирівнювання графічних елементів. Ви можете знайти інформацію про генерування осей тут <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Необхідні DOM-елементи запитуються під час кожного тесту. Якщо ви використовуєте фронтенд-фреймворк (наприклад, Vue), результати тестів можуть бути неточними для динамічного вмісту. Ми сподіваємося скоро їх налагодити, однак наразі ці фреймворки не підтримуються для проєктів D3.

**Історія користувача №1:** моя treemap повинна мати заголовок з відповідним `id="title"`.

**Історія користувача №2:** моя treemap повинна мати опис з відповідним `id="description"`.

**Історія користувача №3:** моя treemap повинна мати елементи `rect` з відповідним `class="tile"`, що показують дані.

**Історія користувача №4:** потрібно використати принаймні 2 різних кольори заливки для комірок.

**Історія користувача №5:** кожна комірка повинна мати властивості `data-name`, `data-category` та `data-value` з відповідними `name`, `category` та `value`.

**Історія користувача №6:** ділянка кожної комірки повинна відповідати обсягу `data-value`: комірки з більшим `data-value` повинні мати більшу ділянку.

**Історія користувача №7:** моя treemap повинна мати легенду з відповідним `id="legend"`.

**Історія користувача №8:** легенда повинна містити елементи `rect` з відповідним `class="legend-item"`.

**Історія користувача №9:** потрібно використати принаймні 2 різних кольори заливки для елементів `rect`.

**Історія користувача №10:** я можу навести курсор на певну ділянку та побачу словесну бульбашку з відповідним `id="tooltip"`, що показує більше інформації про ділянку.

**Історія користувача №11:** словесна бульбашка повинна мати властивість `data-value`, яка відповідає `data-value` наведеної ділянки.

Ось набір даних, необхідних для виконання цього проєкту:

-   **Внески Kickstarter:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json`
-   **Продажі фільмів:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json`
-   **Продажі відеоігор:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json`

Ви можете створити свій проєкт, <a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">використовуючи цей шаблон CodePen</a> і натиснувши `Save`. Або ж ви можете скористатися цим посиланням CDN, щоб виконати тести в будь-якому середовищі: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`

Як тільки закінчите, надайте посилання на свій проєкт з усіма пройденими тестами.

# --solutions--

```js
// solution required
```
