1.4. Интерактивная инфографика
Показать данные на графике – это самый быстрый и простой способ визуализировать информацию. Инструменты создания интерактивных диаграмм и инфографики позволяют встраивать их в любой сайт.
1.4.1. Программа infogr.am47
Сервис Infogr.am представляет собой простой и в то же время достаточно функциональный инструмент для визуализации данных. Главное достоинство этого сервиса состоит в том, что с его помощью любой пользователь, даже не обладающий какимилибо знаниями в области программирования и дизайна, сможет создать красивую интерактивную инфографику, карту или диаграмму для использования в докладе, презентации, на сайте.
Программапредлагаеттритарифныхплана.Послерегистрации возможнобесплатноепользованиесервисом втечение30 дней.
Созданную инфографику или диаграмму можно опубликовать или встроить на страницу сайта. Все, что создано в программе, сохраняется в библиотеке, и можно в любой момент отредактировать свои работы.
После регистрации появляется окно, иллюстрирующее все возможности программы (рис. 50). Программа позволяет использовать 35 типов диаграмм, интерактивные карты всех стран, 100 иконок, 13 шаблонов инфографики. Есть возможность вставить медиаресурсы, опубликовать и распечатать созданные инфографики и диаграммы.
Создание интерактивной диаграммы
Первый шаг к созданию диаграммы (chart) – выбор ее типа (рис. 51), при этом для некоторых типов предлагается несколько шаблонов. Например, для типаColumn – 4 шаблона, для типаPie – 3 шаблона и т.д.
47 https://infogr.am.
93
Рис. 50. Главное окно программы
Рис. 51. Окно выбора типа диаграммы (фрагмент)
Двойной щелчок вызывает форму электронной таблицы, которую следует преобразовать (удалить ненужные ячейки и ввести новые значения). Процесс преобразования мгновенно отражается в графике (рис. 52).
94
Рис. 52. Окно для ввода значений графика
Ввод названий осей диаграммы, выбор цвета и других параметров осуществляются через соответствующие настройки setting. На рис. 53 представлен фрагмент полученной интерактивной диаграммы. Справа – панель для вставки на диаграмму рисунков, медиа (видео YouTube, URL-адрес сайта, презентация slideshare и др.), текста, карты. На рисунке вставлена картинка.
Рис. 53. Интерактивная диаграмма (фрагмент)
95
Полученная в этой программе диаграмма дает возможность
переключаться от одного параметра (в нашем примере месяцы)
к другомуИспользование. этой программы полезно при презентации компании или продукта, характеристики персонала, отчета за полугодие, рекламной кампании и т.д. Но прежде чем создавать презентационный материал в этой программе, следует продумать его сценарий.
1.4.2. Программа Datawrapper48
Программа Datawrapper является интуитивно понятным инструментом для создания интерактивной графики и карт. Программа содержит разные тарифные планы, в том числе бесплатный вариант, который имеет ограничения. Тем не менее в бесплатной версии можно получить достаточное представление о ее возможностях для принятия решения о переходе на другие тарифные планы. Один из недостатков этого инструмента заключается в том, что он неоченьхорошоотображаетбольшие массивыданных.
После регистрации можно сразу приступить к созданию диаграммы. В окне программы показаны 4 этапа создания диаграммы, начинаяс загрузки данных икончая публикацией(рис.54).
Рис. 54. Этапы создания диаграммы
Первый шаг – загрузка данных (Upload Data). Можно выбрать данные из Excel, включая заголовки строк и столбцов, и вставить их в текстовое поле (рис. 55). Те данные, которые были в денежном формате, обрабатываться не будут. Поэтому следует перевести данные в числовой формат.
48 https://datawrapper.de.
96
Рис. 55. Загрузка данных
Второй шаг – проверка и описание загруженных данных в форме электронной таблицы (Check&Describe).
Третий шаг – визуализация (рис. 56). На этом этапе происходит выбор типа диаграммы (Chart type); выбор цвета и элементов для просмотра (Refine); описание диаграммы (Annotate); дизайн диаграммы (Design).
Рис. 56. Визуализация диаграммы
В результате будет получена интерактивная диаграмма (рис. 57), значения которой будут меняться в зависимости от выбранных элементов (в примере – месяцев).
Четвертый шаг – публикация и встраивание (Publish& Embed). В бесплатной версии можно воспользоваться публикацией в публичной галерее. Остальные возможности недоступны.
97
Рис. 57. Пример интерактивной диаграммы
1.5. Сервис Easel.ly49
Easel.ly – это онлайновый сервис для создания инфографики на основе большого количества шаблонов, предоставляемых программой. В программе есть возможность создания своей собственной инфографики «с чистого листа» (start fresh). На рис. 58 приведенфрагментглавного окнапрограммы.
Рис. 58. Главное окно программы
49 http://www.easel.ly.
98
Шаблоны программы структурированы по категориям, среди которых можно выбрать примеры инфографики из категорий «бизнес», «маркетинг», «процессы», «технологии» и т.д. Для читателей нашего пособия наиболее полезны шаблоны из категории «маркетинг».
Выбрав шаблон, можно начать с ним работать, удаляя любой объект и вставляя на его место другой из предоставляемых программой, меняя текст, цвет и т.д. Можно ничего не менять, а просто, например, перевести текст, как будет сделано автором пособия в примере. Публикуя созданную инфографику, необходимо сделать ссылку на источник.
На рис. 59 показан фрагмент окна в режиме редактирования текста. Как видно из рисунка, в процессе редактирования появляется панель для выбора шрифта, размера, расположения и т.д.
Рис. 59. Фрагмент окна редактирования текста
Созданную инфографику можно сохранить в формате .PDF, обменяться ею с друзьями и коллегами, вставить на сайт. Инфографика, созданная автором пособия на основе шаблона и сохраненная в формате .PDF, представлена на рис. 60.
Программа easel.ly (easel – мольберт) идеально подходит для использования в образовательном процессе. Примеры из категории «Образование» позволят найти образцы для презентации любых предметов в школе и институте.
99