Полосы потепления
«Полосы потепления» (также называемые климатическими полосами, климатическими временными шкалами или полосовой графикой) — графика, где последовательность цветных полос в хронологическом порядке показывает долгосрочное изменение температуры. Этот минималистичный подход использует только цвет, чтобы тенденция глобального потепления была интуитивно понятна неспециалистам без отвлекающих технических подробностей. Идею предложил климатолог Эд Хокинс.
Автор примера на Vega — Анджей Лешкевич (@avatorl).
В этой версии есть легенда и интерактивная подсветка: наведите указатель на полосу, чтобы выделить её. Деление слева от легенды показывает температуру выбранного года; когда указатель не находится над полосой, отображается 0 °C.
Спецификация Vega в JSON <>
{
"$schema": "https://vega.github.io/schema/vega/v6.json",
"description": "Диаграмма полос потепления по замыслу Эда Хокинса.",
"usermeta": {
"Author": "Andrzej Leszkiewicz",
"Github": "https://github.com/avatorl/Deneb-Vega/",
"License": "CC BY 4.0 (Share and Adapt with Attribution)",
"Original Idea Author": "Ed Hawkins",
"Original Idea URL": "https://www.climate-lab-book.ac.uk/2018/warming-stripes/",
"Read More URL": "https://en.wikipedia.org/wiki/Warming_stripes",
"Data Source URL": "https://climate.nasa.gov/vital-signs/global-temperature/"
},
"background": "white",
"width": 650,
"height": 200,
"padding": 10,
"autosize": "pad",
"config": {},
"signals": [
{"name": "fontMain", "value": "Tahoma"},
{"name": "labelColor", "value": "#808080"},
{"name": "labelDataSrcColor", "value": "#CCCCCC"},
{"name": "basePeriodColor", "value": "black"},
{"name": "titleFontSize", "value": "16"},
{"name": "labelFontSizeMajor", "value": "20"},
{"name": "labelFontSizeMinor", "value": "14"},
{"name": "legendFontSize", "value": "12"},
{"name": "labelDataSrcFontSize", "value": "12"},
{"name": "basePeriodS", "value": "1951"},
{"name": "basePeriodE", "value": "1980"},
{
"name": "selectedStripeTemp",
"description": "Температура выбранного года (полосы), показанная отметкой на легенде.",
"value": "0",
"on": [
{"events": "@stripe:pointerover", "update": "datum.temp"},
{"events": "@stripe:pointerout", "update": "0"}
]
}
],
"data": [
{
"name": "dataset",
"url": "data/global-temp.csv",
"format": {"type": "csv", "parse": "auto", "delimiter": ","}
}
],
"scales": [
{
"name": "scaleX",
"type": "linear",
"domain": {"data": "dataset", "field": "year"},
"range": [0, {"signal": "width"}],
"zero": false
},
{
"name": "scaleY",
"type": "point",
"domain": [1],
"range": [0, {"signal": "height"}]
},
{
"name": "scaleYForLegendTick",
"type": "linear",
"domain": {"data": "dataset", "field": "temp"},
"range": [0, {"signal": "height"}],
"zero": false,
"reverse": true
},
{
"name": "colorHawkins",
"type": "linear",
"range": {
"scheme": [
"#67000D",
"#A50F15",
"#CB181D",
"#EF3B2C",
"#FB6A4A",
"#FC9272",
"#FCBBA1",
"#FEE0D2",
"#FFFFFF",
"#DEEBF7",
"#C6DBEF",
"#9ECAE1",
"#6BAED6",
"#4292C6",
"#2171B5",
"#08519C",
"#08306B"
]
},
"domain": {"data": "dataset", "field": "temp"},
"reverse": true,
"domainMid": 0
}
],
"title": {
"text": {
"signal": "'Глобальная температура в 1880–2021 годах (относительно среднего за '+ basePeriodS+'–'+basePeriodE+' годы)'"
},
"anchor": "start",
"font": {"signal": "fontMain"},
"fontSize": {"signal": "titleFontSize"},
"fontWeight": "lighter",
"subtitle": "Воссоздание полос потепления, предложенных Эдом Хокинсом",
"subtitlePadding": 5
},
"axes": [
{
"scale": "scaleX",
"orient": "bottom",
"domain": false,
"tickCount": {"signal": "5"},
"labelColor": {"signal": "labelColor"},
"format": ".4",
"encode": {
"ticks": {"update": {"y": {"value": -3}}},
"labels": {
"update": {
"y": {"value": 8},
"fontSize": {
"signal": "(datum.value==1900||datum.value==2000)?labelFontSizeMajor:labelFontSizeMinor"
}
}
}
}
},
{
"scale": "scaleX",
"orient": "top",
"domain": true,
"tickCount": {"signal": "length(data('dataset'))"},
"labelFontSize": {"signal": "0"},
"format": ".4",
"encode": {
"ticks": {
"enter": {
"stroke": {"signal": "basePeriodColor"},
"strokeWidth": {
"signal": "(datum.value==basePeriodS||datum.value==basePeriodE)?1:0"
}
}
},
"labels": {
"enter": {"fill": {"signal": "basePeriodColor"}},
"update": {
"fontSize": {
"signal": "(datum.value==basePeriodS||datum.value==basePeriodE)?labelFontSizeMinor:0"
}
}
},
"domain": {
"enter": {"stroke": {"signal": "basePeriodColor"}},
"update": {
"x": {"scale": "scaleX", "signal": "basePeriodS"},
"x2": {"scale": "scaleX", "signal": "basePeriodE"},
"strokeWidth": {"signal": "0.9"}
}
}
}
},
{
"scale": "scaleYForLegendTick",
"orient": "right",
"domain": false,
"labels": false,
"ticks": true,
"tickColor": "black",
"offset": 45,
"encode": {
"ticks": {
"update": {
"x": {"value": -7},
"x2": {"value": 13},
"y": {
"scale": "scaleYForLegendTick",
"signal": "selectedStripeTemp"
},
"strokeWidth": {"signal": "datum.value==0?0.5:0"}
}
}
}
}
],
"legends": [
{
"fill": "colorHawkins",
"orient": "none",
"legendX": {"signal": "width+40"},
"legendY": -40,
"padding": 20,
"title": "°C",
"titleColor": "gray",
"tickCount": 10,
"tickMinStep": 0.2,
"titleFontSize": {"signal": "labelFontSizeMinor"},
"encode": {
"labels": {
"enter": {
"dx": {"value": 3},
"fontSize": {"signal": "legendFontSize"},
"fill": {"signal": "labelColor"}
},
"update": {
"text": {
"signal": "(datum.value>0?'+':datum.value==0?'':'')+datum.label"
}
}
}
}
}
],
"marks": [
{
"name": "stripe",
"type": "rect",
"interactive": true,
"from": {"data": "dataset"},
"encode": {
"update": {
"fill": {"scale": "colorHawkins", "field": "temp"},
"opacity": {"value": 1},
"height": {"signal": "height*0.92"},
"width": {"signal": "4.0"},
"stroke": {"value": "gray"},
"strokeWidth": {"value": 0},
"xc": {"scale": "scaleX", "field": "year"},
"yc": {"scale": "scaleY", "value": 1},
"tooltip": {
"signal": "datum.year+': '+(datum.temp>0?'+':'')+datum.temp+'°C'"
}
},
"hover": {
"y": {"value": 3},
"height": {"signal": "height*0.92+10"},
"width": {"signal": "4.2"},
"strokeWidth": {"value": 0.05}
}
}
},
{
"name": "labelDataSource",
"type": "text",
"encode": {
"enter": {
"fill": {"signal": "labelDataSrcColor"},
"text": {"value": "Источник данных: NASA"}
},
"update": {
"opacity": {"value": 1},
"x": {"signal": "width"},
"y": {"signal": "height+50"},
"fontSize": {"signal": "labelDataSrcFontSize"}
}
}
}
]
}