Online WDDay 2022 js МАКСИМ МОСТОВИЙ «Візуалізація даних на фронт енді» Сайт: https://wdday.org/ Facebook: https://www.facebook.com/wdday.org Linkedin: https://www.linkedin.com/company/wdday

1. Візуалізація
данних на
фронт енді
Максим Мостовий

2. Коротко про мене
Мостовий Максим
Frontend Engineer at Rain
Працював у ікомерс, фінтек, кібербезпека.
Останні 7 років живу та працюю у Дубаї, ОАЕ
linkedin.com/in/maksym-mostovyi

3. Інтро,про себе та свій досвід.
Інтро у датавізуалізацію та чому це важливо знати для фронтенд розробників.
Огляд JS бібліотек для дата візуалізації.
Огляд найпопулярніших репрезентацій (чартів). Bar chart, line chart, pie chart. Яке їх
призначення та в якому випадку використовувати.
Приклад побудови подібних чартів.
Огляд пройденого на вебінарі.
Запитання та відповіді.
1.
2.
3.
4.
5.
6.
7.
План презентації

4. Візуалізація даних. Що це та чому в
цьому варто розумітися?
Візуалізація даних – це графічне відображення складних даних, що дозволяє користувачу швидше та легше
аналізувати отримані результати. Для цього використовуються такі елементи, як діаграми, чарти, карти та
графіки.
Здатність успішно візуалізувати вибірку данних є дуже актуальним скілом і попит на фахівців з подібними
знаннями лише зростає. Ось декілька фактів, чому важливо вміти розробляти графічну візуалізацію:
• кількість компаній, які займаються аналітикою даних стрімко зростає;
• більшість компаній використовують графічні репрезентації у своїх продуктах або у внутрішньому
програмному забезпеченні;
• напрямок BigData набирає все більших обертів, тому візуалізація стає ключовим інструментом.

5. Як обрати оптимальну візуалізацію?
Line chart
Bar chart Pie chart
Існує більше 50 різних візуалізацій, більшість з яких призначені для конкретних випадків і представлення
специфічних наборів даних. Сьогодні найпопулярнішими серед них є Bar chart, Line graph та Pie chart. Далі
ми розглянемо, у якому випадку краще використовувати кожен з них.

6. Bar Chart
Використовується для відображення дискретних чисельних порівнянь між категоріями. Одна вісь діаграми
показує конкретні категорії, що порівнюються, а інша вісь представляє дискретну шкалу значень.

7. Line Chart
Використовується для відображення кількісних значень протягом безперервного інтервалу або періоду часу.
Лінійний графік найчастіше використовується для відображення тенденцій та аналізу змін даних у часі.

8. Pie Chart
Використовується для відображення дискретних чисельних порівнянь між категоріями. Одна вісь діаграми
показує конкретні категорії, що порівнюються, а інша вісь представляє дискретну шкалу значень.

9. Вдалі та невдалі реалізації чарту

10. Вдалі та невдалі реалізації чарту

11. Бібліотеки для візуалізації
Сьогодні ви можете знайти більше 20 подібних бібліотек. Зазвичай вони відрізняються між собою
гнучкістю у виборі потрібної візуалізації, а також інтеграцією в різні JS фреймворки.
Список найбільш відомих бібліотек:
• D3.js
• Chart.js
• Echarts
• Highcharts
• Google charts
• Three.js
• Recharts
• Victory
• ApexCharts

12. Як вдало обрати бібліотеку?
Для цього потрібно врахувати наступне:
Обсяг даних, які потрібно візуалізовувати.
Наскільки складною має бути візуалізація.
На яких платформах буде відображена візуалізація.
Який фреймворк буде використаний на проекті.

13. D3.js
Є однією з найпопулярніших бібліотек. Дозволяє побудувати абсолютно будь-який тип візуалізації.
Використовується у понад 500 компаніях.
гнучка у реалізації візуалізацій;
підтримує великий об`єм даних;
підтримка взаємодії з користувачем, можливість робити візуалізації
інтерактивними.
Переваги:

14. Chart.js
Дозволяє створювати адаптивні чарти. Пропонує шість вже готових для інтеграції візуалізацій.
Використовується у багатьох компаніях (понад 800).
легка у використанні;
детальна документація;
економія часу на імплементацію візуалізацій.
Переваги:

15. ECharts
Cтворена компанією Baidu. Має готові до використання інтерактивні компоненти для виконання
таких операцій, як відображення багатовимірних даних. Використовується в більш ніж 100
компаніях.
легка у використанні;
детальна документація;
готові до використання компоненти.
Переваги:

16. Створюємо Bar chart, Line
chart та Pie chart
Chart.js
Echarts
D3.js

17. Підсумок
Напрямок BigData набирає все більших обертів, тому візуалізація стає ключовим
інструментом.
Існує понад 20 JS бібліотек для реалізації графічного представлення даних.
Найпопулярніші бібліотеки – D3.js, ChartJS, ECharts.
D3.js – для більш складних візуалізацій.
ECharts – також можна використовувати для складних візуалізацій або використовувати вже
готові компонети.
ChartJS – хороший вибір, якщо потрібно швидко та якісно реалізувати стандартну візуалізацію.

18. Q&A

19. Дякую за увагу !