о визуализации данных и жизни

Позднее Ctrl + ↑

Зимовка на Бали: первые впечатления

29 января мы с Серёжей, дизайнером лаборатории, приземлились на Бали. Мы приехали на два месяца: работать, осваивать сёрфинг, наслаждаться солнцем и путешествовать по острову. Расскажу, как мы устроились.

Первым делом
Жильё на первое время я бронировала заранее, мы поселились в хостеле Оли-Оли в двух шагах от пляжа Эхо. Это уютное местечко с просторным садом и кондитерской в американском стиле. Благодаря гостеприимству Оливии, нашей доброй и жизнерадостной хозяйки, я сразу почувствовала себя как дома. Каждое утро мы завтракали восхитительными блинчиками, а по вечерам общались с Оливией и её гостями.

После приезда мы осмотрелись, совершили длинную обзорную прогулку вдоль океана, отведали местной еды и встретились с дружественным «марсианином» Лёшей и его прекрасной девушкой Сашей. Ребята помогли нам найти жильё, арендовать байк по отличной цене и рассказали тысячу мелочей, важных первое время в незнакомом месте. За пару дней бытовые вопросы были улажены, и в субботу мы все вместе (с Лешей, Сашей и их собаками Жако и Билли) отправились исследовать соседние дикие пляжи.

Будни
Я встаю в 7-8 утра. Первым делом спорт: сёрфинг — пока с тренером — или йога. Потом бодрящий холодный душ и завтрак. В полдень (это 8 утра по Москве) приступаю к работе. Или, если предыдущим вечером заснула поздно, позволяю себе вздремнуть ещё часок после завтрака :-)

В 6 вечера все местные идут на пляж — сёрфить, гулять с собаками или просто любоваться закатом, и мы следуем их примеру. После этого ужин, ещё пара часов работы и отдых. Отбой около полуночи.

Первой рабочей неделей я очень довольна. В сёрфинге тоже делаем успехи.

Миллионы
На Бали все цены в тысячах, а то и в миллионах. При этом всё очень дёшево. Вот наши примерные траты:

Просторная комната с кондиционером в 2 минутах от пляжа

5 млн рупий в месяц

≈ 400$

Байк

600 тыс. рупий в месяц

   50$

Сёрфинг, занятие с тренером

300-600 тыс.

   25-50$

Сёрфинг, аренда доски

50 тыс.

   5$

Массаж

50-200 тыс.

   5-20$

Обед в кафе

30-100 тыс.

   3-10$

Cимкарта с годным 3G, 6 Гб включено

6 тыс.

   0.5$

Читать по-русски

Последний раз я читала профессиональную литературу на русском языке лет 7 назад, в самом начале дизайнерского пути. С тех пор мне очень долго не попадалось достойных актуальных переводов, и я полностью перешла на англоязычные книги.

Пару месяцев назад я получила в подарок от Андрея Скворцова переведённую с английского книгу «Мастерство презентации» нашего соотечественника Алексея Каптерева. Время осенних конференций было в разгаре, и подарок пришёлся кстати. Из книги я почерпнула пару полезных приёмов, которые сделали мои выступления живее и интереснее. Приятная неожиданность!

В конце ноября я посетила лекцию-телемост Джули Дирксен в «Цифровом октябре». Джули рассказывала о дизайне образовательного процесса, а после отвечала на вопросы аудитории. Мне повезло, и за свой вопрос я получила в подарок от Джули и организаторов книгу «Искусство обучать». Я прочла её от корки до корки во время подготовки январского курса по визуализации данных и учла советы из книги при составлении программы. Книга развивает навыки преподавателя, которые отлично дополняют профессиональные знания. Действительно удачное приобретение!

Обе книги выпущены издательством «Манн, Иванов и Фербер», обе приятно удивили содержанием и актуальностью. Поэтому я очень обрадовалась, когда со мной связались менеджеры издательства и предложили написать рецензию на вышедшие недавно «Визуальные заметки» Майка Роуди. Книга помогла мне скоротать 18-часовой перелёт на Бали, я прочла её на одном дыхании и тут же в самолёте нарисовала первый скетч.

Скорее всего я не буду применять скетчи в повседневной работе, но для заметок путешественника они подходят идеально. Давным-давно, в первой поездке по штатам я делала много зарисовок в дневнике, и книга Роуди вдохновила меня возродить эту привычку. Вот ещё несколько воодушевляющих примеров:

