chore(i18n,curriculum): processed translations - new ukrainian (#44447)
This commit is contained in:
camperbot
GitHub
@@ -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
|
||||
```
|
||||
@@ -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
|
||||
```
|
||||
@@ -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
|
||||
```
|
||||
@@ -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
|
||||
```
|
||||
@@ -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
|
||||
```
|
||||
@@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd4
|
||||
title: Додавання до елементу D3 ефекту при наведенні курсором
|
||||
challengeType: 6
|
||||
forumTopicId: 301469
|
||||
dashedName: add-a-hover-effect-to-a-d3-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Однією з можливостей є додавання до елемента ефектів, які його виділятимуть, коли користувач наводить на нього курсор. Поки що стилізація прямокутників застосовується з вбудованими D3 та SVG методами, але ви можете також використовувати і CSS.
|
||||
|
||||
Спочатку ви встановлюєте CSS клас на елементах SVG за допомогою методу `attr()`. Потім псевдоклас `:hover` для вашого нового класу зберігає правила стилю для будь-яких ефектів, які виникаються при наведенні курсором.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Використайте метод `attr()`, щоб додати клас `bar` до всіх елементів `rect`. Це змінює колір елементу `fill` на коричневий, коли ви наводите на нього курсор.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваші елементи `rect` повинні мати клас `bar`.
|
||||
|
||||
```js
|
||||
assert($('rect').attr('class').trim().split(/\s+/g).includes('bar'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar:hover {
|
||||
fill: brown;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => 3 * d)
|
||||
.attr("fill", "navy")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => d)
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - (3 * d) - 3);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar:hover {
|
||||
fill: brown;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => 3 * d)
|
||||
.attr("fill", "navy")
|
||||
// Add your code below this line
|
||||
.attr('class', 'bar')
|
||||
// Add your code above this line
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => d)
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - (3 * d) - 3);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,175 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd6
|
||||
title: Додавання до елементу D3 спливаючої підказки
|
||||
challengeType: 6
|
||||
forumTopicId: 301470
|
||||
dashedName: add-a-tooltip-to-a-d3-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Спливаюча підказка відображає розширену інформацію про елемент на сторінці при наведенні на неї курсору миші. Є декілька способів додати спливаючу підказку до візуалізації, для цього завдання використовується елемент SVG `title`.
|
||||
|
||||
`title` працює у парі з методом `text()`, щоб динамічно додавати дані до стовпців.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте елемент `title` під кожен вузол `rect`. Потім застосуйте метод `text()` з функцією зворотнього зв'язку, щоб текст відображав значення даних.
|
||||
|
||||
# --hints--
|
||||
|
||||
У Вашому коді має бути 9 елементів `title`.
|
||||
|
||||
```js
|
||||
assert($('title').length == 9);
|
||||
```
|
||||
|
||||
Перший елемент `title` має містити текст підказки `12`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(0).text() == '12');
|
||||
```
|
||||
|
||||
Другий елемент `title` має містити текст підказки `31`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(1).text() == '31');
|
||||
```
|
||||
|
||||
Третій елемент `title` має містити текст підказки `22`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(2).text() == '22');
|
||||
```
|
||||
|
||||
Четвертий елемент `title` має містити текст підказки `17`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(3).text() == '17');
|
||||
```
|
||||
|
||||
П'ятий елемент `title` має містити текст підказки `25`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(4).text() == '25');
|
||||
```
|
||||
|
||||
Шостий елемент `title` має містити текст підказки `18`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(5).text() == '18');
|
||||
```
|
||||
|
||||
Сьомий елемент `title` має містити текст підказки `29`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(6).text() == '29');
|
||||
```
|
||||
|
||||
Восьмий елемент `title` має містити текст підказки `14`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(7).text() == '14');
|
||||
```
|
||||
|
||||
Дев'ятий елемент `title` має містити текст підказки `9`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(8).text() == '9');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar:hover {
|
||||
fill: brown;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => d * 3)
|
||||
.attr("fill", "navy")
|
||||
.attr("class", "bar")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => d)
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - (d * 3 + 3))
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar:hover {
|
||||
fill: brown;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => d * 3)
|
||||
.attr("fill", "navy")
|
||||
.attr("class", "bar")
|
||||
.append("title")
|
||||
.text((d) => d)
|
||||
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => d)
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - (d * 3 + 3))
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,211 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd8
|
||||
title: Додавання атрибутів до елементів "коло"
|
||||
challengeType: 6
|
||||
forumTopicId: 301471
|
||||
dashedName: add-attributes-to-the-circle-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Останнім завданням було створити елементи кола `circle` для кожного пункту в об'єкті `dataset` і додати їх до полотна SVG. Але D3 потребує додаткової інформації про положення та розмір кожного елемента `circle`, щоб відобразити їх правильно.
|
||||
|
||||
Елемент `circle` в SVG має три основні атрибути. Атрибути `cx` та `cy` — це координати. Вони вказують D3, де розташувати *центр* фігури на полотні SVG. Радіус (атрибут `r`) вказує розмір елемента `circle`.
|
||||
|
||||
Як і координата `rect` `y`, атрибут `cy` для елемента `circle` вимірюється від верху SVG полотна, не від низу.
|
||||
|
||||
Всі три атрибути можуть використовувати функцію зворотного зв'язку, щоб динамічно встановити свої значення. Пам'ятайте, що всі методи, згруповані після `data(dataset)` запускаються один раз на елемент у `dataset`. Параметр `d` у функції зворотного виклику посилається на поточний елемент в `dataset`, який є масивом для кожної точки. Використайте дужкову нотацію, наприклад, `d[0]`, щоб отримати доступ до значень в цьому масиві.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте атрибути `cx`, `cy`, а також `r` до елемента `circle`. Значення `cx` має бути першим числом у масиві для кожного елемента в `dataset`. Значення `cy` має базуватися на другому номері у масиві, але не забудьте показати графік правильно, а не інвертовано. Значення атрибуту `r` має дорівнювати `5` для всіх кіл.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш код повинен містити 10 елементів `circle`.
|
||||
|
||||
```js
|
||||
assert($('circle').length == 10);
|
||||
```
|
||||
|
||||
У першого елемента `circle` атрибут `cx` повинен мати значення `34`, атрибут `cy` — значення `422` і атрибут `r` — значення `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('circle').eq(0).attr('cx') == '34' &&
|
||||
$('circle').eq(0).attr('cy') == '422' &&
|
||||
$('circle').eq(0).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
У другого елемента `circle` атрибут `cx` повинен мати значення `109`, атрибут `cy` — значення `220` і атрибут `r` — значення `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('circle').eq(1).attr('cx') == '109' &&
|
||||
$('circle').eq(1).attr('cy') == '220' &&
|
||||
$('circle').eq(1).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
У третього елемента `circle` атрибут `cx` повинен мати значення `310`, атрибут `cy` — значення `380` і атрибут `r` — значення `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('circle').eq(2).attr('cx') == '310' &&
|
||||
$('circle').eq(2).attr('cy') == '380' &&
|
||||
$('circle').eq(2).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
У четвертого елемента `circle` атрибут `cx` повинен мати значення `79`, атрибут `cy` — значення `89` і атрибут `r` — значення `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('circle').eq(3).attr('cx') == '79' &&
|
||||
$('circle').eq(3).attr('cy') == '89' &&
|
||||
$('circle').eq(3).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
У п'ятого елемента `circle` атрибут `cx` повинен мати значення `420`, атрибут `cy` — значення `280` і атрибут `r` — значення `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('circle').eq(4).attr('cx') == '420' &&
|
||||
$('circle').eq(4).attr('cy') == '280' &&
|
||||
$('circle').eq(4).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
У шостого елемента `circle` атрибут `cx` повинен мати значення `233`, атрибут `cy` — значення `355` і атрибут `r` — значення `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('circle').eq(5).attr('cx') == '233' &&
|
||||
$('circle').eq(5).attr('cy') == '355' &&
|
||||
$('circle').eq(5).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
У сьомого елемента `circle` атрибут `cx` повинен мати значення `333`, атрибут `cy` — значення `404` і атрибут `r` — значення `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('circle').eq(6).attr('cx') == '333' &&
|
||||
$('circle').eq(6).attr('cy') == '404' &&
|
||||
$('circle').eq(6).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
У восьмого елемента `circle` атрибут `cx` повинен мати значення `222`, атрибут `cy` — значення `167` і атрибут `r` — значення `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('circle').eq(7).attr('cx') == '222' &&
|
||||
$('circle').eq(7).attr('cy') == '167' &&
|
||||
$('circle').eq(7).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
У дев'ятого елемента `circle` атрибут `cx` повинен мати значення `78`, атрибут `cy` — значення `180` і атрибут `r` — значення `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('circle').eq(8).attr('cx') == '78' &&
|
||||
$('circle').eq(8).attr('cy') == '180' &&
|
||||
$('circle').eq(8).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
У десятого елемента `circle` атрибут `cx` повинен мати значення `21`, атрибут `cy` — значення `377` і атрибут `r` — значення `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('circle').eq(9).attr('cx') == '21' &&
|
||||
$('circle').eq(9).attr('cy') == '377' &&
|
||||
$('circle').eq(9).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("cx", (d) => d[0])
|
||||
.attr("cy", (d) => h - d[1])
|
||||
.attr("r", 5)
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,198 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512bdf
|
||||
title: Додай вісь до візуалізації
|
||||
challengeType: 6
|
||||
forumTopicId: 301472
|
||||
dashedName: add-axes-to-a-visualization
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Інший спосіб покращити точкову діаграму - додати x- значення та у- значення.
|
||||
|
||||
D3 має два методи, `axisLeft()` та `axisBottom()`, щоб зобразити вісь y та вісь x відповідно. Ось приклад для створення осі Х на основі `xScale` у попередніх завданнях:
|
||||
|
||||
```js
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
```
|
||||
|
||||
Наступний крок - візуалізувати вісь на полотні SVG. Для цього можна використати загальний компонент SVG, елемент `g`. Стрічка `g` відповідає за групу. На відміну від `rect`, `circle`, and `text` , вісь - це просто пряма лінія при відображенні. Оскільки це проста фігура, використовуючи `g` працює. Останній крок - застосувати атрибут `transform` для розміщення осі на полотні SVG в потрібному місці. В іншому випадку здійсниться лінія вздовж межі полотна SVG яка не буде видима. SVG підтримує різні типи `transforms`, але позиціювання осей потрібно `translate`. Коли елемент застосований до елемента `g` , він пересуне всю групу на задані кількості. Ось приклад:
|
||||
|
||||
```js
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
|
||||
svg.append("g")
|
||||
.attr("transform", "translate(0, " + (h - padding) + ")")
|
||||
.call(xAxis);
|
||||
```
|
||||
|
||||
Наведений вище код встановлює вісь х на нижній частині SVG полотна. Тоді він переданий в якості аргументу `call()`. Вісь Y працює так само, за винятком `translate` аргументу у вигляді `(x, 0)`. Тому що `translate` є рядком в методі `attr()` вище, ви можете використовувати конкатенацію для включення змінних значень для їх аргументів.
|
||||
|
||||
# --instructions--
|
||||
|
||||
У точковому графіку тепер є вісь Х. Створіть вісь У в змінній `yAxis` використовуючи `axisLeft()` метод. Потім зобразіть вісь, використовуючи елемент `g`. Переконайтеся, що за допомогою `transform` атрибут для перекладу осі на кількість одиниць виконано вправо, та `0` одиниць вниз. Не забудьте встановити `call()` вісь.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш код повинен використовувати метод `axisLeft()` з `yScale` в якості аргументу.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.axisLeft\(yScale\)/g));
|
||||
```
|
||||
|
||||
Елемент осі Y `g` повинен мати атрибут `transform` для перекладу осі на `(60, 0)`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('g')
|
||||
.eq(10)
|
||||
.attr('transform')
|
||||
.match(/translate\(60\s*?,\s*?0\)/g)
|
||||
);
|
||||
```
|
||||
|
||||
Ваш код повинен містити один теґ `audio`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.call\(\s*yAxis\s*\)/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
const padding = 60;
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[0])])
|
||||
.range([padding, w - padding]);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[1])])
|
||||
.range([h - padding, padding]);
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("cx", (d) => xScale(d[0]))
|
||||
.attr("cy",(d) => yScale(d[1]))
|
||||
.attr("r", (d) => 5);
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => (d[0] + "," + d[1]))
|
||||
.attr("x", (d) => xScale(d[0] + 10))
|
||||
.attr("y", (d) => yScale(d[1]))
|
||||
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
// Add your code below this line
|
||||
const yAxis = undefined;
|
||||
// Add your code above this line
|
||||
|
||||
svg.append("g")
|
||||
.attr("transform", "translate(0," + (h - padding) + ")")
|
||||
.call(xAxis);
|
||||
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
const padding = 60;
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[0])])
|
||||
.range([padding, w - padding]);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[1])])
|
||||
.range([h - padding, padding]);
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("cx", (d) => xScale(d[0]))
|
||||
.attr("cy",(d) => yScale(d[1]))
|
||||
.attr("r", (d) => 5);
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => (d[0] + "," + d[1]))
|
||||
.attr("x", (d) => xScale(d[0] + 10))
|
||||
.attr("y", (d) => yScale(d[1]))
|
||||
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
|
||||
const yAxis = d3.axisLeft(yScale);
|
||||
|
||||
|
||||
svg.append("g")
|
||||
.attr("transform", "translate(0," + (h - padding) + ")")
|
||||
.call(xAxis);
|
||||
|
||||
svg.append("g")
|
||||
.attr("transform", "translate(" + padding + ",0)")
|
||||
.call(yAxis)
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc8
|
||||
title: Додавання класів з D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301473
|
||||
dashedName: add-classes-with-d3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Багатьма вбудованими стилями в елементах HTML важко управляти, навіть у менших застосунках. Простіше додати клас до елементів та стилізувати його, використовуючи правила CSS. D3 має метод `attr()`, що дає змогу додавати будь-який атрибут HTML до елемента, включно ім'я класу.
|
||||
|
||||
Метод `attr()` працює так само, як і `style()`. Він застосовує значення, розділені комою, і може використовувати функцію зворотного виклику (callback function). Ось приклад того, як додати клас `container` до вибраного:
|
||||
|
||||
```js
|
||||
selection.attr("class", "container");
|
||||
```
|
||||
|
||||
Зауважте, що параметр `class` залишиться таким же, коли потрібно додати клас, і лише параметр `container` зміниться.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте метод `attr()` до коду в редакторі і застосуйте клас `bar` до елементів `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елементи `div` повинні мати клас `bar`.
|
||||
|
||||
```js
|
||||
assert($('div').attr('class').trim().split(/\s+/g).includes('bar'));
|
||||
```
|
||||
|
||||
Ваш код має застосовувати метод `attr()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.attr/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("div")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("div")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("div")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("div")
|
||||
// Add your code below this line
|
||||
.attr("class","bar");
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc2
|
||||
title: Додавайте елементи документа за допомогою D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301474
|
||||
dashedName: add-document-elements-with-d3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
У D3 є кілька способів, щоб додавати і змінювати елементи у вашому документі.
|
||||
|
||||
Метод `select()` дозволяє вибрати один елемент документа. Задається аргумент імені елемента, який вам потрібен і повертається HTML-вузол першого елемента в документі, який відповідає назві. Наприклад:
|
||||
|
||||
```js
|
||||
const anchor = d3.select("a");
|
||||
```
|
||||
|
||||
У наведеному вище прикладі знайдено перший тег прив'язки на сторінці та збережено для нього HTML-вузол у змінній `anchor`. Вибирати елементи можна і за допомогою інших методів. Частина `d3` в прикладі - це посилання на об’єкт D3, через яке ми отримуємо доступ до методів D3.
|
||||
|
||||
Ще два корисні методи: `append()` та `text()`.
|
||||
|
||||
Метод `append()` приймає аргумент для елементу, який ви хочете додати до документа. До вибраного елемента додається HTML-вузол і ви отримуєте дескриптор до цього вузла.
|
||||
|
||||
Метод `text()` задає текст вибраного вузла або даний текст. Щоб задати значення, потрібно передати рядок у вигляді аргументу в дужках методу.
|
||||
|
||||
Ось приклад встановлення невпорядкованого списку, додавання пункту списку і тексту:
|
||||
|
||||
```js
|
||||
d3.select("ul")
|
||||
.append("li")
|
||||
.text("Very important item");
|
||||
```
|
||||
|
||||
D3 дозволяє використовувати методи в комбінаціях, щоб виконувати кілька дій одна за одною.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Використовуйте метод `select`, щоб обрати тег `body` в документі. Тоді за допомогою `append` додайте тег `h1`, а тоді текст `Learning D3` в елемент `h1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Тег `body` повинен мати один елемент `h1`.
|
||||
|
||||
```js
|
||||
assert($('body').children('h1').length == 1);
|
||||
```
|
||||
|
||||
Елемент `h1` повинен містити текст `Learning D3`.
|
||||
|
||||
```js
|
||||
assert($('h1').text() == 'Learning D3');
|
||||
```
|
||||
|
||||
Ваш код повинен мати доступ до об’єкта `d3`.
|
||||
|
||||
```js
|
||||
assert(code.match(/d3/g));
|
||||
```
|
||||
|
||||
Ваш код має застосовувати метод`select`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.select/g));
|
||||
```
|
||||
|
||||
Ваш код має застосовувати метод `append`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.append/g));
|
||||
```
|
||||
|
||||
Ваш код має застосовувати метод `text`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.text/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
d3.select("body")
|
||||
.append("h1")
|
||||
.text("Learning D3")
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc6
|
||||
title: Додавання вбудованих стилів (Inline Styling) до елементів
|
||||
challengeType: 6
|
||||
forumTopicId: 301475
|
||||
dashedName: add-inline-styling-to-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
D3 дозволяє додати вбудовані стилі CSS для динамічних елементів методом `style()`.
|
||||
|
||||
Метод `style()` приймає пару ключ-значення, розділену комами, як аргумент. Ось приклад, як змінити колір тексту вибірки на блакитний:
|
||||
|
||||
```js
|
||||
selection.style("color","blue");
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте метод `style()` до коду в редакторі, щоб з сімейства шрифтів `font-family` всі відображені тексти були у стилі `verdana`.
|
||||
|
||||
# --hints--
|
||||
|
||||
З набору шрифтів `font-family` оберіть `verdana` для елементів `h2`.
|
||||
|
||||
```js
|
||||
assert($('h2').css('font-family') == 'verdana');
|
||||
```
|
||||
|
||||
Ваш код повинен використовувати метод `style()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.style/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("h2")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("h2")
|
||||
.text((d) => (d + " USD"))
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("h2")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("h2")
|
||||
.text((d) => (d + " USD"))
|
||||
.style("font-family", "verdana")
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,153 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd2
|
||||
title: Додайте позначки D3 елементів
|
||||
challengeType: 6
|
||||
forumTopicId: 301476
|
||||
dashedName: add-labels-to-d3-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
D3 дозволяє позначати елемент графіку, наприклад, діаграму, за допомогою елемента SVG `text` element.
|
||||
|
||||
Як і елемент `rect`, елемент `text` повинен мати атрибути `x` та `y`, щоб розмістити їх на SVG полотні. Крім того, необхідно отримати доступ до даних для відображення цих значень.
|
||||
|
||||
D3 дає вам високий рівень контролю над тим, як ви позначаєте свої діаграми.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Код у редакторі вже пов’язує дані з кожним новим елементом `text`. Спочатку додайте вузли `text` до `svg`. Далі додайте атрибути для координат `x` та `y`. Їх слід обчислювати так само, як і значення `rect`, за винятком того, що значення `y` для `text` повинно зробити позначку на 3 одиниці вище, ніж діаграма. Нарешті, використовуйте метод D3 `text()`, щоб встановити позначку рівною значенню точки даних.
|
||||
|
||||
**Note:** Щоб позначка розташовувалася вище за смугу, вирішіть, чи має значення `y` для `text` бути на 3 позиції більше або на 3 менше від значення `y`на діаграмі.
|
||||
|
||||
# --hints--
|
||||
|
||||
Перший елемент `text` повинен мати позначку `12` та `y` значення `61`.
|
||||
|
||||
```js
|
||||
assert($('text').eq(0).text() == '12' && $('text').eq(0).attr('y') == '61');
|
||||
```
|
||||
|
||||
Другий елемент `text` повинен мати позначку `31` та `y` значення`4`.
|
||||
|
||||
```js
|
||||
assert($('text').eq(1).text() == '31' && $('text').eq(1).attr('y') == '4');
|
||||
```
|
||||
|
||||
Третій елемент `text` повинен мати позначку `22` та `y` значення `31`.
|
||||
|
||||
```js
|
||||
assert($('text').eq(2).text() == '22' && $('text').eq(2).attr('y') == '31');
|
||||
```
|
||||
|
||||
Четвертий елемент `text` повинен мати позначку`17` та `y` значення `46`.
|
||||
|
||||
```js
|
||||
assert($('text').eq(3).text() == '17' && $('text').eq(3).attr('y') == '46');
|
||||
```
|
||||
|
||||
П'ятий елемент `text` повинен мати позначку `25` та `y` значення`22`.
|
||||
|
||||
```js
|
||||
assert($('text').eq(4).text() == '25' && $('text').eq(4).attr('y') == '22');
|
||||
```
|
||||
|
||||
Шостий елемент `text` повинен мати позначку `18` та `y` значення `43`.
|
||||
|
||||
```js
|
||||
assert($('text').eq(5).text() == '18' && $('text').eq(5).attr('y') == '43');
|
||||
```
|
||||
|
||||
Сьомий елемент `text` повинен мати позначку `29` та `y`значення `10`.
|
||||
|
||||
```js
|
||||
assert($('text').eq(6).text() == '29' && $('text').eq(6).attr('y') == '10');
|
||||
```
|
||||
|
||||
Восьмий елемент `text` повинен мати позначку `14` та `y` значення`55`.
|
||||
|
||||
```js
|
||||
assert($('text').eq(7).text() == '14' && $('text').eq(7).attr('y') == '55');
|
||||
```
|
||||
|
||||
Дев’ятий елемент `text` повинен мати позначку `9` та `y`значення `70`.
|
||||
|
||||
```js
|
||||
assert($('text').eq(8).text() == '9' && $('text').eq(8).attr('y') == '70');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => 3 * d)
|
||||
.attr("fill", "navy");
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
<body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => 3 * d)
|
||||
.attr("fill", "navy");
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - (3 * d) - 3)
|
||||
.text((d) => d)
|
||||
</script>
|
||||
<body>
|
||||
```
|
||||
@@ -0,0 +1,224 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd9
|
||||
title: Додавання міток до кіл точкової діаграми (діаграма розсіювання)
|
||||
challengeType: 6
|
||||
forumTopicId: 301477
|
||||
dashedName: add-labels-to-scatter-plot-circles
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете додати текст, щоб створити мітки для точок у точковій діаграмі.
|
||||
|
||||
Для цього слід відобразити значення, розділені комами, для першого (`x`) та другого (`y`) векторних полів кожного елементу в `dataset`.
|
||||
|
||||
Вузлам `text` потрібні атрибути `x` and `y`, щоб розташувати його на полотні SVG. Щоб вирішити це завдання, значення `y` value (визначає висоту) може мати те ж значення, яке елемент `circle` використовує для свого атрибута `cy`. Значення `x` може бути дещо більшим, ніж значення `cx` елемента `circle`, тому мітку видно. Це дозволить перемістити мітку правіше від нанесеної точки.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Позначайте кожну точку на діаграмі розсіювання (точковій діаграмі), використовуючи елементи `text`. Два значення у тексті мітки повинні відокремлюватись комою і пробілом. Наприклад, мітка для першої точки становить `34, 78`. Задайте атрибут `x` так, щоб його значення становило на `5` одиниць більше, ніж значення, яке використовували для атрибуту `cx` елементу `circle`. Задайте атрибут `y` таким же способом, як для значення `cy` елементу `circle`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш код повинен мати 10 елементів `text`.
|
||||
|
||||
```js
|
||||
assert($('text').length == 10);
|
||||
```
|
||||
|
||||
Перша мітка повинна мати текст `34, 78`, вектор `x` - зі значенням `39` і вектор `y` - зі значенням `422`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('text').eq(0).text() == '34, 78' &&
|
||||
$('text').eq(0).attr('x') == '39' &&
|
||||
$('text').eq(0).attr('y') == '422'
|
||||
);
|
||||
```
|
||||
|
||||
Друга мітка повинна містити текст `109, 280`, вектор `x` - зі значенням `114` і вектор `y` - зі значенням `220`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('text').eq(1).text() == '109, 280' &&
|
||||
$('text').eq(1).attr('x') == '114' &&
|
||||
$('text').eq(1).attr('y') == '220'
|
||||
);
|
||||
```
|
||||
|
||||
У третій мітці - текст `310, 120`, вектор `x` має значення `315`, а вектор `y` - значення `380`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('text').eq(2).text() == '310, 120' &&
|
||||
$('text').eq(2).attr('x') == '315' &&
|
||||
$('text').eq(2).attr('y') == '380'
|
||||
);
|
||||
```
|
||||
|
||||
У четвертій мітці - текст `79, 411`, вектор `x` має значення `84` вектор `y` - значення `89`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('text').eq(3).text() == '79, 411' &&
|
||||
$('text').eq(3).attr('x') == '84' &&
|
||||
$('text').eq(3).attr('y') == '89'
|
||||
);
|
||||
```
|
||||
|
||||
П'ята мітка міститиме текст `420, 220`, вектор `x` має значення `425`, вектор `y` - значення `280`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('text').eq(4).text() == '420, 220' &&
|
||||
$('text').eq(4).attr('x') == '425' &&
|
||||
$('text').eq(4).attr('y') == '280'
|
||||
);
|
||||
```
|
||||
|
||||
Текст шостої мітки - `233, 145` зі значенням `238` вектора `x` і значенням `355` вектора `y`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('text').eq(5).text() == '233, 145' &&
|
||||
$('text').eq(5).attr('x') == '238' &&
|
||||
$('text').eq(5).attr('y') == '355'
|
||||
);
|
||||
```
|
||||
|
||||
Текст сьомої мітки містить `333, 96` зі значенням `338` вектора `x` і значенням `404` вектора `y`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('text').eq(6).text() == '333, 96' &&
|
||||
$('text').eq(6).attr('x') == '338' &&
|
||||
$('text').eq(6).attr('y') == '404'
|
||||
);
|
||||
```
|
||||
|
||||
Восьма мітка - з текстом `222, 333`, вектор `x` має значення `227`, а вектор `y` - значення `167`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('text').eq(7).text() == '222, 333' &&
|
||||
$('text').eq(7).attr('x') == '227' &&
|
||||
$('text').eq(7).attr('y') == '167'
|
||||
);
|
||||
```
|
||||
|
||||
Дев'ята мітка вміщує текст `78, 320`, векторне поле `x` має значення `83`, а поле `y` - значення `180`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('text').eq(8).text() == '78, 320' &&
|
||||
$('text').eq(8).attr('x') == '83' &&
|
||||
$('text').eq(8).attr('y') == '180'
|
||||
);
|
||||
```
|
||||
|
||||
Текст десятої мітки - `21, 123`, векторне поле `x` має значення `26`, а векторне поле `y` - значення `377`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('text').eq(9).text() == '21, 123' &&
|
||||
$('text').eq(9).attr('x') == '26' &&
|
||||
$('text').eq(9).attr('y') == '377'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("cx", (d, i) => d[0])
|
||||
.attr("cy", (d, i) => h - d[1])
|
||||
.attr("r", 5);
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("cx", (d, i) => d[0])
|
||||
.attr("cy", (d, i) => h - d[1])
|
||||
.attr("r", 5);
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.attr("x", (d) => d[0] + 5)
|
||||
.attr("y", (d) => h - d[1])
|
||||
.text((d) => (d[0] + ", " + d[1]))
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,123 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc7
|
||||
title: Зміна стилів на основі даних
|
||||
challengeType: 6
|
||||
forumTopicId: 301479
|
||||
dashedName: change-styles-based-on-data
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Про візуалізацію та подання даних можна дізнатися за допомогою D3. Ймовірно, що на основі даних ви захочете змінити стиль елементів. Для того, щоб змінити стиль для різних елементів, ви можете використати функцію зворотного зв'язку в методі `style()`.
|
||||
|
||||
Наприклад, ви можливо маєте бажання зафарбувати точку даних у синій колір, якщо її значення менше ніж 20, в іншому випадку - у червоний. Ви можете використати функцію зворотного зв'язку в методі `style()` і включити умовну логіку. Для відображення точки даних, функція зворотного зв'язку використовує параметр `d`:
|
||||
|
||||
```js
|
||||
selection.style("color", (d) => {
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
При використанні методу `style()` він не обмежується лише встановленням `color`, адже він може добре використовуватися і з іншими властивостями CSS.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Щоб встановити `color` елементів `h2` умовно, потрібно додати метод `style()` до коду в редакторі. Запишіть функцію зворотного зв'язку, щоб вона повертала червоний колір, якщо значення менше 20, в іншому випадку - зелений.
|
||||
|
||||
**Note:** Ви можете використовувати if-else логіку або тернарний оператор.
|
||||
|
||||
# --hints--
|
||||
|
||||
Перший `h2` повинен мати червоний `color`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(0).css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Другий `h2` повинен мати зелений `color`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(1).css('color') == 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
Третій `h2` повинен мати зелений `color`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(2).css('color') == 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
Четвертий `h2` повинен мати червоний `color`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(3).css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
П'ятий `h2` повинен мати зелений `color`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(4).css('color') == 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
Шостий `h2` повинен мати червоний `color`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(5).css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Сьомий `h2` повинен мати зелений `color`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(6).css('color') == 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
Восьмий `h2` повинен мати червоний `color`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(7).css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Дев'ятий `h2` повинен мати червоний `color`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(8).css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("h2")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("h2")
|
||||
.text((d) => (d + " USD"))
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("h2")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("h2")
|
||||
.text((d) => (d + " USD"))
|
||||
.style("color", (d) => d < 20 ? "red" : "green")
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bd1
|
||||
title: Зміна кольору елемента SVG
|
||||
challengeType: 6
|
||||
forumTopicId: 301480
|
||||
dashedName: change-the-color-of-an-svg-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Стовпці знаходяться в правильному положенні, але всі вони однакового чорного кольору. SVG має спосіб, як змінити колір стовпця.
|
||||
|
||||
В SVG форма `rect` забарвлена атрибутом `fill`. Він підтримує шістнадцяткові коди, назви кольорів та значення rgb, а також більш складні параметри, такі як градієнти та прозорість.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте метод `attr()` щоб встановити `fill` усім стовпцям темно-синій колір.
|
||||
|
||||
# --hints--
|
||||
|
||||
Стовпці мають всі `fill` в темно-синій колір.
|
||||
|
||||
```js
|
||||
assert($('rect').css('fill') == 'rgb(0, 0, 128)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => 3 * d)
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => 3 * d)
|
||||
.attr("fill", "navy");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,161 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bca
|
||||
title: Змінити вигляд стовпчикової діаграми
|
||||
challengeType: 6
|
||||
forumTopicId: 301481
|
||||
dashedName: change-the-presentation-of-a-bar-chart
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Останнім завданням було створити стовпчикову діаграму, але існує кілька змін форматування, що можуть покращити її:
|
||||
|
||||
1) Додайти пробіл між кожним стовпчиком, щоб візуально розділити їх, і це можна зробити за допомогою додавання відступу до CSS для класу `bar`
|
||||
|
||||
2) Збільшіть висоту стовпчиків, щоб краще показати різницю між значеннями, що можна зробити за допомогою множення значень на число, для масштабування висоти
|
||||
|
||||
# --instructions--
|
||||
|
||||
Спочатку додайте `margin` `2px` до класу `bar` у теґу `style`. Далі, змініть функцію у методі `style()`, щоб повернути значення `10` разів у вихідне значення даних (плюс `px`).
|
||||
|
||||
**Примітка:** Множення кожної точки даних на *ту саму* константу лише змінить шкалу. Це як збільшення, але воно не змінює значення основних даних.
|
||||
|
||||
# --hints--
|
||||
|
||||
Перший `div` повинен мати `height` `120` пікселів та `margin` з `2` пікселів.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div').eq(0).css('height') == '120px' &&
|
||||
$('div').eq(0).css('margin-right') == '2px'
|
||||
);
|
||||
```
|
||||
|
||||
Другий `div` повинен мати `height``310` пікселів та `margin` з `2` пікселів.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div').eq(1).css('height') == '310px' &&
|
||||
$('div').eq(1).css('margin-right') == '2px'
|
||||
);
|
||||
```
|
||||
|
||||
Третій `div` повинен мати `height` `220` пікселів та `margin` з `2` пікселів.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div').eq(2).css('height') == '220px' &&
|
||||
$('div').eq(2).css('margin-right') == '2px'
|
||||
);
|
||||
```
|
||||
|
||||
Четвертий `div` повинен мати `height` `170` пікселів та `margin` з `2` пікселів.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div').eq(3).css('height') == '170px' &&
|
||||
$('div').eq(3).css('margin-right') == '2px'
|
||||
);
|
||||
```
|
||||
|
||||
П'ятий `div` повинен мати `height` `250` пікселів та `margin` з `2` пікселів.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div').eq(4).css('height') == '250px' &&
|
||||
$('div').eq(4).css('margin-right') == '2px'
|
||||
);
|
||||
```
|
||||
|
||||
Шостий `div` повинен мати `height` `180` пікселів та `margin` з `2` пікселів.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div').eq(5).css('height') == '180px' &&
|
||||
$('div').eq(5).css('margin-right') == '2px'
|
||||
);
|
||||
```
|
||||
|
||||
Сьомий `div` повинен мати `height``290` пікселів та `margin` з `2` пікселів.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div').eq(6).css('height') == '290px' &&
|
||||
$('div').eq(6).css('margin-right') == '2px'
|
||||
);
|
||||
```
|
||||
|
||||
Восьмий `div` повинен мати `height` `140` пікселів та `margin` з `2` пікселів.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div').eq(7).css('height') == '140px' &&
|
||||
$('div').eq(7).css('margin-right') == '2px'
|
||||
);
|
||||
```
|
||||
|
||||
Дев'ятий `div` повинен мати `height` `90` пікселів та `margin` з `2` пікселів.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div').eq(8).css('height') == '90px' &&
|
||||
$('div').eq(8).css('margin-right') == '2px'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
/* Add your code below this line */
|
||||
|
||||
|
||||
/* Add your code above this line */
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("div")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("div")
|
||||
.attr("class", "bar")
|
||||
.style("height", (d) => (d + "px")) // Change this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
margin: 2px;
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("div")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("div")
|
||||
.attr("class", "bar")
|
||||
.style("height", (d) => (d * 10 + "px"))
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,110 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcd
|
||||
title: Як створити панель для кожного значення множини
|
||||
challengeType: 6
|
||||
forumTopicId: 301482
|
||||
dashedName: create-a-bar-for-each-data-point-in-the-set
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
В попередньому завданні було додано лише один прямокутник до елементу `svg` для відображення панелі. Тут ви зможете об’єднати те, про що ви дізналися про `data()`, `enter()` та фігури масштабованої векторної графіки, щоб створити та додати прямокутник для кожного значення множини `dataset`.
|
||||
|
||||
У попередньому завданні було пояснено як створити та додати код `div` для кожного елемента в `dataset`:
|
||||
|
||||
```js
|
||||
d3.select("body").selectAll("div")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("div")
|
||||
```
|
||||
|
||||
Існує декілька різниць, які взаємодіють з елементами `rect` замість елементів `div`. Елементи `rect` повинні додаватись до елементу `svg`, а не безпосередньо до `body`. Також вам потрібно вказати D3, де розташувати кожний `rect` в межах `svg`. Інформацію про те, як розташувати панель, ви знайдете у наступному завданні.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Використовуйте методи `data()`, `enter()` та `append()` для того, шоб створити та додати `rect` для кожного елемента в `dataset`. Панелі повинні відображатися одна над одною; це буде виправлено у наступному завданні.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш документ має містити 9 елементів `rect`.
|
||||
|
||||
```js
|
||||
assert($('rect').length == 9);
|
||||
```
|
||||
|
||||
Ваш код повинен використовувати метод `data()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.data/g));
|
||||
```
|
||||
|
||||
Ваш код має використовувати метод `enter()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.enter/g));
|
||||
```
|
||||
|
||||
Ваш код має використовувати метод`append()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.append/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
.attr("x", 0)
|
||||
.attr("y", 0)
|
||||
.attr("width", 25)
|
||||
.attr("height", 100);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", 0)
|
||||
.attr("y", 0)
|
||||
.attr("width", 25)
|
||||
.attr("height", 100);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bda
|
||||
title: Створення лінійної шкали за допомогою D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301483
|
||||
dashedName: create-a-linear-scale-with-d3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Стовпчикові та розсіяні діаграми наносять дані безпосередньо на полотно SVG. Однак, якщо висота стовпчика або однієї з точок даних була б більшою за значення висоти або ширини SVG, то вона виходила б за межі області SVG.
|
||||
|
||||
У D3 існують шкали, за допомогою яких можна відобразити дані. `scales` - це функції, що вказують програмі, як саме потрібно зіставити пікселі полотна SVG із набором необроблених точок даних.
|
||||
|
||||
Наприклад, скажімо, у вас є полотно SVG розміром 100x500, і ви хочете накреслити Валовий внутрішній продукт (ВВП) для ряду країн. Набір цифр буде в діапазоні мільярдів або трильйонів доларів. Ви надаєте D3 тип шкали, щоб розповісти їй, як потрібно розмістити великі значення ВВП на цій площі розміром 100x500.
|
||||
|
||||
Навряд чи ви б створювали необроблені дані так. Перше ніж створювати його, ви встановлюєте шкалу для всього свого набору даних, щоб значення `x` та `y`відповідали ширині та висоті полотна.
|
||||
|
||||
D3 має кілька типів шкал. Існує метод D3 `scaleLinear()` для лінійної шкали, який зазвичай використовується з кількісними даними:
|
||||
|
||||
```js
|
||||
const scale = d3.scaleLinear()
|
||||
```
|
||||
|
||||
За замовчуванням шкала використовує зв'язок ідентичності. Значення вхідних даних таке ж, як і значення вихідних даних. В окремому завданні розповідається про те, як це змінити.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Щоб створити лінійну шкалу потрібно змінити змінну `scale`. Потім встановіть змінну `output` у шкалі, яка викликається з вхідним аргументом `50`.
|
||||
|
||||
# --hints--
|
||||
|
||||
У `h2` текст повинен бути `50`.
|
||||
|
||||
```js
|
||||
assert($('h2').text() == '50');
|
||||
```
|
||||
|
||||
Ваш код повинен використовувати метод `scaleLinear()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.scaleLinear/g));
|
||||
```
|
||||
|
||||
Змінна `output` повинна викликати `scale` з аргументом `50`.
|
||||
|
||||
```js
|
||||
assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
// Add your code below this line
|
||||
|
||||
const scale = undefined; // Create the scale here
|
||||
const output = scale(); // Call scale with an argument here
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
|
||||
const scale = d3.scaleLinear();
|
||||
const output = scale(50);
|
||||
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd7
|
||||
title: Створити точкову діаграму з колами SVG
|
||||
challengeType: 6
|
||||
forumTopicId: 301484
|
||||
dashedName: create-a-scatterplot-with-svg-circles
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Точковий графік — це інший вид візуалізації. Він зазвичай використовує кола, щоб нанести точки даних, які мають по два значення. Ці значення прив'язують до осей `x` та `y`, і використовуються, щоб розмістити коло у візуалізації.
|
||||
|
||||
SVG має теґ `circle` для створення форми кола. Він працює так само, як елементи `rect`, які ви використовували для стовпчикової діаграми.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Використовуйте методи `data()`, `enter()` та `append()`, щоб прив'язати `dataset` до нового елемента `circle`, що є доданими до полотен SVG.
|
||||
|
||||
**Примітка:** Кола будуть невидимими, так як ви ще не маєте набору їх атрибутів. Ми зробимо це у наступному завданні.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш код повинен мати 10 елементів `circle`.
|
||||
|
||||
```js
|
||||
assert($('circle').length == 10);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcc
|
||||
title: Відображення форм за допомогою SVG
|
||||
challengeType: 6
|
||||
forumTopicId: 301485
|
||||
dashedName: display-shapes-with-svg
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
На останньому завданні ми створили елемент `svg` із заданою шириною та висотою, який був помітний, оскільки до нього застосовано `background-color` в тезі `style`. Для заданої ширини та висоти код створює місце.
|
||||
|
||||
Наступним кроком є створення форм для розміщення в області `svg`. У SVG існує ряд підтримуваних форм, таких як прямокутники та кола. Їх використовують для відображення даних. Наприклад, форма SVG прямокутника (`<rect>`) може створити елемент у стовпчиковій діаграмі.
|
||||
|
||||
Коли ви розміщуєте форму в області `svg`, ви можете вказати, куди вона рухається, з координатами `x` та `y`. Початок координат (0, 0) знаходиться у верхньому лівому куті. Додатні значення для `x` переміщують форму праворуч, а додатні значення для `y` переміщують форму вниз від початку координат.
|
||||
|
||||
Щоб розмістити форму посередині 500 (ширина) x 100 (висота) `svg` з останнього завдання, координата `x` буде 250, а `y` координата буде 50.
|
||||
|
||||
SVG `rect` має чотири атрибути. Існують координати `x` та `y`, де вони розміщені в області `svg`. Він також має `height` та `width` для визначення розміру.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте форму `rect` до `svg` використовуючи `append()`, і надайте атрибуту `width` `25` і `height` `100`. Також надайте `rect` атрибутам `x` і `y`, для кожного встановлено значення `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш документ має мати 1 елемент `rect`.
|
||||
|
||||
```js
|
||||
assert($('rect').length == 1);
|
||||
```
|
||||
|
||||
Елемент `rect` має мати встановлений атрибут `width` `25`.
|
||||
|
||||
```js
|
||||
assert($('rect').attr('width') == '25');
|
||||
```
|
||||
|
||||
Елемент `rect` має мати встановлений атрибут `height` `100`.
|
||||
|
||||
```js
|
||||
assert($('rect').attr('height') == '100');
|
||||
```
|
||||
|
||||
Елемент `rect` має мати встановлений атрибут `x` `0`.
|
||||
|
||||
```js
|
||||
assert($('rect').attr('x') == '0');
|
||||
```
|
||||
|
||||
Елемент `rect` має мати встановлений атрибут `y` `0`.
|
||||
|
||||
```js
|
||||
assert($('rect').attr('y') == '0');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.append("rect")
|
||||
.attr("width", 25)
|
||||
.attr("height", 100)
|
||||
.attr("x", 0)
|
||||
.attr("y", 0);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bcf
|
||||
title: Динамічна зміна висоти кожного стовпчика
|
||||
challengeType: 6
|
||||
forumTopicId: 301486
|
||||
dashedName: dynamically-change-the-height-of-each-bar
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Висота кожного стовпчика може бути заданою відповідно до величини значення точки у масиві, подібно до динамічного значення `x`.
|
||||
|
||||
```js
|
||||
selection.attr("property", (d, i) => {
|
||||
|
||||
})
|
||||
```
|
||||
|
||||
Тут `d` буде значенням точки даних, а `i` буде індексом точки даних у масиві.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Змініть функцію зворотного виклику для атрибуту `height` щоб повернути значення даних помножене на 3.
|
||||
|
||||
**Note:** Пам'ятайте, що множення усіх значень даних на однакову сталу збільшує масштаб даних (ніби наближення). Це допомагає побачити різницю між значеннями стовпців в даному прикладі.
|
||||
|
||||
# --hints--
|
||||
|
||||
Перший `rect` повинен мати `height` `36`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(0).attr('height') == '36');
|
||||
```
|
||||
|
||||
Другий `rect` повинен мати `height` `93`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(1).attr('height') == '93');
|
||||
```
|
||||
|
||||
Третій `rect` повинен мати `height` `66`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(2).attr('height') == '66');
|
||||
```
|
||||
|
||||
Четвертий `rect` повинен мати `height` `51`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(3).attr('height') == '51');
|
||||
```
|
||||
|
||||
П'ятий `rect` повинен мати`height` `75`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(4).attr('height') == '75');
|
||||
```
|
||||
|
||||
Шостий `rect` повинен мати `height` `54`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(5).attr('height') == '54');
|
||||
```
|
||||
|
||||
Сьомий `rect` повинен мати `height` `87`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(6).attr('height') == '87');
|
||||
```
|
||||
|
||||
Восьмий `rect` повинен мати `height` `42`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(7).attr('height') == '42');
|
||||
```
|
||||
|
||||
Дев'ятий `rect` повинен мати `height` `27`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(8).attr('height') == '27');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", 0)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => {
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", 0)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => {
|
||||
return d * 3
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,151 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bce
|
||||
title: Динамічне налаштування координат для кожної панелі
|
||||
challengeType: 6
|
||||
forumTopicId: 301487
|
||||
dashedName: dynamically-set-the-coordinates-for-each-bar
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Останнє завдання створило та додало прямокутник до елементу `svg` для кожної точки в`dataset`, щоб зобразити панель. На жаль, усі вони склались у стовпець один на одного.
|
||||
|
||||
Атрибути `x` та `y` керують розміщенням прямокутника. Вони повідомляють D3, де починати малювати фігуру в зоні `svg`. Останнє завдання розміщує їх усіх до 0 таким чином, щоб кожен стовпчик розташовувався у верхньому лівому кутку.
|
||||
|
||||
У стовпчиковій діаграмі всі стовпці повинні розташовуватись на однаковому вертикальному рівні, тобто значення `y` лишається незмінним (на 0) для усіх стовпців. Однак, при додаванні нових стовпців значення `x` потрібно змінювати. Пам'ятайте, що більші значення `x` зміщують елементи праворуч. Значення`x` повинно зростати при перегляді масиву елементів у `dataset`.
|
||||
|
||||
Метод `attr()` у D3 приймає функцію зворотнього зв'язку до цього динамічно встановленого атрибуту. Функція зворотнього зв'язку приймає два аргументи: один для самої точки даних (зазвичай `d`) та один для індексу точки даних у масиві. Другий аргумент для індексу - необов'язковий. Ось такий формат:
|
||||
|
||||
```js
|
||||
selection.attr("property", (d, i) => {
|
||||
|
||||
})
|
||||
```
|
||||
|
||||
Варто зауважити, що НЕ потрібно писати цикл `for` або використовувати `forEach()` для повторення елементів у наборі даних. Нагадаємо, що метод `data()` аналізує набір даних, і що будь-який інший метод, вказаний після `data()`, запускається одноразово для кожного елемента в наборі даних.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Змініть атрибут `x` функції зворотнього зв'язку таким чином, щоб він повернув індекс на 30.
|
||||
|
||||
**Примітка:** Ширина кожного елементу 25, тому збільшіть значення кожного `x` на 30, додавши пробіли між елементами. Будь-яке значення, більше 25, спрацювало б за таким же принципом.
|
||||
|
||||
# --hints--
|
||||
|
||||
Перший `rect` повинен мати `0` значенням `x`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(0).attr('x') == '0');
|
||||
```
|
||||
|
||||
Другий `rect` повинен мати `x` значенням `30`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(1).attr('x') == '30');
|
||||
```
|
||||
|
||||
Третій `rect` повинен мати `x` значенням `60`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(2).attr('x') == '60');
|
||||
```
|
||||
|
||||
Четвертий `rect` повинен мати `x` значенням `90`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(3).attr('x') == '90');
|
||||
```
|
||||
|
||||
П'ятий `rect` повинен мати `x` значенням `120`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(4).attr('x') == '120');
|
||||
```
|
||||
|
||||
Шостий `rect` повинен мати `x` значенням `150`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(5).attr('x') == '150');
|
||||
```
|
||||
|
||||
Сьомий `rect` повинен мати `x` повинен мати `180`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(6).attr('x') == '180');
|
||||
```
|
||||
|
||||
Восьмий `rect` повинен мати `x` значенням `210`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(7).attr('x') == '210');
|
||||
```
|
||||
|
||||
Дев'ятий `rect` повинен мати `x` значенням `240`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(8).attr('x') == '240');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => {
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
})
|
||||
.attr("y", 0)
|
||||
.attr("width", 25)
|
||||
.attr("height", 100);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => {
|
||||
return i * 30
|
||||
})
|
||||
.attr("y", 0)
|
||||
.attr("width", 25)
|
||||
.attr("height", 100);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,143 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bd0
|
||||
title: Інвертування SVG елементів
|
||||
challengeType: 6
|
||||
forumTopicId: 301488
|
||||
dashedName: invert-svg-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Можливо, Ви помітили, що стовпчикова діаграма виглядає ніби перевернута або інвертована. Це пов'язано зі способом використання (x, y) координат у SVG.
|
||||
|
||||
Початком координат у SVG виступає точка, розташована у верхньому лівому куті. Вісь 0 `x` розміщує фігуру у лівій частині площини SVG. Вісь 0 `y` розміщує фігуру у верхній частині площини SVG. Чим вище значення осі `x`, тим більше прямокутник зсувається вправо. Чим вище значення осі `y`, тим більше прямокутник опускається вниз.
|
||||
|
||||
Щоб розмістити стовпчик праворуч зверху, необхідно змінити обчислення `y` координати. Треба враховувати як висоту стовпчика, так і загальну висоту SVG площини.
|
||||
|
||||
Висота площини SVG дорівнює 100. Припустимо, що у Вас задана точка 0, а Ви хотіли б, щоб стовпчик починався у нижній частині площини SVG (не зверху). Для цього, значення `y` координати має бути 100. Якби значення точки було 1, тоді, щоб задати стовпчик знизу, ми б брали за початкове значення `y` координати 100. Враховуємо висоту стовпчика 1, в такому випадку значення осі `y` становитиме 99.
|
||||
|
||||
Застосовуючи цю формулу `y = heightOfSVG - heightOfBar` для обчислення значення `y` координати, розміщуємо стовпчики у правій верхній частині площини.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Змініть функцію зворотного відліку для атрибуту `y`, щоб встановити стовпчики праворуч зверху. Пам'ятайте, що `height` стовпчика у 3 рази перевищує значення `d`.
|
||||
|
||||
**Примітка:** Співвідношення має такий вигляд: `y = h - m * d`, де `m` константа, яка масштабує значення точок.
|
||||
|
||||
# --hints--
|
||||
|
||||
Перший `rect` повинен мати значення `y` `64`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(0).attr('y') == h - dataset[0] * 3);
|
||||
```
|
||||
|
||||
Другий `rect` повинен мати значення `y` `7`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(1).attr('y') == h - dataset[1] * 3);
|
||||
```
|
||||
|
||||
Третій `rect` повинен мати значення `y` `34`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(2).attr('y') == h - dataset[2] * 3);
|
||||
```
|
||||
|
||||
Четвертий `rect` повинен мати значення `y` `49`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(3).attr('y') == h - dataset[3] * 3);
|
||||
```
|
||||
|
||||
П'ятий `rect` повинен мати значення `y` `25`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(4).attr('y') == h - dataset[4] * 3);
|
||||
```
|
||||
|
||||
Шостий `rect` повинен мати значення `y` `46`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(5).attr('y') == h - dataset[5] * 3);
|
||||
```
|
||||
|
||||
Сьомий `rect` повинен мати значення `y` `13`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(6).attr('y') == h - dataset[6] * 3);
|
||||
```
|
||||
|
||||
Восьмий `rect` повинен мати значення `y` `58`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(7).attr('y') == h - dataset[7] * 3);
|
||||
```
|
||||
|
||||
Дев'ятий `rect` повинен мати значення `y` `73`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(8).attr('y') == h - dataset[8] * 3);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => {
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
})
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => 3 * d);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => 3 * d);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcb
|
||||
title: Вивчайте про SVG за допомогою D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301489
|
||||
dashedName: learn-about-svg-in-d3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>SVG</dfn> розшифровується: <dfn>Scalable Vector Graphics</dfn>.
|
||||
|
||||
Тут "scalable" означає, що якщо ви збільшите або зменшите об'єкт, то він не буде виглядати піксельним. Він масштабується за допомогою системи відображення, будь то на маленькому мобільному екрані або на великому телевізійному моніторі.
|
||||
|
||||
SVG використовують для того, щоб створити загальні геометричні форми. Оскільки D3 відображає дані у візуальному представленні, то він використовує SVG для того, щоб створити форми для візуалізації. Форми SVG для веб-сторінки повинні міститися в тезі HTML `svg`.
|
||||
|
||||
CSS може бути масштабованим в тому випадку, коли стилі використовують відносні одиниці (такі як `vh`, `vw` або відсотки), але використання SVG є більш гнучким для створення візуалізації даних.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте вузол `svg` до `body`, використовуючи `append()`. Дайте йому атрибут `width`, встановлений для даної константи `w`, і атрибут `height`, встановлений для даної константи `h`, використовуючи для кожного методи `attr()` or `style()`. Ви побачите його у результатах, оскільки до нього в тезі `style` застосовано `background-color` рожевого кольору.
|
||||
|
||||
**Note:** При використанні `attr()` атрибути ширини та висоти не мають одиниць. Це будівельний блок масштабування - елемент завжди матиме співвідношення ширини до висоти 5: 1, незалежно від рівня масштабування.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш документ повинен містити елемент 1 `svg`.
|
||||
|
||||
```js
|
||||
assert($('svg').length == 1);
|
||||
```
|
||||
|
||||
Елемент `svg` повинен мати встановлений атрибут `width` `500`, або стилізований, щоб мати ширину `500px`.
|
||||
|
||||
```js
|
||||
assert($('svg').attr('width') == '500' || $('svg').css('width') == '500px');
|
||||
```
|
||||
|
||||
Елемент `svg` повинен мати встановлений атрибут `height` `100` або стилізований, щоб мати висоту `100px`.
|
||||
|
||||
```js
|
||||
assert($('svg').attr('height') == '100' || $('svg').css('height') == '100px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
svg {
|
||||
background-color: pink;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
svg {
|
||||
background-color: pink;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc3
|
||||
title: Вибір групи елементів за допомогою D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301490
|
||||
dashedName: select-a-group-of-elements-with-d3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
D3 також має метод `selectAll()` для вибору групи елементів. Він повертає масив HTML - вузлів для всіх елементів документа, які відповідають введеному рядку. Ось приклад вибору всіх прив’язних тегів у документі:
|
||||
|
||||
```js
|
||||
const anchors = d3.selectAll("a");
|
||||
```
|
||||
|
||||
Як і метод `select()`, `selectAll()` підтримує ланцюжок методів, і ви можете використовувати його з іншими методами.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Виберіть усі теги `li` у документі та змініть їх текст на рядок `list item`, послідовно скориставшись методом `.text()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
На сторінці повинно бути 3 елемента `li`, а текст у кожному з них має вказувати `list item`. Великі літери та пробіли повинні точно збігатися.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('li')
|
||||
.text()
|
||||
.match(/list item/g).length == 3
|
||||
);
|
||||
```
|
||||
|
||||
Ваш код має мати доступ до об'єкту `d3`.
|
||||
|
||||
```js
|
||||
assert(code.match(/d3/g));
|
||||
```
|
||||
|
||||
Ваш код повинен використовувати метод `selectAll`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.selectAll/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<ul>
|
||||
<li>Example</li>
|
||||
<li>Example</li>
|
||||
<li>Example</li>
|
||||
</ul>
|
||||
<script>
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<ul>
|
||||
<li>Example</li>
|
||||
<li>Example</li>
|
||||
<li>Example</li>
|
||||
</ul>
|
||||
<script>
|
||||
d3.selectAll("li")
|
||||
.text("list item")
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdb
|
||||
title: Налаштування домену й діапазону на шкалі
|
||||
challengeType: 6
|
||||
forumTopicId: 301491
|
||||
dashedName: set-a-domain-and-a-range-on-a-scale
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
За замовчуванням, масштаби використовують зв'язки ідентичності. Це означає, що вхідне значення відповідає вихідному значенню. Проте масштаби можуть бути набагато гнучкішими та цікавими.
|
||||
|
||||
Скажімо, набір даних має значення від 50 до 480. Це вхідна інформація для масштабування, також відома як <dfn>domain</dfn>.
|
||||
|
||||
Відобразіть ці точки вздовж осі `x` на полотні SVG у діапазоні від 10 одиниць до 500. Цю вихідну інформацію також називають <dfn>range</dfn>.
|
||||
|
||||
Методи `domain()` та `range()` встановлюють ці значення для шкали. Обидва методи сприймають масив щонайменше двох елементів як аргумент. Наприклад:
|
||||
|
||||
```js
|
||||
scale.domain([50, 480]);
|
||||
scale.range([10, 500]);
|
||||
scale(50)
|
||||
scale(480)
|
||||
scale(325)
|
||||
scale(750)
|
||||
d3.scaleLinear()
|
||||
```
|
||||
|
||||
Порядок відображення цих значень у консолі буде таким: `10`, `500`, `323.37` і `807.67`.
|
||||
|
||||
Зверніть увагу, що шкала використовує лінійний зв'язок між доменом і значеннями діапазону, щоб визначити виведення для заданого числа. Мінімальне значення в домені (50) відповідає мінімальному значенню у діапазоні (10).
|
||||
|
||||
# --instructions--
|
||||
|
||||
Створіть шкалу і задайте значення домену `[250, 500]`, а діапазону - `[10, 150]`.
|
||||
|
||||
**Примітка:** Ви можете прив'язати домен `domain()` та методи `range()` до змінної `scale`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Використовуйте метод `domain()` для вашого коду.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.domain/g));
|
||||
```
|
||||
|
||||
Домен `domain()` в діапазоні `scale` повинен мати значення `[250, 500]`.
|
||||
|
||||
```js
|
||||
assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]));
|
||||
```
|
||||
|
||||
Використовуйте метод `range()` для вашого коду.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.range/g));
|
||||
```
|
||||
|
||||
Значення `range()` діапазону `scale` повинно бути встановлено як `[10, 150]`.
|
||||
|
||||
```js
|
||||
assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]));
|
||||
```
|
||||
|
||||
Текст заголовку `h2` повинен мати розмір `-102`.
|
||||
|
||||
```js
|
||||
assert($('h2').text() == '-102');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
// Add your code below this line
|
||||
const scale = d3.scaleLinear();
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
const output = scale(50);
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const scale = d3.scaleLinear();
|
||||
scale.domain([250, 500])
|
||||
scale.range([10, 150])
|
||||
const output = scale(50);
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,110 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd3
|
||||
title: Стиль міток D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301492
|
||||
dashedName: style-d3-labels
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Методи D3 можуть додавати стилі до панелі міток. Атрибут `fill` встановлює колір тексту для вузла `text`. Метод `style()` встановлює CSS правила для інших стилів, таких як `font-family` або `font-size`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Встановіть `font-size` `25px` для елементів `text` і колір тексту - червоний.
|
||||
|
||||
# --hints--
|
||||
|
||||
Мітки повинні мати `fill` червоний колір.
|
||||
|
||||
```js
|
||||
assert($('text').css('fill') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Всі мітки повинні мати `font-size` `25` пікселів.
|
||||
|
||||
```js
|
||||
assert($('text').css('font-size') == '25px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => d * 3)
|
||||
.attr("fill", "navy");
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => d)
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - (3 * d) - 3)
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => d * 3)
|
||||
.attr("fill", "navy");
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => d)
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - (3 * d) - 3)
|
||||
.style("font-size", 25)
|
||||
.attr("fill", "red")
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,137 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bc9
|
||||
title: Як динамічно оновити висоту елементу
|
||||
challengeType: 6
|
||||
forumTopicId: 301493
|
||||
dashedName: update-the-height-of-an-element-dynamically
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
У попередньому завданні ми розповіли, як відобразити дані з масиву та додати класи CSS. Ви можете поєднати ці уроки, щоб створити просту стовпчикову діаграму. Для цього ви можете використати один із кроків:
|
||||
|
||||
1) Створити `div` для кожного значення масиву
|
||||
|
||||
2) Призначити кожному значенню `div` динамічну висоту, за допомогою функції зворотнього зв'язку методом `style()`, який встановлює висоту, яка дорівнює значенню даних
|
||||
|
||||
Ви можете відновити формат, щоб встановити стиль за допомогою функції зворотнього зв'язку:
|
||||
|
||||
```js
|
||||
selection.style("cssProperty", (d) => d)
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте метод `style()`до коду в редакторі для встановлення властивостей `height` для кожного елементу. Використовуйте функцію зворотнього зв'язку для відновлення значення даних за допомогою послідовності `px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Перша величина `div` повинна мати значення `height` з `12` пікселів.
|
||||
|
||||
```js
|
||||
assert($('div').eq(0)[0].style.height === '12px');
|
||||
```
|
||||
|
||||
Друга `div` повинна мати значення `height` з `31` пікселів.
|
||||
|
||||
```js
|
||||
assert($('div').eq(1)[0].style.height === '31px');
|
||||
```
|
||||
|
||||
Третя `div` повинна мати значення `height` з `22` пікселів.
|
||||
|
||||
```js
|
||||
assert($('div').eq(2)[0].style.height === '22px');
|
||||
```
|
||||
|
||||
Четверта `div` повинна мати значення `height` з `17` пікселів.
|
||||
|
||||
```js
|
||||
assert($('div').eq(3)[0].style.height === '17px');
|
||||
```
|
||||
|
||||
П'ята `div` повинна мати значення `height` з `25` пікселів.
|
||||
|
||||
```js
|
||||
assert($('div').eq(4)[0].style.height === '25px');
|
||||
```
|
||||
|
||||
Шоста `div` повинна мати значення `height` з `18` пікселів.
|
||||
|
||||
```js
|
||||
assert($('div').eq(5)[0].style.height === '18px');
|
||||
```
|
||||
|
||||
Сьома `div` повинна мати значення `height` з `29` пікселів.
|
||||
|
||||
```js
|
||||
assert($('div').eq(6)[0].style.height === '29px');
|
||||
```
|
||||
|
||||
Восьма `div` повинна мати значення `height` з `14` пікселів.
|
||||
|
||||
```js
|
||||
assert($('div').eq(7)[0].style.height === '14px');
|
||||
```
|
||||
|
||||
Дев'ята `div` повинна мати значення `height` з `9` пікселів.
|
||||
|
||||
```js
|
||||
assert($('div').eq(8)[0].style.height === '9px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("div")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("div")
|
||||
.attr("class", "bar")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("div")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("div")
|
||||
.attr("class", "bar")
|
||||
.style('height', d => `${d}px`)
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,347 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bde
|
||||
title: Використовуйте попередньо визначену шкалу(масштаб) для розміщення елементів
|
||||
challengeType: 6
|
||||
forumTopicId: 301494
|
||||
dashedName: use-a-pre-defined-scale-to-place-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Маючи встановлені масштаби, прийшов час знову нанести на карту ділянку. Масштаб схожий на функцію обробки, яка повертає `x` і `y` необроблені дані у значення, які правильно розміщуються та відображаються на полотні SVG. Вони зберігають дані в межах області відображення екрана.
|
||||
|
||||
Ви встановлюєте значення атрибутів координат для форми SVG з функцією масштабування. Це включає `x` і `y` атрибути `rect` або `text` елементи, чи `cx` та `cy` за `circles`. Ось приклад:
|
||||
|
||||
```js
|
||||
shape
|
||||
.attr("x", (d) => xScale(d[0]))
|
||||
```
|
||||
|
||||
Масштабування встановлює атрибути координат форми, щоб розмістити точки даних на полотно SVG. Вам не потрібно застосовувати масштаби при відображенні фактичного значення даних, наприклад, в `text()` метод для підказки або мітки.
|
||||
|
||||
# --instructions--
|
||||
|
||||
`xScale` і `yScale`, використовуйте щоб розташувати як `circle` і `text` фігури на полотно SVG. Для `circles`, застосуйте масштаби для встановлення `cx` та `cy`. Надайте їм також радіус `5` одиниць.
|
||||
|
||||
Для `text`елементів, застосуйте масштаби щоб встановити `x` та `y`. Мітки повинні бути зсунуті вправо від точок. Щоб зробити це, додайте `10` одиниць на `x` значення даних, перш ніж передавати їх у `xScale`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш код повинен містити 10 `circle` елементів.
|
||||
|
||||
```js
|
||||
assert($('circle').length == 10);
|
||||
```
|
||||
|
||||
Перший `circle` повинен мати `cx` значення якого приблизно `91` та значення `cy` приблизно `368` після застосування масштабу. Також повинен мати `r`значення `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('circle').eq(0).attr('cx')) == '91' &&
|
||||
Math.round($('circle').eq(0).attr('cy')) == '368' &&
|
||||
$('circle').eq(0).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
Другий `circle` елемент повинен мати `cx` значення приблизно `159` і значення `cy` значення приблизно `181` після застосування масштабу. Також повинен мати `r`значення `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('circle').eq(1).attr('cx')) == '159' &&
|
||||
Math.round($('circle').eq(1).attr('cy')) == '181' &&
|
||||
$('circle').eq(1).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
Третій `circle` повинен мати `cx` значення приблизно `340` і `cy` значення від приблизно `329` після нанесення масштабу. Також повинен мати `r`значення `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('circle').eq(2).attr('cx')) == '340' &&
|
||||
Math.round($('circle').eq(2).attr('cy')) == '329' &&
|
||||
$('circle').eq(2).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
Четвертий `circle` повинен мати `cx` значення приблизно якого `131` і значення `cy`приблизне значення дорівнює `60` після застосування масштабу. Також повинен мати `r`значення якого дорівнює `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('circle').eq(3).attr('cx')) == '131' &&
|
||||
Math.round($('circle').eq(3).attr('cy')) == '60' &&
|
||||
$('circle').eq(3).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
П'ятий `circle` елемент повинен мати на `cx` значення приблизно `440` і значення `cy` приблизно від `237` після нанесення масштабу. Також повинен мати `r`значення якого дорівнює `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('circle').eq(4).attr('cx')) == '440' &&
|
||||
Math.round($('circle').eq(4).attr('cy')) == '237' &&
|
||||
$('circle').eq(4).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
Шостий `circle` повинен мати на `cx` значення приблизно яке дорівнює`271` і значення `cy` приблизно від `306` після нанесення масштабу. Також повинен мати `r`значення якого дорівнює `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('circle').eq(5).attr('cx')) == '271' &&
|
||||
Math.round($('circle').eq(5).attr('cy')) == '306' &&
|
||||
$('circle').eq(5).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
Сьомий елемент `circle` повинен мати `cx` значення приблизно якого `361` і значення `cy` дорівнює значенню `351` після застосування масштабу. Також повинен мати `r`значення якого дорівнює `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('circle').eq(6).attr('cx')) == '361' &&
|
||||
Math.round($('circle').eq(6).attr('cy')) == '351' &&
|
||||
$('circle').eq(6).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
Елемент восьмий `circle` повинен мати на `cx` значення приблизно якого дорівнює `261` і значення `cy` приблизно від `132` після нанесення масштабу. Також повинен мати `r`значення якого дорівнює `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('circle').eq(7).attr('cx')) == '261' &&
|
||||
Math.round($('circle').eq(7).attr('cy')) == '132' &&
|
||||
$('circle').eq(7).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
Дев'ятий `circle` повинен мати `cx` значення якого приблизно `131` і значення `cy` приблизно від `144` після застосування масштабу. Також повинен мати `r`значення якого дорівнює `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('circle').eq(8).attr('cx')) == '131' &&
|
||||
Math.round($('circle').eq(8).attr('cy')) == '144' &&
|
||||
$('circle').eq(8).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
Десятий `circle`елемент повинен мати `cx` значення якого приблизно дорівнює `79` і значення `cy` приблизно від `326` після нанесення масштабу. Також повинен мати `r`значення якого дорівнює `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('circle').eq(9).attr('cx')) == '79' &&
|
||||
Math.round($('circle').eq(9).attr('cy')) == '326' &&
|
||||
$('circle').eq(9).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
Ваш код повинен налічувати 10 `text` елементів.
|
||||
|
||||
```js
|
||||
assert($('text').length == 10);
|
||||
```
|
||||
|
||||
Перша мітка повинна мати `x` значення якого приблизно дорівнює `100` та значення `y` приблизно `368` після застосування масштабу.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('text').eq(0).attr('x')) == '100' &&
|
||||
Math.round($('text').eq(0).attr('y')) == '368'
|
||||
);
|
||||
```
|
||||
|
||||
Друга мітка повинна мати `x` значення якого приблизно дорівнює `168` та значення `y` приблизно дорівнює `181` після застосування масштабу.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('text').eq(1).attr('x')) == '168' &&
|
||||
Math.round($('text').eq(1).attr('y')) == '181'
|
||||
);
|
||||
```
|
||||
|
||||
Третя мітка повинна мати `x` значення якого приблизно дорівнює `350` та значення якого `y` приблизно дорівнює`329` після нанесення масштабу.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('text').eq(2).attr('x')) == '350' &&
|
||||
Math.round($('text').eq(2).attr('y')) == '329'
|
||||
);
|
||||
```
|
||||
|
||||
Четверта мітка повинна мати `x` значення якого приблизно дорівнює `141` та значення `y` приблизно якого дорівнює `60` після застосування масштабу.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('text').eq(3).attr('x')) == '141' &&
|
||||
Math.round($('text').eq(3).attr('y')) == '60'
|
||||
);
|
||||
```
|
||||
|
||||
П'ята мітка повинна мати значення `x` яке приблизно дорівнює `449` і `y` значення приблизно якого дорівнює `237` після нанесення масштабів.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('text').eq(4).attr('x')) == '449' &&
|
||||
Math.round($('text').eq(4).attr('y')) == '237'
|
||||
);
|
||||
```
|
||||
|
||||
Шоста мітка повинна мати значення `x` яке приблизно дорівнює `280` і `y` значення приблизно якого дорівнює `306` після застосування масштабів.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('text').eq(5).attr('x')) == '280' &&
|
||||
Math.round($('text').eq(5).attr('y')) == '306'
|
||||
);
|
||||
```
|
||||
|
||||
Сьома мітка повинна мати `x` значення якого приблизно дорівнює `370` та значення якого `y` приблизно дорівнює `351` після нанесення масштабу.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('text').eq(6).attr('x')) == '370' &&
|
||||
Math.round($('text').eq(6).attr('y')) == '351'
|
||||
);
|
||||
```
|
||||
|
||||
Восьма мітка повинна мати значення `x` яке приблизно дорівнює `270` і `y` значення приблизно якого дорівнює `132` після застосування масштабів.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('text').eq(7).attr('x')) == '270' &&
|
||||
Math.round($('text').eq(7).attr('y')) == '132'
|
||||
);
|
||||
```
|
||||
|
||||
Дев'ята мітка повинна мати значення `x` яке приблизно дорівнює `140` і `y` значення приблизно якого дорівнює `144` після застосування масштабів.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('text').eq(8).attr('x')) == '140' &&
|
||||
Math.round($('text').eq(8).attr('y')) == '144'
|
||||
);
|
||||
```
|
||||
|
||||
Десята мітка повинна мати значення `x` яке приблизно дорівнює `88` і `y` значення приблизно якого дорівнює `326` після нанесення масштабів.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('text').eq(9).attr('x')) == '88' &&
|
||||
Math.round($('text').eq(9).attr('y')) == '326'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
const padding = 60;
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[0])])
|
||||
.range([padding, w - padding]);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[1])])
|
||||
.range([h - padding, padding]);
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => (d[0] + ", "
|
||||
+ d[1]))
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
const padding = 60;
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[0])])
|
||||
.range([padding, w - padding]);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[1])])
|
||||
.range([h - padding, padding]);
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("cx", (d) => xScale(d[0]))
|
||||
.attr("cy", (d) => yScale(d[1]))
|
||||
.attr("r", 5)
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => (d[0] + ", "
|
||||
+ d[1]))
|
||||
.attr("x", (d) => xScale(d[0] + 10))
|
||||
.attr("y", (d) => yScale(d[1]))
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,156 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdd
|
||||
title: Використання динамічних масштабів
|
||||
challengeType: 6
|
||||
forumTopicId: 301495
|
||||
dashedName: use-dynamic-scales
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
D3 `min()` і `max()` методи допомагають встановити масштаб.
|
||||
|
||||
Враховуючи складний набір даних, одним із пріоритетів є встановлення масштабу так, щоб візуалізація відповідала ширині та висоті контейнера SVG. Ви хочете, щоб усі дані були розміщені всередині полотна SVG, щоб вони були видимими на веб-сторінці.
|
||||
|
||||
У наведеному нижче прикладі встановлюється шкала осі х для відомостей діаграм розсіювання. Метод `domain()` передає до шкали інформацію про значення вихідних даних для діаграми. Метод `range()` надає йому інформацію про актуальний простір на веб-сторінці для візуалізації.
|
||||
|
||||
На приклад, домен переходить від нуля до максимального значення в множині. Він використовує метод `max()` з функцією зворотного виклику на основі значень x у масивах. Діапазон використовує ширину полотна SVG (`w`), але він також містить деякі відступи. Це дає простір між набором точок у діаграмі та краєм полотна SVG.
|
||||
|
||||
```js
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
const padding = 30;
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[0])])
|
||||
.range([padding, w - padding]);
|
||||
```
|
||||
|
||||
Спершу відступ може спантеличити. Зобразіть вісь x як горизонтальну лінію від 0 до 500 (значення ширини для полотна SVG). Включаючи відступи, метод `range()` змушує графік починатися з 30 уздовж цієї лінії (замість 0) і закінчуватися на 470 (замість 500).
|
||||
|
||||
# --instructions--
|
||||
|
||||
Використовуйте змінну `yScale`, щоб створити лінійну шкалу осі y. Домен повинен починатися з нуля і досягати максимального значення множини `y`. Діапазон повинен використовувати висоту SVG (`h`) і містити відступи.
|
||||
|
||||
**Примітка:** Пам'ятайте розміщувати точки графіка з правильної сторони. Коли ви встановлюєте діапазон для координат у, то вище значення (висота мінус відступ) є першим аргументом, а нижче значення – другим.
|
||||
|
||||
# --hints--
|
||||
|
||||
Текст у заголовку `h2` повинен дорівнювати `30`.
|
||||
|
||||
```js
|
||||
assert(output == 30 && $('h2').text() == '30');
|
||||
```
|
||||
|
||||
`domain()` в yScale має бути еквівалентним `[0, 411]`.
|
||||
|
||||
```js
|
||||
assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]));
|
||||
```
|
||||
|
||||
`range()` в yScale має бути еквівалентним `[470, 30]`.
|
||||
|
||||
```js
|
||||
assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
// Padding between the SVG canvas boundary and the plot
|
||||
const padding = 30;
|
||||
|
||||
// Create an x and y scale
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[0])])
|
||||
.range([padding, w - padding]);
|
||||
|
||||
// Add your code below this line
|
||||
|
||||
const yScale = undefined;
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
const output = yScale(411); // Returns 30
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output)
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
|
||||
const padding = 30;
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[0])])
|
||||
.range([padding, w - padding]);
|
||||
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[1])])
|
||||
.range([h - padding, padding]);
|
||||
|
||||
|
||||
const output = yScale(411);
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output)
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdc
|
||||
title: >-
|
||||
Використання функцій d3.max та d3.min для пошуку мінімального та максимального значення у наборі даних
|
||||
challengeType: 6
|
||||
forumTopicId: 301496
|
||||
dashedName: >-
|
||||
use-the-d3-max-and-d3-min-functions-to-find-minimum-and-maximum-values-in-a-dataset
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
D3 методи `domain()` і `range()` встановлюють цю інформацію для вашої шкали на основі даних. Є кілька методів, що полегшать завдання.
|
||||
|
||||
При встановленні домені, часто виникає бажання використати мінімальне та максимальне значення у наборі даних. Однак пошук значень вручну може призвести до появи помилок, особливо коли маєш справу з великими наборами даних.
|
||||
|
||||
Для отримання цієї інформації у D3 існує два методи: `min()` та `max()`. Наприклад:
|
||||
|
||||
```js
|
||||
const exampleData = [34, 234, 73, 90, 6, 52];
|
||||
d3.min(exampleData)
|
||||
d3.max(exampleData)
|
||||
```
|
||||
|
||||
Набір даних може містити вкладені масиви, такі як `[x, y]` координати, показані в прикладі діаграми розсіювання. У цьому випадку потрібно вказати D3, як обчислювати максимальне та мінімальне значення. Добре, що обидва методи `min()` та `max()` мають функцію зворотного виклику. У даному прикладі, аргумент функції зворотного виклику `d` призначений для поточного внутрішнього масиву. Зворотній виклик має повернути елемент із внутрішнього масиву (значення `x` або `y`), у якому Ви обчислюватимете максимальне чи мінімальне значення. Приклад, як знайти min та max значення з набором масивів:
|
||||
|
||||
```js
|
||||
const locationData = [[1, 7],[6, 3],[8, 3]];
|
||||
const minX = d3.min(locationData, (d) => d[0]);
|
||||
```
|
||||
|
||||
`minX` набуватиме значення `1`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Масив `positionData` містить підмасиви x, y та z координат. Використайте D3 метод для пошуку максимального значення z координати (третє значення) з масивів та збережіть його в `output` змінній.
|
||||
|
||||
# --hints--
|
||||
|
||||
Текст в середині елементу `h2` повинен бути `8`.
|
||||
|
||||
```js
|
||||
assert(output == 8 && $('h2').text() == '8');
|
||||
```
|
||||
|
||||
Ваш код має використовувати метод `max()`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.max/g),
|
||||
'Your code should use the <code>max()</code> method.'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const positionData = [[1, 7, -4],[6, 3, 8],[2, 9, 3]]
|
||||
// Add your code below this line
|
||||
|
||||
const output = undefined; // Change this line
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output)
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const positionData = [[1, 7, -4],[6, 3, 8],[2, 9, 3]]
|
||||
|
||||
const output = d3.max(positionData, (d) => d[2])
|
||||
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output)
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc4
|
||||
title: Робота з даними в D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301497
|
||||
dashedName: work-with-data-in-d3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Бібліотека D3 фокусується на підході керування даними. Коли у вас є набір даних, ви можете застосувати методи D3, щоб відобразити його на сторінці. Дані надходять у багатьох форматах, але це завдання використовує простий масив чисел.
|
||||
|
||||
Перший крок - це повідомити дані D3. Метод `data()` використовується для виділення елементів DOM, щоб приєднати дані до цих елементів. Набір даних передається як аргумент методу.
|
||||
|
||||
Поширений шаблон робочого процесу - це створити новий елемент у документі для кожної частини даних у наборі. D3 має метод `enter()` для цієї мети.
|
||||
|
||||
Коли метод `enter()` об'єднується з методом `data()`, то він розглядає вибрані елементи з сторінки та порівнює їх із кількістю елементів даних у наборі. Якщо є менше елементів, ніж елементів даних, то створюються відсутні елементи.
|
||||
|
||||
Ось приклад, який вибирає елемент `ul` та створює новий елемент списку, що базується на кількості записів у масиві:
|
||||
|
||||
```html
|
||||
<body>
|
||||
<ul></ul>
|
||||
<script>
|
||||
const dataset = ["a", "b", "c"];
|
||||
d3.select("ul").selectAll("li")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("li")
|
||||
.text("New item");
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
Вибір елементів, які ще не існують, може здатися вам складним. Цей код розповідає D3, щоб спочатку на сторінці вибрати `ul`. Далі виберіть усі елементи списку, які повертають порожню вибірку. Метод `data()` оглядає набір даних і тричі запускає наступний код, один раз для кожного елемента в масиві. Метод `enter()` не бачить елементи `li` на сторінці, але йому потрібно 3 (один для кожного шматка даних у `dataset`). Нові елементи `li` додаються до `ul` і мають текст `New item`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Оберіть вузол `body`, а потім оберіть всі елементи `h2`. Маючи D3 створюєте і додаєте тег `h2` для кожного елемента в масиві `dataset`. Текст у `h2` повинен бути `New Title`. Ваш код повинен використовувати методи `data()` і `enter()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш документ має мати 9 елементів `h2`.
|
||||
|
||||
```js
|
||||
assert($('h2').length == 9);
|
||||
```
|
||||
|
||||
Текст у елементах `h2` повинен бути `New Title`. Великі літери та інтервали мають збігатися точно.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h2')
|
||||
.text()
|
||||
.match(/New Title/g).length == 9
|
||||
);
|
||||
```
|
||||
|
||||
Ваш код має використовувати метод `data()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.data/g));
|
||||
```
|
||||
|
||||
Ваш код має використовувати метод `enter()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.enter/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body")
|
||||
.selectAll("h2")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("h2")
|
||||
.text("New Title")
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,122 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc5
|
||||
title: Робота з динамічними даними в D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301498
|
||||
dashedName: work-with-dynamic-data-in-d3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Останні два завдання охоплюють основи відображення даних динамічно з D3 за допомогою методів `data()` і `enter()`. Ці методи приймають набір даних і разом із методом `append()` створюють новий елемент DOM для кожного запису в наборі даних.
|
||||
|
||||
У попередньому завданні ви створили новий елемент `h2` для кожного елемента масиву `dataset`, але всі вони містили один і той самий текст — `New Title`. Це тому, що ви не використали дані, пов’язані з кожним із елементів `h2`.
|
||||
|
||||
Метод D3 `text()` може приймати рядок або зворотний виклик як аргумент:
|
||||
|
||||
```js
|
||||
selection.text((d) => d)
|
||||
```
|
||||
|
||||
У прикладі вище параметр `d` посилається на один запис у наборі даних, до якого прив'язується вибране значення.
|
||||
|
||||
Використаємо поточний приклад як контекст, перший елемент `h2` прив’язаний до 12, другий елемент `h2` прив’язаний до 31, третій елемент `h2` прив'язаний до 22 і так далі.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Змініть метод `text()`, щоб кожен елемент `h2` виводив відповідне значення з масиву `dataset` з одним пробілом та рядком `USD`. Наприклад, перший заголовок має бути `12 USD`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Перший елемент `h2` повинен містити текст `12 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(0).text() == '12 USD');
|
||||
```
|
||||
|
||||
Другий елемент `h2` повинен містити текст `31 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(1).text() == '31 USD');
|
||||
```
|
||||
|
||||
Третій елемент `h2` повинен містити текст `22 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(2).text() == '22 USD');
|
||||
```
|
||||
|
||||
Четвертий елемент `h2` повинен містити текст `17 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(3).text() == '17 USD');
|
||||
```
|
||||
|
||||
П'ятий елемент `h2` повинен містити текст `25 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(4).text() == '25 USD');
|
||||
```
|
||||
|
||||
Шостий елемент `h2` повинен містити текст `18 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(5).text() == '18 USD');
|
||||
```
|
||||
|
||||
Сьомий елемент `h2` повинен містити текст `29 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(6).text() == '29 USD');
|
||||
```
|
||||
|
||||
Восьмий елемент `h2` повинен містити текст `14 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(7).text() == '14 USD');
|
||||
```
|
||||
|
||||
Дев'ятий елемент `h2` повинен містити текст `9 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(8).text() == '9 USD');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("h2")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("h2")
|
||||
// Add your code below this line
|
||||
|
||||
.text("New Title");
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("h2")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("h2")
|
||||
.text((d) => `${d} USD`);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@@ -0,0 +1,167 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be4
|
||||
title: Доступ до даних JSON із API
|
||||
challengeType: 6
|
||||
forumTopicId: 301499
|
||||
dashedName: access-the-json-data-from-an-api
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
У попередньому завданні ви дізнались як отримати дані JSON з freeCodeCamp Cat Photo API.
|
||||
|
||||
Тепер зверніть увагу на отримані дані, щоб краще зрозуміти формат JSON. Згадайте деякі позначення в JavaScript:
|
||||
|
||||
<blockquote>[ ] -> Квадрантні дужки позначають масив<br>{ } -> Фігурні дужки позначають об'єкт<br>" " -> Подвійні лапки позначають рядок. Їх також використовують для назв ключів у форматі JSON</blockquote>
|
||||
|
||||
Розуміти структуру даних з API важливо, адже це впливає на спосіб отримання бажаних значень.
|
||||
|
||||
Справа натисніть кнопку `Get Message`, щоб перетворити формат freeCodeCamp Cat Photo API JSON у HTML.
|
||||
|
||||
Першим та останнім символом у даних формату JSON ставляться квадратні дужки `[ ]`. Це означає, що отримані дані - масив. Фігурна дужка `{` у даних JSON стоїть другою та починає опис об'єкта. Зверніть увагу, що тут три окремі об'єкти. Дані JSON - це масив з трьох об'єктів, кожен із яких містить інформацію про фото котів.
|
||||
|
||||
Ви вже вивчили, що об'єкти мають пари "ключ-значення", розділені комами. Наприклад, перший об'єкт Cat Photo`"id":0` має ключ `id` та відповідне значення `0`. Аналогічні ключі використовують для `imageLink`, `altText` та `codeNames`. Кожне фото - об'єкт з однаковими ключами, але з різними значеннями.
|
||||
|
||||
Інша цікава пара '"ключ-значення" в першому об'єкті - це `"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]`. `codeNames` - це ключ, значення якого - масив із трьох рядків. Можна мати не лише масив об'єктів, а й ключ з масивом як значення.
|
||||
|
||||
Пам'ятайте як отримувати доступ до даних у масивах та об'єктах. Для доступу до певного індексу елемента масиви використовують дужкову нотацію. Об'єкти використовують дужку або крапкову нотацію, щоб отримати доступ до змінних властивостей. Ось приклад, що показує властивість `altText` першого фото кота. Зверніть увагу, що аналізовані дані JSON в редакторі зберігаються змінною з назвою `json`:
|
||||
|
||||
```js
|
||||
console.log(json[0].altText);
|
||||
```
|
||||
|
||||
Консоль буде відображати рядок `A біла кішка в зеленому шоломі у формі дині на голові. `.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Вивести на консоль друге значення в масиві `codeNames` для кішки з `id` 2. Щоб отримати доступ до масиву, використайте дужкову та крапкову нотацію об'єкта (що зберігається у змінній `json`).
|
||||
|
||||
# --hints--
|
||||
|
||||
У коді має бути використана дужкова та крапкова нотація для правильного імені та виведення `Loki` на консоль.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/console\s*\.\s*log\s*\(\s*json\s*\[2\]\s*(\.\s*codeNames|\[\s*('|`|")codeNames\2\s*\])\s*\[\s*1\s*\]\s*\)/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json', true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
|
||||
// Add your code below this line
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json', true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
|
||||
// Add your code below this line
|
||||
console.log(json[2].codeNames[1]);
|
||||
// Add your code above this line
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
@@ -0,0 +1,140 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512be2
|
||||
title: Зміна тексту кліком "Events"
|
||||
challengeType: 6
|
||||
forumTopicId: 301500
|
||||
dashedName: change-text-with-click-events
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Кліком ви можете оновити елемент HTML за допомогою JavaScript.
|
||||
|
||||
Наприклад, коли користувач натискає кнопку `Get Message`, текст елемента класу `message` змінюється на `Here is the message`.
|
||||
|
||||
Так кліком можна змінити код:
|
||||
|
||||
```js
|
||||
document.getElementsByClassName('message')[0].textContent="Here is the message";
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте код `onclick` обробника подій, щоб змінити текст в елементі `message` на `Here is the message`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Використайте у коді метод `document.getElementsByClassName`, щоб вибрати елемент класу `message` та додати `textContent` у заданий рядок.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/document\s*\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\s*\.textContent\s*?=\s*?('|")Here is the message\2/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
// Add your code below this line
|
||||
document.getElementsByClassName('message')[0].textContent = "Here is the message";
|
||||
// Add your code above this line
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
@@ -0,0 +1,199 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be5
|
||||
title: Перетворення даних JSON у HTML
|
||||
challengeType: 6
|
||||
forumTopicId: 16807
|
||||
dashedName: convert-json-data-to-html
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Дані, отримані з JSON API, ви можете відобразити у форматі HTML.
|
||||
|
||||
Використайте метод `forEach` для повторного перегляду даних, оскільки фото котів зберігаються в масиві. Ви можете змінити елементи HTML кожного об'єкта.
|
||||
|
||||
Спершу, створіть змінну html `let html = "";`.
|
||||
|
||||
Потім додайте HTML до змінної, яку повинні обрамляти ключові назви у `strong` теґах, а далі має йти значення. Так буде задано цикл даним JSON. Після завершення циклу - відтворіть його.
|
||||
|
||||
Ось приклад такого коду:
|
||||
|
||||
```js
|
||||
let html = "";
|
||||
json.forEach(function(val) {
|
||||
const keys = Object.keys(val);
|
||||
html += "<div class = 'cat'>";
|
||||
keys.forEach(function(key) {
|
||||
html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
|
||||
});
|
||||
html += "</div><br>";
|
||||
});
|
||||
```
|
||||
|
||||
**Примітка:** Для цього завдання вам потрібно додати на сторінку новий елемент HTML, але не використовуйте `textContent`. Натомість використайте `innerHTML`. Проте сайт може стати вразливим до атак міжсайтового скриптингу.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Методом `forEach` додайте цикл даних JSON та створіть елементи HTML для їх відображення.
|
||||
|
||||
Ось декілька прикладів JSON:
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"id":0,
|
||||
"imageLink":"https://s3.amazonaws.com/freecodecamp/funny-cat.jpg",
|
||||
"altText":"A white cat wearing a green helmet shaped melon on its head. ",
|
||||
"codeNames":[ "Juggernaut", "Mrs. Wallace", "Buttercup"
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш код повинен зберігати дані змінної `html`
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/html(\+=|=html\+)/g))
|
||||
```
|
||||
|
||||
У коді потрібно використати метод `forEach` для додавання циклу даних JSON з API.
|
||||
|
||||
```js
|
||||
assert(code.match(/json\.forEach/g));
|
||||
```
|
||||
|
||||
У вашому коді назви ключів мають бути обрамлені у `strong` теґи.
|
||||
|
||||
```js
|
||||
assert(code.match(/<strong>.+<\/strong>/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload = function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
document.getElementsByClassName('message')[0].innerHTML = html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload = function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
// Add your code below this line
|
||||
json.forEach(function(val) {
|
||||
var keys = Object.keys(val);
|
||||
html += "<div class = 'cat'>";
|
||||
keys.forEach(function(key) {
|
||||
html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
|
||||
});
|
||||
html += "</div><br>";
|
||||
});
|
||||
// Add your code above this line
|
||||
document.getElementsByClassName('message')[0].innerHTML = html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
@@ -0,0 +1,98 @@
|
||||
---
|
||||
id: 587d7faf367417b2b2512be8
|
||||
title: Отримання даних геолокації для знаходження GPS-координат користувача
|
||||
challengeType: 6
|
||||
forumTopicId: 18188
|
||||
dashedName: get-geolocation-data-to-find-a-users-gps-coordinates
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Інша зручна річ - доступ до поточної локації користувача. У кожен браузер вбудовано навігацію, яка надасть цю інформацію.
|
||||
|
||||
Навігація надає доступ до актуальної широти та довготи користувача.
|
||||
|
||||
Вам надійде запит на дозвіл або блокування доступу сайту до вашої локації. Завдання можна завершити будь-яким способом, якщо код буде правильним.
|
||||
|
||||
Якщо ви надасте доступ, побачите текст на телефоні виводу для зміни широти та довготи.
|
||||
|
||||
Ось такий код:
|
||||
|
||||
```js
|
||||
if (navigator.geolocation){
|
||||
navigator.geolocation.getCurrentPosition(function(position) {
|
||||
document.getElementById('data').innerHTML="latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude;
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
Спочатку перевіряється чи існує об'єкт `navigator.geolocation`. Якщо так, то для об'єкта методом `getCurrentPosition` буде асинхронно надіслано запит на локацію користувача. Якщо запит успішний, функція зворотного виклику під час роботи методу спрацює. Ця функція передає значення `position` об'єкта для широти і довготи за допомогою крапкової нотації і оновлює HTML.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте приклад коду у теґи `script`, щоб дізнатись поточне розташування користувача і вставити його у HTML.
|
||||
|
||||
# --hints--
|
||||
|
||||
Щоб дізнатись поточне місце розташування користувача, використайте `navigator.geolocation`.
|
||||
|
||||
```js
|
||||
assert(code.match(/navigator\.geolocation\.getCurrentPosition/g));
|
||||
```
|
||||
|
||||
Щоб відобразити координату широти місця знаходження користувача, використайте `position.coords.latitude`.
|
||||
|
||||
```js
|
||||
assert(code.match(/position\.coords\.latitude/g));
|
||||
```
|
||||
|
||||
Щоб відобразити координату довготи місця знаходження користувача, використайте `position.coords.longitude`.
|
||||
|
||||
```js
|
||||
assert(code.match(/position\.coords\.longitude/g));
|
||||
```
|
||||
|
||||
Положення користувача покажіть елементом `id="data"` всередині `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/document\.getElementById\(\s*?('|")data\1\s*?\)\.innerHTML/g)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
<h4>You are here:</h4>
|
||||
<div id="data">
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
// Add your code below this line
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(function(position) {
|
||||
document.getElementById('data').innerHTML = "latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude;
|
||||
});
|
||||
}
|
||||
// Add your code above this line
|
||||
</script>
|
||||
<h4>You are here:</h4>
|
||||
<div id="data">
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
```
|
||||
@@ -0,0 +1,174 @@
|
||||
---
|
||||
id: 5ccfad82bb2dc6c965a848e5
|
||||
title: Отримання JSON fetch-методом JavaScript
|
||||
challengeType: 6
|
||||
forumTopicId: 301501
|
||||
dashedName: get-json-with-the-javascript-fetch-method
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Щоб зробити запит зовнішніх даних використовуйте метод `fetch()`. Він еквівалентний методу `XMLHttpRequest`, проте синтаксис вважається простішим.
|
||||
|
||||
Ось код для створення запиту GET для `/json/cats.json`
|
||||
|
||||
```js
|
||||
|
||||
fetch('/json/cats.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('message').innerHTML = JSON.stringify(data);
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
Зверніть увагу на кожен фрагмент коду.
|
||||
|
||||
Запит надсилає саме перший рядок. Так `fetch(URL)` робить запит `GET` на конкретну URL-адресу. Так створюється Promise.
|
||||
|
||||
Після створення Promise та успішного запиту, методом `then` код адаптується та перетворюється у формат JSON.
|
||||
|
||||
Метод `then` також створює Promise, що так само проходить обробку наступним `then` методом. Аргумент у другому `then` і є об'єктом JSON, який вам потрібен!
|
||||
|
||||
Тепер цим методом обирається елемент, який отримає дані за допомогою `document.getElementById()`. Далі код HTML елемента змінюється через додавання рядка з об'єктом JSON, поверненим за запитом.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Щоб створити та надіслати запит `GET` до freeCodeCamp Cat Photo API, оновіть код. Використайте цього разу метод `fetch` замість `XMLHttpRequest`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Щоб надіслати запит `GET`, використовуйте метод `fetch`.
|
||||
|
||||
```js
|
||||
assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g));
|
||||
```
|
||||
|
||||
Щоб конвертувати вхідні дані в JSON, використовуйте метод `then`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.then\s*\(\s*\(?(?<var>\w+)\)?\s*=>\s*\k<var>\s*\.json\s*\(\s*\)\s*\)/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Щоб обробити конвертовані дані JSON методом `then`, використайте `then` у коді двічі.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/\.then\(\(?\w+\)?=>{[^}]*}\)/g));
|
||||
```
|
||||
|
||||
Щоб змінити внутрішній HTML на рядок з даними JSON, використовуйте у коді елемент з id `message`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(
|
||||
/document\.getElementById\(('|")message\1\)\.innerHTML=JSON\.stringify\(?\w+\)/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick= () => {
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p id="message" class="box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick= () => {
|
||||
fetch('/json/cats.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('message').innerHTML=JSON.stringify(data);
|
||||
})
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p id="message" class="box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
@@ -0,0 +1,196 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be3
|
||||
title: Отримання JSON методом JavaScript XMLHttpRequest
|
||||
challengeType: 6
|
||||
forumTopicId: 301502
|
||||
dashedName: get-json-with-the-javascript-xmlhttprequest-method
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете надсилати запит на дані із зовнішніх джерел. Саме тут використовуються API.
|
||||
|
||||
Пам'ятайте, що API (або ППІ - прикладний програмний інтерфейс) - це інструменти, що дозволяють комп'ютерам обмінюватись інформацією один з одним. Ви дізнаєтесь, як оновити HTML та дані з API за допомогою технології AJAX.
|
||||
|
||||
Більшість веб-API передають дані у форматі JSON. JSON - це JavaScript Object Notation.
|
||||
|
||||
Синтаксис JSON схожий на літеральну нотацію об'єкта в JavaScript. У JSON властивості об'єкта та їх поточні значення обрамлені `{` та `}`.
|
||||
|
||||
Ці властивості разом зі значеннями часто називаються парами "ключ-значення".
|
||||
|
||||
Ваша програма отримає дані JSON через API як `string`, хоча вони надіслані у форматі `bytes`. За замовчуванням дані надсилаються не у форматі JavaScript, проте їх можна конвертувати. Методом `JSON.parse` аналізується рядок та створюється потрібний об'єкт JavaScript.
|
||||
|
||||
Запросіть JSON через freeCodeCamp's Cat Photo API. Додайте цей код до кліку для виконання запиту:
|
||||
|
||||
```js
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload = function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
|
||||
};
|
||||
```
|
||||
|
||||
Зверніть увагу на кожний елемент коду. Об'єкт JavaScript `XMLHttpRequest` має певні властивості та методи для передачі даних. Спочатку створюють об'єкт `XMLHttpRequest` та зберігають у змінній `req`. Потім методом `open` надсилають запит `GET`, адже йде отримання даних з API. URL-адреса API, з якого ви зробили запит даних, є другим аргументом для `open`. Третій аргумент - логічне значення, яке надсилає асинхронний запит за допомогою `true`. Сам запит надсилають методом `send`. Врешті-решт, обробник події `onload` аналізує отримані дані та перетворює об'єкт JavaScript методом `JSON.stringify` у рядок. Далі цей рядок буде вставлено як текст повідомлення.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Щоб створити та надіслати запит `GET` до freeCodeCamp Cat Photo API, оновіть код. Далі натисніть кнопку `Get Message`. Тест `The message will go here` буде замінено даними з API формату raw JSON за допомогою функції AJAX.
|
||||
|
||||
# --hints--
|
||||
|
||||
Створіть новий `XMLHttpRequest` у коді.
|
||||
|
||||
```js
|
||||
assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
|
||||
```
|
||||
|
||||
Щоб створити запит `GET` для freeCodeCamp Cat Photo API, використайте метод `open`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.open\(\s*?('|")GET\1\s*?,\s*?('|")\/json\/cats\.json\2\s*?,\s*?true\s*?\)/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Щоб відправити запит, використайте метод `send`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.send\(\s*\)/g));
|
||||
```
|
||||
|
||||
Для того, щоб код працював, вам потрібен сет обробника подій `onload`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.onload\s*=\s*(function|\(\s*?\))\s*?(\(\s*?\)|\=\>)\s*?{/g)
|
||||
);
|
||||
```
|
||||
|
||||
Щоб зробити аналіз `responseText`, використайте метод `JSON.parse`.
|
||||
|
||||
```js
|
||||
assert(code.match(/JSON\s*\.parse\(\s*.*\.responseText\s*\)/g));
|
||||
```
|
||||
|
||||
Щоб змінити внутрішній HTML на рядок з даними JSON, використайте у коді елемент класу `message`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/document\s*\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\s*\.innerHTML\s*?=\s*?JSON\.stringify\(.+?\)/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open('GET', '/json/cats.json', true);
|
||||
req.send();
|
||||
req.onload = () => {
|
||||
const json = JSON.parse(req.responseText);
|
||||
document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
@@ -0,0 +1,140 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512be1
|
||||
title: Обробка кліків за допомогою JavaScript функцією onclick
|
||||
challengeType: 6
|
||||
forumTopicId: 301503
|
||||
dashedName: handle-click-events-with-javascript-using-the-onclick-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Вам потрібно, щоб код виконувався лише після завантаження сторінки. Для цього прикріпіть event JavaScript до `DOMContentLoaded` документу. Ось приклад такого коду:
|
||||
|
||||
```js
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
Ви можете вставити обробники подій у функцію `DOMContentLoaded`. За допомогою такого коду використайте обробник подій `onclick`, що запускається під час кліку користувача на елемент з id `getMessage`:
|
||||
|
||||
```js
|
||||
document.getElementById('getMessage').onclick = function(){};
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте обробник подій кліку до функції `DOMContentLoaded` для елементу з id `getMessage`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Щоб обрати елемент `getMessage`, використайте у коді метод `document.getElementById`.
|
||||
|
||||
```js
|
||||
assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g));
|
||||
```
|
||||
|
||||
Додайте до коду обробник подій `onclick`.
|
||||
|
||||
```js
|
||||
assert(typeof document.getElementById('getMessage').onclick === 'function');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
// Add your code below this line
|
||||
document.getElementById('getMessage').onclick = function(){ };
|
||||
// Add your code above this line
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
@@ -0,0 +1,206 @@
|
||||
---
|
||||
id: 587d7faf367417b2b2512be9
|
||||
title: Надсилання даних методом JavaScript XMLHttpRequest
|
||||
challengeType: 6
|
||||
forumTopicId: 301504
|
||||
dashedName: post-data-with-the-javascript-xmlhttprequest-method
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
У попередніх прикладах, ви отримували дані із зовнішнього ресурсу. Проте ви також можете надсилати дані на зовнішній ресурс, допоки він підтримує запити AJAX та вам відома URL-адреса.
|
||||
|
||||
Метод JavaScript's `XMLHttpRequest` використовують для надсилання даних на сервер. Наприклад:
|
||||
|
||||
```js
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', url, true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4 && xhr.status === 201){
|
||||
const serverResponse = JSON.parse(xhr.response);
|
||||
document.getElementsByClassName('message')[0].textContent = serverResponse.userName + serverResponse.suffix;
|
||||
}
|
||||
};
|
||||
const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
|
||||
xhr.send(body);
|
||||
```
|
||||
|
||||
Вам вже зустрічались ці методи. Ось метод `open`, який надсилає запит `POST` на URL-адресу зовнішнього ресурсу та робить його асинхронним за допомогою булевого `true`. Метод `setRequestHeader` встановлює значення заголовка запиту HTTP, в якому присутня інформація про відправника та сам запит. Використовуйте цей метод після `open`, але перед `send`. Два параметри - це назва заголовка і значення, що задається як тіло цього заголовка. Далі, за допомогою слухача подій `onreadystatechange`, змінюється стан запиту. `readyState` з `4` означає завершення операції, а `status` з `201` - успішно виконаний запит. HTML документа можна оновити. І нарешті, метод `send` надсилає запит для значення `body`. Ключ `userName` надає користувач у полі `input`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Оновіть код, щоб надіслати запит `POST` до кінцевої точки API. Потім напишіть своє ім'я у полі вводу та натисніть кнопку `Send Message`. Функція AJAX замінить `Reply from Server will be here.` даними із сервера. Додайте до вашого імені у полі вводу текст `loves cats`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Створіть новий `XMLHttpRequest` у коді.
|
||||
|
||||
```js
|
||||
assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
|
||||
```
|
||||
|
||||
Щоб створити запит `POST` на сервер, використайте метод `open`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g));
|
||||
```
|
||||
|
||||
Використовуйте метод `setRequestHeader` у коді.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.setRequestHeader\(\s*?('|")Content-Type\1\s*?,\s*?('|")application\/json;\s*charset=UTF-8\2\s*?\)/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Для того, щоб код працював, вам потрібен сет обробника подій `onreadystatechange`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.onreadystatechange\s*?=/g));
|
||||
```
|
||||
|
||||
У коді має бути елемент `message`, текст якого зміниться з `textContent` на `userName loves cats`
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/document\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\.textContent\s*?=\s*?.+?\.userName\s*?\+\s*?.+?\.suffix/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Використовуйте метод `send` у вашому коді.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.send\(\s*?body\s*?\)/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('sendMessage').onclick = function(){
|
||||
|
||||
const userName = document.getElementById('name').value;
|
||||
const url = 'https://jsonplaceholder.typicode.com/posts';
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Friends</h1>
|
||||
<p class="message box">
|
||||
Reply from Server will be here
|
||||
</p>
|
||||
<p>
|
||||
<label for="name">Your name:
|
||||
<input type="text" id="name"/>
|
||||
</label>
|
||||
<button id="sendMessage">
|
||||
Send Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('sendMessage').onclick = function(){
|
||||
|
||||
const userName = document.getElementById('name').value;
|
||||
const url = 'https://jsonplaceholder.typicode.com/posts';
|
||||
// Add your code below this line
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', url, true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4 && xhr.status === 201){
|
||||
const serverResponse = JSON.parse(xhr.response);
|
||||
document.getElementsByClassName('message')[0].textContent = serverResponse.userName + serverResponse.suffix;
|
||||
}
|
||||
};
|
||||
const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
|
||||
xhr.send(body);
|
||||
// Add your code above this line
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Friends</h1>
|
||||
<p class="message">
|
||||
Reply from Server will be here
|
||||
</p>
|
||||
<p>
|
||||
<label for="name">Your name:
|
||||
<input type="text" id="name"/>
|
||||
</label>
|
||||
<button id="sendMessage">
|
||||
Send Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
@@ -0,0 +1,171 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be7
|
||||
title: Попередній фільтр JSON для отримання потрібних даних
|
||||
challengeType: 6
|
||||
forumTopicId: 18257
|
||||
dashedName: pre-filter-json-to-get-the-data-you-need
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Щоб не відображати кожне фото кота з freeCodeCamp Cat Photo API, використайте попередній фільтр перед створенням циклу.
|
||||
|
||||
Так як дані JSON зберігаються в масиві, використайте метод `filter`, щоб знайти фото кота зі значенням ключа `id` - `1`.
|
||||
|
||||
Ось приклад такого коду:
|
||||
|
||||
```js
|
||||
json = json.filter(function(val) {
|
||||
return (val.id !== 1);
|
||||
});
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Видаліть фото кота зі значенням `id` `1`, за допомогою метода `filter` у даних JSON.
|
||||
|
||||
# --hints--
|
||||
|
||||
Використовуйте метод `filter` у коді.
|
||||
|
||||
```js
|
||||
assert(code.match(/json\.filter/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json', true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
let json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>"
|
||||
|
||||
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>"
|
||||
|
||||
html += "</div>"
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML = html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json', true);
|
||||
req.send();
|
||||
req.onload = function(){
|
||||
let json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
// Add your code below this line
|
||||
json = json.filter(function(val) {
|
||||
return (val.id !== 1);
|
||||
});
|
||||
|
||||
// Add your code above this line
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>"
|
||||
|
||||
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>"
|
||||
|
||||
html += "</div>"
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML = html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
@@ -0,0 +1,163 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be6
|
||||
title: Відображення зображень із джерел даних
|
||||
challengeType: 6
|
||||
forumTopicId: 18265
|
||||
dashedName: render-images-from-data-sources
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Під час виконання останніх завдань, ви дізнались, що кожен об'єкт масиву JSON має ключ `imageLink` зі значенням URL-адреси зображення кота.
|
||||
|
||||
Під час запуску циклу для цих об'єктів, скористайтесь властивістю `imageLink` для відображення фото в елементі `img`.
|
||||
|
||||
Ось приклад такого коду:
|
||||
|
||||
```js
|
||||
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте код у теґ `img`, щоб використати властивості `imageLink` та `altText`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Щоб відобразити зображення, використайте властивість `imageLink`.
|
||||
|
||||
```js
|
||||
assert(code.match(/val\.imageLink/g));
|
||||
```
|
||||
|
||||
Використайте у коді `altText` для значень атрибута зображення `alt`.
|
||||
|
||||
```js
|
||||
assert(code.match(/val\.altText/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req=new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload = function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>";
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
html += "</div><br>";
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML=html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload = function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>";
|
||||
// Add your code below this line
|
||||
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
|
||||
// Add your code above this line
|
||||
html += "</div><br>";
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML = html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
Reference in New Issue
Block a user