Интерактивный встраиваемый таймлайн

HowTo Визуализация Инструменты

Timeline – это удобный онлайн-инструмент, который позволяет легко и быстро создавать встраиваемые интерактивные таймлайны, в которые можно добавлять картинки и медиа (видео, гугл-карты, твиты, музыку).

Выглядит это примерно так:

(мы используем в качестве примера шаблон на Timeline.knightlab)

Чтобы создать аналогичный таймлайн, нужно:

  • иметь аккаунт в Google (будут использоваться гугл-таблицы)
  • выйти на сайт http://timeline.knightlab.com/

Прежде всего, нужно выйти на сайт Timeline и нажать на кнопку Make a timeline.

Затем нажимаем на кнопку Get the spreadsheet template.

После этого в новом окне откроется гугл-таблица с шаблоном. Чтобы использовать этот шаблон, его нужно сохранить на своем гугл-диске, нажав на кнопку “Использовать этот шаблон”. Для этого нужно войти в свой гугл-аккаунт.

Теперь этот шаблон надо отредактировать. Данные, которые в нем содержатся, нужны только как пример. На них можно ориентироваться при заполнении. Чтобы таймлайн работал, достаточно заполнить только два поля – Year и Text. Остальные заполняются в зависимости от желаний и потребностей. Ниже назначение полей будет описано подробнее.

Когда шаблон полностью отредактирован под задачи создаваемого таймлайна, эту таблицу нужно опубликовать (чтобы инструмент Таймлайн имел к ней доступ) и скопировать ссылку на опубликованную таблицу.

Теперь скопированную ссылку нужно вставить в соответствующий раздел на сайте Timeline.

При желании можно изменить настройки ширины, высоты и прочих параметров.

Таймлайн готов. Ниже на странице в поле появится код для его встраивания на страницу. Под ним есть кнопка предпросмотре (preview), с помощью которой можно сразу посмотреть, что получилось.

 

Теперь немного подробнее о возможностях таймлайна.

В шаблоне есть следующие поля:

  • Year. Сюда вписывается год.
  • Month. Здесь при желании можно уточнить месяц. Если этого не сделать, то таймлайн отобразит только год и описание события. Если надо к одному году отнести несколько событий, то это можно сделать с помощью полей Month, Date и Time. Месяц обозначается соответствующей цифрой. Например, январь – 1, декабрь – 12.
  • Day. Сюда можно вписать конкретную дату. Тоже цифрой (без нулей в начале).
  • Time. Это поле может содержать указание времени в течение дня. Время записывается с учетом часов, минут и секунд в таком формате: 05:58:44

Следующая группа полей необязательна к заполнению.

  • End Year: год окончания
  • End Month: месяц окончания
  • End Day: число окончания
  • End Time: время окончания

Следующие поля – текстовые.

  • Display Date: здесь можно указать, как следует отображать время соответствующего события. Значения этой графы будут отображаться в таймлайне вместо стандартного формата, который обусловлен первыми четырьмя колонками.
  • Headline: заголовок. Отображается над текстом.
  • Text: описание события.

Раздел медиа:

  • Media. Сюда вставляется прямая ссылка на картинку (например, http://www.datadrivenjournalism.ru/wp-content/uploads/2015/01/DDJ_logo-Fin_150x150.png) или код встраивания медиаобъекта. Например, <iframe src=”https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3850384.3551336434!2d23.518984306566935!3d37.58122989001235!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sru!4v1444130393214″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>.
  • Media Credit: ссылка на источник файла, который использовался в предыдущей колонке.
  • Media Caption: подпись к медиа.
  • Media Thumbnail. Сюда при желании можно вставить ссылку на маленькое изображение, не больше 32х32 пикселя.

Следующий раздел задает таймлайну дополнительные свойства:

  • Type. Указывает статус слайда. Это может быть “заглавный”, то есть открывающий слайд либо слайд, обозначающий эпоху (era). Специфика эпохальных слайдов в том, что они не могут содержать дату и медиа.
  • Group. Позволяет визуально группировать связанные между собой события. Для этого тем событиям, которые связаны между собой, в этом поле нужно присвоить тэг – формально, любое слово, которое будет отображаться на таймлайне слева, в начале дорожки, где будут отображаться все события с этим тэгом.
  • Background. Это поле отвечает за фон. Можно просто вставить цифровое обозначение цвета (например, #333333) или задать фоновое изображение (вставить прямую ссылку на это изображение).

Подробнее об этом можно почитать в документации самого Таймлайна (http://timeline.knightlab.com/docs/using-spreadsheets.html).

Чтобы подобрать нужный цвет и его цифровое значение, можно использовать онлайн-инструмент Mozilla Color Picker Tool (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool).

Чтобы встроить интерактивную гугл-карту, надо выйти в карты (https://www.google.ru/maps) и найти там нужную локацию. Потом надо вызвать меню (верхний левый угол страницы) и выбрать там пункт “Share or embed map”.

В появившемся окне можно настроить вид карты подходящим образом, выбрать вкладку Embed Map и скопировать код.