Тема: интерактивная инфографика 29
Лучшее из голландской инфографики
На прошлой неделе прошел Infographic Congress 2017. На нем голландсакая ассоциация дизайнеров BNO вручала приз за лучшие работы по визуализации данных в Голландии. Основатель Infographer Макс Горбачевский был членом жюри. Процесс оказался увлекательным и помимо ясных критериев оценки потребовал нетривиальных решений. Перед жюри стояла задача присудить два приза. Один — в сфере печати, второй — за цифровой проект. В итоге, оба приза ушли в цифру. Решающими факторами были два: рождает ли визуализация дополнительный смысл (то что в английском называется insight или aha-moment) и устанавливает ли она планку качества для кандидатов в следующем году.
Первый приз ушел агентству CLEVER°FRANKE за проект District Mobility: Multimodal Transportation in the District. Визуализация параметров мобильности в округе Колумбия (США) стала началом конструктивного диалога между жителями округа и ответственной организацией. Сайт наглядно объясняет основные параметры оценки ситуации — транспортную инфраструктуру, загруженность, доступность, надежность, высвечивает приоритетные проблемные зоны и информирует о прогрессе. Кликаешь, скролишь и радуешься ясности происходящего — пробки и тесные автобусы перестают казаться безысходностью.
Второй приз достался Frédérik Ruys за телепроект, объясняющий, откуда в Голландии землетрясения и как в 1965 году газодобывающая станция ушла под землю. Видео, голос, визуализации и реконструкция произошедшего в 3D демонстрируют, что активная добыча газа на небольшой територии может иногда оказаться фатальной.
Помимо этого жюри отметило еще три проекта.
Проект Clever°Franke для вечеринки Red Bull x BYBORRE. Участники видели свои паттерны поведения в виде ярких визуализаций в реальном времени.
Инстаграм-проект rapfactcheck Data журналиста Yordi Dam, который визуализировал данные из рэперских песен в виде диаграмм.
И еще один поэтичный проект Frédérik Ruys — фото траектории солнца с дня летнего солнцестояния до зимнего. Фото сделано за полгода стенопом — камерой из двух алюминиевых бутылок с небольшим отвестием и фотобумагой внутри. Солнце само себя визуализировало.
Вышла D3.js 4.0
Вышла новая версия библиотеки d3js для создания интерактивных визуализаций. D3.js – практически самая популярная на сегодняшний день библиотека. Все подробности в пресс-релизе, а некоторые детали тут:
D3 4.0 is modular. Instead of one library, D3 is now many small libraries that are designed to work together. You can pick and choose which parts to use as you see fit. Each library is maintained in its own repository, allowing decentralized ownership and independent release cycles. The default bundle combines about thirty of these microlibraries.
Также стоит отметить:
Small files are nice, but modularity is also about making D3 more fun. Microlibraries are easier to understand, develop and test. They make it easier for new people to get involved and contribute. They reduce the distinction between a “core module” and a “plugin”, and increase the pace of development in D3 features.
Ура.
Malofiej24: про интерактивы и виртуальную реальность
Личные впечатления от прошедшей конференции Malofiej24, наиболее значимые или полезные моменты и все материалы, которые удалось собрать.
Во второй день конференции первым на сцену поднялся Simon Ducroquet из Nexo. Саймон делился своими мыслями и наработками в части использования виртуальной реальности для более наглядного представления информации.
Одна из представленных работ – масштабное описание масштабной гидроэлектростанции в Бразилии (отдельно обратите внимание – внизу длинного скрола справа будет ссылка на саму виртуальную реальность, версии под веб, iOS и андроид).
Для создания виртуальной реальности коллеги используют игровой движок Unity. Основным примером на выступлении был проект “Синий кит”.
Синий кит в виртуальной реальности
Фишка виртуальной реальности в том, что для окружающих вы будете выглядеть идиотом
Google’s Cardboard Design Lab – хороший “учебник” для начинающих дизайнеров виртуальной реальности
Инфографика — как игра-бродилка
Проблема с Unity в том, что не так то просто сделать хорошую вещь под web
Виртуальная реальность – это как наушники для ваших глаз
Виртуальная реальность требует безопасного окружения, вы не можете уйти в нее “на ходу”. Это ограничивает возможности VR
Len De Groot из Los Angeles Times тоже посвятил свое выступление виртуальной реальности, в частности он показывал проект, посвященный кратеру Gale на Марсе. И поделился техническими параметрами создания.
Кратер вулкана Gale на Марсе в виртуальной реальности
Виртуальная реальность дает нам возможность расширить понимание
Мы все знаем, что 3D-диаграммы – зло, так как они искажают и скрывают данные. Тоже самое с виртуальной реальностью.»
Мы думаем, что можем просто использовать печатную версию [для создание VR], и полностью проваливаем проект
Текущие проблемы вируальной реальности: низкое разрешение, низкая частота смены кадров, сложные интерфейсы разработки
Полная презентация доступна тут.
Закрывал сессию первой половины дня Archie Tse из The New York Times с провокационной темой “Почему NYT делает меньше интерактивных работ».
Работа NYT базируется на трех правилах визуального сторителлинга:
- Если читателю нужно кликнуть, а не скролить, потом должно произойти что-то из ряда вон выходящее.
- Исходите из того, что всплывающие подсказки и любые другие эффекты при наведении, никто никогда не увидит. Если контент важный — сделайте так, чтобы читатель сразу его увидел.
- Если вы хотите сделать что-то интерактивное, помните — будет дорого сделать так, чтобы это работало на всех платформах.
Archie Tse: Три правила визуального сторителлинга
Вам придется перерисовать вашу графику 2 или 3 раза, чтобы все работало и на десктопе, и на мобильных
Как эти правила изменили подход NYT:
- Большинство визуализаций теперь статичны
- Текстов стало больше
- Если движение в картинке нужно — оно появляется во время скрола
(Четвертый пункт гласит, что они по-прежнему делают интерактивные работы. Но теперь повод должен быть ОЧЕНЬ значимым).
Подход NYT к интерактивам
Мы делали “многошаговки”. Пользователи останавливались на шаге 3. Читатели хотят просто скролить, а не кликать
Archie Tse: Scrolling Vs. clicking
Смотрите полную презентацию выступления.
Бонус: опенсорсовый проект ai2html, который позволяет достаточно легко переводить вектор в html.
Автор: Максим Горчаков
#MakeoverMonday
Опять понедельник и опять новый набор данных для #MakeoverMonday Challenge.
Уже 18 недель каждый вечер воскресенья Энди Крибел публикует инфографику и данные, на основе которых она сделана, на сайте VizWiz. Задача – в течении понедельника выделить примерно час времени, быстро проанализировать визуализацию и сделать свою версию.
Результаты он и Энди Котгрив публикуют у себя в блогах. Вызов может принять любой желающий и опубликовать результат в Twitter с тэгом #MakeoverMonday.
Каждый понедельник ближе к вечеру можно посмотреть, какая у кого вышла история, какая стратегия визуализации сработала, а какая нет.
Тема этой недели – Цены на образование в США.
Ниже публикуем результаты прошлой недели — Рабство в XXI веке.
Скриншот с оригинала от CNBC. Интерактивную версию смотрите на сайте:
The victims of the 21st-century slave trade by CNBC
#MakeoverMonday от Andy Kriebel. Подробное описание и интерактив — в блоге Энди:
Victims of the 21st-century Slave Trade by Andy Kriebel
#MakeoverMonday от Andy Cotgreave. Подробное описание и интерактив — в блоге Энди:
Victim of 21 century slave trade By Andy Cotgreave.
Пулицер: визуализации и русские победы
На этой неделе объявили лауреатов Пулицеровской премии. Для журналистов «Пулицер» — это как Нобелевка для ученых. По этому поводу у нас две хорошие новости. Во-первых, в этом году премию получил русский журналист — Сергей Пономарев (вместе с коллегами из New York Times). Он получил ее в категории «Новостная фотография» за серию репортажей про миграционный кризис.
А во-вторых, в этом году основные премии присудили за истории, основанные на данных и их визуализации. Картинки тут постить не буду — идите сразу смотреть. Все визуализации интерактивные. Например, Tampa Bay Times получили премию за серию историй и графиков про черные школы во Флориде. А Washington Post за интерактивный график — 990 people shot dead by police in 2015. Альберто Каиро тут же предложил выделить отдельную номинацию под визуализации и запустить петицию на Change.org. Поддерживаем!
Демографические данные с нового угла
Вам осталось жить 49 лет. Вы умрете 22 ноября 2064 года, если продолжите жить в России. А может, Вы умрете 1 апреля 2074 года и проживете еще 58,3 года, если продолжите жить в Нидерландах, — сообщил мне Population.io
Я также узнала, что 51% людей в мире младше меня, а 63% в России старше, и что мои шансы умереть прямо сейчас не так уж велики. Цифры вдруг перестали быть «статистикой» и задели меня за живое.
Сайт Population.io разработали немецкий дизайнер Бенедикт Гросс, профессор Самир RC и экономист Всемирного банка Вольфганг Фенглер. Создатели считают, что эти данные помогут нам понять текущие социальные и экономические процессы. Сайт основан на официальных данных и отчётах Организации Объединённых Наций.
Вбиваете свой возраст, пол, страну и с интересом разглядываете графики о своем месте в мире.
Визуальная грамотность в эпоху данных
Шэзна Нэсса — специалист по визуальному сторителлингу, член журналистского общества JFC в Стэнфордском университете, бывший заместитель главного редактора Associated Press — о понятии визуальная грамотность и средствах ее достижения.
«Важно не то на что вы смотрите, а то что вы видите» — Генри Дэвид Торо
В последние годы визуализация данных в журналистике востребована как никогда: к ней обращаются как для поиска и анализа данных в исследовательских целях, так и для того, чтобы представить информацию публике. Более десяти лет я провела в новостных редакциях: сначала делала интерактивную графику самостоятельно, а затем координировала и оптимизировала работу графических, интерактивных и мультимедийных команд. Новостные редакторы делали все возможное, чтобы наши работы были дерзкими и инновационными: создавали междисциплинарные команды, чтобы повысить наши творческие возможности; нанимали талантливых специалистов за пределами традиционной журналистики, с предыдущим опытом работы в информационных технологиях, статистике или искусстве. В результате такого подхода часть наших визуализаций стала склоняться в сторону все более специфической аудитории. И мы теряли читателей, потому что не принимали во внимание визуальную грамотность нашей аудитории.
Визуализация данных и журналистика
Когда-то слово «визуализация» описывало акт создания мысленного образа. Сегодня оно скорее означает графическое представление информации. Мы живем во все более и более визуальном мире, всматриваемся в экраны разных размеров, разрешение которых с каждой новой версией устройств постепенно увеличивается. Мы живем в мире с большим количеством доступных нам данных, чем когда бы то ни было. IBM утверждает, что 90% данных в мире были созданы за последние два года, и что ежедневно мы создаем 2.5 квинтильона байтов данных, способствуя развитию того, что некоторые называют новой нервной системой планеты. Объедините большие объемы данных с тем фактом, что человеческий мозг быстрее и проще воспринимает изображения, чем текст — вы получите расцветающий мир визуализации данных. Для нас это наиболее действенный способ обнаружения и понимания скрытых образов, взаимосвязей. Текст, фотографии и видео — это журналистские форматы, которые информируют общественность и дают ей возможность принимать решения. Визуализация данных быстро присоединяется к их разряду, как не менее важный формат.
Джули Стил из О’Рейлли выделяет три категории визуализации:
Инфографика — использует небольшой набор данных и много ручной работы над дизайном, например, вот эта работа National Geographic.
Визуализация данных — использует большие наборы данных с меньшим количеством ручной работы над дизайном; базируется на алгоритмах. Например, интерактивная работа New York Times.
Визуальное искусство — однонаправленное кодирование. Красивые, но трудно поддающееся расшифровке визуализации, например, вычислительное искусство Кунала Ананда.
В чем проблема?
Визуализация данных в журналистике часто подвержена влиянию компьютерных наук и математики. В результате, чтобы представить данные в журналистских работах, используются причудливые формы, очертания и взаимосвязи. Этот эффект усиливается еще и быстрым размножением инструментов, которые делают создание любых видов визуализации проще, таких как Many Eyes, Tableau, и общедоступные библиотеки, в том числе D3.
В итоге многие работы привлекают только изощренных пользователей, но не позволяют вникнуть в суть вопроса непосвященным читателям, тем самым причиняя вред цели визуализации – информировать общественность. Именно поэтому настолько важно осознать и понять проблему визуальной грамотности в контексте визуализации.
Новая «визуальная грамматика» журналистики
Приведу в пример три работы, которые экспериментируют со способами представления интерактивной журналистики. Они выглядят внушительно, но и их интерпретация может стать для многих непростой задачей.
Права гомосексуалистов в США, штат за штатом
Визуализация The Guardian о правах гомосексуалистов в Соединенных Штатах наделала много шума в журналистских кругах и в мире визуализации данных из-за ее экспериментального формата. В разговорах и спорах особо выделяют напряженность между новизной и более привычными форматами. Графика представляет страну в виде круга, который позволяет вывести на экран больше информации, чем в формате карты. Формы и цвета привлекательны, но они же — дополнительный уровень для читателя, требующий приложить больше усилий, чтобы добраться до сути.
Интерактив о правах гомосексуалистов, The Guardian
How americans die
Интересный пример интерактивного сторителлинга, основанного на данных.
Ссылка: http://www.bloomberg.com/dataview/2014-04-17/how-americans-die.html
ТОП-5 библиотек для интерактивной визуализации
Первые шаги в мир визуализации могут быть по-настоящему сложными. Что нужно знать с самого начала?
В статье использованы интервью с экспертами по визуализации данных Moritz Stefaner, Scott Murray, Benjamin Wiederkehr, с партнёром студии Interactive Things в сфере дизайна и технологий и экспертом в области инфографики Jan Willem Tulp, а также с программистом-дизайнером Erik Cunningham.
Количество доступных на сегодня источников данных и инструментов для их обработки само по себе уже наглядно показывает, что ещё никогда столько людей не пыталось освоиться в мире визуализации данных. А когда есть такое число материалов, доступных к изучению, один только вопрос «С чего начать?» может напугать каждого новичка. Итак, какие же библиотеки являются лучшими и что советуют профессионалы? Об этом и пойдёт речь в данной статье.
D3
Говорить о визуализации данных и не упомянуть D3 – это всё равно, что рассказывать об истории создания персональных компьютеров и ни словом не обмолвиться о Стиве Джобсе. D3 (от англ. Data Driven Documents) – это без преувеличения самая важная и доминирующая на рынке JavaScript библиотека с открытым исходным кодом, которая обычно используется для создания SVG-графиков. SVG (от англ. Scalable Vector Graphics) – это в свою очередь формат векторного изображения, поддерживаемый веб-браузерами, но ранее мало использовавшийся.
Библиотека D3 во многом обязана своей популярностью внезапному интересу к SVG со стороны веб-дизайнеров, что в значительной степени объясняется тем, как выигрышно векторные графики выглядят на экранах с большим разрешением (в частности, на Retina-дисплеях, используемых в устройствах Apple), которые становятся всё более распространёнными.
«Будем честными, если задача состоит в визуализации данных на основе SVG, то для её решения все остальные библиотеки даже рядом не стояли», – говорит Moritz Stefaner, независимый эксперт в области визуализации данных и владелец компании Truth & Beauty. «Есть также немало интересных проектов, созданных на базе D3, как, например, NVD3, который предоставляет стандартные графические компоненты – готовые к использованию, но кастомизируемые; или, скажем, Crossfilter – просто выдающийся инструмент для фильтрации данных».
Scott Murray, программист-дизайнер и автор книги Interactive Data Visualization for the Web, согласен с предыдущим мнением: «D3 обладает чрезвычайной силой, которая заключается в том, что в нём используется всё, что только могут предложить браузеры. Хотя у этого есть и обратная сторона: если браузер не поддерживает что-то, например, 3D-изображения на основе WebGL (от англ. Web Graphics Library), то и D3 это поддерживать не будет».
И хотя эта библиотека по-настоящему универсальна, она всё же не является идеальным решением для любой задачи. «Основной недостаток библиотеки D3, если можно так выразиться, состоит в том, что она не предписывает и даже не предлагает какого-то определённого подхода к визуализации», – добавляет Scott Murray. «То есть это действительно инструмент для загрузки данных в браузер с последующей генерацией DOM-компонентов на основе этих данных».
Vega
В то время как D3 представляет собой отличный инструментарий для кастомных изображений, если вы хотите создать стандартный график без особой проработки визуального аспекта, то вам может быть полезен такой инструмент как Vega. Будучи фреймворком, разработанным на базе D3, Vega предоставляет альтернативу для отображения графических компонентов. Используя Vega, можно визуализировать данные в формате JSON вместо написания D3/JavaScript кода, а затем генерировать интерактивные изображения с использованием HTML5 Canvas или SVG. Это значительно упрощает программную часть и экономит время (если, конечно, это вообще ваша зона ответственности). А кроме того, повышается возможность взаимо- и переиспользования проектов визуализации, при этом позитивно влияя на гибкость платформы. Продолжить чтение →
Журналистика данных: первые шаги, навыки и инструменты
Пять дней, пять экспертов, пять модулей — все это о бесплатном онлайн-курсе по журналистике данных, который обещает начаться со дня на день. Организаторы курса — Европейский центр журналистики и проект Data Driven Journalism. Точные даты проведения курса пока не известны, но зарегистрироваться можно уже сейчас.
За пять дней участники курса смогут узнать что такое журналистика данных, как она устроена и какие ключевые навыки стоит освоить, чтобы стать специалистом в этой области. Выяснить где искать данные в поддержку своих сюжетов и как находить новые идеи в имеющихся данных. Изучить мастерство превращения скучных данных в увлекательную историю, инфографику или даже в интерактивную визуализацию. Познакомится с основными принципами графического дизайна, которые необходимо знать журналисту.
Инструкторы курса — пять ведущих мировых экспертов по журналистике данных и визуализации:
- Саймон Роджерс. Редактор данных в Twitter, бывший редактор Datablog в The Guardian.
- Пол Брэдшоу. Глава дистанционной магистерской программы “Онлайн журналистика” в Бирмингемском городском университете.
- Стив Дойг. Преподаватель в Школе журналистики Уолтера Кронкайта, Университет штата Аризона, обладатель Пулитцеровской премии.
- Николя Кайзер-Бриль. Сооснователь стартапа в области журналистики данных Journalism++.
- Альберт Кайро. Автор книги «The Functional Art: an Introduction to Information Graphics and Visualization», преподаватель курса «Информационная графика и визуализация» в Университете Майами.
Подробнее о курсе.
Зарегистрироваться.
Обязательно поделитесь своими впечатлениями от курса в комментариях.