Использование Vega-Lite и таблиц Google

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

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

Организовать

Сначала давайте настроим таблицу Google для наших диаграмм:

Визуализировать

Затем нам нужен способ указать наши диаграммы и отрендерить их. Vega-Lite - это мощная грамматика визуализации, подходящая для работы и способная рендерить на холст и в SVG. Хорошие примеры и учебные пособия доступны от созданной им команды, возглавляемой Лабораторией интерактивных данных Вашингтонского университета.

Сервер

Затем мы хотим соединить эти две системы. Мы создаем небольшой веб-сервер node.js для рендеринга спецификаций Vega-Lite в SVG.

В нашей электронной таблице нам понадобится помощник по кодированию URI. В Инструменты → Редактор скриптов необходимо добавить следующую функцию:

function URI_ENCODE(value) { return encodeURIComponent(value); }

Затем добавьте следующую формулу в выходной столбец:

=IMAGE(CONCATENATE("https://example.com/VegaLite?spec=", URI_ENCODE(C2)))

Не забудьте заменить example.com на хост своего сервера.

Протестируйте его с образцом спецификации Vega-Lite:

Исследовать

Теперь, когда у нас есть основы, мы можем приступить к изучению данных. Спецификации Vega могут загружать данные с любого URL-адреса, доступного среде выполнения.

Как выйти за рамки нескольких графиков

Абстрактный

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

Измените формулу вывода, включив в нее тип:

=IMAGE(CONCATENATE("https://example.com/", C2, "?spec=", URI_ENCODE(D2)))

Затем расширьте сервер типами:

Наши типы - это простые функции JavaScript, которые преобразуют нашу спецификацию в полную спецификацию Vega. VegaLite становится лишь одним из поддерживаемых нами типов, который может, но не обязательно, использоваться другими типами.

Теперь мы можем использовать наш новый тип DemographicBar и упростить нашу спецификацию в электронной таблице:

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

Код и примеры

Есть также общедоступная таблица площадок, если вы хотите поэкспериментировать.

Что дальше?

  • Управляйте своими данными
    Перемещайте файлы данных, не соответствующие спецификациям, в систему управления версиями.
  • Нормализуйте данные
    Заранее нормализовав данные, вы можете упростить спецификации.
  • Уточните свои диаграммы
    Как только вы выберете несколько типов диаграмм с четко определенными переменными, их станет легко разрабатывать и внедрять.
  • Интерактивная визуализация диаграмм в браузере
    Делитесь определениями типов в браузере и визуализируйте их с помощью среды выполнения Vega или реализуйте собственные адаптивные компоненты диаграмм с нуля (с помощью React)

Нужна помощь с графиками? Свяжитесь с нами.