Создание интерактивной шкалы времени с помощью TimelineJS и Flourish

Образование

Дидактические средства

DIY

Используем два инструмента для визуализации последовательности событий.

Дата публикации

4 августа 2026 г.

Уже довольно давно хотелось создать интерактивную шкалу времени с помощью сервиса TimelineJS. Кроме того, было любопытно, какие альтернативы существуют для разработки этого типа визуализации. Для шкалы времени я выбрал историю зарождения интернета: даты ключевых событий и разработки технологий.

Итог работы с TimelineJS

Начнём с готовой диаграммы. Листайте слайды с помощью кнопок по краям или клавиш ←Left и →Right на клавиатуре.

Открыть в отдельной вкладке

Информация для шкалы времени взята из следующих источников:

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

Использование TimelineJS

Плюс TimelineJS состоит в том, что данные для шкалы могут храниться в Google Таблице. Это означает, что достаточно отредактировать информацию в облачном документе, и изменения отразятся на визуализации. Отмечу, что в колонке Media допускается вставлять ссылки не только на изображения, но и на ресурсы на различных онлайн-сервисах. Полный список поддерживаемых ресурсов есть на этой странице документации.

Чтобы создать шкалу времени, нужно скопировать шаблон Google Таблицы с необходимыми колонками и заполнить её. После этого необходимо опубликовать таблицу и получить ссылку для доступа. Подробные инструкции можно найти по ссылке. Этот способ не требует знаний веб-разработки или программирования. После создания ссылки доступно встраивание страницы с помощью тега iframe.

Но, если требуется более тонкая настройка, TimelineJS поддерживает создание визуализации с помощью JS-кода. Документацию для решения задачи можно посмотреть по этой ссылке. Этот способ используется на данной странице.

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

Альтернативные сервисы и библиотеки

Flourish

Пока работал над первой диаграммой, стал искать другие сервисы и способы изобразить данные, связанные с временными промежутками. На сайте Каталога визуализации данных нашёл ссылку на онлайн-сервис Flourish. Среди шаблонов проектов есть и таймлайн-диаграммы.

Нашёлся любопытный пример шкалы времени под названием Bar Chart Race (Гонка диаграмм), в котором показан процесс изменения величин со временем с помощью анимации. Далее прикреплю пример проекта в котором демонстрируется, как со временем изменялся наиболее популярный среди белорусских пользователей браузер. Значения приводятся в процентах¹. Чтобы воспроизвести анимацию, нажмите кнопку в нижней части диаграммы.

Рисунок 1: Гонка браузеров

Гонка диаграмм подойдёт, если нужно показать соревнование между несколькими сущностями в течение времени.

Ещё один любопытный способ связать события с датой – диаграмма Animated points (Анимированные точки). Данные для диаграммы содержат название события, дату, широту и долготу. На поверхности Земли будут появляться маркеры-события. В следующем примере показана шкала времени с информацией о метеоритах, упавших на землю². Для визуализации использован не весь

Рисунок 2: Демонстрация мест обнаружения метеоритов.

HistropediaJS

JS-библиотека HistropediaJS – альтернатива TimelineJS. Я немного поэкспериментировал с этой библиотекой. У неё есть свои достоинства и недостатки. К плюсам могу отнести производительность библиотеки и возможность добавить к шкале графики, с помощью которых демонстрируется изменение величины со временем. Ещё один плюс – кастомизация всех компонентов диаграммы.

Меня давно интересуют методы и формы визуализации явлений и процессов. Постараюсь чаще применять описанные инструменты.

Сноски

Источник информации: gs.statcounter.com.↩︎
Данные взяты из NASA Meteorites Dataset.↩︎