Дизайнер в гостях
у программиста
и дата-сайентиста
Андрей Шапиро, Byndyusoft
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
Андрей Шапиро
— Арт-директор в Byndyusoft
— Проектирую цифровые продукты с 2006
— Увлекаюсь автоматизацией дизайна:
набор плагинов Efficiency для Sketch,
собственные дизайн-инструменты
в Nodebox/Processing
— Ищу инсайты в данных, обучаю машины,
попал в топ-150 курса Open Machine
Learning сообщества Open Data Science
Slide 4
Slide 4 text
программист дата-сайентист
Slide 5
Slide 5 text
Даёшь алгоритмизацию
в графический дизайн!
Slide 6
Slide 6 text
Графический
редактор
множит
рутину
Slide 7
Slide 7 text
Лучше бы
было так
Slide 8
Slide 8 text
github.com/x-raizor/nodebox1-generative-tools
Slide 9
Slide 9 text
Chatra.io
Slide 10
Slide 10 text
Есть стиль иллюстраций. Как сделать нарядно без иллюстратора?
Slide 11
Slide 11 text
Chatra.io
Slide 12
Slide 12 text
Chatra.io
Slide 13
Slide 13 text
Every Pixel,
дизайнер Влад Зелинский
Slide 14
Slide 14 text
Every Pixel, дизайн — Влад Зелинский, код — Андрей Шапиро
Slide 15
Slide 15 text
github.com/x-raizor/epattern
Slide 16
Slide 16 text
Как сделать приличные дефолтные аватарки для
сервиса, не сильно перетрудившись
Иногда один
неказистый график
может сменить
стратегию продукта
Slide 31
Slide 31 text
Должно быть так
данные > дизайн >
Slide 32
Slide 32 text
Задача:
найти
интересный
способ
визуализации
Facebook-
мероприятий
·
sociograph.io
Slide 33
Slide 33 text
Задача:
найти
интересный
способ
визуализации
Facebook-
мероприятий
·
sociograph.io
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Дизайнер «нарисовал» в графическом редакторе
Slide 36
Slide 36 text
График на основе реальных данных Как было «нарисовано»
изначально
Slide 37
Slide 37 text
Дизайнер «нарисовал» в графическом редакторе
Slide 38
Slide 38 text
График на основе реальных данных Как было «нарисовано»
изначально
Slide 39
Slide 39 text
Дизайнер «нарисовал» в графическом редакторе
Slide 40
Slide 40 text
График на основе реальных данных
Как было «нарисовано»
изначально
Slide 41
Slide 41 text
Всё дело в неправильном процессе
дизайн > разработка > данные >
Slide 42
Slide 42 text
Должно быть так
данные > дизайн >
Slide 43
Slide 43 text
Данные до начала дизайна. Как?
На примере задач визуализации данных
Slide 44
Slide 44 text
+
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
Неполный арсенал
геометрических
примитивов ggplot
Slide 49
Slide 49 text
Загрузка данных в RStudio
Slide 50
Slide 50 text
Грамматика
ggplot
# Точки
ggplot(data = events, aes(x = start_time, y = attending_count)) +
geom_point()
Slide 51
Slide 51 text
Грамматика
ggplot
# Линии
ggplot(data = events, aes(start_time, attending_count)) +
geom_line()
Slide 52
Slide 52 text
Грамматика
ggplot
# Линия с риббоном
ggplot(events, aes(start_time, attending_count)) +
geom_line() +
geom_ribbon(aes(ymin = attending_count,
ymax = attending_count + interested_count), alpha = 0.2)
Slide 53
Slide 53 text
Грамматика
ggplot
# Точки с подписями
ggplot(events, aes(x = start_time, y = attending_count)) +
geom_point(color = 'red') +
geom_text(aes(label = name), size = 3, hjust = 0, nudge_x = 2)
Slide 54
Slide 54 text
Грамматика
ggplot
# Cтолбики друг под другом, но каждый в своём бейзлайне
ggplot(events_longcount) +
geom_col(aes(start_time, count, width = as.integer(end_time - start_time))) +
facet_wrap(~ category, nrow = 4)
Как было у дизайнера
Slide 55
Slide 55 text
Грамматика
ggplot
# Аудитория по дням недели
ggplot(events_longtime) +
geom_line(aes(weekday, auditory, group = id))
Slide 56
Slide 56 text
Грамматика ggplot, github.com/Byndyusoft/r-graph-vocabulary
# Общий шаблон
ggplot(data = df, mapping = aes(x = ‘x’, y = ‘y’)) +
geom_point(color = 'red') + # геометрический слой
facet_wrap() + # сборка в грид
scale_y_log10() + # трансформация
theme_void() # стилизация
Slide 57
Slide 57 text
Грамматика
ggplot
Slide 58
Slide 58 text
Выгрузка в SVG, PDF
Slide 59
Slide 59 text
С чего начать
github.com/Byndyusoft/r-graph-vocabulary
Попробовать запустить
и разобраться в примерах
из доклада
Установить RStudio
Установить R
1. 2. 3.
Slide 60
Slide 60 text
Курс «Анализ данных в R.
Часть 2» на stepik.org
С чего начать
Глава про визуализацию в книге
‘R for Data Science’
r4ds.had.co.nz/data-visualisation.html stepik.org/course/724
Slide 61
Slide 61 text
За пределами графического редактора есть
множество полезных инструментов для дизайнера,
который хочет расти
Slide 62
Slide 62 text
Дизайнер в гостях
у программиста
и дата-сайентиста
Андрей Шапиро
[email protected]
@xraizor
That’s all folks!