text

Аналітика статистики за допомогою React

React Statistics UI відображає статистичні дані, які ми бачимо на панелях приладів у вигляді карток з типографікою, іконками, діаграмами та іншими компонентами. Загальні кліки, тривалість тощо — все це можна вважати статистикою.

Приклади в бібліотеці ShadcnUI Chart використовують Rechart у фоновому режимі. Я переписав ці приклади в Antd і Rechart для використання в інфраструктурі мого проекту.

Крім того, бібліотека Antd надає кілька прикладів.

Статистичний KnowledgeMap надає доступ до всіх зразків, які ви бачите на зображенні нижче.

https://onurdayibasi.dev/statistics-knowledge-map

Примітка: Платформа LearnReactUI.dev надає навчальні матеріали та вихідний код для синіх зразків, що наведені на зображенні нижче. Для отримання більш складних прикладів ви можете звернутися до мене через цю сторінку. Також натискайте це посилання для доступу до прикладів на інші теми.

Статистика за допомогою Antd

Приклади нижче були отримані з вебсайту компонентів Antd UI. Я зібрав колекцію графіків, які, на мою думку, є актуальними в одному зразку.

Статистика за допомогою стовпчастих діаграм

Стовпчаста діаграма — це візуальне представлення даних, де прямокутні стовпці використовуються для представлення значень різних категорій. Довжина або висота кожного стовпця пропорційна значенню, яке він представляє. Стовпці можуть бути представлені вертикально (діаграма стовпців) або горизонтально (діаграма барів).

Для чого хороші стовпчасті діаграми?

Стовпчасті діаграми широко використовуються в статистиці та візуалізації даних, оскільки вони прості, ефективні та універсальні. Вони корисні для:

• Порівняння категорій: Наприклад, продажі продуктів, результати тестів серед груп або частота подій.
• Виявлення тенденцій: Коли використовуються часові інтервали (наприклад, продажі протягом місяців).
• Рейтинг даних: Відображення елементів у порядку зростання або спадання за величиною.
• Показ пропорцій: За допомогою складених стовпців можна підкреслити пропорції всередині категорій.

Часові ряди у стовпчастих діаграмах

Часова стовпчаста діаграма — це тип стовпчастої діаграми, де вісь X представляє часові інтервали (наприклад, дні, місяці, роки), а вісь Y представляє вимірну змінну, що змінюється з часом. Ця діаграма призначена для візуалізації тенденцій, шаблонів і варіацій даних протягом часу.

Ключові особливості

• Хронологічний порядок: Стовпці розташовуються послідовно відповідно до часових інтервалів. Прикладами інтервалів можуть бути: години, дні, тижні, місяці або роки.
• Стовпці представляють значення: Кожен стовпець відповідає значенню змінної для конкретного періоду часу. Стовпці можуть показувати загальні підрахунки, середні значення або інші агреговані метрики.
• Одинкові часові інтервали: Інтервали на осі X зазвичай рівномірно розподілені для узгодженості.

Для чого це корисно?

• Виявлення тенденцій: Показує збільшення, зменшення або стабільність метрики з часом. Приклад: Тенденції доходу за місяцями.
• Порівняння часових періодів: Дозволяє порівнювати значення між конкретними часовими інтервалами. Приклад: Порівняння продажів у святкові сезони протягом кількох років.
• Виявлення сезонності: Підкреслює періодичні шаблони або коливання, що виникають через сезонні фактори. Приклад: Продажі в рітейлі в грудні щорічно.
• Аналіз впливу подій: Допомагає оцінити, як конкретні події або зміни впливають на метрики. Приклад: Аналіз трафіку на сайті до і після запуску продукту.
• Моніторинг ефективності: Відстежує ключові показники ефективності (KPI) з часом.
  text
  ## Приклад: Щоденні ціни акцій або щотижневі реєстрації користувачів.

Статистика за допомогою діаграм площі

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

Ключові особливості

• Ось X: Представляє категорії або часові інтервали (наприклад, дні, місяці, роки).
• Ось Y: Представляє значення або метрики, що нас цікавлять (наприклад, продажі, дохід або температура).
• Заштрихована область: Область між лінією та віссю X заповнюється, надаючи візуальне уявлення обсягу значень.

