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