4.6 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d7fa6367417b2b2512bbf | Візуалізуйте дані за допомогою фонової картограми | 3 | 301465 | visualize-data-with-a-choropleth-map |
--description--
Мета: створити застосунок, функціонально схожий до https://choropleth-map.freecodecamp.rocks.
Виконайте історію користувача та пройдіть тести. Використовуйте необхідні вам бібліотеки або 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
Ви можете створити свій проєкт, використовуючи цей шаблон CodePen і натиснувши Save. Або ж ви можете скористатися цим посиланням CDN, щоб виконати тести в будь-якому середовищі: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Як тільки закінчите, надайте посилання на свій проєкт з усіма пройденими тестами.
--solutions--
// solution required