Перейти к инструменту
ViewCSV
Без загрузки на сервер

Анимированная видео-диаграмма из CSV

quarterly-revenue-example.csv· ПРИМЕР48 строк · 4 столбца
Структура таблицы
Строка на каждую пару «период — категория»: столбец времени, столбец названий и столбец значений.
Предпросмотр1 280 × 720 пикс.
Шкала времени
0 / 12 с

Период: 2024-Q1

Проверяем, какие форматы видео умеет создавать этот браузер…

Значения в этом кадре (6 категорий)
Значения за 2024-Q1
regionЗначение
Новосибирск76,3
Нижний Новгород53,3
Москва52
Санкт-Петербург39,7
Казань33,9
Екатеринбург26,1

Строк: 48 → периодов: 8, категорий: 6. Использовано чисел: 48, пустых ячеек «период × категория»: 0.

Чтобы сделать видео из CSV, откройте файл со столбцом времени (годы, месяцы, даты или кварталы), выберите столбцы категорий и значений, затем анимацию — например, гонку столбцов — и нажмите Создать видео. Видео рисуется и кодируется прямо в браузере: в MP4 или WebM, если этот браузер умеет их создавать, иначе в анимированный GIF; любой кадр можно сохранить в PNG. Пропущенные значения остаются пропусками, пока вы не выберете другое, повторяющиеся строки объединяются только по выбранному вами правилу, а CSV никуда не загружается и не меняется.

Как сделать видео из CSV-файла

  1. Откройте, перетащите или вставьте CSV-файл либо возьмите файл, уже открытый в другом инструменте ViewCSV. Пример — синтетическая таблица квартальной выручки.
  2. На вкладке Данные выберите структуру таблицы. В длинной таблице есть столбцы времени, категорий и значений, в широкой — отдельный столбец на каждый ряд.
  3. На вкладке Оформление выберите анимацию и стиль, добавьте заголовок, источник, единицу и при желании логотип или фоновое изображение.
  4. На вкладке Видео задайте формат (16:9, 1:1 или 9:16), разрешение, длительность, частоту кадров, а также первый и последний период.
  5. Прокрутите шкалу времени или пройдите по периодам, чтобы проверить кадры, затем выберите формат скачивания и нажмите Создать видео.

Десять анимаций

Гонка столбцовГоризонтальные столбики растут и обгоняют друг друга, когда меняется рейтинг. Отрицательные значения уходят влево от нуля.
Растущие линииПо линии на категорию; линии прорисовываются период за периодом на неподвижной оси, так что прежние значения не смещаются.
Кольцо долейДоля каждой категории в общей сумме всех категорий за период; всё, что не помещается в заданное число, собирается в «Прочие».
Карточки KPIДо шести карточек с текущим значением и изменением в процентах к прошлому периоду.
Выполнение планаФакт против общего плана или столбца плана с процентом выполнения, в том числе выше 100 %.
Тепловая карта по времениСетка «категории × периоды», которая заполняется до текущего периода. По умолчанию пропущенные ячейки остаются пустыми; можно выбрать другое правило — повторить последнее значение или показать ноль.
Пузырьковая диаграммаСтолбец значений — по вертикальной оси, второй столбец — по горизонтальной, третий задаёт площадь круга.
Каскадная диаграммаВклады со знаком в порядке файла, которые складываются в итог, — например, факторный анализ прибыли.
Структура по периодамПо одному столбику 100 % на период, чтобы сравнить структуру сразу за несколько периодов.
3D-столбцыСтолбцы на освещённой 3D-сцене, по желанию с медленным облётом камеры. Нужна графика WebGL 2.

Подготовка данных: периоды, повторы и пропуски

  • Порядок периодов. Автоматический порядок один раз проверяет весь столбец времени: если все периоды — числа, сортировка идёт по числу; иначе, если все периоды — даты вида 2024, 2024-03, 2024-03-31 или 2024-Q1, — по дате; в остальных случаях все периоды сортируются как текст в естественном порядке, поэтому week 10 идёт после week 9. Столбец, где перемешаны числа, даты и текст, не сортируется по типу каждой ячейки отдельно. Можно и сохранить порядок из файла. Несуществующие даты вроде 2023-02-29 при порядке по дате отклоняются.
  • Повторяющиеся строки. Если одна и та же пара «период — категория» встречается несколько раз, видео не строится, и инструмент сообщает, сколько пар повторяется. Выберите: сложить, взять среднее, наименьшее, наибольшее или последнюю строку. Молча ничего не объединяется.
  • Пропущенные значения. По умолчанию пропущенный период остаётся пропуском: столбика или линии в этом периоде нет. Можно повторить последнее известное значение или показать ноль — тогда видео сообщает об этом в строке состояния. Назад значения не подставляются никогда.
  • Индекс и рост. Индекс делит значения на первое ненулевое значение категории (= 100); у ряда, который начинается ниже нуля, осмысленного индекса нет, и он остаётся пустым. Рост сравнивает каждый период с непосредственно предыдущим; после пустого или нулевого периода он остаётся пустым.

