В приведенном ниже примере Vega-Lite я настроил цветовую шкалу в кодировке, чтобы она представляла собой диапазон красного, белого и зеленого. Однако я хотел бы изменить способ привязки шкалы к значениям. Например, значения между минимальным значением и 16 изменятся с красного на белый (стиль тепловой карты), а затем значения между 16 и максимальным значением изменятся с белого на зеленый.
Я также включил скриншот того, чего я пытаюсь достичь. Спасибо за любую помощь!
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"url": "data/seattle-weather.csv"
},
"title": "Daily Max Temperatures (C) in Seattle, WA",
"config": {
"view": {
"strokeWidth": 0,
"step": 13
},
"axis": {
"domain": false
}
},
"mark": "rect",
"encoding": {
"x": {
"field": "date",
"timeUnit": "date",
"type": "ordinal",
"title": "Day",
"axis": {
"labelAngle": 0,
"format": "%e"
}
},
"y": {
"field": "date",
"timeUnit": "month",
"type": "ordinal",
"title": "Month"
},
"color": {
"field": "temp_max",
"aggregate": "max",
"type": "quantitative",
"scale": {
"range": [
"red",
"white",
"green"
]
},
"legend": {
"title": null
}
}
}
}
Привет, Дэвид, извини за это, я только что отредактировал, чтобы попытаться дать рабочий пример в контексте стандартной тепловой карты для простоты. Спасибо!
Я опубликую ответ.
Вы имеете в виду что-то вроде этого? Вы можете настроить границы градиента, используя domainMin, Mid и Max.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "data/seattle-weather.csv"},
"title": "Daily Max Temperatures (C) in Seattle, WA",
"config": {"view": {"strokeWidth": 0, "step": 13}, "axis": {"domain": false}},
"mark": "rect",
"encoding": {
"x": {
"field": "date",
"timeUnit": "date",
"type": "ordinal",
"title": "Day",
"axis": {"labelAngle": 0, "format": "%e"}
},
"y": {
"field": "date",
"timeUnit": "month",
"type": "ordinal",
"title": "Month"
},
"color": {
"field": "temp_max",
"aggregate": "max",
"type": "quantitative",
"scale": {
"range": ["red", "white", "green"],
"interpolate": "cubehelix",
"domainMax": 40,
"domainMid": 16,
"domainMin": 0
},
"legend": {"title": null}
}
}
}
ВАУ, не знал, что можно так манипулировать значениями домена в свойствах шкалы. Но теперь, конечно, когда я оглядываюсь назад на вега-лайт документацию, это действительно говорит об этом, полностью пропущено. Спасибо, Давид!!
Если вам нужно больше контроля, вы также можете установить границы корзины.
Пожалуйста, поделитесь полной рабочей спецификацией и желаемым результатом.