Для чого це корисно?

• Візуалізація тенденцій з часом: Як і лінійні діаграми, діаграми площі показують, як дані змінюються з часом, але з додатковою перевагою — підкресленням величини змін. Приклад: Відстеження зростання залученості користувачів протягом кількох місяців.
• Порівняння кількох категорій: Множинні складені діаграми площі можуть бути використані для порівняння різних категорій даних, показуючи, як вони сприяють загальному результату. Приклад: Місячний дохід від різних продуктів.
• Показ пропорцій частин до цілого: Складені діаграми площі особливо корисні для ілюстрації того, як окремі частини сприяють загальному результату з часом. Приклад: Візуалізація того, як різні регіони сприяють загальним продажам протягом року.
• Підкреслення обсягу: Діаграми площі надають чітке уявлення про обсяг або величину змінної з часом, допомагаючи визначити періоди високої або низької активності. Приклад: Показ обсягу трафіку на вебсайті протягом різних днів.
• Візуалізація кумулятивних даних: Вони можуть представляти кумулятивні дані, де кожен новий точковий елемент додається до попереднього значення, що дозволяє легко візуалізувати ріст або зниження. Приклад: Кумулятивні продажі протягом року або кумулятивні опади.

Статистика за допомогою кругових діаграм

Кругова діаграма — це кругова діаграма, розділена на сектори, кожен з яких представляє пропорцію або відсоток від цілого. Весь круг представляє 100% певного набору даних, а скибочки (або сегменти) представляють різні категорії або частини цілого. Розмір кожної скибочки пропорційний значенню, яке вона представляє.

Ключові особливості

• Представлення кола: Весь круг представляє загальну величину (100%).
• Скибочки: Кожна скибочка відповідає певній категорії, і її кут пропорційний відсотку або частці цієї категорії.
• Відсотки: Кожна скибочка може бути підписана відсотком, який вона представляє відносно загальної величини.

Для чого це корисно?

• Візуалізація частин до цілого: Кругові діаграми особливо корисні, коли потрібно показати, як окремі частини сприяють загальній сумі. Приклад: Частка ринку різних компаній.
• Показ пропорцій: Вони спрощують порівняння розміру різних категорій відносно всього. Приклад: Розподіл витрат серед різних відділів у компанії.
• Підкреслення важливих категорій: Дозволяє користувачам зосередитися на найбільш значущих або релевантних категоріях у даних. Приклад: Пропорція продажів кожної категорії продуктів.
• Простота та зручність: Кругові діаграми прості та ідеальні для наборів даних з обмеженою кількістю категорій (зазвичай менше 6–8).

Статистика за допомогою діаграм у формі пончиків

Діаграма пончик — це варіація кругової діаграми. Це, по суті, кругова діаграма з отвором посередині, що надає їй форму "пончика". Так само як і кругова діаграма, діаграма пончик використовується для відображення пропорційних даних, показуючи, як окремі категорії сприяють цілому.
text

Діаграма пончик

Діаграма пончик є варіацією кругової діаграми. Вона по суті є круговою діаграмою з отвором в середині, що надає їй форму "пончика". Так само як і кругова діаграма, діаграма пончик використовується для відображення пропорційних даних, показуючи, як окремі категорії сприяють цілому.

Отвір в центрі діаграми часто використовується для додаткової інформації або для того, щоб зробити діаграму більш привабливою.

Ключові особливості

• Представлення кола: Весь круг представляє загальну величину (100%), кожен сектор представляє частину цього цілого.
• Отвір в центрі: Ключова відмінність — порожній центр, який можна використовувати для підписів, підсумків або резюме діаграми.
• Сектори (скибочки): Скибочки представляють різні категорії, розмір кожної скибочки пропорційний її відсотковій частці в цілому.

Для чого це корисно?

