ИНТЕРАКТИВНАЯ ИНФОГРАФИКА

 

 

 

Из предметных результатов стандарта образования по информатике:

  • формирование умений формализации и структурирования информации, умения выбирать способ представления данных в соответствии с поставленной задачей — таблицы, схемы, графики, диаграммы, с использованием соответствующих программных средств обработки данных...

 

 

Что и как?

 

Инфографика графическая (визуальная) модель подачи информации, данных и знаний в лаконичной и емкой форме.

Визуально инфографика может быть представлена в разных формах:

  • карикатур,

  • карт,

  • таблиц,

  • диаграмм,

  • иллюстраций,

  • эмблем

  • рисунков.

Инфографика часто выступает в качестве дополнения к текстовой информации.

Инфографика базируется на законах восприятия визуальной информации (http://infographer.ru/tag/zakony-vospriyatiya/), поэтому далеко не каждое изображение с данными можно назвать инфографикой.

 

 

 

Где и зачем?

 

Инфографика, как информационная модель вербального сообщения - активно используется в разных областях...

  • Инфографика - эффективный способ существенно сократить объем места, которое бы занимал письменный текст.

  • Инфографика одна из ведущих тенденций веб-дизайна

  • Инфографика эффективный и наглядный вид рекламного объявления.

  • Инфографика важный инструмент презентации идей.

Основная цель инфографики — информирование.

Причины популярности инфографики:

  • потребность максимально лаконичного и быстрого изложения большого массива данных в условиях информационной перенасыщенности .

  • формирующаяся экранная культура современного человека, воспринимающего наглядное изображение лучше, чем печатный текст.

  • текст объёмом более пяти страниц легко умещается в одном графическом рисунке (http://didaktor.ru/goto/http:/design-mania.ru/web-design/infografika/)

Все любят списки. Простой и понятный список из 10 пунктов привлечет больше читателей, чем развернутый многостраничный текст.

Все любят карты. Несколько точек и линий на карте дают лучшее представление о географическом контексте истории, чем любые словесные описания расстояний и перемещений.

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

 

 

 

 

 

Isotype. Начало

 

В 1925-1934 годах Отто Нойрат (Otto Neurath, австрийский философ-марксист, социолог и экономист) возглавлял команду талантливых специалистов, разработавших систему визуальной презентации данных - Isotype.

Система начала складываться при Социально-Экономическом музее Вены (Gesellschafts- und Wirtschaftsmuseum in Wien), первым директором которого в 1925 году стал Нейрат. Сначала ее так и называли: «венский метод изобразительной статистики». Задача музея заключалась в информировании населения об общественно-экономической ситуации в городе и мире.

Изотайп был первым дизайн-прорывом такого уровня. Идея была простая: данные нужно переводить в простые визуальные символы, это оживляет, делает материал запоминающимся, и самое важное, позволяет легко сравнивать показатели.

Отто Нейрат:

  • строго определил задачу графического дизайна, как ясное и точное донесение информации до реципиента

  • применил простые символьные изображения для передачи смысла людям с разным уровнем грамотности и знаний

  • организовал сам процесс производства такой графики.

Isotype  (International System of Typographic Picture Education) - система изобразительного языка, разработанного для просвещения жителей Вены в социально-экономическом направлении.

Isotype использует самоочевидные символы, основанные на научном смысле и психологических экспериментах и является прародителем всех современных пиктограмм.

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

 

Нарисовал Isotype (4000 знаков и пиктограмм) немецкий художник Герд Арц (Gerd Arntz). Приглашались другие художники и графики – Peter Alma из Амстердама, Augustin Tschinkel из Праги, студенты из Bauhaus in Dessau. Свою лепту в проект внес и известный типограф Ян Чихольд (Jan Tschichold).

В 1931 году Герд Арц переезжает в СССР и создает иллюстрации для Плана второй пятилетки, достижений советских военно-воздушных сил, строительства нового метро.

Isotype не стал международным универсальным графическим языком, как пророчили некоторые.

Но он дал толчок развитию целого направления в графическом дизайне Инфографике.

Графика Isotype послужила прототипом тех пиктограмм, которыми мы пользуемся и по сей день для навигации в аэропортах, вокзалах и станциях.

 

 

 

USA Today. Второе рождение

 

Инфографика, как абсолютно новый жанр в прессе, появилась в 1982 году, когда на рынке США возникла новая национальная газета USA Today, которая значительную часть площади отвела под  «информационные рисунки».

Успех USA Today у читателей благоприятствовал быстрому распространение инфографики в США.

Журналистская инфографика является конечным ответом на то, что современный адресат масс-медиа:

  • иначе смотрит и видит в привычной для него ситуации перенасыщенности наглядными визуальными образами;

  • иначе читает, с трудом удерживая внимание в пределах однородного информационного ряда, но легко и привычно переключая его; как никогда, становится способным к многозадачности и гештальту;

  • динамичен, мобилен,  технологически оснащен и, располагая мощными информационно-поисковыми инструментами, в условиях открытости информационной среды легко преодолевает зависимость от конкретных СМИ в удовлетворении своих информационных потребностей (новостных, аналитических, литературно-художественных);

  • отнюдь не испытывает информационного голода, наоборот, живет в условиях информационной избыточности, что при постоянном дефиците времени делает его внимание важнейшим ограниченным и невосполнимым ресурсом, за который идет решительная борьба между многочисленными СМИ;

  • более не является пассивным потребителем профессионального контента, обретает свой голос в медиа и возможность сформировать и высказать свое, пусть даже некомпетентное мнение и т.д.

 

 

Самые популярные темы

по статистике Google (январь 2012)

 

 

  • Периодическая таблица каких-либо элементов.

  • Кризис кредитования, визуализированный, но ничего не объясняющий.

  • Самые высокие здания — Google выдал 54 000 картинок

  • Вода, газ, нефть и что угодно, потребляемые в США больше, чем в других странах.

  • Метро-карты чего-нибудь.

  • Диаграмма Венна (схематичное изображение всех возможных пересечений нескольких множеств).

  • Текстовое облако

  • Набор нерелевантных данных, собранных вместе в большой вертикальной простыне.

 

 

 

Однако, тенденция...

 

Вытеснения традиционных печатных СМИ электронными сопровождается переходом от статичной и константной инфографики к инфографике мультимедийной, динамической, интерактивной, что также требует использования специального программного инструментария.

Онлайновые издания позволяют предложить качественно новый уровень представления информации, когда:

  • структурированная в системах баз данных информации скрыта от пользователя на стороне сервера,

  • на основе технологии mashup (веб-технология объединения данных нескольких источников в один интегрированный инструмент) на одной странице сводятся данные разного типа и из разных источников с возможностью для пользователя выбора формы их представления (текстовая, списочная, табличная, графическая, гетерогенная),

  • пользователю представляется простой в восприятии, но обогащенный (интерактивными картами, видеоматериалами и т.п.) репортаж с возможностью ведения поиска, получения дополнительных справочных данных, фильтрации контента и выражения собственного мнения через голосование, отзывы, комментарии, рекомендации.

Здесь речь идет уже об интеграции собственно журналистской инфографики и UI (user interface, пользовательский интерфейс) новыми интерфейсами доступа к информации.

В контексте развития web-журналистики для мобильных пользователей утрачивает значение интерактивная инфографика, построенная на флеш-технологиях, которая  доминировала до настоящего времени. Именно она позволила журналистам, разработчикам и дизайнерам визуализировать многочисленные слои данных в едином интерфейсе, а пользователям – взаимодействовать с данными. Однако широкое распространение мобильных устройств доступа в Интернет послужило толчком к развитию онлайнового инструментария, позволяющего разрабатывать адаптированную к их возможностям интерактивную инфографику. Наиболее перспективными технологиями являются HTML5, CSS3 и XML.

 

 

 

 

Инфографический инструментарий

 

 

Многие сервисы имеют ограничения в области поддержки языков и кодировок.

 

Envision.js (http://www.humblesoftware.com/envision) - библиотека для создания быстрых динамических и интерактивных визуализаций данных на HTML5 (основана на Flotr2 - библиотека с открытым кодом для построения HTML5 графиков и диаграмм). Поддерживаются основные браузеры. Возможности:

Highcharts (http://www.highcharts.com/) - аналогичное решение, но на основе SVG/VML 

Инфографика в Wolfram: "Игра престолов"
 

 

 

 

 

Инфографический инструментарий StatSilk

 

Компания StatSilk  предлагает программное обеспечение для визуализации карт и графиков, с помощью которых можно визуально исследовать экономику, образование, окружающую среду, здравоохранение и т.д

  • программу создания интерактивных карт StatPlanet 

  • программу для создания интерактивных графиков и диаграмм StatTrends.

Как воспользоваться:

  • Скачать архив StatPlanet и извлечь файлы на компьютер. Файлы будут извлекаться  в папку StatPlanat_Map_Maker.

  • Зайти в папку StatPlanat_Map_Maker , затем в папку World_Map и откройте файл StatPlanat_data_edition.xls. Убедитесь, что макросы включены, для Office 2010 – это выполнение команды: кнопка Office / Параметры Exel / Центр управления безопасностью / Параметры центра управления безопасностью / Параметры макросов / Включить все макросы / ОК / ОК. Нажмите кнопку Clear data для удаления данных в примере.

  • Импортирование данных для построения интерактивной карты: нажмите кнопкуImport data и выберите файл с данными. Можно не импортировать данные, а отредактировать их вручную в файле StatPlanat_data_edition.xls.

  • Сохранение файла (кнопка Save data). Файл сохраниться под именем data.csv.

  • Скопируйте содержимое папки Web, чтобы опубликовать её на вашем сайте. Для просмотра в автономном режиме используется файл StatPlanat.exe, чтобы просмотреть в веб-браузере – StatPlanat.html.

После прохождения всех шагов будет создана интерактивная карта мира.

На сайте http://www.statsilk.com/maps/download-free-shapefile-maps размещены карты некоторых регионов, которые вы можете скачать и затем использовать.

Можно использовать и свои карты, на http://www.statsilk.com/maps/create-flash-maps объяснено как это делать, правда, на английском языке.

 

 

 

 

Журналистика данных

 

Журналистика данных — это новая тенденция в развитых странах мира, в виде отдельных проектов крупных медиахолдингов и в виде личных датаблогов посвященных визуализации различной общественно значимой информации.

Журналистика данных объединяет журналистику, исследования, статистику и программирование, с помощью современного инструментария делая анализ и визуальное представление больших объемов информации доступной для широкого круга журналистов.

Журналистика данных (data driven journalism) - работа журналиста, основанная на сборе и анализе сравнительно больших объемов информации.

Это совмещение журналистом роли переводчика с экономического/государственного/цифрового языка в язык понятный всем и, одновременно, роли аналитика представляющего материалы в предельно наглядной форме (списки, графики, интерактивные карты, специальные веб-компоненты которые позволяют отображать данные разными специальными способами и так далее).

Это одновременно, и упрощение подачи материалов, и усложнение процесса их подготовки.

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

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

Журналистика данных - не замена журналистики данными. Это поиск журналистики в больших объемах информации. Данные и инструменты для их анализа не заменяют, а помогают журналистам в раскрытии темы.

Журналистика данных может отвечать на вопросы. Хорошим началом в работе с данными может быть правильно заданный вопрос и ответ на него, полученный с помощью анализа информации.

Результаты анализа могут быть персонализированными. Инструменты делают возможным не только анализировать информацию, но и представлять результаты анализа по-разному, в зависимости от предпочтений пользователей.

 

Примеры:

Guardian Datablog (http://www.guardian.co.uk/news/datablog) блог данных  газеты Guardian в Великобритании, который изначально вел Симон Роджерс (Simon Rodgers ), а теперь туда ежедневно пишут более 5 журналистов Guardian.

Data Desk (http://projects.latimes.com/index/) - проект по данным Los Angeles Times, публикует данные  и списки, которые накладываются на карту Калифорнии в интерактивной форме.

Трудности в журналистике данных:

  • необходимость совмешения навыков работы с рядом аналитических и технических инструментов (Excel, Google Docs, IBM ManyEyes, Wordle и др.) с навыками подачи материалов в понятном медиа-формате.

  • сравнительно невысокая доступность для журналиста баз данных ....

Отчет конференции по Data Driven Journalism (август 2010): http://mediapusher.eu/datadrivenjournalism/pdf/ddj_paper_final.pdf  

 

 

 

Визуализация данных: онлайновый инструментарий

 

Сервисы обработки данных:

  • Google Docs (https://docs.google.com/) - сервис работы с документами и таблицами от Google. Помимо того что позволяет публиковать таблицы из Excel’я онлайн, для всеобщего доступа, там также есть возможность строить графики на основе этой информации.

  • IBM ManyEyes (http://www-958.ibm.com/software/data/cognos/manyeyes/ — сервис визуализации данных в форме различных графиков, наложения их на карты (мира или США) и построения ряда редких и наглядных графиков вроде Bubble Chart.

  • Wordle (http://www.wordle.net — сервис по созданию «карт текста». Вы загружаете туда документ, а он подсчитывает частоту упоминаемости слов и наглядно отображает их в виде инфографики.

  • WordCloud (https://wordcloud.pagemon.net) прекрасный сервис по созданию «текстовых облаков».

Пример: инфорграфика на данной страницы об Инфографике (два варианта, размер слова пропорционален частоте упоминания):

 

Каталоги открытых данных:

Ссылки по визуализации

 

 

 

Сам себе инфографик

 

23-03-2012

What about me? (http://www.intel.com/content/www/us/en/what-about-me/what-about-me.html) - сервис визуализации аккаунтов в Facebook, Twitter и Youtube. What about me? анализирует данные с вашего аккаунта в социальной сети и на их основе создает инфографику.

Например, можно создать цветок-диаграмму, отражающую круг интересов пользователя: учитывая темы сообщений твиттере и статусы. Также можно определить популярный пост и изображения, которое вы публиковали (подсчет «лайков» или перепост).

Другая инфографика оценивает общее настроение, ежедневные привычки (вы сова или жаворонок), темы разговоров, на которые вы общались в комментариях.

 

05-12-2011

Компания Intel предлагает пользователям Facebook увековечить себя для истории, создав собственный виртуальный музей, с выставками фотографий, видеоартом и инсталляциями. The Museum of Me (http://www.intel.com/museumofme/r/index.htm) – сервис визуализации Facebook-профиля. На сайте проекта  нужно синхронизировать профиль с музеем и создать видеоисторию своей жизни в социальной сети, сценарием которой станут популярные слова статуса и комментариев, фотографии друзей, изображения со стены.

 

 

 

Инфографика + Типографика

 

Слово идеально передает информацию, а если оно еще дополнено визуальными возможностями шрифта (цвет, размер, расположение), то образ становится достаточным и исчерпывающим.

Фрагмент карты города, созданной только с помощью шрифта:

 

Нередко для передачи смысла нужны только буквы...

Русские пословицы (источник: Даль В.И. Пословицы русского народа)

Японские пословицы (источник: Пронников В.А., Ладанов И.В. Японцы (этнопсихологические очерки).

Размер слова пропорционален частоте упоминания

 

Здесь 8 произведений белорусской литературы в виде облаков тегов

 

 

 

 

 

Типографические портреты

 

 

 

 

 

Интерактивное облако тегов (демонстрация)

(на компьютере должен быть уcтановлен Adobe Flash Player)

 

Облако тегов впервые начало появляться на web - сайтах сделанных при помощи Word Press. Первые облака тегов имели линейный вид в одной плоскости и «вес» ссылки опрделял кегль шрифта отображаемого тега в облаке. Затем облако приобрело пространственный вид, а  многоцветные теги в нем стали двигаться по орбите в 3D-области при приближении указателя мыши.

 

 

 

 

Google: математическая визуализация

 

05.12.2011 Поисковик Google научился строить графики математических функций.

31.03.2012 Поисковик Google научился визуализировать математические выражения с помощью интерактивной 3D-анимации (WebGL).

Пример: результат на поисковый запрос к Google: sqrt(x*x+y*y)+3*cos(sqrt(x*x+y*y))+5 from -20 to 20 (компьютер должен поддерживать WebGL).

 

Интерактивные 3D-модели может строить и научный поисковик Wolfram Alpha (например, вот та же функция), только там для отображения интерактивной модели требуется установить тяжеловесный плагин к браузеру, тогда как Google сумел реализовать в WebGL.

WebGL (Web-based Graphics Library) — это библиотека для программного обеспечения, которая расширяет возможности языка программирования JavaScript, позволяя ему создавать интерактивную 3D графику внутри любого совместимого с ней веб-браузера. Код на WebGL выполняется с помощью видеокарты.

 

 

 

 

Инфографика и безопасность

 

Примером мультимедийной интерактивной инфографики, построенной на HTML5, является визуализированная история развития технологий и программ для просмотра веб-страниц: http://evolutionofweb.appspot.com

Эта инфографика разработана к третьей годовщине браузера Chrome компанией Google с участием компаний Hyperakt, Vizzuality, mgmt design и GOOD. В ней в хронологическом порядке отражены основные версии, внешний вид и функционал популярных браузеров, Chrome OS, ключевые языки программирования, методы и программные решения. Характерно, что, хотя Google Chrome и Chrome OS – самые молодые продукты из показанных в инфографике, виток развития браузера Google Chrome содержит наибольшую концентрацию событий, чем инфографика ненавязчиво подсказывает нам об их перспективности.

 

 

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

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

Все это свидетельствует о новых возможностях манипулирования целевой аудиторией со стороны цифровых СМИ и актуализирует проблематику информационной безопасности в контексте современного инфографического инструментария.

Не только читатель (зритель) определенного информационного продукта попадает под воздействие предварительно заданных в нем (отбором данных, их структуризацией и способом оформления) интенций и оценок, но и пользующийся внешним инфографическим сервисом журналист может стать невольным заложником скрытого семантического послания.

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

В современной информационной среде в условиях дефицита внимания выдвижение на первый план той или иной тематики журналистского сообщения является сильнейшим средством манипуляции целевой аудиторией.

Конкретные позиции читателя (зрителя) по отношению к поднимаемым в определенной теме вопросам часто имеют совершенно незначительное значение в сравнении с самим фактом обращенности аудитории именно к данной теме и, соответственно, игнорирования в данный момент любой другой. Именно поэтому ведущие мировые СМИ и агентства новостей стремятся создать собственные онлайновые инфографические сервисы.

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

 

 

 

Интернет-ресурсы

 

  • http://infogra.ru/ - сайт об инфографике: начиная от ее создания, заканчивая интересными интервью с крупнейшими инфодизайнерами и визуализаторами. Сайт работает в режиме блого-социального сайта, где у каждого зарегистрированного пользователя есть возможность высказаться на любую тему и задать интересующий его вопрос.

  • http://infografika.by/

  • http://infographer.ru/  сайт об инфографике

  • http://infografics.livejournal.com/ - журнал "Инфографика"

  • http://www.snd.org/ - сайт Society for News Design (сообщество новостного дизайна - некоммерческой международная организация профессионалов в области СМИ и визуальной коммуникации)

  • Визуализация всего: https://howmuch.net

25-29.03.2019 27всемирный конкурс инфографики Malofiej   

 

 

Инфографическая визуализация

 

  • The largest vocabulary in Hip-Hop (Самый большой словарный запас в хип-хопе) от дизайнера из Нью-Йорка Мэтью Дэниэлса. В ней звёзды хип-хопа сравниваются по количеству слов в их лексиконе. Для её создания он использовал метод лексического анализа первых 35 тысяч слов из песен музыкантов, а также первые 5 тысяч слов из семи произведений Шекспира и 35 тысяч слов из «Моби Дика» Германа Мелвилла. Выяснилось, что самый большой словарный запас — у рэпера Aesop Rock (7 392 уникальных слова). Для сравнения: у Мелвилла — 6 022 слова, а у Шекспира — 5 170 слов.

  • Визуализация балета Игоря Стравинского  «Весна священная». Для этого композитор Стефан Малиновски (Stephen Malinowski) придумал алгоритмы визуализации для каждого инструмента, приёма и перехода в музыке (в балете участвуют 86 различных инструментов, а число музыкальных приёмов доводит число оригинальных звуков до 200).
    http://www.musanim.com/pdf/RoS_MalinowskiBacal_ProgramNotes_2013jul24.pdf

  • The Refugee Project показывает на карте мира количество беженцев для каждой отдельной страны в период с 1975 по 2012 год.

  • Проекты от монреальской студии FFunction:

14.05.2019    ИТ в Беларуси-2018: индустрия взрослеет...

 

kmp