mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-07 22:00:56 -04:00
54 lines
5.4 KiB
Markdown
54 lines
5.4 KiB
Markdown
---
|
||
id: bd7168d8c242eddfaeb5bd13
|
||
title: Візуалізуйте дані за допомогою стовпчикової діаграми
|
||
challengeType: 3
|
||
forumTopicId: 301464
|
||
dashedName: visualize-data-with-a-bar-chart
|
||
---
|
||
|
||
# --description--
|
||
|
||
**Мета:** створити застосунок, функціонально схожий до <a href="https://bar-chart.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://bar-chart.freecodecamp.rocks</a>.
|
||
|
||
Виконайте історію користувача та пройдіть тести. Використовуйте необхідні вам бібліотеки або API. Оформте за власним стилем.
|
||
|
||
Ви можете використовувати HTML, JavaScript, CSS та бібліотеку візуалізації D3 на основі svg. Для тестів потрібно згенерувати осі, використовуючи властивість осі D3, що автоматично створює відмітки вздовж осі. Ці відмітки потрібні для проходження тестів D3, оскільки їхнє положення використовується для вирівнювання графічних елементів. Ви можете знайти інформацію про генерування осей на <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Необхідні DOM-елементи запитуються під час кожного тесту. Якщо ви використовуєте фронтенд-фреймворк (наприклад, Vue), результати тестів можуть бути неточними для динамічного вмісту. Ми сподіваємося скоро їх налагодити, однак наразі ці фреймворки не підтримуються для проєктів D3.
|
||
|
||
**Історія користувача №1:** моя діаграма повинна мати заголовок з відповідним `id="title"`.
|
||
|
||
**Історія користувача №2:** моя діаграма повинна мати елемент осі Х `g` з відповідним `id="x-axis"`.
|
||
|
||
**Історія користувача №3:** моя діаграма повинна мати елемент осі Y `g` з відповідним `id="y-axis"`.
|
||
|
||
**Історія користувача №4:** обидві осі повинні містити декілька позначок, кожна з відповідним `class="tick"`.
|
||
|
||
**Історія користувача №5:** моя діаграма повинна мати елемент `rect` для кожної точки даних з відповідним `class="bar"`, що показує дані.
|
||
|
||
**Історія користувача №6:** кожен `.bar` повинен мати властивості `data-date` та `data-gdp` зі значеннями `date` та `GDP`.
|
||
|
||
**Історія користувача №7:** властивості `data-date` елементів `.bar` повинні відповідати послідовності наданих даних.
|
||
|
||
**Історія користувача №8:** властивості `data-gdp` елементів `.bar` повинні відповідати послідовності наданих даних.
|
||
|
||
**Історія користувача №9:** висота кожного елемента `.bar` повинна точно показувати відповідний `GDP`.
|
||
|
||
**Історія користувача №10:** атрибут `data-date` та його відповідний елемент `.bar` повинні бути на рівні з відповідним значенням на осі Х.
|
||
|
||
**Історія користувача №11:** атрибут `data-gdp` та його відповідний елемент `.bar` повинні бути на рівні з відповідним значенням на осі Y.
|
||
|
||
**Історія користувача №12:** я можу навести курсор на певну ділянку та побачу спливаючу підказку з відповідним `id="tooltip"`, що показує більше інформації про ділянку.
|
||
|
||
**Історія користувача №13:** спливаюча підказка повинна мати властивість `data-date`, яка відповідає `data-date` наведеної ділянки.
|
||
|
||
Ось набір даних, необхідних для виконання цього проєкту: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json`
|
||
|
||
Ви можете створити свій проєкт, <a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">використовуючи цей шаблон CodePen</a> і натиснувши `Save`. Або ж ви можете скористатися цим посиланням CDN, щоб виконати тести в будь-якому середовищі: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||
|
||
Як тільки закінчите, надайте посилання на свій проєкт з усіма пройденими тестами.
|
||
|
||
# --solutions--
|
||
|
||
```js
|
||
// solution required
|
||
```
|