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