chore(i18n,curriculum): processed translations - new ukrainian (#44447)

curriculum/challenges/ukrainian/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md

@@ -0,0 +1,53 @@
+---
+id: bd7168d8c242eddfaeb5bd13
+title: Візуалізуйте дані за допомогою стовпчикової діаграми
+challengeType: 3
+forumTopicId: 301464
+dashedName: visualize-data-with-a-bar-chart
+---
+
+# --description--
+
+**Objective:** створити [CodePen.io](https://codepen.io) застосунок, функціонально схожий на цей: <https://codepen.io/freeCodeCamp/full/GrZVaM>.
+
+Нижче заповніть [user stories](https://en.wikipedia.org/wiki/User_story) та проведіть усі тести. Зробіть це своїм власним способом.
+
+Ви можете скористатися 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`
+
+Ви можете створити свій проєкт <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> і натиснувши `Save`, аби створити власний фрагмент. Або ж ви можете використати це CDN-посилання, щоб провести тести в будь-якому середовищі: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
+
+Щойно впораєтеся, прикріпіть URL-адресу із пройденими тестами до проєкту, над яким працюєте.
+
+# --solutions--
+
+```js
+// solution required
+```

curriculum/challenges/ukrainian/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md

@@ -0,0 +1,52 @@
+---
+id: 587d7fa6367417b2b2512bbf
+title: Візуалізуйте дані за допомогою фонової картограми
+challengeType: 3
+forumTopicId: 301465
+dashedName: visualize-data-with-a-choropleth-map
+---
+
+# --description--
+
+**Objective:** Створіть додаток [CodePen.io](https://codepen.io), функціонально схожий на цей: <https://codepen.io/freeCodeCamp/full/EZKqza>.
+
+Нижче заповніть [user stories](https://en.wikipedia.org/wiki/User_story) та проведіть усі тести. Зробіть це у свій особистий спосіб.
+
+Ви можете скористатися HTML, JavaScript, CSS та бібліотекою візуалізації, що базується на D3 svg. Необхідні (невіртуальні) DOM-елементи запитуються під час кожного тесту. Якщи ви використовуєте фронтенд-фреймворк (як-от, наприклад, Vue), результати тестів можуть бути неточними для динамічного контенту. Ми сподіваємося скоро їх налагодити, однак наразі ці фреймворки не підтримуються для проєктів D3.
+
+**User Story #1:** Моя фонова картограма повинна мати назву з відповідним `id="title"`.
+
+**User Story #2:** Моя фонова картограма повинна мати елемент опису з відповідним `id="description"`.
+
+**User Story #3:** Моя фонова картограма повинна мати округи з відповідним `class="county"`, що відображають дані.
+
+**User Story #4:** Потрібно використати щонайменше 4 різних кольори заливки для округів.
+
+**User Story #5:** Кожен округ повинен мати властивості `data-fips` та `data-education`, що містять їх відповідні значення `fips` та `education`.
+
+**User Story #6:** Моя фонова картограма повинна мати округ для кожної наданої точки даних.
+
+**User Story #7:** Округи повинні мати значення `data-fips` та `data-education`, що відповідають вибірковим даним.
+
+**User Story #8:** Моя фонова картограма повинна мати легенду з відповідним `id="legend"`.
+
+**User Story #9:** Потрібно використати щонайменше 4 різних кольори заливки для легенди.
+
+**User Story #10:** Я можу навести курсор на область і побачити спливаючу підказку з відповідним `id="tooltip"`, що відображає більше інформації про область.
+
+**User Story #11:** Моя спливаюча підказка повинна мати показник `data-education`, що відповідає `data-education` активної області.
+
+Тут ви знайдете набори даних, необхідні для виконання цього проєкту:
+
+-   **US Education Data:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
+-   **US County Data:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json`
+
+Ви можете створити свій проєкт <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> і натиснувши `Save`, аби створити власний фрагмент. Або ж ви можете використати це CDN-посилання, щоб провести тести на будь-якому середовищі: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+Щойно впораєтеся, прикріпіть URL-адресу із пройденими тестами до проєкту, над яким працюєте.
+
+# --solutions--
+
+```js
+// solution required
+```

curriculum/challenges/ukrainian/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md

@@ -0,0 +1,61 @@
+---
+id: bd7188d8c242eddfaeb5bd13
+title: Візуалізуйте дані за допомогою теплокарти
+challengeType: 3
+forumTopicId: 301466
+dashedName: visualize-data-with-a-heat-map
+---
+
+# --description--
+
+**Objective:** створити додаток [CodePen.io](https://codepen.io), що функціонально схожий на цей: <https://codepen.io/freeCodeCamp/full/JEXgeY>.
+
+Нижче заповніть [user stories](https://en.wikipedia.org/wiki/User_story) та проведіть усі тести. Зробіть це у свій власний спосіб.
+
+Ви можете скористатися HTML, JavaScript, CSS та бібліотекою візуалізації, що базується на D3 svg. Необхідні (невіртуальні) DOM-елементи запитуються під час кожного тесту. Якщи ви використовуєте фронтенд-фреймворк (як-от, наприклад, Vue), результати тестів можуть бути неточними для динамічного контенту. Ми сподіваємося скоро їх налагодити, однак наразі ці фреймворки не підтримуються для проєктів D3.
+
+**User Story #1:** Моя теплова карта повинна мати назву з відповідним `id="title"`.
+
+**User Story #2:** Моя теплова карта повинна мати опис з відповідним `id="description"`.
+
+**User Story #3:** Моя теплова карта повинна мати вісь X з відповідним `id="x-axis"`.
+
+**User Story #4:** Моя теплова карта повинна мати вісь Y з відповідним `id="y-axis"`.
+
+**User Story #5:** Моя теплова карта повинна мати елементи `rect` з `class="cell"`, що відображає дані.
+
+**User Story #6:** Потрібно використати щонайменше 4 різних кольори заливки для клітинок.
+
+**User Story #7:** Кожна клітинка повинна мати властивості `data-month`, `data-year`, `data-temp`, що міститимуть їх відповідні значення `month`, `year` та `temperature`.
+
+**User Story #8:** `data-month`, `data-year` кожної клітинки мають знаходитися в межах діапазону даних.
+
+**User Story #9:** Моя теплова карта повинна мати клітинки, розташовані на одному рівні з відповідним місяцем на осі Y.
+
+**User Story #10:** Моя теплова карта повинна мати клітинки, розташовані на одному рівні з відповідним роком на осі X.
+
+**User Story #11:** Моя теплова карта повинна мати декілька позначок з повною назвою місяця на осі Y.
+
+**User Story #12:** Моя теплова карта повинна мати декілька позначок з роками між 1754 та 2015 на осі X.
+
+**User Story #13:** Моя теплова карта повинна мати легенду з відповідним `id="legend"`.
+
+**User Story #14:** Моя легенда повинна містити елементи `rect`.
+
+**User Story #15:** Елементи `rect` у легенді повинні використовувати принаймні 4 різних кольори заливки.
+
+**User Story #16:** Я може навести курсор на область і побачити спливаючу підказку з відповідним `id="tooltip"`, що відображає більше інформації про область.
+
+**User Story #17:** Моя спливаюча підказка повинна мати показник `data-year`, що відповідає `data-year` активної області.
+
+Тут ви знайдете набір даних, необхідний для виконання цього проєкту: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json`
+
+Ви можете створити свій проєкт <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> і натиснувши `Save`, аби створити власний фрагмент. Або ж ви можете використати це CDN-посилання, щоб провести тести в будь-якому середовищі: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+Щойно впораєтеся, прикріпіть URL-адресу із пройденими тестами до проєкту, над яким працюєте.
+
+# --solutions--
+
+```js
+// solution required
+```

curriculum/challenges/ukrainian/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md

@@ -0,0 +1,57 @@
+---
+id: bd7178d8c242eddfaeb5bd13
+title: Візуалізуйте дані за допомогою діаграми розсіювання
+challengeType: 3
+forumTopicId: 301467
+dashedName: visualize-data-with-a-scatterplot-graph
+---
+
+# --description--
+
+**Objective:** Створіть застосунок [CodePen.io](https://codepen.io), функціонально схожий на цей: <https://codepen.io/freeCodeCamp/full/bgpXyK>.
+
+Нижче заповніть [user stories](https://en.wikipedia.org/wiki/User_story) та проведіть усі тести. Зробіть це у свій власний спосіб.
+
+Ви можете скористатися 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`
+
+Ви можете створити свій проєкт <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> і натиснувши `Save`, аби створити власний фрагмент. Або ж ви можете скористатися цим CDN-посиланням, щоб провести тести в будь-якому середовищі: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+Щойно впораєтеся, прикріпіть URL-адресу із пройденими тестами до проєкту, над яким працюєте.
+
+# --solutions--
+
+```js
+// solution required
+```

curriculum/challenges/ukrainian/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md

@@ -0,0 +1,53 @@
+---
+id: 587d7fa6367417b2b2512bc0
+title: Візуалізуйте дані за допомогою діаграми Treemap
+challengeType: 3
+forumTopicId: 301468
+dashedName: visualize-data-with-a-treemap-diagram
+---
+
+# --description--
+
+**Objective:** Створити додаток [CodePen.io](https://codepen.io), функціонально схожий на цей: <https://codepen.io/freeCodeCamp/full/KaNGNR>.
+
+Нижче заповніть [історії користувача](https://en.wikipedia.org/wiki/User_story) та отримайте всі тести для проходження. Зробіть це у свій власний спосіб.
+
+Ви можете скористатися 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:** Моя діаграма Treemap повинна мати назву з відповідним `id="title"`.
+
+**User Story #2:** Моя діаграма Treemap повинна мати опис з відповідним `id="description"`.
+
+**User Story #3:** Моя діаграма Treemap повинна мати елементи `rect` з відповідним `class="tile"`, що відображає дані.
+
+**User Story #4:** Потрібно використати щонайменше 2 різних кольори заливки для комірок.
+
+**User Story #5:** Кожна комірка повинна мати властивості `data-name`, `data-category` та `data-value`, що міститимуть їх відповідні `name`, `category` та `value`.
+
+**User Story #6:** Область кожної комірки повинна відповідати обсягу `data-value`: комірки з більшою `data-value` повинні мати більшу площу.
+
+**User Story #7:** Моя діаграма Treemap повинна мати легенду з відповідним `id="legend"`.
+
+**User Story #8:** Моя легенда повинна мати елементи `rect` з відповідним `class="legend-item"`.
+
+**User Story #9:** Для елементів `rect` у легенді треба використати принаймні 2 різних кольори заливки.
+
+**User Story #10:** Я можу навести курсор на область і побачити спливаючу підказку з відповідним `id="tooltip"`, що відображає більше інформації про область.
+
+**User Story #11:** Моя спливаюча підказка повинна мати показник `data-value`, що відповідає `data-value` активної області.
+
+Для цього проєкту ви можете скористатися будь-яким із цих наборів даних:
+
+-   **Kickstarter Pledges:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json`
+-   **Movie Sales:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json`
+-   **Video Game Sales:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json`
+
+Ви можете створити свій проєкт <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> і натиснувши `Save`, аби створити власний фрагмент. Або ж ви можете скористатися цим CDN-посиланням, щоб провести тести в будь-якому середовищі: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+Щойно впораєтеся, прикріпіть URL-адресу із пройденими тестами до проєкту, над яким працюєте.
+
+# --solutions--
+
+```js
+// solution required
+```