технология

Как создать
простой интерактивный таймлайн
за три шага

Если у вас есть история с большим количеством дат и цифр, расскажите ее с помощью таймлинии Storyline JS. Этот сервис разработала команда Knight Lab Северо‐Западного университета США. Загрузите таблицу с данными — сервис быстро превратит ее в наглядный интерактивный таймлайн.

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

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

Главная страница сервиса

Сейчас (октябрь 2018 года) пользователям доступна бета‐версия Сторилайна с некоторыми ограничениями. Например, разработчики не рекомендуют добавлять на таймлинию более 800 информационных точек — учитывайте это, разрабатывая проект.

Шаг 1: создаем таблицу

Прежде чем начать работу с сервисом, убедитесь, что у вас есть аккаунт в Гугле — контент вашей таймлинии необходимо оформить в виде Гугл‐таблицы. Таблица должна состоять из четырех или более столбцов. Внешне таймлиния будет выглядеть как график, поэтому далее мы будем говорить про ось X и ось Y.

Вы можете назвать столбцы как угодно. Главное, чтобы один из них отвечал за хронологию (ось X в графике). Можно назвать его, например, «год». Во втором столбце должно быть указано цифровое значение ваших данных (ось Y). В третий и четвертый столбцы добавьте контент поясняющих карточек: в один — заголовок, в другой — описание.

Сделаем для примера таблицу потерь российской армии в различных войнах 20 века.

Скриншот таблицы, которую мы сделали, когда писали эту статью

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

Шаг 2: предоставляем сервису доступ к таблице

Чтобы Сторилайн смог отобразить ваши данные, нужно опубликовать созданную таблицу в интернете. В строке меню выбираем пункт «Файл» — он расположен в левом верхнем углу окна гугл‐таблицы — а затем в выпадающем списке кликаем на пункте «Опубликовать в Интернете». В открывшемся окне нажимаем кнопку «Опубликовать». Гугл уточнит, действительно ли вы собрались опубликовать файл — подтверждаем действие.

Не пишите в таблице ничеголишнего — она общедоступна

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

Кажется, что ссылки одинаковые, но на самом деле — нет

Копируем ссылку и переходим в окно Сторилайна, чтобы создать таймлинию.

Шаг 3: настраиваем таймлинию

В окне Сторилайна пролистываем страницы до окошка «Configure your Storyline» (Настроить ваш Сторилайн). В адресную строку вставляем ссылку на таблицу. Если вы всё сделали правильно в предыдущем этапахе, кнопка «Load» (Загрузка) станет зеленой. Нажимаем на нее.

Если вы скопировали не ту ссылку — кнопка останется неактивной

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

Напротив строки «Time» (Время) два окошка. Нажимаем «Select» (Выбор) в левом из них и указываем, в каком столбце вашей таблицы содержится информация для временной шкалы (ось Х с датами). В окошке справа выбираем формат отображения даты: это может быть просто год или конкретное число.

Сервис автоматически распознаёт названия колонок

Дальше по аналогии заполняем остальные пункты меню. Для строки «Data» (Данные) указываем, в каком столбце брать числовую информацию для оси Y, и добавляем название оси, которое будет отображаться в проекте. В «Story Cards» (Карточки истории) выбираем столбцы таблицы, откуда сервис должен брать контент для карточек.

Обратите внимание на строку «How should the date look in your story?» (Как должны отображаться даты вашей истории?). Здесь снова можно выбрать формат отображения даты. По умолчанию стоит «так же, как в таблице». Если кнопка «Create Storyline» (Создать Сторилайн) стала зеленой, значит вы всё сделали правильно. Нажимаем!

Если кнопка неактивна, проверьте, все ли поля вы настроили

Таймлиния готова! Теперь можно поделиться прямой ссылкой или встроить ее на сайт с помощью эмбед‐кода.

Для перехода между вехами истории можно кликать по точкам или карточкам

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

А вот что получилось у нас:

С помощью этой технологии были реализованы следующие проекты

Над материалом работал
Илья Кудинов

Иллюстрации:
скриншоты сервиса Storyline JS

Знаете похожие технологии? Расскажите о своем опыте, нам интересно!