5.5 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7178d8c242eddfaeb5bd13 | Візуалізуйте дані за допомогою діаграми розсіювання | 3 | 301467 | visualize-data-with-a-scatterplot-graph |
--description--
Objective: Створіть застосунок CodePen.io, функціонально схожий на цей: https://codepen.io/freeCodeCamp/full/bgpXyK.
Нижче заповніть user stories та проведіть усі тести. Зробіть це у свій власний спосіб.
Ви можете скористатися HTML, JavaScript, CSS та бібліотекою візуалізації, що базується на D3 svg. Для тестів потрібно згенерувати осі, використовуючи властивість осі D3, що автоматично створює відмітки вздовж осі. Ці відмітки потрібні для проходження D3 тестів, тому що їх положення використовуються для визначення вирівнювання зображених елементів. Ви можете знайти інформацію про генерування осей тут https://github.com/d3/d3/blob/master/API.md#axes-d3-axis. Необхідні (невіртуальні) 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--
// solution required