Михаил Кольцов
Преподаватель Могилянской школы журналистики;
администратор сайта Stopfake.org.
Выполнения задания
визуализировать два числа: 24 и 48 https://www.facebook.com/groups/IamCitizenJournalist/permalink/826887687475478/
! Фотовизуализация. хорошая опция и пока редко, кто ею пользуется.
2. Выбор инструмента визуализации. Эксперимент Лизы Шарлоты Крост
1. залежно від задачі
2. залежно від необхідного рівня точності передачі даних
3. аналіз чи презентація?
4. операції з даними?
5. типове чи специфічне?
4. Робочий процес
1. Скетч
2. Проста візуалізація в Ексель або Гугл таблицях
3. Продумана візуалізація в інших інструментах
4. Редагування в Адобе іллюстратор
5. Публікування
5. Дизайн візуалізації
http://www.datavizcatalogue.com/
Колір
Adobe Color https://color.adobe.com/
Colorbrewer http://colorbrewer2.org/
Шрифти
Google Fonts https://fonts.google.com/
Roboto
Roboto Mon
colorrrs https://www.webpagefx.com/web-design/hex-to-rgb/
Сервис для визуализации информации Data GIF Maker
Дом.задание:
на https://datagifmaker.withgoogle.com/edit нужно в обмеженому просторі сорієнтуватися, як та які кнопки натискати.http://news.unilead.net/2017/05/29/data-gif-maker/ Корпорация Google запустила специальный сервис Data GIF Maker, при помощи которого скучную, на первый взгляд, структурированную информацию, можно подать наглядным способом через GIF-ки.
Сотрудник Google поведал, что новый инструмент отлично подойдет для журналистов, и SMM-менеджеров, которые представляют через картинки и GIF-ки интересный, понятный и развлекательный контент для своей аудитории. Но, не учитывая основную ЦА сервиса, воспользоваться Data GIF Maker может каждый.
Мы сделали простую гифку с аудиторией Unilead News за май 2017, поделенной по гендеру.
Обычно схожий инструмент, по словам самих работников Google, используется для отображения динамики интересов пользователей в поисковой системе. Однако такой сервис будет полезен и для отображения результатов голосования, продаж, рейтингов и прочее.
Если вы еще недоумеваете, как пользоваться Data GIF Maker, рассказываем. Вводите показатели, которые нужно сравнить в отведенные поля, выбирайте названия и цвет, вписывайте поясняющий текст и жмите Download as GIF, чтобы запустить процесс генерации изображений. Единственное предупреждение: на создание таких вещей у сервиса уходит до нескольких минут.
AUTODRAW.COM
-
Текст читається по горизонталі, а не по вертикалі
-
Порівнюйте один обєкт, один малюнок, щоб не розсіювалась
уява, має бути одне прочитання
-
Використовувати тип даних, штуки, долари
-
Колір обєкта і колір цифр – однакові
-
Показувати обєкти в штуках, кількість вирубки лісу, отже
кількість лісу=більше і менше дерев
-
Треба заповнювати простір, читається лінійно
-
Завжди підписувати значення
DATAGIFMAKER.WITHGOOGLE.COM – гіфка!
Телевізійна
інфографіка використовує дуже мало інформації, максимальна простота.
Фотовізуалізація
– взяті фото старі і показані в тих місцях, де вони були зроблені (для
франкотаймс!!!!)
Експеримент
Лізи-Шарлоти Крост (highcharts)
1. Скетч
2. Проста візуалізація в ексель або гуглтаблицях.
2. Проста візуалізація в ексель або гуглтаблицях.
3.
Продумувана візуалізація в інших інструментах.
4.
Редагування в ілюстратор.
5. Публікація
DATAVIZCATALOGUE.COM – каталог візуалізації,
діаграми, гістограми
-
Не варто порівнювати різні дані
-
У гістограмі по вертикалі – це частота
-
Якщо ви все зробили правильно, то гістограма – це як гора
-
Має заголовок і підзаголовок (речення)
-
Завжди у візуалізаціях – посилання на джерело (або дані
зібрані власноруч)
-
Для видавництва найкраще створювати статичну графіку
-
Вирівнюйте не по центру, а по лівому краю, і не по ширині,
флаговий набір (як прапор). Невеликі твори набираються по лівому краю, а великі
(романи) – по ширині.
Заголовок – 12%простору
Підзаголовок – 8% простору
75% - графічна частина
Посилання на джерело – 5%
КОЛЬОРИ І ШРИФТИ
Adobe Color https://color.adobe.com/ RGB – як ми
бачимо на моніторі, CMYK – як його бачит принтер, HEX – орієнтуватись на
нього
Colorbrewer http://colorbrewer2.org/
Google Fonts https://fonts.google.com/
Colorbrewer http://colorbrewer2.org/
Google Fonts https://fonts.google.com/
Serif – коли пишемо довгі тексти, 2-3 рядки, це засічковий
текст
Seif Sans – невеликі тексти, заголовок
Monospace – для набору таблиць
Шрифт Roboto – моноширний,
PT Sans, PT Mono,
Каїро Альберто.
Львів: Видавництво УКУ
2017
Львів: Видавництво УКУ
2017
EXCEL
1. Перемістити документ по середині
2. Виділяємо текст і колір заливки білий, ми
очищаємо текст від ліній
3. Замінюємо текст на Roboto Mono
4. Кутик
зліва – виділяє весь текст
5. Кегль, як правило, 10, 12, 14
6. Заголовок 16, джерело 8
7. Апостроф і плюс, мінус, дорівнює – задає
знаки в ячейках
8. Шрифт, другие граници
9. Другие граници, колір сірий, посередині,
робить градацію таблиці
10. всі цифри повинні вирівнюватися по лівому,
заголовки повинні вирівнюватися і цифри однаково
11. Пропустіть ошибку, забирає зелений
квадратик
12. Щоб вирівняти висоту строк, главная-
висота строки, 19
13. ширина стовпця, 12, головна-формат ячейки
14. Головна- вирівнювання, зменшити або
збільшити відступ, між цифрами і лініємо таблиці, рухаємо цифри
15. Головне форматування, кольорові шкали, інші
правила, цвет, другие цвета
16.Главная, копировать, копировать как
рисунок, как на печати, векторний
ONLINE CHART MAKER –
1) змінити шрифт
2) заголовок у вигляді питання
3) забираємо все зайве, решітку
PIXELMAP.AMCHARTS.COM для статистики виборів та географічної
динаміки, назад дію не повертає, треба робити все заново
MAPSTARTER.COM
GADM.ORG
AUTODRAW.COM
-
Текст читається по горизонталі, а не по вертикалі
-
Порівнюйте один обєкт, один малюнок, щоб не розсіювалась
уява, має бути одне прочитання
-
Використовувати тип даних, штуки, долари
-
Колір обєкта і колір цифр – однакові
-
Показувати обєкти в штуках, кількість вирубки лісу, отже
кількість лісу=більше і менше дерев
-
Треба заповнювати простір, читається лінійно
-
Завжди підписувати значення
DATAGIFMAKER.WITHGOOGLE.COM – гіфка!
Телевізійна
інфографіка використовує дуже мало інформації, максимальна простота.
Фотовізуалізація
– взяті фото старі і показані в тих місцях, де вони були зроблені (для
франкотаймс!!!!)
Експеримент
Лізи-Шарлоти Крост (highcharts)
1. Скетч
2. Проста візуалізація в ексель або гуглтаблицях.
2. Проста візуалізація в ексель або гуглтаблицях.
3.
Продумувана візуалізація в інших інструментах.
4.
Редагування в ілюстратор.
5. Публікація
DATAVIZCATALOGUE.COM – каталог візуалізації,
діаграми, гістограми
-
Не варто порівнювати різні дані
-
У гістограмі по вертикалі – це частота
-
Якщо ви все зробили правильно, то гістограма – це як гора
-
Має заголовок і підзаголовок (речення)
-
Завжди у візуалізаціях – посилання на джерело (або дані
зібрані власноруч)
-
Для видавництва найкраще створювати статичну графіку
-
Вирівнюйте не по центру, а по лівому краю, і не по ширині,
флаговий набір (як прапор). Невеликі твори набираються по лівому краю, а великі
(романи) – по ширині.
Заголовок – 12%простору
Підзаголовок – 8% простору
75% - графічна частина
Посилання на джерело – 5%
КОЛЬОРИ І ШРИФТИ
Adobe Color https://color.adobe.com/ RGB – як ми
бачимо на моніторі, CMYK – як його бачит принтер, HEX – орієнтуватись на
нього
Colorbrewer http://colorbrewer2.org/
Google Fonts https://fonts.google.com/
Colorbrewer http://colorbrewer2.org/
Google Fonts https://fonts.google.com/
Serif – коли пишемо довгі тексти, 2-3 рядки, це засічковий
текст
Seif Sans – невеликі тексти, заголовок
Monospace – для набору таблиць
Шрифт Roboto – моноширний,
PT Sans, PT Mono,
Каїро Альберто.
Львів: Видавництво УКУ
2017
Львів: Видавництво УКУ
2017
EXCEL
1. Перемістити документ по середині
2. Виділяємо текст і колір заливки білий, ми
очищаємо текст від ліній
3. Замінюємо текст на Roboto Mono
4. Кутик
зліва – виділяє весь текст
5. Кегль, як правило, 10, 12, 14
6. Заголовок 16, джерело 8
7. Апостроф і плюс, мінус, дорівнює – задає
знаки в ячейках
8. Шрифт, другие граници
9. Другие граници, колір сірий, посередині,
робить градацію таблиці
10. всі цифри повинні вирівнюватися по лівому,
заголовки повинні вирівнюватися і цифри однаково
11. Пропустіть ошибку, забирає зелений
квадратик
12. Щоб вирівняти висоту строк, главная-
висота строки, 19
13. ширина стовпця, 12, головна-формат ячейки
14. Головна- вирівнювання, зменшити або
збільшити відступ, між цифрами і лініємо таблиці, рухаємо цифри
15. Головне форматування, кольорові шкали, інші
правила, цвет, другие цвета
16.Главная, копировать, копировать как
рисунок, как на печати, векторний
ONLINE CHART MAKER –
1) змінити шрифт
2) заголовок у вигляді питання
3) забираємо все зайве, решітку
PIXELMAP.AMCHARTS.COM для статистики виборів та географічної
динаміки, назад дію не повертає, треба робити все заново
MAPSTARTER.COM
GADM.ORG
Второй день
Mykhailo Koltsov предложил загрузить:
http://geojson.io/
https://osm.wno-edv-service.de/boundaries/
https://drive.google.com/drive/folders/0BzI9Xp66czH2YXg2SXBuQXVEZWM
https://live.amcharts.com/new/
http://pixelmap.amcharts.com/ Карта
mapstarter.com http://mapstarter.com/
http://geojson.io/#map=2/20.0/0.0
http://gadm.org/
http://www.noaanews.noaa.gov/stories2015/images/green-gray-final.jpg
http://tabula.technology/
http://pixelmap.amcharts.com/
http://mapstarter.com/
https://osm.wno-edv-service.de/boundaries/
http://gadm.org/
Видео-фрагменты второго дня занятий
Часть 1. https://youtu.be/7oKeQh96PtY
Часть 2. https://youtu.be/ssho7Zkxdo4
Часть 3. https://youtu.be/_b_lq7qSTRY
Часть 4. https://youtu.be/1E0L9miOe5Q
Часть 5. https://youtu.be/33-ivVgHHgQ