технология

Как устроить гонку столбчатых диаграмм

Гонку столбчатых диаграмм пока используют редко. Создавать бесплатно такой вид графика позволяет сервис Flourish.

Как увеличивались города на протяжении столетий? Как менялся рейтинг политических кандидатов на выборах? Как развивались крупные компании? Показать изменения может гонка столбчатых диаграмм — bar chart race. Подобная анимация способна набрать миллионы просмотров. Создать график поможет сервис Flourish.

Посмотрите примеры.

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

Первое, что нужно сделать, — составить таблицу с данными в формате CSV или Excel.

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

Рассказываем, как работать в сервисе.

Открывайте Flourish. Он англоязычный, разобраться в нем можно интуитивно, поможет и встроенный в браузер переводчик. Зарегистрируйтесь на сервисе через электронную почту или аккаунт в Google. Нажимайте SIGN IN (в правом верхнем углу). Вы попадете в личный кабинет.

Кликайте «Create new visualisation» (Создать новую визуализацию). Пролистывайте до «Bar chart race». Выбирайте шаблон. Нажимайте на него. В колонке справа панель для редактирования. Здесь можно выбрать, как будет проходить «гонка» — столбцы будут расти горизонтально (Horizontal) или вертикально (Vertical); ширина столбцов будет занимать весь экран (Fill space) или зададите ее самостоятельно (Specified).

Чтобы создать собственную «гонку», перейдите во вкладку «Data», кнопка для переключения в верхней строке рядом с кнопкой «Preview».

Нажимайте «Import your data» (импортируйте свои данные). Загрузите в сервис созданную таблицу. В появившемся окне кликайте «Import publicly», затем «next select the columns».

Переключайтесь обратно на «Preview». В панели для редактирования (колонка справа) впишите название графика, оставьте или уберите легенду, установите, с какой скоростью будут двигаться столбцы.

График готов. Чтобы им поделиться, кликайте «Export & publish», затем «Publish to share and embed» (подтвердите, что ваш график общедоступный, иначе не сможете им поделиться или встроить на сайт). Еще раз нажмите на «Publish». Вы получите ссылку на график и код, который можно встроить на сайт.
Так ваш bar chart race будет выглядеть на сайте. Чтобы увидеть, как график двигается, кликайте на «Replay».

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

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

проект

Над материалом работала
Ольга Бердецкая

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

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