Подписи берутся в точности как записаны: North и North — две разные категории. Сам CSV никогда не меняется.

Как читаются и показываются числа

Значение используется, только если вся ячейка — простое число, например 1200, -4.5 или 3e5, с выбранным десятичным разделителем. Ячейки с единицами, знаками валют или разделителями разрядов (1,200), а также числа, которые тип double не может хранить точно, пропускаются и подсчитываются в предупреждении, но никогда не рисуются как ноль.

Между двумя периодами движение — линейное смешение двух реальных значений, и строка состояния пишет, между какими периодами идёт переход. Промежуточные кадры — не данные. Таблица значений показывает ровно то, что в текущем кадре; вместе со строкой состояния она подсказывает, что это за кадр: реальный период, смешение двух периодов или кадр со значениями, подставленными по правилу для пропусков. Числа в видео оформлены по правилам вашего языка с выбранным числом знаков после запятой; доли и выполнение плана показаны в процентах. Если расчёт даёт числа, которые нельзя надёжно нарисовать, инструмент так и сообщает, а не рисует сломанную диаграмму.

Скачивание видео, GIF и PNG

MP4 и WebMДоступны, только если этот браузер умеет их создавать. Где есть WebCodecs, кадры кодируются по одному в точные моменты времени, так что видео плавное на любом устройстве. Иначе браузер записывает анимацию в реальном времени, и вкладка должна оставаться на переднем плане.
Анимированный GIF10 кадров в секунду, 640 пикселей по длинной стороне, не дольше 30 секунд.
PNGКадр в текущей точке шкалы времени, в полном размере видео.
Размеры16:9, 1:1 или 9:16 в 720p или 1080p, от 2 до 60 секунд, 24, 30 или 60 кадров в секунду. Один файл — до 64 МБ.

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

Ограничения и конфиденциальность

Видео может показать до 500 периодов, 200 категорий и 100 000 ячеек «период × категория» из файла до 25 МБ, 100 000 строк или 2 миллионов ячеек. Если файл больше, сначала отфильтруйте строки или сведите их в сводную таблицу. Для статичной диаграммы воспользуйтесь инструментом Диаграммы из CSV.

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

Пример: выручка по регионам в виде гонки столбцов

Длинная таблица, по строке на квартал и регион. Если выбрать время quarter, категорию region и значение revenue, в каждом кадре гонки будет три столбика. Для West за 2024-Q2 значения нет, и оно остаётся пропуском: в этом периоде у West нет столбика.

CSV
quarter,region,revenue
2024-Q1,North,52
2024-Q1,South,33
2024-Q1,West,69
2024-Q2,North,64
2024-Q2,South,54
2024-Q3,North,76
2024-Q3,South,75
2024-Q3,West,77
Временной ряд, по которому строится видео
{
  "periods": ["2024-Q1", "2024-Q2", "2024-Q3"],
  "series": {
    "North": [52, 64, 76],
    "South": [33, 54, 75],
    "West": [69, null, 77]
  },
  "missing": 1
}

Вопросы и ответы

Почему нельзя выбрать MP4?

Не каждый браузер умеет создавать файлы MP4. В списке форматов только то, что этот браузер действительно может закодировать; GIF и PNG работают всегда. Для MP4 попробуйте актуальную версию Chrome, Edge или Safari.

У меня отдельный столбец на каждую страну. Это подойдёт?

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

Почему в некоторых периодах нет столбика?

У этой категории в данном периоде нет простого числа, поэтому там пропуск. Если это подходит для ваших данных, выберите в поле «Пропущенные значения» вариант «Повторить последнее известное значение» или «Показать как ноль» либо исправьте ячейки в редакторе CSV.

Стандарты и справочные материалы