Програмное обеспечение, позволяющее визуализировать статистическую информацию. Помощники инфографера. Для того, чтобы визуализировать информацию, не обязательно быть дизайнером. Накопилось уже много всяких разных инструментов от всем известного Excell до специализированных инструментов для журналистов Knightlab. Мы делимся с вами самым интересным в этом разделе. А какие инструменты знаете вы? Делитесь в комментариях к данному разделу. Присылайте письма.
Вышла новая версия библиотеки 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, наиболее значимые или полезные моменты и все материалы, которые удалось собрать.
Во второй день конференции первым на сцену поднялся Simon Ducroquet из Nexo. Саймон делился своими мыслями и наработками в части использования виртуальной реальности для более наглядного представления информации.
Одна из представленных работ – масштабное описание масштабной гидроэлектростанции в Бразилии (отдельно обратите внимание – внизу длинного скрола справа будет ссылка на саму виртуальную реальность, версии под веб, iOS и андроид).
Для создания виртуальной реальности коллеги используют игровой движок Unity. Основным примером на выступлении был проект “Синий кит”.
Фишка виртуальной реальности в том, что для окружающих вы будете выглядеть идиотом
Google’s Cardboard Design Lab – хороший “учебник” для начинающих дизайнеров виртуальной реальности
Инфографика — как игра-бродилка
Проблема с Unity в том, что не так то просто сделать хорошую вещь под web
Виртуальная реальность – это как наушники для ваших глаз
Виртуальная реальность требует безопасного окружения, вы не можете уйти в нее “на ходу”. Это ограничивает возможности VR
Len De Groot из Los Angeles Times тоже посвятил свое выступление виртуальной реальности, в частности он показывал проект, посвященный кратеру Gale на Марсе. И поделился техническими параметрами создания.
Виртуальная реальность дает нам возможность расширить понимание
Мы все знаем, что 3D-диаграммы – зло, так как они искажают и скрывают данные. Тоже самое с виртуальной реальностью.»
Мы думаем, что можем просто использовать печатную версию [для создание VR], и полностью проваливаем проект
Текущие проблемы вируальной реальности: низкое разрешение, низкая частота смены кадров, сложные интерфейсы разработки
Полная презентация доступна тут.
Закрывал сессию первой половины дня Archie Tse из The New York Times с провокационной темой “Почему NYT делает меньше интерактивных работ».
Работа NYT базируется на трех правилах визуального сторителлинга:
Вам придется перерисовать вашу графику 2 или 3 раза, чтобы все работало и на десктопе, и на мобильных
Как эти правила изменили подход NYT:
(Четвертый пункт гласит, что они по-прежнему делают интерактивные работы. Но теперь повод должен быть ОЧЕНЬ значимым).
Мы делали “многошаговки”. Пользователи останавливались на шаге 3. Читатели хотят просто скролить, а не кликать
Смотрите полную презентацию выступления.
Бонус: опенсорсовый проект ai2html, который позволяет достаточно легко переводить вектор в html.
Автор: Максим Горчаков
Интересный пример интерактивного сторителлинга, основанного на данных.
Ссылка: http://www.bloomberg.com/dataview/2014-04-17/how-americans-die.html
Первые шаги в мир визуализации могут быть по-настоящему сложными. Что нужно знать с самого начала?
В статье использованы интервью с экспертами по визуализации данных 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. Это значительно упрощает программную часть и экономит время (если, конечно, это вообще ваша зона ответственности). А кроме того, повышается возможность взаимо- и переиспользования проектов визуализации, при этом позитивно влияя на гибкость платформы. Продолжить чтение →
В этом посте Нейтан Яу, автор блога The Flowing Data и книги «Искусство визуализации в бизнесе», рассказывает о том, в каком направлении стоит двигаться после того, как вы усвоили азы визуализации. Именно тогда, когда пришла пора браться за серьезную работу.
Познакомиться с визуализацией сегодня не сложно. Есть много источников знаний о ней – книги, руководства, блоги и курсы, – все они помогают в обучении, а разнообразные приложения позволяют начать работу в два клика.
Однако на этом не стоит останавливаться. Часто начинающие прекращают движение на этом этапе: они прочли книги Тафти (читай – небрежно пролистали и запомнили выделенный текст) и отправили их на книжную полку или прикнопили к доске, как дипломы по визуализации. Возможно, вы один из них? Я тоже был таким.
Но вы хотите стать лучше, не так ли? С этого момента я буду считать, что вы ответили «да».
Работайте с данными, на самом деле.
К сожалению, от этого никуда не деться.
Если вы намереваетесь в чем-либо преуспеть, вы Продолжить чтение →
Сервис для создания инфографики Many Eyes — один из самых загадочных. Существующий уже много лет под началом компании IBM (которая, как я подозреваю, развивает его как тестовый полигон для своих визуализаций для супер-продукта Cognos BI), он позволяет создавать много различных интерактивных визуализаций. С одной стороны, это удобно. С другой стороны, все загружаемые данные — становятся публично доступными, что делает крайне ограниченным возможность его применения в коммерческих целях.
И вот, внезапно оказывается, что у Many Eyes произошло обновление внешнего вида! Стало современней и опрятней, из явно «альфа-версии» сайта он стал больше походить на удобный инструмент создания инфографики.
Список визуализаций практически не изменился — лишь косметические правки по мелочам в отдельных визах. Сервис стал более умным, и начал подсказывать наилучшие варианты визуализации на основании тех данных, которые вы загрузили.
По-прежнему, в сервисе три больших блока визуализаций:
1. Визуализация частей целого
2. Визуализация изменений во времени
Что требуется от визуализационного инструмента? Красиво отобразить данные.
Что требуется от управленческого визуализатора? Отобразить данные именно в том виде, в котором визуализация даст возможность делать выводы о данных, и принимать решения.
Видите различие? Красиво не всегда есть правильно, и правильно не всегда есть красиво. Но есть RoamBI, который сочетает в себе обе характеристики, потому что его создатели — известные предприниматели, знающие толк в ведении собственного бизнеса.

