Годовая температура
Набор небольших диаграмм с областями показывает среднюю суточную температуру в Сиэтле для каждого часа дня. Другой способ представить те же данные с помощью цвета показан в примере тепловой карты.
Спецификация Vega в JSON <>
{
"$schema": "https://vega.github.io/schema/vega/v6.json",
"description": "Диаграммы с областями показывают среднюю суточную температуру в Сиэтле для каждого часа дня.",
"width": 800,
"padding": 5,
"config": {
"title": {"fontSize": 14}
},
"title": {
"text": "Температура в Сиэтле в течение года",
"anchor": "start", "offset": 4
},
"signals": [
{"name": "rangeStep", "value": 25},
{"name": "height", "update": "rangeStep * 24"}
],
"data": [
{
"name": "temperature",
"url": "data/seattle-weather-hourly-normals.csv",
"format": {"type": "csv", "parse": {"temperature": "number", "date": "date"}},
"transform": [
{"type": "formula", "as": "hour", "expr": "hours(datum.date)"},
{ "type": "formula", "as": "date",
"expr": "datetime(year(datum.date), month(datum.date), date(datum.date))"}
]
}
],
"scales": [
{
"name": "row",
"type": "band",
"domain": [
6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
0, 1, 2, 3, 4, 5
],
"range": {"step": {"signal": "rangeStep"}}
},
{
"name": "x",
"type": "time",
"domain": {"data": "temperature", "field": "date"},
"range": "width"
},
{
"name": "y",
"type": "linear", "zero": false,
"domain": {"data": "temperature", "field": "temperature"},
"range": [{"signal": "rangeStep"}, 1]
}
],
"axes": [
{"orient": "bottom", "scale": "x", "domain": false, "title": "Месяц", "format": "%b"},
{
"orient": "left", "scale": "row", "domain": false, "title": "Час",
"tickSize": 0,
"encode": {
"labels": {
"update": {
"text": {"signal": "datum.value === 0 ? 'Полночь' : datum.value === 12 ? 'Полдень' : datum.value < 12 ? datum.value + ':00 до полудня' : (datum.value - 12) + ':00 после полудня'"}
}
}
}
}
],
"marks": [
{
"type": "group",
"from": {
"facet": {
"name": "hour",
"data": "temperature",
"groupby": "hour"
}
},
"encode": {
"enter": {
"x": {"value": 0},
"y": {"scale": "row", "field": "hour"},
"width": {"signal": "width"},
"height": {"signal": "rangeStep"}
}
},
"marks": [
{
"type": "area",
"from": {"data": "hour"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "date"},
"y": {"scale": "y", "field": "temperature"},
"y2": {"signal": "rangeStep"}
}
}
}
]
}
]
}