Как устроить гонку столбчатых диаграмм. 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».

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