53 lines
4.2 KiB
Markdown
53 lines
4.2 KiB
Markdown
---
|
||
id: 587d7fa6367417b2b2512bbf
|
||
title: Візуалізуйте дані за допомогою фонової картограми
|
||
challengeType: 3
|
||
forumTopicId: 301465
|
||
dashedName: visualize-data-with-a-choropleth-map
|
||
---
|
||
|
||
# --description--
|
||
|
||
**Objective:** Створіть додаток [CodePen.io](https://codepen.io), функціонально схожий на цей: <https://codepen.io/freeCodeCamp/full/EZKqza>.
|
||
|
||
Нижче заповніть [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:** Моя фонова картограма повинна мати округи з відповідним `class="county"`, що відображають дані.
|
||
|
||
**User Story #4:** Потрібно використати щонайменше 4 різних кольори заливки для округів.
|
||
|
||
**User Story #5:** Кожен округ повинен мати властивості `data-fips` та `data-education`, що містять їх відповідні значення `fips` та `education`.
|
||
|
||
**User Story #6:** Моя фонова картограма повинна мати округ для кожної наданої точки даних.
|
||
|
||
**User Story #7:** Округи повинні мати значення `data-fips` та `data-education`, що відповідають вибірковим даним.
|
||
|
||
**User Story #8:** Моя фонова картограма повинна мати легенду з відповідним `id="legend"`.
|
||
|
||
**User Story #9:** Потрібно використати щонайменше 4 різних кольори заливки для легенди.
|
||
|
||
**User Story #10:** Я можу навести курсор на область і побачити спливаючу підказку з відповідним `id="tooltip"`, що відображає більше інформації про область.
|
||
|
||
**User Story #11:** Моя спливаюча підказка повинна мати показник `data-education`, що відповідає `data-education` активної області.
|
||
|
||
Тут ви знайдете набори даних, необхідні для виконання цього проєкту:
|
||
|
||
- **US Education Data:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
|
||
- **US County Data:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.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
|
||
```
|