Мы, работая с RoamBI, переняли опыт создателей, и накопили также собственный. Поэтому я с радостью познакомлю вас с RoamBI поближе. Сразу оговорюсь: RoamBI работает только на айфоне/айпаде, но зато полностью использует его возможности.
Как это работает: вы отдаёте RoamBI вашу таблицу с данными — и она развёрнуто представляется в одном из 5 графических видов:
Знакомьтесь — DataPult, ресурс по созданию и публикации интерактивных инфографик. Я не раз ссылалась на Gapminder, разработку Google, но ее главной проблемой было то, что пользоваться можно было только зашитыми в нее данными, свои не подставишь.
Теперь — конструируйте сами!
Андрей Якимович, директор по продажам DataPult: 2 года назад, когда начинался проект, целевой аудиторией для сервиса мы выбрали блоггеров, которые используют в своих публикациях длинные табличные стат. данные. Под них создавался визуализатор. Мы хотели заменить их скучные таблицы на наши визуализации. Однако, после выхода релиз версии весной этого года, когда мы начали продвигать проект, ЦА неожиданно расширилась. В нее вошли не только блоггеры, но и исследовательские и научные центры, центры опросов общественного мнения, журналисты-аналитики, сайты, предоставляющие базы данных типа Росстата.
Что такое ДатаПульты и зачем они нужны?
ДатаПульт — это Ваши ряды данных + Наши визуализаторы, собранные в один Flash объект, легко вставляемый на любую Вашу интернет-страницу.
Например, как ниже.
Если вставка динамических объектов в Ваши материалы невозможна (например в презентации, печатные издания), то одним кликом вы можете получить статические скриншоты ДатаПульта в формате JPG.
Зачем?
Анимированные карты и другие визуализаторы — средство один раз увидеть вместо того чтобы сто раз пролистывать громоздкие таблицы. Например.
Наверняка Вы слышали про «демографический суицид» Европы, в которой падение рождаемости ниже 2 детей на женщину вскоре вызовет полное вымирание «белой расы» и превращение Собора Парижской богоматери в одноименную Мечеть. Не менее популярным в массах является и тема «смерти Запада», неспособного нарожать достаточно детей, чтобы противостоять демографическому давлению Третьего Мира.
Чтобы разобраться в демографических тенденциях человечества, читателю придется разыскать в Сети таблицу с двумя тысячами чисел и несколько сот раз сравнить одни с другими. Разумеется, никто кроме профессиональных демографов этой черной работой заниматься не будет. Но если ту же таблицу представить в виде интерактивной тепловой карты, то ситуация качественным образом изменится:
Заметьте, в свой блог я вставила ембед, интерактивную карту — вы можете смотреть на ней динамику данных.
Достаточно нажать кнопку (>), запустив карту на проигрывание — и одинаковость тенденции к снижению рождаемости по всем странам мира станет очевидной уже через несколько секунд. Оказывается, различия в уровне рождаемости между Западом и Востоком носит исключительно временный характер, и в недалеком будущем на Земле останутся лишь считанные страны с рождаемостью выше простого воспроизводства. Добавление анимированной карты превращает любую статью и в удобный интерактивный справочник (наводим мышкой на страну, и сведения о ней тут же у нас на экране), и в увлекательный «мультфильм», отражающий историческое течение тех или иных процессов. Вот почему мы приложили немало усилий, чтобы разработать и выпустить в свет наш сервис — создание анимированных карт.
Как?
Сколько, по-Вашему, потребовалось времени на создание приведенной выше анимированной карты? 5 минут. Первая — чтобы скачать с сайта www.gapminder.org экселовский файл с данными по рождаемости. Вторая — чтобы дождаться загрузки флешки на странице создания карт. Третья — чтобы скопировать через буфер обмена таблицу из Эксела в появившееся поле для ввода данных, набрать название карты, подпись и комментарий. Четвертая — чтобы дождаться загрузки флешки с самой картой и получить HTML-код для вставки на эту страницу. Пятая — чтобы вставить этот код и продолжить писать заметку.
В этом основная идея сервиса: быстро скормить компьютеру кучу чисел, а потом не спеша и вдумчиво рассмотреть получившуюся визуализацию. Создание анимированной карты упрощено до предела; как только у Вас на руках появляется таблица-шахматка со странами в строках и годами в столбцах — карта фактически готова.
Чтобы создавать свои собственные анимированные карты, Вам нужно:
Надо сказать, что у сервиса огромный выбор карт-заготовок со всеми возможными географическими делениями
Посмотреть другие Датапульты и примеры публикации ДатаПультов на других сайтах.
Дизайн-бюро Артёма Горбунова открыло сайт Infograms через который будут распространятся инфограммы — интерактивные диаграммы на Flash, каждая на свою тему. Такую инфограмму можно безвозмездно вставить в личный блог; для коллективных блогов, форумов и СМИ это стоит 1000 руб./штука.
Вот скриншот первой инфограммы — интерактивный график «События 2009 года». Кликните чтобы перейти на оригинал и наведите курсор на нужный раздел. Бежевое (самое популярно) — аварии, стихийные бедствия, трагедии… Как всегда.