4.2 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d7fa6367417b2b2512bbf | Візуалізуйте дані за допомогою фонової картограми | 3 | 301465 | visualize-data-with-a-choropleth-map |
--description--
Objective: Створіть додаток CodePen.io, функціонально схожий на цей: https://codepen.io/freeCodeCamp/full/EZKqza.
Нижче заповніть user stories та проведіть усі тести. Зробіть це у свій особистий спосіб.
Ви можете скористатися 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
Ви можете створити свій проєкт using this CodePen template і натиснувши Save, аби створити власний фрагмент. Або ж ви можете використати це CDN-посилання, щоб провести тести на будь-якому середовищі: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Щойно впораєтеся, прикріпіть URL-адресу із пройденими тестами до проєкту, над яким працюєте.
--solutions--
// solution required