New Example chart: Area chart with zones colors #9495
Description
Just wanted to share a new example chat that we could add to the example page.
Let me know if I should submit this in a different way.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"title": "Today's workout: heart rate.",
"data": {
"values": [
{"x": 0, "y": 85},
{"x": 1, "y": 85},
{"x": 2, "y": 87},
{"x": 3, "y": 79},
{"x": 4, "y": 85},
{"x": 5, "y": 83},
{"x": 6, "y": 80},
{"x": 7, "y": 77},
{"x": 8, "y": 83},
{"x": 9, "y": 79},
{"x": 10, "y": 71},
{"x": 11, "y": 95},
{"x": 12, "y": 77},
{"x": 13, "y": 89},
{"x": 14, "y": 95},
{"x": 15, "y": 93},
{"x": 16, "y": 90},
{"x": 17, "y": 97},
{"x": 18, "y": 93},
{"x": 19, "y": 89},
{"x": 20, "y": 99},
{"x": 21, "y": 105},
{"x": 22, "y": 107},
{"x": 23, "y": 109},
{"x": 24, "y": 105},
{"x": 25, "y": 103},
{"x": 26, "y": 100},
{"x": 27, "y": 107},
{"x": 28, "y": 103},
{"x": 29, "y": 119},
{"x": 30, "y": 111},
{"x": 31, "y": 135},
{"x": 32, "y": 137},
{"x": 33, "y": 139},
{"x": 34, "y": 135},
{"x": 35, "y": 133},
{"x": 36, "y": 130},
{"x": 37, "y": 137},
{"x": 38, "y": 133},
{"x": 39, "y": 139},
{"x": 40, "y": 151},
{"x": 41, "y": 155},
{"x": 42, "y": 157},
{"x": 43, "y": 159},
{"x": 44, "y": 155},
{"x": 45, "y": 153},
{"x": 46, "y": 150},
{"x": 47, "y": 157},
{"x": 48, "y": 153},
{"x": 49, "y": 159},
{"x": 50, "y": 170},
{"x": 51, "y": 165},
{"x": 52, "y": 177},
{"x": 53, "y": 179},
{"x": 54, "y": 185},
{"x": 55, "y": 183},
{"x": 56, "y": 188},
{"x": 57, "y": 197},
{"x": 58, "y": 193},
{"x": 59, "y": 205},
{"x": 60, "y": 191},
{"x": 61, "y": 185},
{"x": 62, "y": 187},
{"x": 63, "y": 189},
{"x": 64, "y": 185},
{"x": 65, "y": 183},
{"x": 66, "y": 180},
{"x": 67, "y": 187},
{"x": 68, "y": 183},
{"x": 69, "y": 179},
{"x": 70, "y": 161},
{"x": 71, "y": 165},
{"x": 72, "y": 157},
{"x": 73, "y": 159},
{"x": 74, "y": 155},
{"x": 75, "y": 153},
{"x": 76, "y": 150},
{"x": 77, "y": 157},
{"x": 78, "y": 153},
{"x": 79, "y": 159},
{"x": 80, "y": 160}
]
},
"transform": [
{"calculate": "0", "as": "min"},
{"calculate": "90", "as": "L1"},
{"calculate": "143", "as": "L2"},
{"calculate": "166", "as": "L3"},
{"calculate": "181", "as": "L4"},
{"calculate": "200", "as": "L5"},
{"calculate": "220", "as": "max"}
],
"params": [
{"name": "min", "expr": "data('data_0')[0]['min']"},
{"name": "L0", "expr": "data('data_0')[0]['L0']"},
{"name": "L1", "expr": "data('data_0')[0]['L1']"},
{"name": "L2", "expr": "data('data_0')[0]['L2']"},
{"name": "L3", "expr": "data('data_0')[0]['L3']"},
{"name": "L4", "expr": "data('data_0')[0]['L4']"},
{"name": "L5", "expr": "data('data_0')[0]['L5']"},
{"name": "max", "expr": "data('data_0')[0]['max']"}
],
"spacing": -1,
"vconcat": [
{
"height": 80,
"width": 200,
"layer": [
{
"mark": {
"type": "line",
"color": "#5c5c5c",
"clip": true,
"interpolate": "monotone"
},
"encoding": {
"x": {
"field": "x",
"type": "quantitative",
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
},
"y": {
"field": "y",
"type": "quantitative",
"scale": {"domain": {"expr": "[min,max]"}, "nice": false},
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
}
]
},
{
"height": 80,
"width": 600,
"layer": [
{
"mark": {
"type": "line",
"align": "left",
"baseline": "top",
"font": "Arial",
"fontSize": 13,
"color": "black",
"size": 1,
"strokeDash": [2, 2]
},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {
"field": "max",
"type": "quantitative",
"scale": {"domain": {"expr": "[L5,max]"}},
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
},
{
"mark": {
"type": "line",
"color": "black",
"clip": true,
"interpolate": "monotone"
},
"encoding": {
"x": {
"field": "x",
"type": "quantitative",
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
},
"y": {
"field": "y",
"type": "quantitative",
"scale": {"domain": {"expr": "[L5,max]"}, "nice": false},
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
},
{
"mark": {
"type": "area",
"color": "black",
"opacity": 0.5,
"clip": true,
"interpolate": "monotone"
},
"encoding": {
"x": {
"field": "x",
"type": "quantitative",
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
},
"y": {
"field": "y",
"type": "quantitative",
"scale": {"domain": {"expr": "[L5,max]"}, "nice": false},
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
},
{
"transform": [
{"filter": "datum.x == 0"},
{
"calculate": "'Zone 6 (*pain): ' + format(datum.L5 , '.0f') + ' ~ ' + format(datum.max , '.0f')",
"as": "zone_desc"
}
],
"mark": {
"type": "text",
"align": "left",
"baseline": "top",
"dy": 10,
"dx": 5,
"font": "Arial",
"fontSize": 13,
"color": "#5c5c5c"
},
"encoding": {
"text": {"field": "zone_desc", "type": "nominal"},
"x": {"field": "x", "type": "quantitative"},
"y": {
"field": "max",
"type": "quantitative",
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
}
]
},
{
"height": 80,
"width": 600,
"layer": [
{
"mark": {
"type": "line",
"align": "left",
"baseline": "top",
"font": "Arial",
"fontSize": 13,
"color": "red",
"size": 1,
"strokeDash": [2, 2]
},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {
"field": "L5",
"type": "quantitative",
"scale": {"domain": {"expr": "[L4,L5]"}},
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
},
{
"mark": {
"type": "line",
"color": "red",
"clip": true,
"interpolate": "monotone"
},
"encoding": {
"x": {
"field": "x",
"type": "quantitative",
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
},
"y": {
"field": "y",
"type": "quantitative",
"scale": {"domain": {"expr": "[L4,L5]"}, "nice": false},
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
},
{
"mark": {
"type": "area",
"color": "red",
"opacity": 0.5,
"clip": true,
"interpolate": "monotone"
},
"encoding": {
"x": {
"field": "x",
"type": "quantitative",
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
},
"y": {
"field": "y",
"type": "quantitative",
"scale": {"domain": {"expr": "[L4,L5]"}, "nice": false},
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
},
{
"transform": [
{"filter": "datum.x == 0"},
{
"calculate": "'Zone 5: ' + format(datum.L4 , '.0f') + ' ~ ' + format(datum.L5 , '.0f')",
"as": "zone_desc"
}
],
"mark": {
"type": "text",
"align": "left",
"baseline": "top",
"dy": 10,
"dx": 5,
"font": "Arial",
"fontSize": 13,
"color": "#5c5c5c"
},
"encoding": {
"text": {"field": "zone_desc", "type": "nominal"},
"x": {"field": "x", "type": "quantitative"},
"y": {
"field": "L5",
"type": "quantitative",
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
}
]
},
{
"height": 80,
"width": 600,
"layer": [
{
"mark": {
"type": "line",
"align": "left",
"baseline": "top",
"font": "Arial",
"fontSize": 13,
"color": "orange",
"size": 1,
"strokeDash": [2, 2]
},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {
"field": "L4",
"type": "quantitative",
"scale": {"domain": {"expr": "[L3,L4]"}},
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
},
{
"mark": {
"type": "line",
"color": "orange",
"clip": true,
"interpolate": "monotone"
},
"encoding": {
"x": {
"field": "x",
"type": "quantitative",
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
},
"y": {
"field": "y",
"type": "quantitative",
"scale": {"domain": {"expr": "[L3,L4]"}, "nice": false},
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
},
{
"mark": {
"type": "area",
"color": "orange",
"opacity": 0.5,
"clip": true,
"interpolate": "monotone"
},
"encoding": {
"x": {
"field": "x",
"type": "quantitative",
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
},
"y": {
"field": "y",
"type": "quantitative",
"scale": {"domain": {"expr": "[L3,L4]"}, "nice": false},
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
},
{
"transform": [
{"filter": "datum.x == 0"},
{
"calculate": "'Zone 4: ' + format(datum.L3 , '.0f') + ' ~ ' + format(datum.L4 , '.0f')",
"as": "zone_desc"
}
],
"mark": {
"type": "text",
"align": "left",
"baseline": "top",
"dy": 10,
"dx": 5,
"font": "Arial",
"fontSize": 13,
"color": "#5c5c5c"
},
"encoding": {
"text": {"field": "zone_desc", "type": "nominal"},
"x": {"field": "x", "type": "quantitative"},
"y": {
"field": "L4",
"type": "quantitative",
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
}
]
},
{
"height": 80,
"width": 600,
"layer": [
{
"mark": {
"type": "line",
"align": "left",
"baseline": "top",
"font": "Arial",
"fontSize": 13,
"color": "#afac0b",
"size": 1,
"clip": true,
"strokeDash": [2, 2]
},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {
"field": "L3",
"type": "quantitative",
"scale": {"domain": {"expr": "[L2,L3]"}},
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
},
{
"mark": {
"type": "line",
"color": "#afac0b",
"clip": true,
"interpolate": "monotone"
},
"encoding": {
"x": {
"field": "x",
"type": "quantitative",
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
},
"y": {
"field": "y",
"type": "quantitative",
"scale": {"domain": {"expr": "[L2,L3]"}},
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
},
{
"mark": {
"type": "area",
"color": "#e4e116",
"opacity": 0.5,
"clip": true,
"interpolate": "monotone"
},
"encoding": {
"x": {
"field": "x",
"type": "quantitative",
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
},
"y": {
"field": "y",
"type": "quantitative",
"scale": {"domain": {"expr": "[L2,L3]"}},
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
},
{
"transform": [
{"filter": "datum.x == 0"},
{
"calculate": "'Zone 3: ' + format(datum.L2 , '.0f') + ' ~ ' + format(datum.L3 , '.0f')",
"as": "zone_desc"
}
],
"mark": {
"type": "text",
"align": "left",
"baseline": "top",
"dy": 10,
"dx": 5,
"font": "Arial",
"fontSize": 13,
"color": "#5c5c5c"
},
"encoding": {
"text": {"field": "zone_desc", "type": "nominal"},
"x": {"field": "x", "type": "quantitative"},
"y": {
"field": "L3",
"type": "quantitative",
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
}
]
},
{
"height": 80,
"width": 600,
"layer": [
{
"mark": {
"type": "line",
"align": "left",
"baseline": "top",
"font": "Arial",
"fontSize": 13,
"color": "#19be0d",
"size": 1,
"strokeDash": [2, 2]
},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {
"field": "L2",
"type": "quantitative",
"scale": {"domain": {"expr": "[L1,L2]"}},
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
},
{
"mark": {
"type": "line",
"color": "#19be0d",
"clip": true,
"interpolate": "monotone"
},
"encoding": {
"x": {
"field": "x",
"type": "quantitative",
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
},
"y": {
"field": "y",
"type": "quantitative",
"scale": {"domain": {"expr": "[L1,L2]"}, "nice": false},
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
},
{
"mark": {
"type": "area",
"color": "#19be0d",
"opacity": 0.5,
"clip": true,
"interpolate": "monotone"
},
"encoding": {
"x": {
"field": "x",
"type": "quantitative",
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
},
"y": {
"field": "y",
"type": "quantitative",
"scale": {"domain": {"expr": "[L1,L2]"}, "nice": false},
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
},
{
"transform": [
{"filter": "datum.x == 0"},
{
"calculate": "'Zone 2: ' + format(datum.L1 , '.0f') + ' ~ ' + format(datum.L2 , '.0f')",
"as": "zone_desc"
}
],
"mark": {
"type": "text",
"align": "left",
"baseline": "top",
"dy": 10,
"dx": 5,
"font": "Arial",
"fontSize": 13,
"color": "#5c5c5c"
},
"encoding": {
"text": {"field": "zone_desc", "type": "nominal"},
"x": {"field": "x", "type": "quantitative"},
"y": {
"field": "L2",
"type": "quantitative",
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
}
]
},
{
"height": 80,
"width": 600,
"layer": [
{
"mark": {
"type": "line",
"align": "left",
"baseline": "top",
"font": "Arial",
"fontSize": 13,
"color": "#0d8de2",
"size": 1,
"strokeDash": [2, 2]
},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {
"field": "L1",
"type": "quantitative",
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
},
{
"mark": {
"type": "line",
"color": "#0d8de2",
"clip": true,
"interpolate": "monotone"
},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {
"field": "y",
"type": "quantitative",
"scale": {"domain": {"expr": "[min,L1]"}, "nice": false},
"axis": {"title": null, "labels": false, "grid": false}
}
}
},
{
"mark": {
"type": "area",
"color": "#0d8de2",
"opacity": 0.5,
"clip": true,
"interpolate": "monotone"
},
"encoding": {
"x": {
"field": "x",
"type": "quantitative",
"axis": {
"title": "Minutes of workout",
"ticks": true,
"labels": true,
"grid": false,
"domain": true
}
},
"y": {
"field": "y",
"type": "quantitative",
"scale": {"domain": {"expr": "[min,L1]"}, "nice": false},
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
},
{
"transform": [
{"filter": "datum.x == 0"},
{
"calculate": "'Zone 1: ' + format(datum.min , '.0f') + ' ~ ' + format(datum.L1 , '.0f')",
"as": "zone_desc"
}
],
"mark": {
"type": "text",
"align": "left",
"baseline": "top",
"dy": 40,
"dx": 5,
"font": "Arial",
"fontSize": 13,
"color": "#000000"
},
"encoding": {
"text": {"field": "zone_desc", "type": "nominal"},
"x": {"field": "x", "type": "quantitative"},
"y": {
"field": "L1",
"type": "quantitative",
"axis": {
"title": null,
"ticks": false,
"labels": false,
"grid": false,
"domain": false
}
}
}
}
]
}
],
"config": {"view": {"stroke": null}}
}