Использование 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)
Нужна помощь с графиками? Свяжитесь с нами.