суббота, 10 июня 2017 г.

Тренінг з візуалізації даних с Михаилом Кольцовым



Михаил Кольцов


Преподаватель Могилянской школы журналистики; администратор сайта Stopfake.org.






       1.   Осваиваем способ визуализации с помощью искусственного интеллекта  https://www.autodraw.com/
Выполнения задания визуализировать два числа: 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, поделенной по гендеру.
Data GIF Maker
Обычно схожий инструмент, по словам самих работников Google, используется для отображения динамики интересов пользователей в поисковой системе. Однако такой сервис будет полезен и для отображения результатов голосования, продаж, рейтингов и прочее.
Если вы еще недоумеваете, как пользоваться Data GIF Maker, рассказываем. Вводите показатели, которые нужно сравнить в отведенные поля, выбирайте названия и цвет, вписывайте поясняющий текст и жмите Download as GIF, чтобы запустить процесс генерации изображений. Единственное предупреждение: на создание таких вещей у сервиса уходит до нескольких минут.

AUTODRAW.COM
-          Текст читається по горизонталі, а не по вертикалі
-          Порівнюйте один обєкт, один малюнок, щоб не розсіювалась уява, має бути одне прочитання
-          Використовувати тип даних, штуки, долари
-          Колір обєкта і колір цифр – однакові
-          Показувати обєкти в штуках, кількість вирубки лісу, отже кількість лісу=більше і менше дерев
-          Треба заповнювати простір, читається лінійно
-          Завжди підписувати значення
DATAGIFMAKER.WITHGOOGLE.COM – гіфка!
Телевізійна інфографіка використовує дуже мало інформації, максимальна простота.
Фотовізуалізація – взяті фото старі і показані в тих місцях, де вони були зроблені (для франкотаймс!!!!)
Експеримент Лізи-Шарлоти Крост (highcharts)
1. Скетч
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/
Serifколи пишемо довгі тексти, 2-3 рядки, це засічковий текст
Seif Sansневеликі тексти, заголовок
Monospace для набору таблиць
Шрифт Roboto – моноширний, PT Sans, PT Mono,
Каїро Альберто. 
Львів: Видавництво УКУ
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
https://osm.wno-edv-service.de/boundaries/ - робимо карту, відкриваємо в програмі mapstarter




AUTODRAW.COM
-          Текст читається по горизонталі, а не по вертикалі
-          Порівнюйте один обєкт, один малюнок, щоб не розсіювалась уява, має бути одне прочитання
-          Використовувати тип даних, штуки, долари
-          Колір обєкта і колір цифр – однакові
-          Показувати обєкти в штуках, кількість вирубки лісу, отже кількість лісу=більше і менше дерев
-          Треба заповнювати простір, читається лінійно
-          Завжди підписувати значення
DATAGIFMAKER.WITHGOOGLE.COM – гіфка!
Телевізійна інфографіка використовує дуже мало інформації, максимальна простота.
Фотовізуалізація – взяті фото старі і показані в тих місцях, де вони були зроблені (для франкотаймс!!!!)
Експеримент Лізи-Шарлоти Крост (highcharts)
1. Скетч
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/
Serifколи пишемо довгі тексти, 2-3 рядки, це засічковий текст
Seif Sansневеликі тексти, заголовок
Monospace для набору таблиць
Шрифт Roboto – моноширний, PT Sans, PT Mono,
Каїро Альберто. 
Львів: Видавництво УКУ
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
https://osm.wno-edv-service.de/boundaries/ - робимо карту, відкриваємо в програмі mapstarter



Второй день
 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/ 

Gglobal Administrative Areas

https://www.openstreetmap.org/welcome





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