--- id: bd7178d8c242eddfaeb5bd13 title: Візуалізуйте дані за допомогою діаграми розсіювання challengeType: 3 forumTopicId: 301467 dashedName: visualize-data-with-a-scatterplot-graph --- # --description-- **Мета:** створити застосунок, функціонально схожий до цього: https://scatterplot-graph.freecodecamp.rocks. Виконайте історію користувача та пройдіть тести. Використовуйте необхідні вам бібліотеки або API. Оформте за власним стилем. Ви можете використовувати HTML, JavaScript, CSS та бібліотеку візуалізації D3 на основі svg. Для тестів потрібно згенерувати осі, використовуючи властивість осі D3, що автоматично створює відмітки вздовж осі. Ці відмітки потрібні для проходження тестів D3, оскільки їхнє положення використовується для вирівнювання графічних елементів. Ви можете знайти інформацію про генерування осей тут . Необхідні DOM-елементи запитуються під час кожного тесту. Якщо ви використовуєте фронтенд-фреймворк (наприклад, Vue), результати тестів можуть бути неточними для динамічного вмісту. Ми сподіваємося скоро їх налагодити, однак наразі ці фреймворки не підтримуються для проєктів D3. **Історія користувача №1:** моя діаграма повинна мати заголовок з відповідним `id="title"`. **Історія користувача №2:** моя діаграма повинна мати вісь X з відповідним `id="x-axis"`. **Історія користувача №3:** моя діаграма повинна мати вісь Y з відповідним `id="y-axis"`. **Історія користувача №4:** моя діаграма повинна мати точки, кожна з яких має клас `dot`, які показують дані. **Історія користувача №5:** кожна точка повинна мати властивості `data-xvalue` та `data-yvalue` з відповідними значеннями `x` та `y`. **Історія користувача №6:** властивості `data-xvalue` та `data-yvalue` кожної точки повинні бути в межах діапазону даних і мати правильний формат. Для `data-xvalue` прийнятно використовувати об’єкти у вигляді цілих чисел (цілі роки) або `Date`. Для `data-yvalue` (хвилин) використовуйте об’єкти `Date`. **Історія користувача №7:** `data-xvalue` та її відповідна точка повинні розташовуватись на одному рівні з відповідною позначкою/значенням на осі X. **Історія користувача №8:** `data-yvalue` та її відповідна точка повинні розташовуватись на одному рівні з відповідною позначкою/значенням на осі Y. **Історія користувача №9:** на осі Y розміщені позначки, які показують час у форматі `%M:%S`. **Історія користувача №10:** на осі X розміщені позначки, які показують рік. **Історія користувача №11:** діапазон позначок осі X знаходиться в межах діапазону фактичних даних осі X. **Історія користувача №12:** діапазон позначок осі Y знаходиться в межах діапазону фактичних даних осі Y. **Історія користувача №13:** моя діаграма повинна мати легенду з описовим текстом, який має `id="legend"`. **Історія користувача №14:** я можу навести курсор на певну ділянку та побачу словесну бульбашку з відповідним `id="tooltip"`, що показує більше інформації про ділянку. **Історія користувача №15:** словесна бульбашка повинна мати властивість `data-year`, яка відповідає `data-xvalue` наведеної ділянки. Ось набір даних, необхідних для виконання цього проєкту: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json` Ви можете створити свій проєкт, використовуючи цей шаблон CodePen і натиснувши `Save`. Або ж ви можете скористатися цим посиланням CDN, щоб виконати тести в будь-якому середовищі: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` Як тільки закінчите, надайте посилання на свій проєкт з усіма пройденими тестами. # --solutions-- ```js // solution required ```