• Показ частин до цілого: Як і кругові діаграми, діаграми пончик ідеально підходять для показу того, як різні категорії сприяють загальному результату. Приклад: Розподіл витрат між різними відділами компанії.
• Візуалізація пропорцій: Діаграми пончик добре підходять для відображення пропорцій різних категорій у такий спосіб, що їх легко інтерпретувати. Приклад: Розподіл частки ринку між конкурентами.
• Поліпшена естетика: Отвір в центрі можна використовувати для додаткових підписів, підсумків або іконок, покращуючи як естетику, так і функціональність.
• Множинні серії: Діаграми пончик можуть представляти кілька наборів даних в естетичний спосіб, використовуючи кілька кілець (так звані "мультикільцеві діаграми пончик"). Приклад: Показ різних метрик, таких як дохід, прибуток і витрати для однакових категорій за допомогою окремих кілець.

Лінійна статистика

Лінійна діаграма — це тип діаграми, що відображає інформацію за допомогою серії точок даних (міток), з'єднаних прямими лініями. Вона часто використовується для представлення безперервних даних з часом або впорядкованих категорій. Ось X зазвичай представляє час або іншу безперервну змінну, а ось Y — значення даних.

Ключові особливості

• Ось X: Представляє безперервну змінну, таку як час (наприклад, секунди, дні, роки) або впорядковані категорії.
• Ось Y: Представляє значення або вимірювання для точок даних (наприклад, ціни на акції, температура, продажі).
• Точки даних: Кожна точка даних відповідає певному значенню на заданому етапі осі X.
• Прямі лінії: Точки даних з'єднуються прямими лініями для показу тенденцій або змін з часом, що полегшує візуалізацію потоку даних.

Для чого це корисно?

• Відстеження змін з часом: Лінійні діаграми чудово підходять для візуалізації того, як змінюється змінна з часом, допомагаючи визначити тенденції, патерни та коливання. Приклад: Тренди фондового ринку, зміни температури або показники продажів за кілька місяців чи років.
• Визначення тенденцій: Лінійні діаграми допомагають виокремити зростаючі або спадаючі тенденції, що робить їх ідеальними для аналізу тенденцій. Приклад: Спостереження за зростанням трафіку на вебсайті або зниженням продажів продуктів.
• Порівняння кількох серій даних: Лінійні діаграми можуть показувати кілька ліній на одній діаграмі, що полегшує порівняння різних наборів даних з часом. Приклад: Порівняння ефективності кількох продуктів або моніторинг різних фінансових показників.
• Візуалізація безперервних даних: Лінійні діаграми найбільш ефективні для відображення даних, які є безперервними, а не дискретними категоріями. Приклад: Моніторинг частоти серцевих скорочень з часом або ходу проекту.
• Прогнозування: Лінійні діаграми часто використовуються разом з статистичними методами для прогнозування майбутніх тенденцій або поведінки на основі історичних даних. Приклад: Прогнозування майбутніх продажів на основі попередніх результатів.

Радіальна статистика

Радіальні діаграми, також відомі як Діаграми Павука, — це тип діаграми, що відображає багатовимірні дані в круговому форматі. Ці діаграми використовують центральну точку, з якої виходять кілька осей, кожна з яких представляє різну змінну або категорію.
text

Радіальна статистика

Радіальна діаграма — це тип діаграми, яка представляє дані в круговому (радіальному) форматі. Радіальні діаграми часто мають центральну точку, з якої дані розходяться по осях або сегментах. Вони використовуються для відображення даних у круговому форматі, подібно до кругових або радіальних діаграм, але з більш гнучким дизайном та застосуванням.

Радіальні діаграми переважно використовуються для візуалізації даних, які є циклічними, послідовними або потребують відображення таким чином, щоб підкреслити пропорції та взаємозв'язки в круговій структурі. Відомий варіант радіальної діаграми — це радіальна стовпчаста діаграма, де дані представлені як стовпці, що розходяться від центральної точки.

Статистика за допомогою бульбашок

Діаграма з бульбашками — це тип діаграми, яка використовує бульбашки для відображення точок даних у двовимірному просторі. Кожна бульбашка розміщується на осях X та Y відповідно до двох змінних, а розмір бульбашки представляє третю змінну, а колір (якщо він використовується) може представляти четверту змінну. Це робить діаграми з бульбашками ефективними для візуалізації та аналізу взаємозв'язків між трьома або більше змінними в одній діаграмі.

Перекладено з: React Statistics Examples