• Агентство
  • ← Блог

infographer

  • Теория
  • Примеры
    • Примеры
    • Критический взгляд
  • События
    • Текущие события
    • Прошлые события
  • Инструменты
  • Книги
    • Книги
    • Книжный магазин
  • Новости

Тема: интерактивная инфографика 29

Лучшее из голландской инфографики

Событие9 г. назад Примеры визуализации, Событияinsightful, интерактивная инфографика, конкурс, конференция

На прошлой неделе прошел 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

10 г. назад Инструменты, НовостиD3, интерактив, интерактивная инфографика, скрипты для сайта

Вышла новая версия библиотеки 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: про интерактивы и виртуальную реальность

Событие10 г. назад Инструменты, События, ТеорияMalofiej, виртуальная реальность, интерактивная инфографика, конференция

Личные впечатления от прошедшей конференции Malofiej24, наиболее значимые или полезные моменты и все материалы, которые удалось собрать.

Во второй день конференции первым на сцену поднялся Simon Ducroquet из Nexo. Саймон делился своими мыслями и наработками в части использования виртуальной реальности для более наглядного представления информации.

Одна из представленных работ – масштабное описание масштабной гидроэлектростанции в Бразилии (отдельно обратите внимание – внизу длинного скрола справа будет ссылка на саму виртуальную реальность, версии под веб, iOS и андроид).

Для создания виртуальной реальности коллеги используют игровой движок Unity. Основным примером на выступлении был проект “Синий кит”.

Синий кит в виртуальной реальности

Синий кит в виртуальной реальности

 

Фишка виртуальной реальности в том, что для окружающих вы будете выглядеть идиотом 

Google’s Cardboard Design Lab – хороший “учебник” для начинающих дизайнеров виртуальной реальности

Инфографика — как игра-бродилка

Проблема с Unity в том, что не так то просто сделать хорошую вещь под web

Виртуальная реальность – это как наушники для ваших глаз

Виртуальная реальность требует безопасного окружения, вы не можете уйти в нее “на ходу”. Это ограничивает возможности VR

Len De Groot из Los Angeles Times тоже посвятил свое выступление виртуальной реальности, в частности он показывал проект, посвященный кратеру Gale на Марсе. И поделился техническими параметрами создания.

Кратер вулкани Gale на Марсе в виртуальной реальности

Кратер вулкана Gale на Марсе в виртуальной реальности

 

Виртуальная реальность дает нам возможность расширить понимание

Мы все знаем, что 3D-диаграммы – зло, так как они искажают и скрывают данные. Тоже самое с виртуальной реальностью.»

Мы думаем, что можем просто использовать печатную версию [для создание VR], и полностью проваливаем проект

Текущие проблемы вируальной реальности: низкое разрешение, низкая частота смены кадров, сложные интерфейсы разработки

Полная презентация доступна тут.

Закрывал сессию первой половины дня Archie Tse из The New York Times с провокационной темой “Почему NYT делает меньше интерактивных работ».

Работа NYT базируется на трех правилах визуального сторителлинга:

  1. Если читателю нужно кликнуть, а не скролить, потом должно произойти что-то из ряда вон выходящее.
  2. Исходите из того, что всплывающие подсказки и любые другие эффекты при наведении, никто никогда не увидит. Если контент важный — сделайте так, чтобы читатель сразу его увидел.
  3. Если вы хотите сделать что-то интерактивное, помните — будет дорого сделать так, чтобы это работало на всех платформах.
 Archie Tse: Три правила визуального сторителлинга

Archie Tse: Три правила визуального сторителлинга

Вам придется перерисовать вашу графику 2 или 3 раза, чтобы все работало и на десктопе, и на мобильных

Как эти правила изменили подход NYT:

  1. Большинство визуализаций теперь статичны
  2. Текстов стало больше
  3. Если движение в картинке нужно — оно появляется во время скрола

(Четвертый пункт гласит, что они по-прежнему делают интерактивные работы. Но теперь повод должен быть ОЧЕНЬ значимым).

Подход NYT к интерактивам

Подход NYT к интерактивам

Мы делали “многошаговки”. Пользователи останавливались на шаге 3. Читатели хотят просто скролить, а не кликать

слайд из презентации Archie Tse

Archie Tse: Scrolling Vs. clicking

Смотрите полную презентацию выступления.

Бонус: опенсорсовый проект ai2html, который позволяет достаточно легко переводить вектор в html.

Автор: Максим Горчаков

 

#MakeoverMonday

10 г. назад Uncategorised, Критический взгляд, Примеры визуализации, Теорияinsightful, tableau, визуальное мышление, интерактивная инфографика

Опять понедельник и опять новый набор данных для #MakeoverMonday Challenge.

Уже 18 недель каждый вечер воскресенья Энди Крибел публикует инфографику и данные, на основе которых она сделана, на сайте VizWiz. Задача – в течении понедельника выделить примерно час времени, быстро проанализировать визуализацию и сделать свою версию.

Результаты он и Энди Котгрив публикуют у себя в блогах. Вызов может принять любой желающий и опубликовать результат в Twitter с тэгом #MakeoverMonday.

Каждый понедельник ближе к