Hi,
I currently have this vega visualiation (example):
{
"$schema": "https://vega.github.io/schema/vega/v4.3.json",
"description": "A basic line chart example.",
"padding": 5,
data: [
{
name:"table"
url: {
%context%: true
%timefield%: @timestamp
index: archives
body: {
"size": 1000,
"_source": ["@timestamp", "value"],
"sort" : { "@timestamp" : "desc" }
},
}
format: { property: "hits.hits" },
transform: [
{ type: "formula",as: "time", expr: "datetime(datum._source['@timestamp'])"}
]
}
],
"scales": [
{
"name": "timex",
"type": "time",
"range": "width",
"domain": {"data": "table", "field": "time"}
},
{
"name": "NameArchives",
"type": "linear",
"range": "height",
"nice": true,
"zero": true,
"domain": {"data": "table", "field": "_source.value"}
}
],
"axes": [
{
"orient": "bottom",
"scale": "timex",
"format": "%Y",
"grid":"true"
},
{
"orient": "left",
"scale": "NameArchives",
"grid":"true"}
],
"marks": [
{
"type": "line",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"scale": "timex", "field": "time"},
"y": {"scale": "NameArchives", "field": "_source.value"}
"stroke": {"value": "#FF00FF"},
"strokeWidth": "1"
}
}
}
]
}
What I need is to draw 1 min. and 1 max. line like this: Paint is great
I tried it with some examples
but that didn't work out too well. I was never able to draw 2 lines because the second line I added overruled the first line.
Code
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "The PM2.5 value of Beijing observed 15 days, highlighting the days when PM2.5 level is hazardous to human health. Data source https://chartaccent.github.io/chartaccent.html",
"layer": [{
"data": {
"values": [
{"Day": 1, "Value": 54.8},
{"Day": 2, "Value": 112.1},
{"Day": 3, "Value": 63.6},
{"Day": 4, "Value": 37.6},
{"Day": 5, "Value": 79.7},
{"Day": 6, "Value": 137.9},
{"Day": 7, "Value": 120.1},
{"Day": 8, "Value": 103.3},
{"Day": 9, "Value": 394.8},
{"Day": 10, "Value": 199.5},
{"Day": 11, "Value": 72.3},
{"Day": 12, "Value": 51.1},
{"Day": 13, "Value": 112.0},
{"Day": 14, "Value": 174.5},
{"Day": 15, "Value": 130.5},
{"limithigh":20, "limitlow":10}
]
},
"layer": [{
"mark": "line",
"encoding": {
"x": {"field": "Day", "type": "ordinal", "axis": {"labelAngle": 0}},
"y": {"field": "Value", "type": "quantitative"}
}
},
{
"mark": "bar",
"transform": [
{"filter": "datum.Value >= 2"},
{"calculate": "200", "as": "baseline"}
],
"encoding": {
"x": {"field": "Day", "type": "ordinal"},
"y": {"field": "baseline", "type": "quantitative", "title": "PM2.5 Value"},
"y2": {"field": "Value"},
"color": {"value": "#e45755"}
}
},
{
"mark": "line",
"transform": [
{"filter": "datum.Value >= 200 <= 20"},
{"calculate": "100", "as": "baseline"}
],
"encoding": {
"x": {"field": "Day", "type": "ordinal"},
"y": {"field": "baseline", "type": "quantitative", "title": "PM2.5 Value"},
"y2": {"field": "Value"},
"color": {"value": "#cc57c5"}
}
}
]}, {
"data": {
"values": [{}]
},
"encoding": {
"y": {"datum": 100}
},
"layer": [{
"mark": "rule"
}, {
"mark": {
"type": "text",
"align": "right",
"baseline": "bottom",
"dx": -2,
"dy": -2,
"x": "width",
"text": "hazardous"
}
}]
}
]
}
Questions:
- How to draw multiple threshold lines
- How to mark those values which are over or under those lines.
Thanks,
defalt