Рассказ о путешествии из японского блога
Серия газетных разворотов «Сuadernos de viaje»

МИФ — молодцы! Они издают хорошие книги на русском языке и ненавязчиво доносят их до заинтересованных лиц, даже если эти лица сами не догадываются о своём интересе :-)

Вопрос-ответ: Как выбрать цветовую схему?

На прошедшем курсе мой коллега Дима Тихвинский, который обучал ребят основам D3.js, между делом прочитал неожиданно крутую лекцию про цвета. Для меня выбор цветов для визуализации всегда был головной болью, поэтому я с радостью поделюсь димиными секретами и отвечу на свой собственный вопрос:

Как выбрать цветовую схему?

Самое полезное открытие — набор палитр «Колорбрюер». Он поддерживается в D3.js и часто используется в визуализациях, созданных с помощью этой библиотеки. В набор входят приятные монохромные и разноцветные палитры для отображения качественных и количественных параметров. Для числовых массивов, расходящихся в обе стороны от нуля, подобраны градиенты с белым цветом посередине шкалы. Майк Босток собрал все палитры вместе:

Интересно было узнать о преимуществах цветового пространства HCL для визуализации данных и сравнить между собой градиенты в разных пространствах:

Ещё один полезный инструмент — HCL-пипетка.

Дима рассказал о проблеме искуственных палитр, советовал почитать психологический трактат Макса Люшера «Сигналы личности» и «Искусство цвета» Иоханнеса Иттена о закономерностях цветовой гармонии и конструирования. И если психологические теории цвета лично у меня не вызывают доверия, то вторая книга точно достойна внимания.

Делитесь в комментариях своими «цветовыми» рецептами!

Вопрос-ответ: С каких курсов, статей и книг лучше всего начать?

Спрашивает Люба Смирнова:

Меня зовут Люба, мне 27 лет и к инфографике на данный момент я не имею вообще никакого отношения. Но очень хотелось бы. Какое-то время назад начала читать про информационный дизайн, потом наткнулась на ваш блог, и стала все больше этим загораться — ищу онлайн-курсы, пока что бесплатные, не только про data vizualization, но и про data analysis, читаю статьи и журналы. При отсутствии опыта и более толковых знаний пока не очень получается все это систематизировать. И была бы очень благодарна вашим советам на тему:

  1. С каких курсов, статей и книг лучше всего начать? Курсы пока что интересуют онлайн, но со временем не отметаю возможность и того, что какой-нибудь из отпусков бы потратила на обучение в России или за рубежом.
  2. Какие языки программирования необходимо выучить и какие программы освоить?
  3. 27 лет — это не поздно осваивать что-то абсолютно новое с потенциальными планами сделать это своей профессией? :) Моя работа никогда не была связана с дизайном (в любом смысле), но вот анализа данных в ней хватало, и это то, чем мне очень нравится заниматься. Кроме того, я сейчас работаю в Гугл, так что данных для анализа уж точно всегда хватает :) Также уже несколько лет увлекаюсь фотографией, начинаю осваивать монтаж (в качестве хобби), так что создание ярких, но простых для понимания визуальных образов мне тоже не чуждо :)

Буду крайне благодарна за любые советы, которые вы посчитаете нужным мне дать!

Инфографика и визуализация — горячие темы. На популярных сайтах Visually, Infogram, Daily Infographic ежедневно появляются сотни работ. К сожалению, не все они заслуживают внимания и научат вас полезным приёмам.

Чтобы заложить прочный надёжный фундамент, начните с книг Эдварда Тафти. В них сформулированы универсальные принципы информационного дизайна и приведены проверенные временем примеры. Эти книги — кладезь полезных знаний, и я не совру, если скажу, что знакомство с ними изменило мою жизнь.

Из современных авторов следите за Майком Бостоком — создателем библиотеки D3.js и художественным редактором The New York Times, Хуаном Веласко — арт-директором National Geographic и Бретом Виктором — мыслителем и изобретателем. Сильные работы каждый год попадают в шортлист конкурса «Малофей». Я ищу и собираю хорошие примеры на пинтересте.

Что касается технологий, я советую освоить D3.js и записаться на курсеровский курс «Data Science». На курсе знакомят с пайтоном, SQL и R в достаточной степени, чтобы потом вы самостоятельно выбирали и использовали подходящий инструмент. Если захотите с головой погрузиться в тему, приходите на наш практический двухдневный курс.

