mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-11 16:00:12 -04:00
53 lines
4.6 KiB
Markdown
53 lines
4.6 KiB
Markdown
---
|
||
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
|
||
```
|