технология

Делаем линейный график в infogram.com

Рассказываем и показываем, как быстро и легко подать информацию, которая собирается годами

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

Построить линейный график можно с помощью сервиса infogram.com.

Проведите подготовительную работу — соберите информацию для инфографики.

  1. Выберите тему, по которой хотите отследить динамику. Соберите данные.
  2. Распределите информацию в хронологическом порядке, для линейного графика — это обязательное условие.
  3. Внесите данные в таблицу. Так вам будет легче копировать и вставлять информацию в таблицу на сервисе. Проверьте на ошибки.

Открывайте infogram.com. Сервис предлагает пользователю несколько способов для авторизации: через аккаунты в Фейсбуке, в Google, в Twitter, в LinkedIn или через регистрацию.

Вверху сервиса есть шаблоны проектов. Выбирайте, где написано «Infographics». Назовите график и нажимайте «Create». Стандартный шаблон можно менять под размеры вашего сайта.

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

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

Столбик «А» — это контрольные точки, по которым отслеживается динамика. Строка «1» — название графика.

Перенесите данные из заготовленной таблицы. График выстроится автоматически.

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

Нажимайте в правом верхнем углу Share, затем — в всплывающем окне — Embed. На сервисе предусмотрены отдельные настройки кода под разные платформы — например, адаптивность размеров, специальный код для сайтов на WordPress. Мы не можем сказать, какой именно код подойдет для вашего сайта. Пробуйте.

Ну и напоследок, несколько идей для линейного графика:

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

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

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

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

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