Лучшие примеры информационного дизайна, такие как карта нашествия Наполеона Шарля Менара и расследование эпидемии холеры Джона Сноу, созданы не профессиональными дизайнерами, а инженерами, врачами, экономистами, учёными, которые ценили данные и стремились извлечь из них смысл и пользу. Свою первую визуализацию — пассажиропотоки в метро — я нарисовала, едва освоив фотошоп, и до сих пор ей горжусь.

Для визуализации данных одинаково необходимы навыки аналитика, дизайнера и программиста. Поэтому из какой бы области вы не пришли, придётся чему-то учиться. Мне кажется, что это здорово, и что осваивать новое никогда не поздно. Ищите задачи по душе, практикуйтесь, изучайте хорошие примеры, пополняйте арсенал форматов и приёмов. Ваше главное оружие — искренний интерес и любовь к данным.

Желаю удачи!

Присылайте вопросы о визуализации данных, организации времени, рабочем процессе, спорте и путешествиях на почту: mail@infotanka.ru. Ответы публикуются по понедельникам.

Вопрос-ответ: Как улучшить постер об истории киножанров?

Спрашивает Энжи Сказка:

Запилил курсач для универа. Задание было, имея доступ к данным IMDB, сделать инфографику, которая рассказывает историю про киношки (журнальную, настенную, интерактивную, HTML, D3.js, какую угодно). Вот датасет (155 Мб).

Я выбрал рассказать про жанры, про то, какую долю они занимали в истории кино и как сопоставлялись с событиями в киноиндустрии. Про это мой настенный постер. Как можно было визуализировать то же самое по-другому? Где косяки и как улучшить? Какую другую историю можно было бы поведать?

Честно говоря, я не поняла, что показано на главной диаграмме. Какое измерение отложено по вертикали? Что означают пики и провалы? Почему высота диаграммы постоянна, тогда как сумма долей жанров всегда превышает 100% (у одного фильма несколько жанров) и меняется со временем?

Самая интересная особенность данных: один фильм ≠ один жанр, она ни в коем случае не должна потеряться.

Художественные и документальные фильмы — это разные категории, а не жанры. Их лучше показать на отдельных графиках. Предлагаю также выделить в качестве категорий короткометражки и анимационные фильмы. Для каждой категории составь список мета-жанров (жанров, объединённых одним фильмом): наряду с комедиями и драмами, туда попадут музыкальные вестерны, романтические драмы, военные боевики. Документальные фильмы разделятся на военные, исторические и спортивные. Мультфильмы — на семейные комедии и взрослые драмы. Отложим на таймлайне художественные фильмы, сгруппированные по мета-жанрам с учётом времени их появления, чтобы можно было отследить зарождение мистических триллеров или комедийных ужастиков. Получится что-то вроде музыкального генеалогического дерева:

Можно придумать хитрое цветовое кодирование, обозначив основные жанры чистыми цветами, а производные — смешанными. Интересные факты и важные фильмы нужно обязательно сохранить, разнообразив текстовые описания крупными числовыми фактоидами, афишами и кадрами из фильмов. Не стоит расшифровывать жанры, их названия говорят сами за себя. Правая часть дублирует основной график, от неё лучше избавиться.

По мелочам. Эффект «бумажной гармошки» создаёт впечатление трёхмерной картинки и визуально искажает график. Чёрная обводка лет на нижней шкале — лишняя . Резкое увеличение количества фильмов в 2000-х расшифрует только очень сообразительный читатель. Total number of movies per year → Movies per year.

Предлагаю читателям высказать свои идеи визуализации кино-данных.

P.S. Энжи делится статьями по визуализации информации:

  1. Storytelling: The Next Step for Visualization, Robert Kosara, Jock Mackinlay from Tableau Software
  2. Scientific Storytelling using Visualization, Kwan-Liu Ma, University of California, Davis, CA, USA
  3. Narrative Visualization: Telling Stories with Data, Edward Segel and Jeffrey Heer

Спасибо!

Ответы на вопросы о визуализации данных, организации времени, рабочем процессе, спорте и путешествиях выходят по понедельникам. Пишите: mail@infotanka.ru.
Ранее Ctrl + ↓