---
id: 587d7fa6367417b2b2512bbf
title: Візуалізуйте дані за допомогою фонової картограми
challengeType: 3
forumTopicId: 301465
dashedName: visualize-data-with-a-choropleth-map
---

# --description--

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

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

Ви можете використовувати HTML, JavaScript, CSS та бібліотеку візуалізації D3 на основі svg. Необхідні DOM-елементи запитуються під час кожного тесту. Якщо ви використовуєте фронтенд-фреймворк (наприклад, Vue), результати тестів можуть бути неточними для динамічного вмісту. Ми сподіваємося скоро їх налагодити, однак наразі ці фреймворки не підтримуються для проєктів D3.

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

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

**Історія користувача №3:** моя фонова картограма повинна мати округи з відповідними `class="county"`, що показують дані.

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

**Історія користувача №5:** кожен округ повинен мати властивості `data-fips` та `data-education` з відповідними значеннями `fips` та `education`.

**Історія користувача №6:** моя фонова картограма повинна мати округ для кожної точки даних.

**Історія користувача №7:** округи повинні мати значення `data-fips` та `data-education`, які відповідають вибірковим даним.

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

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

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

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

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

-   **Дані про освіту в США:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
-   **Дані про округи в США:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.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
```
