Автор оригинала: Déborah Mesquita.
Вега это инструмент, который вводит визуальную грамматику для создания и манипулирования визуальными элементами. В этой статье вы узнаете, как отправиться от идеи интерактивным графом с Vega. Вы указываете руководящие директивы в файле JSON, а в этом руководстве вы узнаете, как создать график временной шкалы с помощью редактора Vega.
Достаточно сказано, давайте начнем!
Шаг 1 – Нарисуйте график вручную
Да, вы прочитали это правильно. Просто возьмите кусок бумаги и нарисуйте график, который вы хотите построить. Сегодня вы построить график, как это:
Шаг 2 – Разбивайте элементы вашего графика
Теперь вы перечислите каждый элемент, который вы видите на своем рисунке. Это элементы вышеуказанного изображения:
- прямоугольники для каждого элемента
- текст для каждого элемента
- линия от прямоугольника до оси x
- ось X
Шаг 3 – Определите, как будет установлен основной элемент графика на экране
Основные элементы временной шкалы являются прямоугольники Отказ Они будут размещены на экране Согласно году товара Отказ
Шаг 4 – Определите ваши данные и загрузите его в Vega
Это где вы начнете кодировать. Поскольку прямоугольники будут размещены в соответствии с годом, данные будут выглядеть так:
{"name":"vega", "release":"2013"},
{"name":"d3","release":"2011",
{"name":"plotly","release":"2012"}
Теперь вы откроете редактор Vega: https://vega.github.io/editor/#/ Отказ Вы помещаете код на левую панель. Мы будем использовать VEGA вместо Vega-Lite, поэтому не забудьте изменить спецификацию там в верхнем левом углу.
Во-первых и размер графика с использованием параметров «WITDH» и «высота». Затем добавьте данные, используя «Данные» Параметр (обратите внимание на другие параметры, такие как «тип» данных и как мы разбираем даты):
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 600,
"height": 200,
"data":[
{ "name": "visualization_libraries",
"format": {
"type": "json",
"parse": {
"release": "date:'%Y'"
}
},
"values": [
{"name":"vega", "release":"2013"},
{"name":"d3","release":"2011"},
{"name":"plotly","release":"2012"}
]
}
]
}
Шаг 5 – Создайте масштаб для размещения основного элемента графика
Вы создадите масштаб для размещения прямоугольников. Чтобы сделать это, вы будете использовать «Весы» параметр. Вы назовете его «x_scale», и это будет масштаб времени. В «домене» вы определяете, откуда придет данные, а в «диапазоне» вы определяете минимальные и максимальные значения, которые появятся на экране.
"scales": [
{
"name": "x_scale",
"type": "time",
"domain": {"data": "visualization_libraries","field": "release"},
"range": [0, 600],
"nice": "year"
}
]
Шаг 6 – Поместите основной элемент графа на экран
Время разместить прямоугольники. Вы сделаете это, используя «Марки» Параметр, определяющий тип как «прямо» и использование X_SCALE для размещения их:
"marks":[
{
"type": "rect",
"name": "rectangles",
"from": {"data": "visualization_libraries"},
"encode": {
"enter": {
"width": {"value": 60},
"height": {"value": 20},
"x": {
"signal": "scale('x_scale', datum.release)"
},
"y": {"value": 10}
}
}
}
]
Шаг 7 – Добавьте другие элементы
Вам все еще нужно добавить эти элементы:
- прямоугольники для каждого элемента
- текст для каждого элемента
- линия от прямоугольника до оси x
- ось X
Сначала вы добавите текст. С Vega вы также можете использовать данные с других знаков, поэтому на этот раз вы будете использовать данные из «прямоугольников» вместо «Visualization_Libraries», потому что таким образом вы можете просто получить значение X из прямоугольника вместо вычисления значения от Шкала снова:
{
"type": "text",
"name": "labels",
"from": {"data": "rectangles"},
"encode": {
"enter": {
"text": {"signal": "datum.datum.name"},
"x": {
"signal": "datum.x+30"
},
"y": {"value": 20},
"align": {"value": "center"},
"baseline": {"value": "middle"},
"fontWeight": {"value": "bold"},
"fill": {"value": "black"}
}
}
}
Теперь добавьте строки. На этот раз используя данные из “этикеток”:
{
"type": "rule",
"name": "lines",
"from": {"data": "labels"},
"encode": {
"enter": {
"x": {"signal": "datum.x"},
"x2": {"signal": "datum.x"},
"y": {"signal": "datum.y+10"},
"y2": {"signal": "height"}
}
}
}
И, наконец, поместите ось, используя параметр «Оси»:
"axes":[
{
"scale": "xScale",
"orient": "bottom",
"format": "%b/%Y"
}
]
И вы сделали!
Вы можете проверить весь код Вот в этом весте Отказ
В этом быстром руководстве вы узнали несколько концепций Vega, но есть гораздо больше, чтобы учиться. Хороший способ исследовать и глубоко погружаться, чтобы проверить примеры: https://vega.github.io/vega/examples/
Спасибо за прочтение!