New Example chart: Area chart with zones colors #9495
Labels
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
{{ message }}
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}} }The text was updated successfully, but these errors were encountered: