5.1 KiB
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7168d8c242eddfaeb5bd13 | Візуалізуйте дані за допомогою стовпчикової діаграми | 3 | 301464 | visualize-data-with-a-bar-chart |
--description--
Objective: створити CodePen.io застосунок, функціонально схожий на цей: https://codepen.io/freeCodeCamp/full/GrZVaM.
Нижче заповніть 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 g з відповідним id="x-axis".
User Story #3: Моя діаграма повинна мати елемент осі Y g з відповідним id="y-axis".
User Story #4: Обидві осі повинні містити по кілька позначок, кожна з відповідним class="tick".
User Story #5: Моя діаграма повинна мати елемент rect для кожної точки даних з відповідним class="bar", що відображає дані.
User Story #6: Кожна діаграма повинна мати властивості data-date та data-gdp, які містять значення date та GDP.
User Story #7: Властивості data-date елементів діаграми повинні відповідати послідовності наданих даних.
User Story #8: Властивості data-gdp елементів діаграми повинні відповідати послідовності наданих даних.
User Story #9: Висота кожного елемента діаграми повинна точно відображати відповідні дані GDP.
User Story #10: Атрибут data-date та його відповідний елемент діаграми повинні бути на рівні з відповідним значенням на осі Х.
User Story #11: Атрибут data-gdp та його відповідний елемент діаграми повинні бути на рівні з відповідним значенням на осі Y.
User Story #12: Я можу навести курсор на область і побачити спливаючу підказку з відповідним id="tooltip", що відображає більше інформації про область.
User Story #13: Моя спливаюча підказка повинна мати показник data-date, що відповідає data-date активної області.
Тут ви знайдете набір даних, необхідний для виконання цього проєкту: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json
Ви можете створити свій проєкт using this CodePen template і натиснувши Save, аби створити власний фрагмент. Або ж ви можете використати це CDN-посилання, щоб провести тести в будь-якому середовищі: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js.
Щойно впораєтеся, прикріпіть URL-адресу із пройденими тестами до проєкту, над яким працюєте.
--solutions--
// solution required