Якщо ви відвідали будь-який тренінг, але не застосували отримані знання на практиці протягом першого тижня — найімовірніше, ви ніколи їх не застосуєте.
Минулого місяця «Медіамейкер» розпочав серію статей про журналістику даних разом із Євгенією Дроздовою та Юлією Дукач — журналістками незалежного українського видання Тexty.org.ua, яке із 2010 року просуває українську журналістику даних як серед української авдиторії, так і за кордоном. Якщо ви пропустили перший випуск, то зможете знайти його за лінком тут.
У цьому випуску ми пропонуємо практичний огляд безплатних інструментів для створення інфографіки й базові поради щодо вибору графіка. Сподіваємося, це допоможе вам зробити перші кроки в роботі з даними та створенні інфографіки, а приклади для натхнення, що ми для вас підібрали, нагадають, що в журналістиці даних завжди є місце для творчого підходу та креативу.
Як обрати вигляд інфографіки
Отже, ви збираєтеся зробити графік.
Найперше завдання — це розібратись із типом звʼязків у даних, адже саме звʼязки визначають, який графік вам потрібен. Так, ми про це вже писали у першому огляді, але зараз зупинимося на цьому питанні детальніше.
Щоби краще зрозуміти, що таке «звʼязки в даних» думайте про них, як про питання «що я хочу показати своїм читачам».
Я хочу показати, як щось змінилось у часі
Це може бути зростання, падіння, коливання, іноді показовою може бути навіть відсутність динаміки. У такому разі у ваших даних має бути впорядкована змінна, що означає день/місяць/рік, і числова змінна з показником. Коли ми кажемо про змінні, ми маємо на увазі колонки в даних.
Наприклад:
| Дата | Показник |
| грудень 2022 | 100000 |
| травень 2024 | 500000 |
Для ілюстрації змін у часі обирайте лінійний графік (line chart), графік площин (area chart), вертикальний стовпчиковий графік (column chart), слоуп графік (slope chart) або потокову діаграму (streamgraph).
Звісно, залежно від тематики графіки, технічних і художніх можливостей, це може бути складніше графічне рішення. Наприклад, у матеріалі про кліматичні зміни Financial Times використовує не лінійний графік, а beeswarm графік. Він дає змогу не лише показати, як погода мінялась у часі (різні декади закодовані в різні кольори), але й порівняти зміни температури в межах кожного місяця. Надзвичайно цікаве візуальне рішення.
Я хочу, щоб читач міг порівняти показники між різними категоріями
У такому випадку у ваших даних одна змінна категоріальна (список чи перелік чогось), а друга містить значення, які потрібно порівняти:
| Знищено | Показник |
| літаків | 361 |
| кораблів | 28 |
| танків | 8206 |
Для такого типу даних можна обрати горизонтальний стовпчиковий графік (bar chart), графік площин (treemap), графік пропорцій (бульбашковий чи із квадратами, де показник привʼязаний до розміру бульбашки), пропорційні піктограми (pictogram chart).
Я хочу дати читачу зрозуміти, що ця кількість лише невеличка (або значна) частина чогось більшого
У такому випадку ми маємо дві цифри, які є частиною цілого:
| Частка | Показник |
| Зроблено | 500000 |
| Залишилось | 139500000 |
Якщо у вас справді лише дві цифри, ймовірно, варто подивитись у бік секторної (pie chart) або кільцевої (donut chart) діаграм. Остання від секторної відрізняється діркою посередині, що візуально нагадує пончик. Також непоганим варіантом є waffle chart. Тут замість квадратиків можуть бути кружечки чи навіть піктограми, але не захоплюйтеся — зайве прикрашання насправді не прикрашає ваші інфографіки. У випадку, коли у вас одночасно відсоток від цілого і кілька категорій, варто обрати стовпчикову діаграму з накопиченням (stacked bar chart).
Мої дані стосуються країн, областей чи регіонів
Якщо історія, про яку йдеться, розвивається у просторі або стосується географічних регіонів, то насамперед треба подумати, чи доцільно додати карту.
Чому подумати? Тому що вибір на користь карти не завжди виправданий. Наприклад, якщо ваша мета — дати читачу можливість порівняти показники між країнами чи областями, то горизонтальний стовпчиковий графік може бути кращим рішенням.
У матеріалі The Washington Post про довжину паркану на кордонах країн Європи з Росією та Білоруссю використали ось такий графік замість карти:
Залежно від довжини спільного кордону, різні країни Європи мали сектори більшої чи меншої довжини, а лінія кордону була поділена на дві частини: «вже збудовано» й «будується». Людському оку простіше порівняти прямі лінії, ніж реальні криві кордонів, розміри яких до того ж можуть бути викривлені через недоліки різних географічних проєкцій.
Звісно, таке художнє рішення потребує дизайнера, проте якщо у вашому розпорядженні є лише прості графіки, то можна розказати історію про кордони, показавши їх довжиною ліній з описом-поясненням над ними.
Ось ще один приклад, коли для ілюстрації даних про країни обрана не карта: візуалізація дитячої смертності The Circle of Hope. Тут коло розбито на сектори-континенти, а країни розташовані на лінії сектора й посортовані від меншої до більшої кількості випадків. Різні лінії всередині кола означають різні роки. Так в одну візуалізацію вдалося запакувати багатовимірну інформацію, чого було б важко досягнути звичайною картою.
Я хочу показати взаємозалежність величин або явищ (кореляцію)
Наприклад, як співвідносяться доходи й рівень освіти. Для графіків кореляції важлива кількість спостережень: що більше прикладів (рядків даних) ми маємо, то краще. Адже з невеликою кількістю даних репрезентативність дослідження буде сумнівна, а кореляція — ледве помітна.
Інший приклад: ми хочемо проілюструвати тезу про те, що чим більше окупантів пре на територію України, тим більше їх тут гине. Три роки війни — чимало місяців. Тож маючи дані за кожен місяць, можна побудувати графік кореляції.
Якщо ви відчуваєте, що ідея й дані дають вам змогу відійти від простих шаблонів у бік чогось цікаво, то не обмежуйте себе. Наприклад, швейцарське видання NZZ проілюструвало кількість російських окупантів, що вибувають і прибувають для війни в Україну, ось такими графіками:
За лінком ви можете подивитись інтерактивну візуалізацію, де видно як кореляцію, так і динаміку в часі. Приклад вище — більш художньо витончений спосіб намалювати графік розподілу потоків. Однак, якщо повернутися до доступних в онлайн-додатках шаблонів, то для такого типу даних можуть підійти такі графіки.
Сподіваємося, тепер у вас є уявлення про базові правила вибору графіка й ми можемо перейти до інструментів, що допомагають створювати графіки зручно, швидко, а головне — безплатно.
Інструменти
Ще 10 років тому бажання робити красиві інтерактивні візуалізації було майже недосяжним для редакцій, у штаті яких немає людей, що зналися б на JavaScript. Сьогодні ж красиві візуалізації стали доступними як ніколи. А завдяки конкуренції — навіть безплатними.
На ринку онлайн інструментів для візуалізації даних є два прекрасні конкуренти: Flourish і Datawrapper. І якщо ви хоч раз відвідували практичний семінар чи тренінг із візуалізації даних, то точно чули принаймні одну з цих назв.
У кожного є свої плюси й мінуси, але кожен здатний задовольнити потребу у простому й доступному інструменті для створення графіків і карт. І ми щиро радимо спробувати обидва й обрати той, що припаде до душі. А тут ми окреслимо, що вони мають спільного, а що вирізняє кожен. Причому як в позитивний, так і в негативний бік.
Flourish та Datawrapper. Спільне
- Обидва інструменти дають можливість робити необмежену кількість графіків, карт чи таблиць безплатно. Хоч і мають комерційні плани, та переважно безплатного акаунту цілком вистачить.
- Передбачають реєстрацію з подальшим створенням власного профілю, в якому зберігатимуться всі проєкти.
- Не треба писати код чи знати програмування — вся магія відбувається у вебінтерфейсі.
- І Flourish, і Datawrapper мають прекрасні онлайн-довідки з купою прикладів і підказок.
- Існують уже не один рік і постійно розвиваються, додають новий функціонал та оновлюють шаблони для графіків.
- Обидва дають можливість завантажити графік як картинку чи вставити його на сайт у вигляді коду для збереження інтерактивного функціонала.
- Вони активно розбудовують dataviz-спільноту, пишуть круті блоги про візуалізацію даних і популяризують найкращі журналістські візуалізації.
- Дають можливість зробити стильний графік «із коробки» — переважно налаштувань за замовчуванням достатньо, щоб він уже виглядав у десятки разів красивіше за стилізований графік з Excel. Адже розробники вже попіклувалися про тонкі сірі осі, красиві та інклюзивні палітри та стильні шрифти.
- Обидва адаптують інтерактивні графіки під розмір екрана — нарешті не треба нічого додатково робити для мобільної версії.
Та все ж ці платформи чимось відрізняються? Розберімося з нюансами кожної.
Datawrapper
Якщо ви ніколи не працювали з онлайн-інструментом для візуалізації даних, то одразу радимо спробувати саме Datawrapper.
Він є легшим для початківця — має систему покрокових змін, які фактично проводять користувача від завантаження й перевірки даних до стилістичних налаштувань і публікації результату.
Має кілька приємних плюшок на кшталт dark mode (темної теми), яка включатиметься автоматично залежно від налаштувань користувача (погодьтеся, це приємний плюс, якщо у вашого медіа теж є dark mode, адже графік не виглядатиме «білою плямою» посеред темної сторінки).
Зовсім нещодавно розробники додали історію змін (із простим скасуванням випадкових змін) і можливість колаборації наживо в межах однієї візуалізації. Більше ніяких 100500 фінальних версій для дизайнерки.
Якщо ж не можете знайти потрібне налаштування, радимо гуглити або шукати напряму в документації. Бо є шанс, що ця проблема вирішується за допомогою невеликого рядка з html кодом (як у випадку, якщо вам хочеться додати логотип, фон чи навіть гіфку на графік).
І ми в редакції всім серцем любимо їхні ресурси: супер практичний блог (Юля Дукач: мої улюблені випуски — поради для створення якісних картограм і ціла серія публікацій про колір на графіках) і щотижневий випуск Data Vis Dispatch — розсилки та блогу, в якому збирають найкращі проєкти з датавізу з усього світу (регулярний предмет гордості в редакції «Текстів» коли вдається туди потрапити).
Є навіть банк із шаблонами крутих графіків і карт, які ви можете скопіювати собі, підставити власні дані й насолоджуватись.
У чому його недоліки?
Насамперед із Datawrapper ви набагато частіше бачитимете пропозиції преміумплану (який, до речі, коштує приблизно 600$ на місяць і не дуже орієнтований на можливості невеликих редакцій).
Часто ці плюшки мало впливають на якість візуалізацій. Наприклад, нам не шкода залишити логотип Datawrapper у футері. Але іноді нам може бути потрібний графік у векторному форматі (svg) щоб довести його до стану ідеального вже у графічному редакторі. А тут доведеться заплатити, або ж скористатись Flourish.
Flourish
До Flourish нас у редакції свого часу навернула саме можливість безплатного завантаження векторних зображень. А потім виявилося, що стилістичних налаштувань у ньому в рази більше, а отже вивантажувати svg вже не завжди й треба.
Тут одразу про недолік: велика кількість налаштувань може бути плюсом для досвідченого користувача, але справжнім пеклом для новачка. Тому радимо мати на увазі, що стилізація перших графіків може зайняти кілька годин (щоби банально переклікати всі вкладки й варіанти).
Сам же процес створення візуалізації такий самий, як у Datawrapper, хоч і не структурований у вигляді кроків. У вкладці Data ви завантажуєте дані й визначаєте, які колонки й за що відповідатимуть на вашому графіку. А потім вже переходите до вкладки Preview, де крок за кроком налаштовуєте все від типу графіка до змісту його футера із джерелами даних. Коли ви пройдете всі бічні вкладки меню праворуч, ваш графік готовий. Можете його або опублікувати, щоби скинути колегам, або вставити на сайті. Також можна вивантажити його як зображення в форматі png, jpeg або svg.
У Flourish є свої переваги проти Datawrapper.
- Він дає можливість створювати не тільки графіки й карти, але і слайдери, квізи чи галереї карток.
- На відміну від Datawrapper, у Flourish є мережеві візуалізації (і це, напевно, найпростіший спосіб опублікувати інтерактивну мережеву візуалізацію в себе на сайті).
- Якщо ви завантажуєте графік картинкою, на ньому не буде логотипу Flourish.
- Оскільки він є частиною сімʼї Canva, то чудово інтегрується в її продукти та презентації.
За лінком YouTube канал Flourish. А їхній блог — тут.
Ми у своїй роботі також нерідко використовуємо Flourish. Ось кілька прикладів таких матеріалів:
- Графік із цього матеріалу про особливості алгоритмів TikTok ми зробили у Flourish, а вже потім стилізували у графічному редакторі.
- Тут використали їхній слайдер, щоб порівняти супутникові знімки з окупованих територій до й після будівництва залізної дороги.
- А в цьому тексті можна побачити одразу кілька видів графіків Flourish включно з мережевим. З їхньою допомогою ми проілюстрували знахідки щодо інформаційного простору Telegram у прифронтових регіонах.
